So what icon is the most reliable to show expansion and collapsing for accordions? Is there really any noticeable difference between carets, chevrons, arrows, and triangles?
Well, research shows that there is some difference indeed. But what’s more interesting is that split menus are harmful, why it’s better to not have icons and text labels link to different actions, and why the caret is the safest icon choice. Let’s dive in!
No Icon = Opening The Page
The findings aren’t very surprising: without any icon in use, users expect that tapping on the menu item would take them directly to a new page. Users often struggle with custom icons as they don’t clearly signal that they’ll open an accordion. And people tend to tap fairly equally on the icon and on the label for most icons.
Many designs (like the one below) tend to slightly overcomplicate things by adding arrows and carets pointing everywhere, depending on the state of the accordion. But typically we don’t need to use an arrow to indicate a link to the category.
The rule of thumb is very simple: if it’s a link, the easiest and most effective way is to simply underline it — without any arrow, caret, or other icon. Perhaps it’s not particularly exciting, but it works flawlessly every single time.
Confusing Behavior With Arrows ▶ and Split Buttons
Using a right-facing arrow icon ▶ isn’t associated with an expectation of going directly to a new page. And having the same icon pointing down ▼ doesn’t necessarily imply that an accordion is going to open on tap/click.
It’s a good idea to avoid split buttons for accordions — where the text label links directly to a page, but the icon opens the accordion. Instead, it’s much more reliable to allow users to tap on a main category and expose the menu; and to access the category page, we add a link to it inside the menu.
Plus +/− and Arrows ↓/↑ Are Understood, But Can Be Misunderstood
For accordions, we typically use +/− or arrows ↓/↑ to signal expanded and collapsed states, and typically it works well. However, both have many different interpretations. Plus + can mean anything from saving for later to adding to cart to zooming in, and can be particularly confusing for multi-level navigation, with many levels open at the same time.
Arrows ↓/↑ can mean scrolling or sliding or finding the next match, but also a jump to a particular portion of a page. Both plus and arrows are well-understood and work, but depending on the design, can be confusing — mostly because they are overloaded.
Wrapping Up
The safe choice is to use the caret/triangle pointing down ▼ by default, and change it to a caret pointing up or a caret pointing sideways ▶ on interaction. If you need an alternative, then +/- typically work well, too.
But we certainly don’t need any further icons or arrows to indicate where the links go. The same goes for split menus, which often produce more mistakes than help. Instead, we have one button or dropdown that does exactly one thing — shows all options and allows users to drill down.
And if you need a direct link, we link the title directly to the page and underline it. More often than not, simpler is better.
Editor’s Note
We hope you’ll find these wonderful projects useful — put together by wonderful creators. A friendly shout-out to everyone sharing their work with folks to use and learn from! That’s one of the reasons why we truly love the web and people building and designing it. 💚
At Smashing, we love the web. That’s why we publish articles and books, run workshops and events around everything web. We love seeing what we all can do to make the web more accessible and usable. We also love organizing and attending online events — with friendly discounts for large groups (5+ attendees) and schools and students. Interested? Just send us an email and we’ll sort it out!
(yk)
