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.

Tommy.com: The Price filter was implemented as an accordion that expands in place pushing the page content down.

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.

World Wildlife Fund: The mobile page showed the different page sections one under the other. Mobile users had no way of knowing what type of content the page included — for instance, they could not have guessed that the page included a description of the threats that tigers faced or a link to donate unless they scrolled down diligently until the bottom of the page. The top Overview section did not entice to scroll down and find that information.

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:

  1. It tells users what the page contains and whether the type of information is likely to be relevant for their goals.
  2. It gives users direct access to a section of interest.
  3. 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.

On drug pages, WebMD showed a mini-IA of the page implemented through accordions (right). Unfortunately, by default the first accordion was expanded (left) and prevented users from getting a quick glance (without scrolling) at the structure of the page. Some users may have thought that the page was only about drug warnings and left before scrolling down.

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.

Skinnyties.com’s checkout form used accordions that allowed users to see the entire workflow without being overwhelmed by a really long form.

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.

WebMD.com: When users expanded the Side Effects accordion, the content was pushed to the top of the page, making it look as if a new page had been loaded. The expectation was that by tapping the browser's Back button users would be able to go back to the closed-accordion view.

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.

Wikipedia.org: The History accordion expanded to many screenfuls of content. Readers deciding to read for a while and then move on to another  subtopic had to scroll up to close the History accordion or to scroll down to navigate to the other accordions in the list.

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.”)

Zappos for Android: The Brand filter was an accordion that expanded in place (left); if users tapped the Collapse button, they could go back to the filter list (right).

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.

Amazon.com: The Shoe Size accordion heading became sticky once users started scrolling through the list of sizes. This design facilitated quick closing of the accordion and navigation to the next option.

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.