13

which accordion identifiers make more sense?

  • plus and minus

OR

  • up & down arrow chevrons

I'd be very interested to see if anyone has any analytics or proofs on these concepts. As always, opinions are welcome, too.

Accordion Example

Improve this question
3
  • 9
    Opinion: + sign makes it look more like if I click it I'll add something, not drop that menu down.
    – DasBeasto
    Aug 18, 2015 at 12:38
  • Opinion: Accordions are bad because they hide content behind a mouse-click, which involves dragging my mouse halfway across the mousepad to find out what's in there.
    – Niet the Dark Absol
    Aug 19, 2015 at 8:06
  • It is just as important that the remaining header looks like a collapsed container.
    – Jørn E. Angeltveit
    Aug 19, 2015 at 10:21

4 Answers 4

Reset to default
25

I would choose option 3. Use arrows, but have the arrow pointing right when closed, and down when open.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The reason for this is that the arrow now always points to the content it relates to.

If you have an arrow pointing up then it could be misinterpreted as pointing to the preceeding piece of content (and we've seen this in user testing).

Improve this answer
5
  • 1
    +1 - Very interesting never thought of using the arrows like that, we have quite a few on our site oriented ^/v like in OP. Do you have any published studies about that somewhere?
    – DasBeasto
    Aug 18, 2015 at 17:59
  • So my question is, does the arrow actually indicate the resulting action? Yes it points to the content in both expanded and collapsed views, but it could be ambiguous as to its meaning.
    – tonytrucco
    Aug 18, 2015 at 18:04
  • 1
    @DasBeasto At least some UI libraries already use Right and Down arrows. E.g., jQuery UI's accordion widget does. Also, a quick Google search shows that lots of other people have used the Right and Down arrows too (and at least one has used the Up and Down, as well).
    – Joshua Taylor
    Aug 18, 2015 at 18:26
  • 2
    @DasBeasto no published studies I'm afraid. Just the result of usability testing that had been done on projects I work on. We've tried various layouts for these and found this to cause the fewest issues. All expanding content will cause some people confusion though. That's just what comes from hiding content from view - not everyone will realise there is content there to expand.
    – JonW ♦
    Aug 18, 2015 at 18:56
  • @tonytrucco now the arrow works like a potentiometer(forgot the casual name) which has 2 states, and you turn the arrow to where you want the content to be. Eclipse uses it, ExtJS uses it with the arrow pointing southeast instead of directy south; and that never confused me at all
    – bunyaCloven
    Aug 19, 2015 at 8:03
2

After a bit of research I was directed to this article: https://viget.com/inspire/testing-accordion-menu-designs-iconography?ref=hackingui

He tests 3 different icons in two different positions and concludes that the choice of icon matter does not matter as much as which side you put them on.

Conclusion Use whichever icon's you want, but put them on the left side of the text.

Improve this answer
2
  • 2
    So, that study also concluded that a user's expectation with a + icon to the left overwhelmingly indicated that it would expand the content. If you trust the methodology of the test then I think you have your answer. Even though your conclusion here would seem accurate (that the icon is less important than the placement), there's a clear winner in terms of user expectation.
    – tonytrucco
    Aug 18, 2015 at 18:02
  • Nice find. I'd second the use of +/- as a clear winner, informed by both this study and my own user-testing. Particularly with a form-laden site that uses chevrons in dropdowns.
    – Ben Paddock
    Aug 13, 2019 at 22:14
2

I would follow @whatsnewsaes suggestion to have the identifier on the left, but would go with the + and - symbols. The reasons are that:

  • They are more visually distinct than the up and down arrows
  • plus and minus already have semantic associations with more and less
  • The visual association between the title and the content should be managed by the visual styling of the component: you don't need arrows to point to content and titles any more than you need links to say 'click here'

One more thing. As you've done in your example, the '+' should be used as the clickable item - links are worded to tell the user where the link will take them, so symbols like this should follow the same convention.

Improve this answer
1

Nielsen Norman Group did a study on it and recommend down carets to show it can be expanded, transforming to an up caret (^) to show it can be collapsed again: https://www.nngroup.com/articles/accordion-icons/

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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