In the new WMS, the accordion feature has been replaced with an updated version called details.
Both features allow you to hide content by putting it in a collapsible container. This can make text heavy pages less daunting and decrease the need to scroll, allowing users to more easily scan and choose what to read.
Knowing when to use (or avoid) this powerful tool will help you make your content more user-friendly and easier to navigate.
When to use details
- If only some users need the content
- There's a moderate amount of content under each heading
- Users know what they're looking for
When not to use details
- If most users will benefit from the content
- There's a small amount of content under each heading
- There's a lot of content under each heading
While details can be a useful tool to make a large amount of text more manageable, that text still has to be concise and聽broken up into digestible chunks.
Differences between details and accordions
While both the old and new version of this feature serve a similar purpose, details has a few functional and design improvements.
Example of accordions in the old WMS
Example of details in the new WMS
Goodbye subheadings
Although you can technically put headings under details, you shouldn't,聽because:
- They'll look strange, since headings are larger than the details title
- They won't be picked up by screen readers, table of contents, and search engines
If there's enough content to warrant subheadings, you can:
- Use another formatting feature, like聽, where you can further break up the content with subheadings
- Make each heading its own detail box (if that makes sense for your content)
Lighter and more intuitive
The design of details is visually lighter and less obtrusive than accordions, making this feature easier to integrate in your page layouts.
The red also makes details more obviously聽interactive鈥攊n our testing, users didn't always realize the old accordions were clickable, and adding colour made a huge difference in that perception.