77

When you have an accordion, you need some way of showing the current state is expanded.

There are a number of different ways of handling this, and each is used by a number of respected websites and frameworks. Hence it's not clear which method is best to use in which situation.

When is it best to use which method? Bonus points for any studies on this.

No symbols at all, just colour to indicate the expansion

Gmail for Android uses this, but here are some clearer examples:

enter image description hereenter image description here

Left and down chevrons on the right

These are used by the BBC Global Experience Language:

enter image description here

Up and down chevrons on the right

These are used in the Android Design Guidelines documentation and in Silverlight.:

enter image description hereenter image description here

Right and down chevrons on the left

enter image description here

Plus (+) and minus (-) symbols on the right

This is used as the default in ExtJS

enter image description here

Plus (+) and minus (-) symbols on the left

enter image description here

Improve this question
3
  • 5
    Related question: ux.stackexchange.com/questions/5735/…
    – JohnGB ♦
    Apr 5, 2013 at 14:11
  • 1
    Personally, the arrows confuse me in every case except "right and down on the left". On the right, I want to interpret it as "change to this state", and up/down is just visually disorienting...
    – Izkata
    Apr 5, 2013 at 18:08
  • What about when you have a 3 state button? Expand only 1 hierarchy below Expand All hierarchies below Collapse all hierarchies below
    – AsafBO
    Dec 1, 2016 at 10:13

9 Answers 9

Reset to default
18

I suggest combining these:

  • chevrons on right (more natural, especially on touch, but no offense if you leave it on left) - of course, the whole bar should be clickable to expand/contract - not just the chevron
  • indent for the lower level
  • background color (lighter for lower levels)
  • shadow (to show that lower level is behind/below the higher one)
  • optionally: expand/contract text on right

I believe the combination can be really nice, so no point choosing only one, while all of them make the design more clear to the user.

Improve this answer
5
  • 2
    +1 on the indent for the lower level, couldn't care less about chevrons except to indicate you could expand it.
    – boatcoder
    Apr 5, 2013 at 21:49
  • Your assertion then is that all accordions should follow the same design regardless of situation?
    – JohnGB ♦
    Apr 6, 2013 at 15:36
  • No, it's just a combination of simple tips to improve proper recognition of a vertical accordion. It can be dealt with in many ways, namely regarding design. Of course specific cases may need adjustments.
    – Dominik Oslizlo
    Apr 6, 2013 at 16:15
  • So when is it best to use which method, and why?
    – JohnGB ♦
    Apr 6, 2013 at 16:31
  • What I suggest is using all of them together, or most of them. Specific cases (like checkboxes or more structured content inside accordion) might need another recommendation.
    – Dominik Oslizlo
    Apr 6, 2013 at 16:37
10

I spend quite a while looking at various options for accordions (partly in writing the question), and although not definitive, my current thinking is as follows:

Left vs right side

If you have checkboxes in your accordion, it makes sense to have the indicator on the opposite side to your checkboxes. This is mostly to avoid the situation with many indicators very close to each other, but also makes it less likely for a user to accidentally select one option when their intention was to select the other.

This is similar reasoning to why the star selector and checkbox are on opposite sides in gmail for Android.
enter image description here

Otherwise, having the checkboxes on the left or right seems to primarily be a design decision. Design wise I favour the right as it keeps user's attention on the content.

Affordance

If you have no icon as an indicator, there is little indication that you are looking at an accordion as opposed to a simple list. This may not be an issue for many people, but I would recommend having some form of indicator. This should make it easier to use, at the (arguable) expense of having a busier design.

Ease of scanning and understanding

Using an up/down or left/right chevron has always been problematic for me. I'm never sure if the up chevron is a state or an action, and it's hard for dyslexic people to tell the difference. left / down (indicator on the right) or right / down (indicator on the left) seems to cause the least amount of confusion while still being easy to scan.

+ and - are the clearest in terms of what they do, but they have (in internal tests) shown to be slower to tell apart while scanning quickly. So I would avoid these if scanning speed matters.

Colour and hue

This is the easiest one where using colour (or hue) to indicate an item has been expanded is always a good idea. It can be very subtle and give a distinction between collapsed and expanded items.

Google subtle in their Android design guidelines, but I would recommend making the difference clearer.

enter image description here

Improve this answer
6

The ones that I personally like best from those are these, but not for any of the reasons mentioned

enter image description here enter image description here

In the first one, aside from the background color, it's obvious that the items are dropped down from the item above them because the sub-items are all indented.

In the second one, it's obvious that the item and the text below it belong together because, unlike all the other examples, there is no divider between them. Again, the different background color is important also, to indicate that it's selected.

I honestly didn't even notice which examples had arrows pointing up or down or out of the screen, or even no arrows at all. What's really important is being able to tell at a glance which items are grouped together as a sub-menu of the item above them. So for instance, this one:

enter image description here

is terrible; the sub-items have the same background, same font, same indentation, etc.

Improve this answer
6

