DEVOURED
Accordion Icons: Which Ones Work Best?
Nielsen Norman Group research shows that users equate accordion icons with specific behaviors, with carets serving as the most intuitive choice.
What: Research by NN/g indicates that carets are the most performant and intuitive icons for accordions. Using no icon often confuses users, who may mistakenly expect a new page to load, while split menus (where the icon and text perform different actions) are a significant usability anti-pattern.
Takeaway: Stick to caret icons for your accordions to align with user expectations, and avoid split-trigger designs to minimize user error.
Deep dive
- Carets are the preferred standard for accordions.
- Plus icons are acceptable but slightly less effective than carets for indicating expand/collapse.
- Accordions without icons lead users to expect a navigation change (new page) rather than an inline expansion.
- Split menus where the icon and label perform separate actions (e.g., expanding vs. opening the page) are highly error-prone.
- Accordions should be consistently marked with clear affordances to signal expandability.
Decoder
- Accordion: A UI pattern that allows users to toggle between hiding and showing large amounts of content in a small space.
- Affordance: A visual cue that informs a user how they can interact with an element.
Original article
NN/g research finds real differences between carets, arrows, and plus icons on accordions, with the caret the safest choice and the most tapped. With no icon at all, users expect the item to open a new page. Split menus, where label and icon trigger different actions, cause the most mistakes and are best avoided.
Explore all 54 articles in today's digest
Fresh dev news, AI-digested daily. Never miss a trend at devoured.fyi