Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question

1 Answer 1

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.

share|improve this answer
    
Yes, good points about mobile devices and the volume of text. –  Franchesca May 6 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 at 19:53

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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