Navigation

Where to Place Your Accordion Menu Icons

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.

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

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

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

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


Toolkits

Affiliates

elegant wordpress themes

This Post Has 29 Comments

  1. Fannie Reply

    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 Reply

    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 Reply

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

  4. Adam Reply

    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://authenticjobs.com/

  5. Jota R. Monteiro Reply

    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 Reply

    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 Reply

      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 Reply

        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 Reply

          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 Reply

          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.

        • Cameron Reply

          Well the first research study you refer to is an incredibly small sample size (124) so I think you should be more open to a discussion as that study is in no way representative of most users.

          The author of the second study you cite even mentions that sample size was small..

        • anthony Reply

          Ok then discuss. Still waiting…

  7. Alex Reply

    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 Reply

      You’re not the user and don’t behave the same as them. What may seem right to you may not be right to them.

      Read the study again. It shows that no icon was one of the options tested.

  8. Joe Marker Reply

    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.

    • Cameron Reply

      I think it is dangerous to think in terms of “most users”. You can’t not gauge what “most users” use and what about keyboard only users, mobile users can completely switch from their dominant mouse hand.

  9. gonza_01 Reply

    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 Reply

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

  11. Noel Reply

    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 Reply

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

  13. mosh Reply

    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 Reply

    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 Reply

    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 Reply

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

    • jenn Reply

      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.

  17. Michelle Reply

    What do you think about arrow icons to the left of a side menu item that doesn’t expand as an accordion? It’s used as more of a decorative bullet- do you think that would be confusing for the end user- assuming they expect that when they see an arrow it will expand? Example here: http://www.goanywhere.com/managed-file-transfer/translation Personally, I believe it is very confusing but I’m very interested in your feedback.

  18. Williams Reply

    Very interesting, but isn’t it a bit conceptual? Maybe more adapted to tech-savvy users. It will probably take them time to learn this new behaviour (particularly if the purpose is to realize quick tasks). A “dropdown arrow” icon intrinsically implies an expanding movement.

  19. Amalia C Reply

    The link for the second case study is broken.

Leave a Reply

Your email address will not be published. Required fields are marked *