4

Should dropdown menus be indicated by arrows so users can distinguish between dropdowns and non-dropdowns?

Does this depend whether we're talking headers or bodies, primary or secondary navbars?

Do too many arrows cause visual clutter?

Google's dropdown menus

Mark Boulder
  • 1,886
  • 2
  • 22
  • 29
  • 1
    Providing at least a visual indicator which shows the dropdown functionalitity would be prefered usability wise. I do not see how adding arrows to a design would make clutter. Unless you have a poorly designed website offcourse. – Matthijs Mali Oct 16 '12 at 11:08
  • I see many perfectly designed sites dropping the arrows when doing their main navbars though. And there's no doubt, it does look a lot cleaner than if they were to include arrows. – Mark Boulder Oct 16 '12 at 11:37
  • I personally dislike the "More" button that opens a dropdown menu with commands at the same functional hierarchic level of the outer commands. – sergiol Jul 17 '14 at 12:05

4 Answers4

3

One of the standards I see right now is that an onClick menu often is what's underneath an arrow icon. Often, hovers are done without iconography, because a user can often discover "accidentally." I think adding iconography should probably be used for when a user must take true action and not unintentional action.

As a small aside, I'm not always a huge proponent of onClick menus, but here's a great article on why hover menus have issues (I also really like the term "hover tunnels") http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/

Bryan Robinson
  • 1,204
  • 7
  • 14
2

Your UI should give a clue for elements that takes a user action so that users can guess how to use it. There should be visual signifiers - this is known as affordance.

So buttons should look like buttons, menus like menus and there should be some sort of clue that a drop down is going to reveal more options when clicked.

This dosn't mean you have to clutter your design with heavy handed design elements - users will pick up on the most subtle of clues.

Will
  • 251
  • 1
  • 5
  • Great. Can my regular small dropdown links then use arrows (serving as a clue I guess, plus I'm okay with arrows here since the tiny size makes them less prominent) - whereas my one main big navbar, which also looks like a main big navbar, doesn't? – Mark Boulder Oct 16 '12 at 11:45
  • Kinda similar, I guess, to how some avoid making their footer links blue underline since the whole thing already looks like a footer and users know what to expect? – Mark Boulder Oct 16 '12 at 11:48
  • I'd still use the arrows in the nav bar. Its obvious thats a row of links, but no way to tell if a link is a drop down without the arrow or similar hint. – Will Oct 16 '12 at 19:29
2

Your example is essentially a utility nav where dropdowns are not the norm. Also just like here on StackExchange, in the Google example there's several (9) regular links and then one has a dropdown. In those two scenarios the dropdown menu is the outlier so it's critical that you communicate to the user that there's more information under those items.

If it is a site's big old primary navigation then it's much more common for there to be dropdowns and also the user will quickly learn once they mouseover one item that has dropdowns that the others likely do too.

Brian Behrend
  • 364
  • 1
  • 4
0

If you compere the gains vs cost, using arrows wirh drop down is the winner by a mile. Visual clutter can be avoided by making arrows 30-50% less visible than the text on drop-downs.

Salman Ehsan
  • 4,951
  • 20
  • 25