UX Research

Caret Down Beats Every Alternative, Accord Icon Research

NN/g research settles the accordion icon debate: the down caret ▼ wins, split buttons cause mistakes, and links should just be underlined. Here's why.

  • AuthorRebecca Stone
  • ChannelUX Research
  • Filed
  • Read3 min
Accordion Icons: Which Work Best?
Accordion Icons: Which Work Best?David Vilches / unsplash
  • Nielsen Norman Group research names the down-pointing caret ▼ as the most reliable accordion icon
  • Split buttons, where label and icon trigger different actions, produce more mistakes than help
  • Users tap the icon and the text label at roughly equal rates for most icons
  • Plus/minus and up/down arrows work but carry overloaded meanings across contexts
  • For plain links, underlining the title works flawlessly, per the research

The down-pointing caret ▼ is the most reliable icon for accordion menus, according to research from the Nielsen Norman Group — and the same body of findings delivers a sharper verdict: split buttons, where the text label navigates to a page while the icon expands the menu, actively harm navigation and produce more mistakes than they fix.

The study examined how users interpret the four common candidates — carets, chevrons, arrows and triangles — in expanded and collapsed navigation. It measured what people expect to happen when they tap. The differences between icon shapes turned out to matter less than two structural questions: does the icon exist at all, and does the icon and label pair trigger one action or two?

What happens when there's no icon?

Strip the icon away entirely and users read the menu item as a plain link. They expect the tap to take them directly to a new page. That's the finding, and it's consistent.

Custom icons fare poorly too. Users struggle to decode unfamiliar glyphs and don't reliably read them as accordion triggers. For most standard icons, people tap the icon and the text label at roughly equal rates — which means both targets have to work, or half the audience hits a dead end.

Many navigation designs compound the problem by deploying arrows and carets pointing in every direction depending on state. The research's rule of thumb is blunt: if an item is a link, underline it. No arrow, no caret, nothing else. Boring, yes. It works every single time.

Why split buttons and arrows mislead

A right-facing arrow ▶ does not create an expectation of page navigation. A down arrow ▼ doesn't guarantee users will predict an accordion opening either. The symbols are simply too ambiguous to carry that weight.

Split buttons are worse. The pattern — text label links to a page, icon expands the accordion — splits one visual unit into two different actions, and users mis-hit it. The reliable alternative: let the main category tap expose the menu, then place a link to the category page inside that menu. One visible control, one outcome.

Do +/− and ↓/↑ work?

Plus/minus and up/down arrows are the workhorses of accordion state, and they generally perform well. But both carry heavy semantic loads. Plus can read as save-for-later, add-to-cart or zoom. Arrows can suggest scrolling, sliding, finding the next match or jumping to a section of the page. In multi-level navigation, with several levels open at once, the overload turns into genuine confusion. They work — until the design stacks meanings on top of them.

What should designers ship?

Default to the caret or triangle pointing down ▼, then rotate it to point up or sideways ▶ on interaction. Need a fallback? Plus/minus is the acceptable alternative.

Drop every extra arrow that supposedly signals where links lead. Drop split menus. Ship one control that does exactly one thing — show all options and let users drill down. And when an item must navigate directly, link the title and underline it.

Simpler is better. More often than not, the research says, the plainest pattern is the one users decode without thinking — and as icon studies accumulate, the case for restraint in navigation affordances keeps getting harder to argue with.

Original: smashingconf.com

Share this article:

More from Rebecca Stone

Rebecca Stone

Show full bio

News editor covering technology and product news in Product and interaction design, design systems at Interface Wire.

50 articles

Related articles

  1. Native HTML Popover Cuts Script and ARIA From Site Navigation

  2. Web Accessibility Overlays Fail Practitioners, WebAIM Survey Finds

  3. Meta Gives Muse an Adorable Mascot Amid AI Doomerism

  4. AI-Generated Home Pages Are Falling Below Accessibility Standards

« Previous articleNext article »