Tea Time with Tony: Accordions…Good for Polka, Bad for Website User Experience

101 views
0

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.

  1. A user cannot quickly visually scan or scroll through your carefully written content without additional interactions, and content is king!
  2. 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.
  3. If a user finds the content the 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.
  4. Built in web browser “find in page” feature won’t find text in a collapsed section.
  5. 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!

Author


  • Programming for the web since he was a wee lad, Tony has a great appreciation for efficiency, minimal design, and programmatic eloquence. Wherever there is time being wasted, he'll be there with a script. Whenever there is injustice done to a website being rendered in an obscure outdated browser, he'll be there. Wherever there is ajax in distress, never fear. Recent reports mention him wielding a large camera and microphone.

Your email address will not be published. Required fields are marked *