Let's say we have an image of a man with cool hat, t-shirt, boots, etc. The idea is to show these items as products, so you can find and buy them if you like.

At the moment I see two ways of displaying this

Two examples

How would you solve this problem?

  • I'd go with the proposal on the right. Otheriwise one might not see every product you sell. Does the wristwatch count and then the user puts their cursor on the wrist and don't know weather they are pointing correct or if it's just decoration of the image
    – BlueWizard
    Jan 21, 2017 at 13:21

5 Answers 5


There are two main things to consider:

  1. Where does the user see the information
  2. Where does the user interact (/ask for that information)

Having the information outside of the image doesn't cover the image and is always visible so the user knows what to expect and won't miss anything.

The user could interact both over the indicator (your dot in this case) or over the information. Giving the possibility to interact with both is probably a good idea. So if the information is outside of the image, interacting with it notes the corresponding indicator and the other way round.

These are general suggestions and depending on your case you might want to change how the user gets the information and interacts with it to achieve a certain user experience.


You could do something like Polyvore. which is a kind of quick view when you hover the area. similar to your 1st option



I would suggest going for the first option with some awesome styling as in this link https://tympanus.net/Development/TooltipStylesInspiration/curved.html

The pulsating circles make the user aware of the items that are clickable or something is there for them to explore.

  1. This option is good to go because it gives clear indications without distraction of the user view and can get information about the product details without supposed to see the details in another view outside of the product.
  2. This option let's users to see the details outside the product and I believe it distract and less simple to show all the details in one place.

And my option would be number one.


I think there are some pitfalls in the first approach. Factors like style, composition, editing and so on have been deliberately chosen by the photographer in order to convey a certain message (lifestyle, attractiveness, desirability,...) to the viewer. The intended overall impression of the photo can be compromised when you add text and/or controls on the image. Especially in a fashion online shop the product image is the most important element on the basis of which the user decides to buy or not to buy - actually you should not add elements that could in any way distract from or disturb the product presentation.

Additionally, all product boxes should be visible at the same time: For example, users not only choose by appearance, but also by price. Not showing the essential details for each product can be a big business risk. This fact makes it even more difficult to combine the product boxes with the image: For example, details of the clothes must not be covered by text and the text must be designed to be clearly readable (e.g. can you ensure an appropriate text size for all boxes on the image?).

I don't want to rule out that there exists a design where photo and text (boxes) perfectly harmonize with each other. I just want to point out some potential difficulties and the need for a very careful design.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.