Where to Place Your Accordion Menu Icons

by on 01/27/16 at 11:55 am

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

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.

accordion-icon-right

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.

accordion-icon-left

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.

accordion-arrow-icons

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.

accordion-arrow-plus

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.

accordion-collapse

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.


PRODUCTS

Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns

AFFILIATES

Elegant Themes Shopify

Author and editor-in-chief of UX Movement. Finds beauty in clear, efficient design and loves fighting for users.

23 Responses to “Where to Place Your Accordion Menu Icons”

  1. Fannie

    Jan 27th, 2016

    Very interesting, but I was wondering from which “study” did you get those insights ? Can we get more details about it?

    Thanks a lot

  2. ray

    Jan 28th, 2016

    I am personally more convinced with arrow / chevron as mnemonic for dropdown as opposed to (+) which is commonly found more in forms to add more fields or more items. Scenarios where there are more than 1 level of dropdown would also add volumes of pluses putting weight in the layout, while chevron and arrows are more compact to fit in such situation. Alas, I agree with placement on the left hand side of the item

  3. Sascha

    Jan 28th, 2016

    Thanks for the insight. But I’m missing a link to the actual study you are referring to.

  4. Adam

    Jan 28th, 2016

    I just saw this right after reading this article. This [new] site has the plus sign on the right hand side, then to show the open state they convert the plus to a minus sign. http://new.authenticjobs.com/

  5. Jota R. Monteiro

    Jan 28th, 2016

    Hi Anthony, good stuff there. Do you have a link to the source research study?

    Also, what is the perception users have when you use the down arrow as the icon? Thanks!

  6. Bob K

    Jan 28th, 2016

    I’m not sure I agree that + and x are the best options for accordions for the same reason you exclude -. Many interfaces make use of add and remove features- particularly when dealing with shopping interactions or user management. In those spaces, a user is liable to see the + icon used in multiple ways to add users, add items to a cart, add coupon codes, etc.

    It’s just as confusing as removing / closing with a -.

    Arrows or chevrons can be used to denote navigation between views, but also run into fewer interactions than + and -. You can just as easily denote navigation through colored button elements, or a specific use of those buttons for navigation only.

    • David Drucker

      Jan 28th, 2016

      I also strongly disagree with the advice to use a plus icon. The use of the ‘+’ harkens back to the unfortunate decision to use “+” to expand or contract a branch of the hierarchy in the file system navigation in the Windows File Explorer back in the dark ages of Windows 3.1. The advice to use a + rather than an arrow suggests to me a strong Windows bias. That said, Microsoft has now gone for an even stranger choice of chevrons pointing up or down for open and close in their OneDrive site for navigating a file hierarchy.

      A concur that there is a much greater confusion in using the plus, which is that of adding to the current collection. When I see “+ Section”, that strongly suggests ‘Add a section’, not open the accordion. On the Mac OS, the arrow is used for outline views, which is what accordions in fact, are.

      • anthony

        Feb 2nd, 2016

        It doesn’t matter whether you agree in your head or not, it matters how users behave. You are not the user.

        I’ve added another research study that supports the plus icon over the arrow.

        • Mike

          Mar 15th, 2016

          Hi Anthony,

          I agree with your comment entirely. I thought your article was very good. I have been trying to educate designers for years, that just because something looks good doesn’t make it more functional. the idea of research takes out the guess work and you gain insight into what the user is doing or trying to do ..

          I hope the day comes when ‘UX’ specialist stop going on their gut feeling and actually go on user needs and requirements.

        • Paul Blakey

          Mar 21st, 2016

          Hi Anthony,

          Great article – I think that some of this however does depend on a lot of outside factors that influence the research study. Things like (demographic, ethnography etc)

          Not sure about you but I always approach with a best practice principle to begin with but with the discovery phase of any project this should be tested with their users or prospective users to get more accurate results. I don’t believe there is a catch-all best way to this type of thing.

          As always – test for your target users, apply best practices as you can and be prepared to be surprised when the user totally changes what you expect from them!

          Good stuff though.

  7. Alex

    Jan 28th, 2016

    You sold me on the concept of putting the icon to the left of the title but you haven’t sold me on what that icon should actually be.

    Chevron pointing to the right and chevron pointing down still makes the most sense to me.

    The “+” icon comes with too many assumptions and baggage. People instantly think “add”….And am I adding another row? And when you use an “X”….Am I deleting a row? Context plays a huge role in whether or not an “X” icon will be interpreted as “delete” or “close”. When in the body of the page “X” tends to be used for “delete”. When in the frame of the page or in a window title bar, “X” is interpreted as “close” instead of “delete”.

    Why do we need an icon at all? Using colors and shapes, can’t you simply make the accordion look tappable/clickable and completely eliminate the issue of icon recognition across varying people and cultures?

    Using animation, colors, and hierarchal relationships, you shouldn’t need to use an icon at all to express to the user how this interaction functions.

    I would be curious to see how this study would fare without the use of an icon….

    • anthony

      Feb 2nd, 2016

      It doesn’t matter what makes most sense to you because you are not the user.

      You should carefully read the study before you jump to commenting. It clearly shows NO ICON was one of the options tested.

  8. Joe Marker

    Jan 28th, 2016

    I wonder, has anyone thought about which hand most people use for the mouse? Most people are right handed and moving the mouse to the left side to click “takes more time”…common sense usability points to the right side for icon placement.

  9. gonza_01

    Jan 28th, 2016

    The research study points that the perceived icon function differs based on the OS the user is used to use. Windows users take the plus icon as an expander and mac users take de triangle for this function. May be the accordion icon could be choosen by some sort of platform sniffing. Few lines of Js and CSS can do the trick.

  10. Demy G

    Jan 28th, 2016

    Nice article. Thanks for the advice on the icon! I’m going to change it on my site now.

  11. Noel

    Jan 28th, 2016

    Same here, I disagree with the use of the ‘+’ icon to expand. For me it always feels like I am adding something. Arrows & chevrons are clearer to me.

  12. Ravikumar V

    Jan 28th, 2016

    what should I do when my sub menus has add option ?

  13. mosh

    Jan 29th, 2016

    what would you do if you had icons to the left of the text (like a meat icon)
    where would you place the plus?

  14. Mihir

    Jan 29th, 2016

    One thing that sticks out here is the recommendation to use a +/x for accordion menus.
    The chevron and caret are something that people are used to.
    Placing a chevron on the right side is more of an indicator of “next” than expand.
    I don’t think I have EVER seen an expanding stack with a chevron on the right.

    The first two examples of a chevron / caret seem spot on for what’s been accepted practice in various software in the last so many years.

    Moreover, in the context of the products I work with, the + is used to indicate teh ability to add a new item. I certainly do not want my accordion menus to signal the ability to add new objects (When it’s not possible, and does not make sense even if we implemented it that way)

  15. Jaroslav Bereza

    Jan 31st, 2016

    Does not slow down the same icon on the left in each line reading of the items?

    What if some item in the middle will not expand? I should have there visually unappealing empty space instead icon?

  16. Brian Bustos

    Feb 1st, 2016

    Here’s an accordion dropdown I built a few years back that follows the recommended design pattern: http://codepen.io/robotballoon/pen/FADHc

    • jenn

      Apr 12th, 2016

      When I read the article, I couldn’t quite agree with the plus/x icon in the shoes of a user, but thanks to your link (nice transition from plus to x by the way) I think I’m one step closer to understanding and agreeing it.

Leave a Comment