The strong personal opinions contained in this article are my own and do not necessarily reflect those of CUSO Magazine or related parties!
In pursuit of web happiness, many web developers and designers have perused the available offerings of web libraries like jQueryUI. Enticed by demand for a more interactive user experience and more “above the fold” content, they are tempted to naively implement user collapsible or expandable sections known as accordions. Surely, this is a familiar concept that reminds us of comfortable counterparts in the physical world such as filing cabinets, hanging dividers, and manila folders! Look for the title you seek and open the folder to view the contents. It seems effective enough, but this innocent paradigm translated to the web medium is laced with pitfalls.
- A user cannot quickly visually scan or scroll through your carefully written content without additional interactions, and content is king!
- A site-search to find a text string may find the correct content on the results page but link the user to the correct page with the content hidden away inside a collapsed section.
- If a user finds content they like inside an accordion and tries to bookmark it or share it by URL, they may be confused upon returning to find all the content collapsed.
- Built in web browser “find in page” feature won’t find text in a collapsed section.
- Content layout shifts as sections are expanded and contracted, this can be visually disorienting to users.
Are there workarounds to these issues? Some of them, yes, but they require judicious work from the web developer and are frequently unpractical or cost prohibitive. My preference would be to let the text flow on the page! Separate sections with appropriate headings. Studies have shown users are happy to scroll. Or better yet, if you’re not a fan of long pages, break up the sections into child pages each with their own unique URL so they may be shared and properly indexed by search engines!
Maybe I’m wrong. I’d love for you to leave a comment and tell me what you love about accordions! If there is enough interest in this sort of content, I’m happy to roast my second least favorite UI paradigm, the tabbed section container—for many of the same reasons!
