2

I am torn between 2 UI patterns for how to present text content that is broken up into large chunks. This is a pattern I'd like to use across the site, so it could be for things like FAQs as well as text-heavy pages that have logical sub-sections.

The accordion method is more compact, allows you to see any content below the accordions more easily, and avoids duplicating section names on the page. On the other hand, it requires additional clicks if you want to see more than one section, whereas anchor links allow you to just scroll rather than having to repeatedly click. (An "expand all" option could be used in the accordion, but then that assumes people want to read everything all at once and adds another widget to the page.) Anchor links still have the list of sections up front, but allow you to easily scroll through them if you're interested in more than just one section without having to do any clicking.

I see a lot of pros and cons and was surprised to not be able to find any research on this -- although maybe I'm just googling the wrong words. Any suggestions? I've mocked up the 2 examples in a screenshot.

(Additional note: this is for a responsive site, so things like touch size of links/accordions will be accommodated either way.)

Accordions vs Anchor Links

|improve this question
3

If the experience will be mainly on mobile devices, I would choose the accordion style. Anchored top menu and "back to top" affordances are a bit harder to use on mobile devices and take up space in ways that aren't friendly on phones.

You can program an accordion to stay open when another is expanded. I wouldn't supply an "expand all" control.

While they are a better choice (in my opinion) than the anchored menu, do limit the use of accordions – they have a purpose, but are clunky things. See if you need to use them and take each case individually. For example, if you have 3 or 4 paragraphs on different subjects, each with a header, it is probably better to display the content without accordions. In another scenario, you may want to collapse FAQ info for a page in order for the user to see some important content below it.

You should be able to use your best judgment in each case when deciding whether an accordion will disrupt or enhance the experience.

|improve this answer
  • Yes, good points about mobile devices and the volume of text. – Franchesca May 6 '14 at 7:38
  • Thanks -- anecdotally a few other people in my office gave similar advice. Seems like there's a preference for accordions with a careful eye on the context of the page/content. – Michael Histen May 6 '14 at 19:53
  • Anecdotal evidence based on a small number of tests and personal experience: some people get annoyed by the scrolling animation in anchored menus; you can see non-purpose content surrounding the one you are reading for your purpose which could be distracting; not all people would notice the "back to top" links. Therefore, general rule of thumb: if sections are few and their content is not much - just leave them listed and that is all; if sections' content is huge - make them as buttons opening in new tabs; if their content is moderate - use accordion. – drabsv Aug 17 '18 at 16:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.