Accordion menus stack information under a series of vertical headers. The information can then be accessed by clicking the header, an act that expands the content underneath it. There are many reasons to use accordions, especially on mobile:

When to avoid accordions

But accordions have their limitations. When it comes to product information, you should provide all the necessary information at a single glance. A user shouldn’t have to click on five accordion headers to learn everything they want to about a product.

You always have to ask yourself a single question: “Is the user going to read through everything on this page?” If the answer is yes, then an accordion is not necessary. Users hate wasted clicks. The more they have to click, the less they’re likely to stick around.

This makes accordions in the product description or other important areas a big no. On the product page, for example, you should make all product details easily accessible. 

Product information should also be relevant because that’s what users are looking for: relevant information. Using accordions isn’t going to solve poor information architecture. Show your visitors what they want to see with as little scrolling as possible.

Accordion design best practices

  1. Use the back button to collapse the accordion instead of returning to the previous page. This is especially helpful when the accordion has long sections.
  2. Don’t set your accordion to open by default. If any information is that essential, it shouldn’t be in an accordion in the first place.
  3. Avoid unusual accordion expansion signs. The standard is either the plus sign (+) of the downward chevron (⌄). The chevron should rotate and point upwards once pressed. Sideways chevrons should be avoided since the sign needs to show the direction in which the accordion opens and closes.