It's a common practice to highlight an element on hover state. By highlighting it, I obviously mean making it more visible than other elements.

But lately, I've witnessed the opposite trend on a couple of websites : Opacity is set to 0.5 or less on hover, which makes the hovered element less visible instead.

To me, this is nothing but a bad practice.

Or is it a new trend backed by some well known data that I'm unaware of?

  • 2
    Can you add some screenshots / example links? How a designer plays with opacity has a lot to do with the entire feel of the site. Also, there are many ways to accomplish distinction. Some sites emboss, some engrave, some add boxed border. It all boils down to the overall design language the site adopts. There are no generic answers here. – Sol Mar 13 '15 at 4:29
  • Sorry, no screenshots available. Also, I'm specifically talking about lowering the visibility of an element, not changing it's appearance. – majimekun Mar 13 '15 at 4:30

The purpose of the hover state is to give visual feedback to the user highlighting an interaction opportunity, which does not necessarily require a visual highlighting.

While it has commonly been implemented in a way where a solid and prominent color was lightened on hover, this is not the only valid use. The appropriate use will depend on the context and other interaction elements in view and their relationship.

  • I agree with your first paragraph. But that being said, making an element semi-transparent already has a well understood meanings in the UI vocabulary : disabled OR already read. That's what the users expect. So, using this method on hover when, as you said, other (and obviously more appropriate) methods exist isn't right in my opinion. – majimekun Mar 16 '15 at 15:56

Which of these things is not like the other?

I tried lowering the opacity to 50% to see how it looked and without the context of the mouse cursor this could be interpreted as a disabled button.

enter image description here

With the context of the mouse cursor, however, I really don't think users would get confused.

On the other hand, highlighting the button feels more inviting and has less of a chance that a user interprets the button as unavailable (even without the cursor)

enter image description here

  • Really useful CodePen share. Personally, with hover the two feel semantically similar. You also have to consider that there might also be an 'active' (or selected) state, for which the highlight might be reserved; still doesn't stop anyone from making the hover opacity between that of an active and non-active state. – Izhaki Mar 13 '15 at 21:40
  • 1
    DaveAlger : "more inviting" is a very good wording. Because that's what the hover state is all about : not already clicked but needs and extra "invitation" in order to be clicked. Semi transparency doesn't do that. But highlight does it perfectly. – majimekun Mar 16 '15 at 16:02

I see your point – but I'll try to explain in two paragraphs why I think it's not 'bad practice' at all, while personally I also dislike this effect.

  • Trying to imaging the opposite approach: every element has an oppacity <1 and only the 'highlighted' element has an oppacity =1 does not feel 'right' or 'better'

  • 'highlight' in the context of a group of objects doesn't automatically mean, that the object/image should be seen 'as it should be' or 'with full saturation' or 'brighter' or the like. It basically only means the highlighted object should 'stand out' from the rest. How that 'standing out' effect is actually achieved is a different question – e.g. thinking of this text-overlay-effect that is/was quite popular, or changing color in text-links, or adding a border or the like – even making an object invisible on rollover. All of these practices could be technically considered 'highlights'.

One more 'real world' example: in the top navigation here on ux.stackexchange.com the main menu items ("Questions", "Tags" etc) change color on rollover – from bright white to some yellow/orange tone. So technically the rollover text's contrast to the background is lowered on hover. But IMHO it's still a 'highlight' effect since it gives you a visual feedback that your mouse pointer is within the linked element. The menu item stands out from the rest – it's highlighted.

  • 1. the opposite approach as shown by DaveAlger below is totally relevant and as been used on countless of UIs for years. – majimekun Mar 16 '15 at 15:39
  • 2. the definition of the word highlight is as follow : "An area or a spot in a drawing, painting, or photograph that is strongly illuminated." OR "To mark (important passages of text) with a usually fluorescent marker " So, it's not just about making the spot stand out BY ANY MEAN. It's about making if BRIGHTER. By your logic, default hyperlinks could also be shown with light grey instead of blue because it's stands out from the black text ... even if it becomes barely unreadable. – majimekun Mar 16 '15 at 15:39
  • 3. The live example you took is a bad one because the orange clearly stands out more than the white one with the lowered opacity (the "Questions" link). Not only that, the orange as been chosen because the "Ask Question" button is also orange. – majimekun Mar 16 '15 at 15:40
  • I don't really know what your point is here? Maybe my live example is a bad one – but if that is so, that means 'highlighting' is NOT about making an element/ a link just brighter. So if we agree on your #3 then we both disagree on your #2 ? I basically just wanted to answer to the original question: "lowering the opacity is not wrong, if it makes the element stand out". And if lowering the opacity looks and feels like making an element brighter – then that's even better. What I like about the first image in DaveAlger's answer is that it shows that the context of the interaction matters: – tillinberlin Mar 16 '15 at 17:37
  • If that element with the 50% opacity if a default state, to me it also looks like a disabled button. But if that's the hover state, then IMHO it indicates that the button is clickable. – tillinberlin Mar 16 '15 at 17:39

I agree that it is currently a bad practice, primarily because it is returning to the days of metaphoric design. The designer is trying to inspire the appearance of (and a realworld reference to) a frosted sheet of glass floating above the surface of the rest of the interface.

In this age of Modern-UI, it is common practice to avoid metaphoric/skeuomorphic elements in our designs.

From a purely UI standpoint, I don't think there is anything wrong with floating sheets of frosted glass. They are pretty in a nostogic kind of way... and they do focus the user's attention on a subset of input options which is what they are supposed to do.

They just are currently not popular; non-standard enough to be considered mainstream yet still too familiar to called revolutionary. Just a little too... dated.

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.