Navigation

Stop Misusing Icon Cues on Menus

Designers use icon cues to communicate interface affordances to users. There are two affordances all menus have. The disclosure affordance discloses the menu to display a view. The closure affordance closes the menu to hide a view.

Using the right icon cues are important, but designers are using the wrong ones. This mistake has created an inconsistent and confusing interface language across the web.

Most menus start with a down arrow to display a list of items. The down arrow is the correct icon cue for disclosure. However, the up arrow is used for closing the menu, which is the wrong icon cue for closure.

Arrow icons are intended for disclosure affordances, but that should remain consistent for all arrow icons no matter which direction they point. The arrow orientation only signifies the disclosure direction. In other words, a down arrow discloses a view downward, while an up arrow discloses a view upward. The same goes for right and left arrows, respectively.

Therefore, the up arrow used on menus is the wrong cue to use. No view is being disclosed upward. Instead, the menu list is being closed.

The proper cue for closure has always been the X icon. The X icon is universally known for negation. On interfaces, users recognize them as the cue for closing views. They often click them in the corner of windows and containers to close them.

Designers should use the X icon for the closure affordance on menus as well. Keeping this usage consistent across the interface creates a clear and precise association between the cue and affordance.

Misusing Icon Cues on Accordions

Another common misuse of disclosure and closure cues is on accordions. Designers tend to use a plus icon for disclosure and a minus icon for closure. These cues don’t properly signify closure and disclosure because they clash with other components.

Access Full Article

Access the full article to learn why plus and minus icons are the wrong icon cues to use on accordions. In addition, you’ll get exclusive access to our archive of premium UX articles.

Access Full Article


Toolkits

Affiliates

elegant wordpress themes

This Post Has 6 Comments

  1. Abi Arditya Darmapradhana Reply

    But the x symbol also represents “remove”, and indicates that the already selected choice will be unselected by the time the x is clicked. Therefore, I still prefer the upward arrow.

  2. cerebrado@gmail.com Reply

    No, it actually is not “Close”. It is “Collapse” or “Retract”, because it is intended to make the user think it’s expanding and collapsing. In fact, some of them are animated in such way. ,So the icon is fine.

  3. Faiz Hakim Reply

    LOL! Hahaha, you say that using up arrow for closure is false, but u use it in your header menu

  4. Julien Reply

    What is the incidence of error if we use a different icon? Maybe the % of error is so tiny that it just doesn’t matter?

    Personally I need more rational to trust what it is said here.

    Thanks

Leave a Reply to Abi Arditya Darmapradhana Cancel reply

Your email address will not be published. Required fields are marked *