An accordion is a design element that expands in place to expose some hidden information. Unlike overlays, accordions push the page content down instead of being superposed on top of page content.
While the use of accordions on desktop is debatable, on mobile, accordions are one of the most useful design elements, as they often solve the problem of displaying too much content in too little screen space. Occasionally, however, accordions can generate confusion; luckily, in the browser this confusion can be easily eliminated by extending the functionality of the Back button.
Mini-IAs, or Why Accordions Are Great on Mobile
One of the biggest advantages of accordions is that they often allow users to get the big picture before focusing on details, and they can effectively mitigate the common problem of overly long pages.
When users land on a new web page, they behave like animals foraging for food in the wild: they try to get a sense of what the page contains and whether that information is going to be relevant to their goal. As soon as they’ve answered that question, they either keep on scrolling (if they are convinced that the page that is right for their needs) or they navigate away in search of a better source of information, if they think that the page is not what they need. When a mobile page contains many pieces of unrelated content, users need to scroll down to find them, a process tedious and unrewarding when most of the page content is irrelevant. As a result, users often stop scrolling and navigate away, missing the bits that respond to their questions simply because they are too low down the page.
So what’s the solution? A good webpage announces what it is about. This is akin with having an in-page table of contents (or mini-IA) that is salient and visible right away, when the user first lands on the page. There are three main benefits of such a table of contents:
- It tells users what the page contains and whether the type of information is likely to be relevant for their goals.
- It gives users direct access to a section of interest.
- It helps users form a mental model of the page and, potentially, of the site.
There are several ways to realize such a mini-IA or table of content: jump links, a secondary navigation bar, a menu, or accordions. We discuss all of these in our new report on the user experience of mobile apps and websites. Today we will focus on accordions, which, among these, are perhaps the most elegant solution: they take the least amount of space (since they double as section headings) and have the potential of keeping the user in place.
Such accordions can be useful not only on content pages, but also in forms. Collapsing each step under an accordion can be an effective way of conveying the form workflow to the users without overwhelming them (long forms are often daunting on mobile) and also without requiring multiple page loads.
Difficulties Caused By Accordions
Collapsing details under an accordion is a technique that we strongly advocate on mobile and reflects the idea of deferring secondary content to secondary pages. Yet accordions can also introduce usability problems.
Disorientation
When users expand an accordion, designers may move the accordion to the top of the screen (as in the WebMD example below) to maximize viewing of the accordion content. Unfortunately that has the disadvantage of making the users think that they navigated to a new page. As a result, they will often try to use the Back button to go back to the view with the closed accordion, but instead they will be taken away from the current page.
To prevent this confusion and also to allow users to quickly go back to the view with the closed accordions, consider using the Back browser button as an accordion-collapse button: if the last user action was expanding an accordion, then tapping Back should take the user to the closed-accordion page view. Essentially this means treating accordions as if they were in-page (anchor) links.
Another solution (that uses space in a less efficient way, however) is to prevent the illusion of a new page by not scrolling the page when the accordion is expanded. This solution has the advantage of keeping the user oriented.
Scrolling to Next Option
Most accordions are closed simply by pressing the same element that opened them (although there is more variation when accordions are used for navigation menus).
Sometimes the content under an accordion can be really long, and as a result, it can be beneficial to allow quick access to the close button. For instance, in the Wikipedia example below, the content of the History accordion element was very lengthy, and if readers had decided to quit reading it and jump to another subtopic, they would have had to either scroll down to find the next accordion, or scroll up to close the History accordion.
In situations like this, a persistent accordion header or another floating element that allows users to quickly close the accordion can speed up the interaction and save people some effort. In the browser, treating accordions as if they were anchor links and using Back to undo the accordion expansion instead of taking people to the previous page, like we proposed above, can also speed up the interaction.
To solve the problem of scrolling to navigate away from the accordion content, Zappos for Android provided users with a Collapse button to let them easily collapse the accordion and get back to the filter-list view. Unfortunately, in testing, no users recognized what that button might do, so they did not use it. (The term “collapse” as applied to a list is meaningful for UX nerds, but for an average user this word is mainly used with a meaning like “he collapsed from heat stroke.”)
Amazon also used an accordion, but instead of introducing an unfamiliar button, it simply made the accordion control sticky at the top of the value list. This solution was a lot more usable than Zappos’s.
Conclusion
Accordions are a great tool for mobile designs because they condense information in a limited space and enable users to see the big picture and focus on the gist rather than on the details. However, when the content under the accordion is too lengthy, they can force users to scroll too much to collapse the accordion and navigate to other information on the page. Accordions can also increase user disorientation. Luckily, these problems are easily solvable with small design changes such as persistent accordion headings and treating accordions as jump links.
Learn more about improving the usability of mobile-design elements in the recent edition of our report User Experience for Mobile Applications and Websites.

Comments