7

The main navigation of a website I'm working on uses hover menus and every main navigation item has children that reveal on hover/tap.

Do I need to include a down arrow (chevron) that indicates to users that content will reveal on hover? I've had this debate with designers a lot. They want to conserve the space and cleanliness of the main navigation and feel that the arrow iconography mucks it up - even when I've pushed back and said that the arrows can be super subtle and users will pick up the visual cue.

If there was an inconsistent experience between main nav items (some had children, some did not) I would definitely advocate to include arrows to show users that they will get different outcomes from hovering over different items.

However in this instance, because the experience is the same for every nav item do I need to include this visual cue? Or once users see the experience and that their hover triggers the subnav, will they understand that the rest of the navigation will function the same way?

I don't necessarily like the idea that users have to 'test it out and see', but I'm not sure if it's worth it to constantly keep fighting this battle if it's something that users can quickly figure out.

Attached examples for reference.enter image description here

Improve this question
1
  • It's useful to give a visual indication if there is a difference between one menu item and the next, if there isn't, I personally don't think it's needed.
    – MJB
    Commented Apr 26, 2016 at 9:32

5 Answers 5

Reset to default
0

Lets look at this way. Arrow certainly indicates a sub-nav, but few things need to considered -

1) If your navigation has some other items that do not have a sub-navigation, then it might make good sense to add that arrow to differentiate it from other nav categories. A good example could be Amazon (check screenshot) -

enter image description here

See how the "Shop by Category" nav item has an arrow and opens on hover, vs all others in the same line not having one - because none of them has a sub-nav. It could also act as a differentiating element giving importance to a particular item. Now compare that to someone like Macys or JCPenny who have sub-nav's in all the categories, and hence can safely stay away from that arrow -

enter image description here

2) Having the sub-nav open on hover or click (post adding the arrow), is a different thing. It could depend upon the domain of your website, device type and importance of your nav items. For example, we saw how Amazon's "Shop By Category" opens up on hover, because its super important for them, and they perhaps want to get that opened at most times, without any effort. Compare it to Google, where you see that same arrow on "More", but only difference being it opens on click. "More" is not a super important nav item, and there could be lesser reasons of having it open on hover.

enter image description here

Improve this answer
11

It used to be that arrows were preferred as they provided a visual cue to users there was more to the menu if they clicked on / hovered over them.

Over time web developers started making these menus activate on both a click and hover, in which case the arrows aren't necessary as users by default will click or tap on a menu item. If doing so then reveals a sub-menu or flyouts etc, then the need for arrows is redundant.

Either way, I don't think it will make too much difference in 2016 as web users are much more familiar with these menus and quickly work it out on a site by site basis. If you're interested, The Navigation Treasure Trove: 37 Menu Usability Resources is an interesting read.

However...

...are you set on using hover menus?

There appears to be a movement away from using hover menus full stop. How much of this is due to the growth of mobile devices is open to debate. Regardless, I have included some references for further reading on this topic if you're interested:

Improve this answer
2
  • 1
    Yes, hover is annoying, especially on devices that don't use a mouse.
    – Franchesca
    Commented Apr 21, 2016 at 7:37
  • Hovers are prone to mistakes, especially when transitioning from hover-menu A to hover-menu B, or to sub-menu's. Open on click, close on click or off-canvas click is the way to go.
    – Tom.K
    Commented Sep 27, 2016 at 11:18
1

Yes, you need arrows.

All touchscreen devices cannot hover, so you must include information about the nature of a menu item, as it cannot be discerned or discovered by hovering.

Some might argue you could/should detect if it's a touch device and then add the arrows. No. Because:

  1. A user might have their touch device set to spoof as desktop browser
  2. A user may first visit on their phone/tablet then desktop

So for the sake of surety, simply use arrows.

Improve this answer
1

Don't use hover at all. Users value the certainty of a click.

Menus that reveal unintentionally annoy or slow navigation, but if someone insists on hover, ANY visual clue is to be welcomed.

Designers who say "keep elements to the minimum" perhaps adding "because the Visitor will know what to do" are making presumptions. Not all sites are the same. So why rely on a Visitor being "familiar"?

Macy's menu bar looks passive - a mere list of departments. What harm is there in visual signifiers?

Improve this answer
0

As a compromise, I suggest you put a visual sign: one arrow for a start (and only one) in a distinguished place, like next to the home button.

That indicates that all the next buttons are dropdown menus. I said arrow for a start, but it doesn't have to be an arrow.

Improve this answer

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.