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.
Book
Affiliate
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.
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.
LOL! Hahaha, you say that using up arrow for closure is false, but u use it in your header menu
SO TRUE! XDDD
I don’t own substack.com.
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