Web Design Resources

Discuss Accordions

Casey wrote the following on Oct. 29, 2019

Use Case for Accordions

Example Page Description: 8 different methods of usability testing with descriptions and how to use.

Headers & Scrolling vs Accordions

Droplr vids:

Why Accordions Improve Usability

Users will likely come back to this page as they decide which method to use for their upcoming usability study.

Accordions put all 8 method types within a contained section above the fold making it easy to see all 8 choices at once.

Assuming the user remembers the gist of each method, she can quickly reacquaint herself with the ones that apply to her upcoming study by clicking on the accordion header.

Alternatively, if all methods were list conventionally with headers, she would have to scroll to the bottom of the page to see all 8. We could add jump-to links at the top as an alternative solution.

Articles

Accordions Are Not Always the Answer for Complex Content on Desktops