1

There's a lot of buzz and fuzz about the icon usage for an accordion header (state changing button).

After a short research, I came to the conclusion to use up and down arrows and I was wondering if anyone can provide a better reasoning about icons usage for this matter.

My logic when choosing this option (up and down arrows) was the following:

  • When I see a down arrow, I expect something to happen in this direction (from top to bottom). The same logic applies for the up icon;

  • I rejected the idea of using +/- symbols since the action of expanding/collapsing doesn't relate to addition/subtraction symbols.

  • I also wanted to keep things consistent, as we had some drop-down menus which use the same arrow approach.

There was one more variation: using the greater than symbol for initial state (collapsed) and the up arrow for expanded state. I also find this approach a little bit confusing, since the left arrow and right arrow symbols make more sense when having a left-to-right navigation or a step-by-step action.

Does any of you know a better/intuitive aproach for this matter?

Improve this question

2 Answers 2

Reset to default
3

There are other questions with this same theme, you can take a look at: here and here

These posts can help you :)

In my opinion, I prefer the icons of more and less

The plus icon is the clearer affordance for menu expansion. Another research study on accordions found that users click the plus icon more than the arrow one. This makes sense because the plus sign is the mathematical symbol for addition. When you add, you increase in amount, number or degree. Users increase the number of menu options when they click the accordion menu.

More about it here

Improve this answer
5
  • Thanks for the quote and the link, I already checked it, but I didn't found any valid "research study" that they point to. I also had a look in Material Design guidelines and found it more clearly explained and reasoned, but I'm still a bit into doubt. The material guideline is anyway a valuable resouce: material.io/guidelines/components/…
    – n1kkou
    May 5, 2017 at 13:26
  • The best way to find out which icon is best for your interface is to do the user test, so you will not have any doubts :)
    – Maisa Barros
    May 5, 2017 at 13:38
  • True, A/B testing is a good option, but not in the initial state. That's why I'm trying to choose the best fit at the moment (based on people who already tried and failed/succeeded), suitable for a positive starting point.
    – n1kkou
    May 5, 2017 at 13:40
  • 2
    @n1kkou A/B testing != user testing. I think what Maisa was getting at was, there is not a universally "right" or "optimum" way to solve design problems like the one you pose—the surest way to assess the efficacy of a design is to conduct a usability study of your app/prototype, and see if your users struggle with it or not. If they don't, you can move on to other problems.
    – Nate Green
    May 5, 2017 at 18:17
  • You are right @NateGreen
    – Maisa Barros
    May 5, 2017 at 19:17
0

Nielsen Norman Group did a study on it and recommend down carets to show it can be expanded, transforming to an up carets (^) 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.