6

Advice on how to clearly distinguish non-standard wine bottle sizes (ie 375ml) to standard on e-commerce ui cards. Below is what the card is looking like now. Icon placement is for shipping, offers, awards etc. I don't want to add info to every card (standard size) I want to just add info to non-standard size. Any tips?wireframe of ui card

3
  • 4
    Aren’t you legally required to list the price per liter anyway wherever the bottle can be added directly to the cart? You could also show/overlay the silhouette of a standard-size bottle (750 ml) onto smaller and larger bottles, or show the number of servings (125 or 150 ml) per bottle as either a number or a sequence of glass icons.
    – Crissov
    Jun 29, 2021 at 9:17
  • 2
    You could also add a size (375 ml, ⅜ L) or name (demi) between per and bottle for non-standard ones. en.wikipedia.org/wiki/Wine_bottle#Sizes
    – Crissov
    Jun 29, 2021 at 9:22
  • Could you please clarify this - 'I want to just add info to non-standard size'. Why? What is the reason? I think answering this question will guide you to right solution.
    – Serg
    Jun 30, 2021 at 18:26

2 Answers 2

5

I would suggest adding an extra icon that shows the size/content of the bottle. Adding it only to the non-standard product cards would make it clear to the user that these are deviations from the "standard" size/content bottles the company sells. Just like the award icons only show on the relevant product cards, not all cards.

Additionally, it might be an option to add the amount/content of the bottle behind the text "per bottle" as well, because that seems to be the most relevant place; that's where users would look for the price and how many bottles they'd get for that price, so it would only make sense to also see the contents).

For example: $27,50 per bottle (375ml) vs. $50 per bottle (700ml) Here it would be easy to tell that both bottles are similar in price per ml, because all the information you need to make that quick calculation is right there. Otherwise the user would need to look around for the relevant information to make that judgment. This would mean, however, that you would need to add this to every product card, and you said you didn't want to do that. I still thought it was worth mentioning.

enter image description here

Besides that, I would also strongly suggest adding the size/content information to the rest of the details on the product page, like in the image below, so that the user can always find the size/content where it is expected (for every product), especially if they looked over the icon in the product card.

enter image description here

2
  • 1
    By the way, the volume in that last image is also in the product title... a good idea. The icon, however, is not amazing, not only because its position looks like it could shift depending on promotions, but because by appearing in the promotions space it looks like one. Jun 29, 2021 at 11:59
  • 1
    I agree that the icon's position is not ideal, but I just wanted to give an idea of how to present the information, not necessarily where :) The repetition of the most important information (name, date, content) in different places is indeed a smart move. I also thought of making sure there is a way to filter based on contents, so that users can filter based on "standard size" only, and not see any "non-standard" contents, if they wish. Good luck! Jun 29, 2021 at 12:05
0

Show another object next to the bottle for scale. A glass with some of the wine in it would probably work.

4
  • 1
    Thanks for your input! There will be 5000+ cards, I don't want to disrupt each card by adding info to every card, just the non-standard ones.
    – user148053
    Jun 29, 2021 at 4:02
  • 1
    Would it be possible to replace the "just a bottle" product image with "bottle and glass" to show scale? I once accidentally bought a baby-sized baseball hat, thinking it was full size. Putting context right where the user is looking for it is very helpful.
    – Izquierdo
    Jun 29, 2021 at 14:27
  • 1
    The most obvious way to convey that its a half sized standard bottle is to have a half full bottle icon.
    – PhillipW
    Jun 30, 2021 at 8:23
  • But that might convey a half full bottle!
    – Izquierdo
    Jun 30, 2021 at 13:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy