Accordion vs. Open Content Display — Mobile UX Patterns

A recurring design tension in service and product pages: should secondary content (candidate criteria, benefits, testimonials) be collapsed into accordions or displayed as permanently open sections? This debate surfaced explicitly during the ^[1] service variant page review and offers a reusable decision framework.

The Core Tension

Client preference (open sections): Stakeholders often want key content — ideal candidate descriptions, treatment benefits, testimonials — permanently visible, citing inspiration from product-focused sites like Glossier. The reasoning is that important content shouldn't be hidden behind a click.

Design team preference (accordions): Accordions reduce page length, preserve mobile screen real estate, and guide users to self-select the content they care about. The concern with open sections is that they create long, scroll-heavy pages that perform poorly on mobile.

Both positions have merit. The disagreement is usually about who the page is for and how users actually behave — which makes it a data question, not a taste question.

Arguments for Accordions

• Mobile screen economy. On small screens, open sections stack vertically and force excessive scrolling. Accordions compress the page to a scannable list of topics.
• User attention is short. Average time on a webpage is approximately 7 seconds. Accordion headers act as a scannable table of contents, letting users jump to what they care about rather than reading everything.
• Guided exploration. A user who clicks "Ideal Candidate" has self-selected interest — they're more engaged than a passive scroller who drifts past the same content.
• Product vs. service context matters. Open-section patterns (e.g., Glossier) are optimized for physical products with fixed attributes. Service pages have more variable content and longer explanations, making open sections more likely to overwhelm.

Arguments for Open Sections

• Visibility without friction. Content that requires a click may never be seen. For high-value signals (social proof, candidate fit), the extra click is a conversion barrier.
• Stakeholder familiarity. Clients often have a concrete reference site in mind. Dismissing the pattern entirely can erode trust, even when the analogy is imperfect.

Resolution Framework

When this debate arises, avoid resolving it through opinion. Instead:

1. Check existing analytics. Heat maps (e.g., Microsoft Clarity) and scroll-depth data reveal whether users are actually reaching the contested sections. If they're not scrolling there anyway, open vs. accordion is moot.
2. Check click data on existing accordions. If current accordions have low open rates, that's evidence users aren't engaging with that content regardless of format — and open sections won't fix it.
3. Segment by device. If the majority of traffic is mobile, the mobile UX argument for accordions carries more weight. Pull the device breakdown before the next conversation.
4. Propose a hybrid. Some sections can default open (e.g., the single most important one) while others remain collapsed. This partially satisfies the client's visibility concern without creating an unmanageable page length.
5. Build, measure, iterate. If data is inconclusive, implement one pattern, instrument it, and revisit after a defined period.

Design Consistency Note

When a page mixes accordion patterns — e.g., accordions in a pricing section styled differently from accordions in a content section — the visual inconsistency becomes its own problem. Accordion icons ("+", chevrons, etc.) and their alignment should be unified across the page regardless of which content strategy wins. See the LaMarie variant page review for a concrete example of mismatched accordion icon styles flagged during review.

Practical Guardrails

• Don't default multiple sections open simultaneously. Having more than one section expanded on page load is not a standard web pattern and creates the same scroll problem as open sections.
• Content readiness gates design. If testimonials or candidate descriptions don't exist yet, designing open sections around them creates visibly empty page areas. Accordion placeholders are easier to hide until content is ready.
• Separate "above the fold" from "below the fold" logic. The top of a service page (hero, CTA, key summary) should always be optimized for conversion. The accordion-vs-open debate typically applies to secondary content further down the page — content that serves users who are already interested and researching.

Client Examples

• ^[2]: Client (Lisa) requested permanently open sections for Ideal Candidate, Benefits, and Testimonials, modeled on Glossier's product pages. Team argued for accordions on mobile UX grounds. Resolved by deferring to heat map and analytics data before finalizing the pattern.

Related

• ^[3]
• ^[4]