As anyone who has listened to polka will tell you, accordions are a wonderful thing in moderation. And so it is with the accordions available in the WMS. The key to knowing when to use them is to understand what they do well, and what their limitations are.
What accordions do well
By hiding some of the content, an accordion will make the page look shorter, less daunting, and reduce the need for the reader to scroll. The headings of the accordion also serve as an index of its content; we can see at a glance what the main topics are, and this gives us greater control over what to read.
Limitations to accordions
What the accordion does well- hiding content- can also have a downside. The accordion creates a burden for your visitors who will need to click on headings one at a time to display content. Users don’t mind clicking if their effort rewards them with the information they’re looking for, but they can resent accordions that feel like a shell game, where each click is likely to be a wasted effort.
Also, by using an accordion, you are relying on the reader to take action to see the information on the page. Visitors will be less aware of the content concealed in an accordion, will not be able to easily scan the page, and will not be able to use CTL + F to find text hidden in the accordion.
And consider the people who have arrived on your page from a search. The accordion will not open to the relevant text automatically in response to the search, and the user might be left wondering where on the page the information they are looking for is located, or if it is there at all.
Furthermore, you can’t create links from the top of the page to content housed in the accordion (though it is possible to link to content in an accordion from another page).
Good uses for accordions
An accordion works best when each reader needs only a few pieces of information available on the page. You’re doing your visitors a favour by hiding most of the content, allowing them to focus on the few topics that matter to them.
- FAQs are ideally suited to accordions as readers are often interested in finding the answer to one or two questions only.
Frequently Asked Questions on the Faculty of Law's Admissions Guide makes the case for this. - Complex procedures that can be broken down are also served well by accordions, allowing the reader to focus on one step at a time.
The Step-by-step guide on Undergraduate Admissions is a fine example.
When accordions should be avoided
Avoid using accordions on pages where readers need most or all the information on the page. This will relieve people of the burden of clicking links to get at the content they need.
Don’t worry about having a long page
You may think that without an accordion your page will be long and off-putting for readers, but people are willing to scroll through long pages as long as the information is relevant, well-organized, and easy to scan. In fact, it’s easier to scroll down a page than to click several times to open and close an accordion.
You can make it easier for your visitors to get a sense of what’s on a long page by including the “On This Page” block at the top; it will provide a kind of table of contents for the page, listing and providing links to all the headings. The Department of Biology makes good use of this block to highlight their services.
Does your page need an accordion?
Accordions offer you flexibility (get it?), but they may not work on every page. As always, ask your users for feedback. And remember, John Lennon’s first instrument was the accordion, but he didn’t feel the need to squeeze it into every Beatles song.
