14

It isn't a secret that giving the user feedback on a link hover (image swap/sprite, link color/decoration change, etc.) is a necessary practice for optimal UX.

In css-tricks.com's recent redesign, they included a css box-shadow hover effect that applies to an entire container, whether a link is being hovered upon or not. To see for yourself, visit CSS Tricks and play around with the boxes on the right column.

I happen to be a fan of this container hover effect (although I think it could have been executed more subtly), even though the item that is being hovered upon is not a link.

My question is: Should this type of hover feedback be limited to the traditional method of feedback-on-links only, or does this more modern approach add to the user's focus in highlighting the area they are concentrating on?

Here is a screen-shot of an e-commerce site I'm in the midst of developing. Note that bottom box (2nd-to-right) item is being hovered, and a light box-shadow effect is applied to the entire container.

Improve this question
1
  • This is a great topic.
    – Allan Caeg
    Jun 12, 2010 at 2:11

5 Answers 5

Reset to default
5

As long as it helps and fits the context and it's not mistaken to be clickable, it's fine. There are just too many variations of user feedback to generalize.

As for the examples on CSS Tricks, some boxes mislead me to thinking that they're clickable.

Now, do the hover feedbacks in these examples improve UX? They're nice in terms of being fancy, but they don't fit the context and are just misleading. However, let's not forget that there may be variations of this animation that could be fit and helpful.

EDIT: Below is an example of a hover effect that works. This case isn't completely similar to what's being discussed, but this shows that hover effects can work if used properly. alt text http://img812.imageshack.us/img812/3452/youtubeyoutubeplaymozil.png

Improve this answer
2
  • 1
    I like this example. The hoverover effect in the YouTube example shows that the area you are hovering over has another purpose. This is how the hoverover effect should be utilised. It does not cause confusion, it aids the user in making a decision.
    – JonW ♦
    Jun 14, 2010 at 15:28
  • It looks like your images have since been removed by ImageShack and replaced with banner ads. Do you happen to have original copies of the images lying around?
    – user59879
    Aug 25, 2015 at 6:35
4

That's a great topic you brought up here, I am actually in the same position (in middle of redesigning an e-commerce site) and actually want to make the look and feeling more modern (same we all like to do), but i feel that giving a user feedback should only be made if this area is actually different then outside this area, if not why would you make him feel so?

  1. By hovering and you get feedback you expect something to be different here more then outside this section.

In your example when hovering in the "featured items" section on the image of a product and is not clickable and the hover on the text is getting underlined, so you gave him the feedback that you can do something here (to click) and you just made the user disappointed, because he tried to click (you just made him think that it is clickable) and it doesn't click. :(

In this case, I would have the whole area of each product clickable (see for example: http://img.skitch.com/20100610-b71nbadm3pnkscrqj9ai4fu5qu.jpg).

  1. Even worse is when you give the user feedback on the whole section that something is different here, and unfortunately nothing is related to this feedback. All 5 products (in your example) are in the same group of "featured items" but nothing more then that; one item is not related to the other, I would definitely get frustrated by seeing that I need to go to the next step (go to the product), when I already thought that I got it already.
Improve this answer
3
  • DavidG- So you're saying that "yes, only feedback related to clickable elements (links) is appropriate"
    – eknown
    Jun 10, 2010 at 18:53
  • Yes, you got it right. the main rule in UX is that the user should feel sure with what he did and not have to rethink, and definitely not the opposite
    – DavidG
    Jun 10, 2010 at 18:59
  • I agree. Having a hoverover for a section of the page that doesn't actually do anything is confusing. Only slightly confusing for a short time but even a short time is too long.
    – JonW ♦
    Jun 14, 2010 at 15:26
3

Limit hover feedback to clickable items only. I've found that when people move the mouse over a page element, and it changes, then they often try to click it. They expect it to be clickable, and can become confused or even annoyed when it isn't.

You may like this unclickable hover effect (though I hate it). But if it will confuse some of your users then it's probably not a good idea..

Improve this answer
2

There is another reason why I would not use this effect that often. These days where touchscreen interfaces (e.g. the iPad) get more and more common this effect would not always work because it only works when you have a mouse.

Improve this answer
0

Seems like on UXexchange the score is 3-0 against hover effect on non-clickable items.

Here's another example of a live site that does use this effect: github.com/plans

For now, I'll be holding off from implementing this effect, and will wait to see how the trends go and if they stick.

Thanks everyone for the feedback. It is very much appreciated.

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.