Here's one to get the discussion rolling. What I see is a question about the best representation of the system state in an accordion menu. Visibility of system status from Nielsen's 10 usability heuristics. Following are my rationale for each option:

No symbols at all, just colour to indicate the expansion:

State represented by color.

Minimal design and works well for a regular web user (someone who is intelligent enough to know how to navigate on webpage). Though your second example (weblog tools) is not the same thing as the gmail one. Gmail is using 3 colors, selection=green, main menu item=dark grey, sub menu items=light grey. Whereas, the weblog is just using 2 colors. I feel the 3 color system has a better call to action than the 2 color system.

Chevrons:

State represented by chevrons/arrows.

Personally speaking, I prefer the left&down over the right&down and up&down.

The up&down take the most amount of time to understand. Does up mean the header goes up to reveal stuff? Or does content slide up in the header?

The right&down are straight forward to understand (IMO), right points toward the title and down points towards the content from the title bar.

The left&down are my preferred choice. They have the same simplicity of right&down but are not necessarily in your view. You can check the state by glancing at the chevron on the right end, or you can continue reading the titles on the left end.

Plus (+) and minus (-):

State represented by symbols +/-

The same argument as the chevrons, I prefer the right end placement of the +/- symbols since they are present, but in the periphery and not necessarily demand my attention.

One alternative you missed is: Double enforcement of the state, use color in combination with the chevron/plus-minus symbols.

Now the choice between chevrons, +/- or the bar colors is more of a design decision to me. But, I would first of all try and see if the double enforcement looks usable or not. If not, I would go with the chevrons/plus-minus for a more minimal theme (if you are not using many colors) and go with the color if I want a more color centric minimal design where you have many colors but not many icons/symbols.

Improve this answer
3
  • 3
    The difficulty in using color as a differentiator is supporting the various types of color blindness. While two colors might be obviously different to 90% of the population, they might appear identical to the color blind. Color as a secondary indicator, rather than primary, may be the simplest solution, as you suggested near the end.
    – Roddy of the Frozen Peas
    Apr 5, 2013 at 17:17
  • Dark and significantly Lighter fixes that color blindness problem.
    – boatcoder
    Apr 5, 2013 at 21:51
  • 1
    It is more complex than that, colour-blindness.com/colour-blindness-tests/
    – rk.
    Apr 5, 2013 at 22:09
3

+1 Right and down chevrons on the left

This is a commonly used UI symbol and most people would recognize it from their experience.

Improve this answer
2
  • 1
    Is it more commonly used than the others though? People would recognise most of the options suggested though, I don't see what sets chevrons apart from the others.
    – JonW ♦
    Apr 5, 2013 at 15:31
  • +1, I made my comment on the question before seeing this answer. Up+down arrows is visually disorienting (especially when scanning down a list), and putting them on the right makes me want to interpret them as "change to this state" instead of "currently in this state".
    – Izkata
    Apr 5, 2013 at 18:11
3

I think arrows pointing down on the left work best, the +s and -s are annoying and make your brain confused. I like left-side things, but I'm right-handed, so that might have an influence. And the arrows pointing down or across are nice, you can usually easily understand what they mean. There should be an indent too, the colors should have a medium contrast, like open=white and closed=light gray.

Improve this answer
2
  • I'm left-handed and prefer them on the left, too
    – Izkata
    Apr 6, 2013 at 16:39
  • @Izkata Well then, I guess left-side chevrons aren't just a bias for right-handed people!
    – pythonlover
    Apr 7, 2013 at 6:37
2

From the article: Where to Place Icons Your Accordion Menu Icons

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

Improve this answer
2
  • The links to the research in that article are very useful (this one in particular- exisweb.net/plus-sign-show-hide). However, as with many uxmovement.com articles, the author has made a bunch of assumptions as to why people click them (the part quoted in your answer isn't fact; it's assumption).
    – JonW ♦
    Apr 22, 2016 at 13:57
  • X is very often used for deleting, probably more often than minus. If you want to be entirely ambiguous, use text: 'Expand', 'Collapse'..
    – Martyn
    Jun 4, 2018 at 14:43
1

Use the habits learned since near twenty years with windows an especially windows Explorer and in a lot of trees view all over the web : [+] and [-] at left.

You will be sure all users will recognise those ergonomic symbols.

And be careful with arrow at left, it is new with mobile interface to explain there's a page after, so keep the arrow for this behavior. I agree with some writings, arrow down and left or down and up are confused. ..so if you have to think a little time each you use an interface. ...the choice is not good.

Improve this answer
0

Just have a look at this UX article about accordion menu's and the position of the Icon. This will tell you the next option is the best:

enter image description here

Improve this answer
1
  • 1
    This answer has already been stated a year or so ago: ux.stackexchange.com/a/93144/3865 Do you have any further detail to give here? We try not to duplicate answers as it just adds to overall visual noise on the page.
    – JonW ♦
    May 26, 2017 at 12:12

Not the answer you're looking for? Browse other questions tagged or ask your own question.