11

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

  • 7
    Opinion: + sign makes it look more like if I click it I'll add something, not drop that menu down. – DasBeasto Aug 18 '15 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 '15 at 8:06
  • It is just as important that the remaining header looks like a collapsed container. – Jørn E. Angeltveit Aug 19 '15 at 10:21
24

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

  • +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 '15 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 '15 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 '15 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 '15 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 '15 at 8:03
1

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.

  • 1
    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 '15 at 18:02
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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