Everybody is familiar with accordions on websites, those little tables (popular for FAQ’s for example) where clicking on the text of the question, or the icon next to it, opens up a section of content that was previously collapsed.
As we move ever further into a mobile web experience, accordions have become a crucial part of saving space and making page length manageable for mobile, but even on desktop versions of sites, they help to keep layout and display simple, and allow users to focus only on content that is relevant to them.
As part of a study on mobile navigation and sub-navigation, renowned usability experts, the Nielsen Norman Group investigated which icon was most effective at indicating to a user that the content would expand in place, and that they would remain on the same page.
Most Effective Signifier
The NN/g tested four different options, the caret (or downward facing arrow), a plus sign, a right-facing arrow, and no icon at all, representing the most commonly used icons for this purpose. Then, they added 5th icon, which had never been used for an accordion, in order to test whether the simple presence of an icon would be a visual cue prompting people to click on it, and they collected the tap location of the user, and the user expectation from the post-test questions to determine if they had expected the accordion to open, or if they had expected to go to a new page.
The majority of taps were either on the text label of the accordion itself, or on the icon associated with it. In the case of no icon being present, 72% of participants clicked directly on the text itself, and 61% expected that to open a new page, rather than the accordion.
Surprisingly, with the made-up icon, 40% of users clicked the icon (and 31% the text), but the expectation of a new page was actually higher (66%) than it was for the version where no icon was present, showing an unfamiliar icon created a higher expectation of a new page loading than no icon at all.
Of the remaining 3 common icons, the caret (∨) had 51% of clicks on the icon, and only 29% on the text, while the other two options, (the plus sign and the right arrow) were almost equal at 48% and 46% icon clicks respectively, and 49% and 53% new page expectations respectively.
Only 47% of users who clicked on the caret expected to be redirected to a new page however.
Conclusions
NN/g concluded that people (effectively) tap relatively equally on the icon and the label, and as such “split” buttons, where the text performs 1 action, and the icon another, are contra-indicated. The caret symbol however, had the highest number of icon clicks, and the lowest expectation of a new page.
In the same way, making up your own icon for an accordion does not appear to have much effect on whether it will be clicked, but it is more likely to create the expectation of a new page (and therefore violate that expectation when the accordion opens).
Users tendency to interact with strong, clear identifiers was shown by the fact that no icon at all caused users to click on the text rather than the space where an icon would be.
In the end, it appears that the caret is the safest icon to use in an accordion menu.