Skip to the content

Loving the squeezebox: Pros and cons of the accordion

The accordion, (also known as a concertina, expansion panel) is a well-used graphic interface that functions well on most devices but is a common solution for presenting data on mobiles. 

It operates very much like a vertical menu (The old school left hand sub-menu and the now ever-present hamburger) but what it provides is a way of displaying an overview of the content available, an alternative to scrolling through long pages of data.

It’s a useful tool just for presenting detailed information but is also brought into play for forms and ecommerce processes, and as an alternative to building up multiple subsections within a site, and to long scrolling pages. It breaks down related units of information into bite-size chunks (in a similar way to which tabs work – but vertically)

Essentially it’s comprised of a series of stacked horizontal buttons or ‘blades’ which when selected reveal a panel of content specific to that button. The button has a text description and usually, though not always, has some sort of iconographic indication that the button is expandable (most often arrows, chevrons, plus/minus signs, of which, more below)

Here’s a broad summary of the good and bad points of the accordion - and we'd be missing a trick if we didn't use an accordion to show you:

They are a good alternative to long scrolling pages and allow the user to see at a glance the key features of the page, and to explore in a non-linear fashion

They are an example of ‘progressive disclosure: which is, broadly speaking, A Good Thing.  A design technique allowing users to view complex pages in summary:  "Progressive disclosure helps people manage complexity without becoming overwhelmed, confused or frustrated." > The-power-of-progressive-disclosure

Data input – some accordions are used as an alternative to a sequential form wizard or tabs, the idea being that the process is made to seem less daunting. A user may return to a more complex form section after first completing the sections where the information is to hand.

The accordion comes into its own at mobile where it helps to make the best use of very limited screen real estate: > Nielsen Norman Group: Mobile accordions

Where there are multiple accordion tabs that extend beyond the scroll on a mobile display it must be clear when an item has been activated – before, during and after. Opinion suggests that revealing content below the scroll is problematic – but again there is much opinion/research that suggests we’re actually much less bothered about scrolling pages, and that in fact that’s the least troublesome method of interaction (and of course ‘below the scroll’ varies based on the device you’re using).

> Is Scrolling Bad?  

This here particular accordion allows multiple panels to be opened but where there is a lot of content displayed in a small screen area it can cause extra ‘cognitive’ work to be needed from the user, and it becomes hard to remember your place in what becomes a longer scrolling page. This gets hard to follow especially where data in separate panels is related - eg sections of the same form.  

The effectiveness of visual cues varies and, as above, if more than one item is open and if that item itself contains calls to action – buttons, arrows, etc, then there is further competition for the user’s attention – try to keep the functionality simple and obvious. Some accordions are nested – I don’t like this, personally. It’s not a ‘clean’ solution and can get the user tied in navigational knots. 

It’s best to avoid very long accordion items – conversely if your sections are very short is an accordion what you need?

The state of an accordion button must be intuitive, and intended transformation clear – ideally any directional indicators or icons must match the actual movement – IE a ‘down’ chevron suggests ‘expand’, whilst an up chevron suggest collapse. There’s some very in-depth work around on this – and one repeated theme of UX applies here – consistency: Don’t use the same button for two different things. As research from Smashing magazine describes – “the choice of icon doesn’t really matter as long as it isn’t overloaded with various meanings in the same UI”  For example, use a plus sign in a circle to indicate ‘expand this concertina panel’ but don’t use a plus sign to also indicate ‘bundled offers’. This is a great rule of to work with in your interfaces generally.

> Smashing Magazine: The Perfect Accordion

The same Smashing magazine research also indicates that the size and position of collapse/expand icons is significant – and dependent upon the device being used – but they come down broadly in favour of it being positioned on the right hand side, avoiding too much ‘white space’ distance between the label and its icon.

Just as it can be useful to break down data entry into usable chunks you must consider what your scheme is for saving of, and returning to data when accordion sections are collapsed and expanded. Does the user know whether they've lost what they entered, should you have multiple options for saving and submitting data? 
> Form Usability  

Well, I suppose

it depends on how many

tabs you need and also

what happens when you run out of room

as you transform to narrower devices

Bedtime reading