An accordion menu is one of the niftiest user interface controls. They allow you to display a large number of menu options while conserving space. But before you use them, you should know the optimal way to design them for your users.
Every accordion menu needs an affordance icon to tell users what happens when they click it. They should expect the menu to expand with more options. But where you place your icon and what icon you use can affect user task time and expectations.
A research study found that user task time increased when the icon was to the right of the label. It took them longer because they thought they had to click the icon to expand the menu.
When the icon was to the left of the label, user task time decreased. Users completed their task quicker because they clicked the label instead of the icon.
Clicking the icon takes more time because it’s a smaller target than the label. Smaller targets need higher accuracy to click. Not only that, but it’s also located on the right where the user’s scanning direction ends. The user’s eyes have to travel a greater distance to the target.
Place Icons to the Left of Label
Placing the icon to the left of the label speeds up user task time. They’re more inclined to click the label and don’t think they have to click the icon to expand the menu. The icon is also closer to the label, which shortens the distance users have to scan.
The study further found that the choice of icon affected user expectations. When the accordion displayed arrow icons, users expected that it would take them to a new page. When the accordion displayed plus icons, users expected the menu to change.
More users interpreted the plus icon correctly than the arrow icon. This difference is because they’re more familiar with arrow icons on buttons and links that take users to a new page. When they see it on an accordion menu, they expect it to behave the same way.
Choose the Plus Icon
The plus icon is the clearer affordance for menu expansion. Another research study on accordions found that users click the plus icon more than the arrow one.
This finding makes sense because the plus sign is the mathematical symbol for addition. When you add, you increase in amount, number, or degree. Users increase the number of menu options when they click the accordion menu.
Collapsing the Menu
A menu that expands must also collapse. The accordion also needs an affordance icon to represent menu collapsing. It should display in place of the plus icon after the user expands the menu.
There are two common icons used for collapsing: the minus and X icon. Users can misinterpret the minus icon because it often represents removal or deletion. Users shouldn’t feel like they are losing menu options when they collapse the menu.
The X icon represents collapsing better because it’s often used to close modal windows. When users collapse the menu, they are closing it, not losing it. This action is more aligned with what users are doing and what they expect.
A Standard for Accordion Menus
Which icon you choose and where you place them affects how users use accordion menus. If your goal is to give users the most clarity and speed, there’s only one way to design it.
There are too many ways to design an accordion menu. This confusion leads to accordion menus that are hard to use. When it’s easy to use, it works the way users expect.
What designers need is a consistent standard on how an accordion menu should look. Based on the research and analysis, designers should make the plus icon to the left the new standard.