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? Aug 1, 2014 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. Aug 1, 2014 at 12:23
  • 1
    What's the source of the block quotation? Aug 1, 2014 at 16:42
  • 1
    Have you considered how users of touch screens will view the label (given that they can't hover)? Aug 1, 2014 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). Aug 1, 2014 at 16:47

1 Answer 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:


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, 2014 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, 2014 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, 2014 at 9:26

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.