3

Starting next, consumer electronic e-retailers will be required to display the applicable label or icon “clearly and conspicuously and in close proximity to the covered product’s price” so that consumers can view them without excessive scrolling or clicking.

The amendments also specify that if consumers have to click an icon to view the label, e-retail sites cannot require them to first save a file to their computer to view the information. E-retailers are not required to include labels or icons on product category pages.

This block comes from an article summarizing the directive, if you want to look into it's details look up directive 2010/30/UE . You can also read about it here http://www.come-on-labels.eu

As far as I understand one can design product page in such way, that energy efficieny graphic label will be shown in a tooltip once user hovers over text attribute?

Edit: After further analyzing, the complete energy label can be displayed on hover / on click of the energy label emblem enter image description here The issue though -
according to law, the font size of text within the energy label has to be exact same size as font size used for pricing - which in our case is pretty big. This makes the emblem look awful.

  • 1
    Could you snip an example of a product page in its current format? – DarrylGodden Aug 1 '14 at 9:01
  • What is your aim? Do you simply want to comply with the rule or do you want to create excellent UX? In the first case the tooltip is probably good enough. In the second case it isn't. Energy label is a selling point these days. User will want to quickly compare the different products and their energy label. Hiding it under a tooltip makes that harder. – Bart Gijssens Aug 1 '14 at 12:23
  • 1
    What's the source of the block quotation? – Graham Herrli Aug 1 '14 at 16:42
  • 1
    Have you considered how users of touch screens will view the label (given that they can't hover)? – Graham Herrli Aug 1 '14 at 16:42
  • @Bart, you're assuming that the products have a positive energy label. Maybe it's a negative one. If so, hiding it is a bit of a dark pattern (which makes it not only a lack of good UX, but actively bad UX). – Graham Herrli Aug 1 '14 at 16:47
1

With the currently widespread use of touchscreen devices like smartphones or tablets, a hover element is not really user-friendly, since touchscreens cannot really show hover elements.

In this case, there is a good alternative: energy labels in Europe have a letter(+(+(+))) indication that is easy to display in a small box and is clear to the average user with just a small label and maybe a background.

Example energy label: enter image description here

Example of how to show it in a small screen:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

You can then add a link to this image that shows the full display in a separate window that appears on a click.

  • That's actually what I did, adding the energy label emblem to product attributes. There's one problem with it - according to law, the font size of text within the energy label has to be exact same size as font size used for pricing - which in our case is pretty big. This makes the emblem look awful. – Matt Aug 8 '14 at 8:13
  • Wait, is it the emblem (the A++) that needs to be the size of the pricing? Or is it the entire label (the one I embedded)? that needs that font size? In any case, you could reduce the size of your price font to something smaller. – Nzall Aug 8 '14 at 8:34
  • The text on the emblem (the A++) needs to be the size of the pricing. The entire label can be shown after interaction with the emblem. – Matt Aug 8 '14 at 9:26

Your Answer

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

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