I tried making a few navigational elements flip color or something to indicate that they can be clicked on. Even though the color palette isn't big, i don't like it somehow.

Plus I thought hat on touch-devices they don't work anyway.

Is it always better to add mouse-over effects, so: should I add them to everything?

  • Why not, as long as you don't rely on the hover effects as the sole means of communicating that they are clickable. In other words: use hover so users on platforms supporting it benefit from it, but don't rely on it so users on platforms where hover has no meaning won't be crippled. Commented Sep 10, 2013 at 13:56
  • The fact that hover does not work on touch devices today does not mean that it will not work on touch devices tomorrow. (See on.aol.com/video/… and dvice.com/archives/2012/03/sonys_new_phone.php ). With all hardware capabilities like hover / multi-touch etc., any design needs to work robustly for users in any device.
    – Steve
    Commented Sep 12, 2013 at 0:27

5 Answers 5



I tried making a few navigational elements flip color or something to indicate that they can be clicked on.

This is dangerous statement in UX. Clickable elements should be recognised as such without hover. This is even more important with the growing popularity of touch devices.

From Apple Design Guidelines:

Discoverability. Encourage your users to discover functionality by providing cues about how to use user interface elements. If an element is clickable, for example, it must appear that way, or a user may never try clicking it.

The Benefits of Hover Effects

Hover effects offer a few benefits:

  • Feedback loop - further indication of an interaction control (and to a narrow extent that the system functions).
  • Click area indicator - like on the light blue menu on this page, the hover effect indicates that a menu item is clickable on an area larger than the text itself (this in turn allows a more minimalistic design).
  • Eye Candy - A proper effect can increase the aesthetics of the system, and some claim even the emotional mark of the interface. (Personally, I like subtle transition effects, such as gradual fade in/out of a colour - but this is largely due to the transition itself, which claims to have a positive effect on us).

Again, non of this is achievable on touch devices.

In addition, hover effect may increase the complexity of the graphic design; for instance, and as you have mentioned, a possible increase of palette colours. Also, if not properly implemented these can cause more harm then good.


Use hover effects to increase the aesthetics of the design, but never relay on these to denote clickable elements.


Perhaps a more subtle effect for mouseover can be implemented than changing the color? A dropshadow, a color-highlight, etc. It would be best to convey that things can be clicked on from contextual clues, however.

Having tons of sub-menus can be a pain to design around for touch. A general rule to follow would be to not use mouse-over menu reveals or functionality, except to highlight links or buttons.

It's also worth implementing a state change "on-click/mouse-down" so touchscreen users get at least some feedback they've successfully tapped a button or link.


navigational elements flip color or something

Hover effects, if taken too far become what I call gratuitous motion and can be distracting.

But there are really 2 questions here, #1 is should you implement a feature on the desktop that won't be available on a touch UI and #2 is if you implement the desktop-only feature, what are the most effective parameters of that feature?

For question #1 I would say you can effectively use a desktop-only feature, but you shouldn't depend on it, that is if the feature were disabled the page would still be very functional and pleasing to use. The feature should be merely icing on the cake and not fundamental. E.g. mouse hover effects can provide useful feedback but if absent the site should still work well. Don't rely on them to the extent the site feels second rate if they are removed.

For question #2, what are the proper parameters to these desktop-only features, in other words how aggressive should these effects be, I'd say be very subtle here. There's a trend (not too popular thankfully) where UI elements are very active and flip around and expand and contract when mouse-overed. Gratuitous motion. These can be very distracting. It doesn't take much movement grab attention and interrupt one's train of thought. It takes the slightest change to effectively reinforce that something is clickable (the cursor change is enough really but a subtle change in the element visuals to reinforce the clickability can be pleasing). This extra mouse reactivity is rarely necessary, so only do it if it fits in well with the design as a whole.


It's never better to use mouseover effects to expand menus or make substantial changes to what the user sees — but subtle changes to indicate a responsive element can be useful.

As you say, it doesn't work on touch devices, so you need to code for a click/tap anyway.

Where the user is using a mouse and moves it to click on something, it is very disconcerting to have a menu appear — especially if it covers the element he was going to click.


Yes. Anything interactive will always get consumers' attention, regardless of the simplicity.

  • 3
    As it stands this is more of a comment than an actual answer. Can you provide some reasoning or evidence to support your claim that interactivity always gets attention? Commented Sep 10, 2013 at 16:18
  • I think it's a bit unfounded to state anything interactive will always get consumers' attention. What's more important is clarity that something can be interacted with in the first place, and following through by making that element interactive..
    – Arman
    Commented Sep 10, 2013 at 16:18

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.