Where to Place Your Accordion Menu Icons

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.

Icon Location

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 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.

Icon Choice

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.

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 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 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 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:

1. 5 Golden Rules about Lightweight App Design

2. What’s Behind an Advanced Product Manager

3. What We Talk About When We Talk About Prototyping Tools

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s