A word on menu’s and movement

I ended up on a random website, as one does, and was immediately caught off guard by the header menu’s hover effect.

Do you find anything strange about this? What I quickly realized is that the outcome of the hover effect does not seem to match with the intent. When I mouse over a menu item it is nice to have that action acknowledged. It tells the user that this item is interactive. In some cases it makes the item easier to read, more prominent, etc. What is strange about this hover treatment is that every time I hover over an item I get distracted by what is happening to the other items. The final outcome may be considered a success because, yes, the hovered item has the most prominence. However, by choosing to animate the other menu items the attention is shifted to the flickering movement. I’m also experiencing a little confusion here because the element I am hovering over is not showing any change. My expectations are not being met. Lets look at some others.

Apple’s .65 opacity shift.

Here we see the main menu for Apple. On hover the items have their opacity decreased by 35%. This is a pretty standard approach and one I often use myself. It always feels odd to me that I am deemphasizing the thing that I am interested in. But I suppose a mouse is not a magnifying glass (usually) and if I am moving it to an item at the top of the screen it’s probably not to examine it closer.

Mustwin.com menu

The opposite approach is used on Must Wins homepage where the item you’re focusing on becomes more prominent. You saw this a lot in the early days of flash when items would balloon up in size when you’d hover over them. Whichever way you choose to do it, make sure your outcome doesn’t just look classy but also serves your users. Review their expectations and make sure you’re meeting them!