which accordion identifiers make more sense?
- plus and minus
- 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.
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
I would choose option 3. Use arrows, but have the arrow pointing right when closed, and down when open.
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).
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.
I would follow @whatsnewsaes suggestion to have the identifier on the left, but would go with the + and - symbols. The reasons are that:
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.
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/