We performed a quantitative study to find out which of these icons is the most effective at signaling that it will open an accordion.
#Multiple icon plus plus
Jennair: Accordion signaled by caret icon Bolé Road Textiles: accordion signaled by plus icon Ferrari: accordion signaled by arrow icon Braun: accordion with no signifier icon Also, after expansion, the caret will typically twist (maybe in a nice quick animation), and a plus sign will turn into a minus, to become a signifier for the reverse action of collapsing the newly expanded content.
There are some subtle differences in what these icons are commonly used to represent - while the caret and plus icons are typically meant to indicate that an accordion will open, designers have used the right-facing arrow icon to signal two different actions: either staying on the same page and expanding content, or visiting a different page. We looked at several possible icons as signifiers for accordions: We decided to investigate this question as part of a bigger study of navigation and subnavigation on mobile.
For good reasons, accordions are a popular UI element today: on mobile, they are an essential tool because they collapse content and make page length manageable, but even on desktop, they mitigate visual complexity and allow users to focus on the content most relevant for the task at hand (and are particularly appropriate in complex applications).Ī question that is often asked in both our Mobile UX and Application Design classes is: which icon should we use to best signal that content will expand in place? In other words, what’s the best signifier for accordions?
0 kommentar(er)
