0

I'm wondering what is the best way to display a shop item (on the shop index page) so that the customer is aware that there is a back graphic? I'm leaning towards possibly having a large diagonal line to show both the front and the back but the issue is that the placement of the graphics can cause issues.

I do not think a mouse over method will be suitable as this will not work with mobile devices.

shop item

Improve this question
1
  • Marketing answer (for a a unisex shirt): show a picture of a female model wearing (just) the shirt in front of a mirror, show a video of her turning around on activation (i.e. click/hover or tap).
    – Crissov
    Mar 23, 2015 at 0:24

4 Answers 4

Reset to default
1

I would suggest

  • showing both a front and back view of the shirt in one photo/view.
Improve this answer
2

I would use a vertical draggable separator that reveals the front and back sides as you drag it with your mouse or finger.



Something like this:

Mockup

Edit: it depends on what you mean by "shop index page". If it's an array of dozens of items, then the best option would be to have front & back views side-by-side.

If, however, I assumed correctly and the "shop index page" is more like a "featured items" page, then I believe my solution would be better than a side-by-side view. Of course, it works best with centered graphics.

Improve this answer
7
  • 1
    Why? This seems a bit gimmicky and also quite fiddly to use.
    – JonW ♦
    Mar 22, 2015 at 10:36
  • @JonW I have seen this in use on a couple of websites. It's actually quite intuitive and if implemented well, non-fiddly.
    – Marko K
    Mar 22, 2015 at 13:12
  • 1
    perhaps nod fiddly, but cumbersome if you're scanning a large selection of items. It lacks 'scanability'. (And gimmicks can be useful...sometimes it's the gimmick that provides delight. So they can work. I'd just consider them carefully)
    – DA01
    Mar 22, 2015 at 15:37
  • 1
    @DA01 Edited answer for the "large selection of items" case.
    – Marko K
    Mar 22, 2015 at 16:50
  • @MarkoK good edit
    – DA01
    Mar 22, 2015 at 17:05
0

You could try one of the following:

  • A simple flip icon;

  • Click/Tap on the image flips it (you would have to separate the click from image and title).

Improve this answer
0

I think the simplest way would be to have an action/button that indicates a flipping action, and a separate label that show whether it is the front of back of the shirt being shown (especially if it is not obvious because of the collar). This way you can separate the trigger from the image and perhaps allows you more flexibility in case you want to change your implementation later on.

Improve this answer

Your Answer

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

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