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.