Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question
3  
Related question: ux.stackexchange.com/questions/5735/… –  JohnGB Apr 5 '13 at 14:11
2  
+1 Great question, I want to know this too. –  Benny Skogberg Apr 5 '13 at 14:13
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 '13 at 18:08
add comment

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

7 Answers

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.

share|improve this answer
2  
+1 on the indent for the lower level, couldn't care less about chevrons except to indicate you could expand it. –  Mark0978 Apr 5 '13 at 21:49
    
Your assertion then is that all accordions should follow the same design regardless of situation? –  JohnGB Apr 6 '13 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 '13 at 16:15
    
So when is it best to use which method, and why? –  JohnGB Apr 6 '13 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 '13 at 16:37
add comment

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.

share|improve this answer
add comment
up vote 3 down vote accepted

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

share|improve this answer
add comment

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 left end, or you can continue reading the titles on the right 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.

share|improve this answer
2  
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 '13 at 17:17
    
Thanks for bringing up the color blindness issue :) –  rk. Apr 5 '13 at 17:35
    
Dark and significantly Lighter fixes that color blindness problem. –  Mark0978 Apr 5 '13 at 21:51
    
It is more complex than that, colour-blindness.com/colour-blindness-tests/ –  rk. Apr 5 '13 at 22:09
add comment

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.

share|improve this answer
    
There should be an indent too :) –  pythonlover Apr 6 '13 at 0:46
    
The colors should have a medium contrast, like open=white and closed=light gray... –  pythonlover Apr 6 '13 at 0:47
    
Welcome to UX.se pythonlover! Can you please edit your answer and add these comments in it. –  rk. Apr 6 '13 at 0:59
2  
@pythonlover You don't have enough reputation yet, so I did it for you. :) –  msanford Apr 6 '13 at 1:30
1  
Thanks! That was nice of you :D –  pythonlover Apr 6 '13 at 1:32
show 3 more comments

+1 Right and down chevrons on the left

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

share|improve this answer
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 '13 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 '13 at 18:11
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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