Accordion menus are a type of display widget found on desktop and mobile apps. They allow you to display a large number of menu options while conserving space. But before you use them, you should know how to best 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.
Placing the icon to the left of the label speeds up user task time. They’re more inclined to click the label, and won’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 is because arrow icons are common on buttons and links that take users to a new page. When they see it on an accordion menu, they’ll expect it to behave the same way.
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 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.
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 is more aligned with what users are doing and what they expect.
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 makes the display widget hard to recognize. When it’s easy to recognize, it’s easier for users to understand how it behaves and how to interact with it.
What designers need is a consistent standard on what an accordion menu should look like. Based on the research and analysis, designers should make the plus icon to the left the new standard.
You may also like: