I'm auditing a site and came across a section that has a list of core attributes for the organization. On load, the first one is open, and then the rest expand whe you click/tap, with whatever one that was previously open then closing.

Does anyone have any stats on this type of interaction? My hunch is that it's asking more from the user than the payoff, particularly on mobile.

This is the page I'm referring to. Scroll to Our Approach.

  • 1
    Write '-1 for poorly designed accordion' in your review. Should be fine ;)
    – rk.
    Commented Jun 5, 2013 at 18:36

3 Answers 3


I have no research. :(

But in my experience, I've usually found that content in accordions can be improved simply by removing them from the accordion. It's much easier to scroll than to have to open/close content on the page. Users like to scan, not hunt-and-peck.

That said, I think your particular example is perhaps a valid use of an accordion. It appears to very deliberately want to walk through the 6 individual steps. And, as such, I actually don't mind it.

That said, content such as "We believe engineering is an artisanal trade" is a bit eye-rolling marketing-fluff, so I'm guessing people likely won't be reading much of it anyways.


Accordion menus are an established method of reducing the visible content on a page, only revealing the content a user is interested in when an accordion tab is activated. They are similar to tabs but are vertical in nature instead of horizontal. I am working on a responsive design right now where a set of tabs "convert" to accordion tabs when the page is reduced to a certain breakpoint.

There is a lot of content on the page you point to (~19 mobile screens!). The use of the accordion for such a small portion of the content is puzzling, especially when viewed on a mobile device. Being so long, I'm not sure much benefit is gained, other than preventing it from being 24 screens tall.

  • The bank I work at has a landing page that shows the example you're talking about. Tabs which reduce to accordions in mobile view. Check it out! Example Here
    – rubysoho
    Commented Jun 5, 2013 at 17:23

I can't serve some stats but may have an advice for you: Your site is currently 4.933 px height on load. If you expand all the accordions per default, your site will grow up to 5.557 Px which is just 12% more. Maybe you should think on giving up with the accordion at all and display all the text on load.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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