Grid accordion
Aka: “Super maxi tabs”, “Expandable grid”
A tab that opens a full width content pane. It opens and closes on a click from a block element. It pushes the content below down. The content is embedded in the page which means it loads quickly, is available for SEO and keeps the user on the page.
Status tags
In-use, situational
Implementation
When or why to use this pattern
When you are presenting a set of choices to the user, but where it is likely to want to see one.
The user needs to be able to make a simple choice from the tab content - e.g., strong, recognisable icons, logos or simple text headings. The content of the tab needs to be fairly simple (short) and consistent with the other tabs – not requiring it’s own webpage, not requiring scrolling.
Categories at a glance.
When not to use this pattern
- Avoid using as a core UI pattern, best for browsing/discovery experiences
- Doesn’t pair well with a dense UI.
- If the content is dense or long or uneven between the tabs. The content shouldn’t require scrolling.
- If the amount of content in the tabs shouldn’t slow the loading or performance of the page.
Possible design enhancements
- make the interaction more visible, perhaps a darker arrow and the icon/word more like buttons
- add animation on tab open and close as well as the page scroll
- possibly add a close button inside the tab pane
- try to rebuild without javascript
How it works
Steps or sequence of actions numbered
- User is presented a set of choices as icons, text or a combination of the two
- The user clicks on an icon or word
- The page moves the row of icons/words to the top of the browser and pushes the content below the icon down and displays a page of content related to the icon or word
- To dismiss, the user needs to click on another icon/word to open another tab, or click on the same one to dismiss the tab
- Error reporting state
- the pattern currently requires javascript, so a non-js action is required (likely another html page with the tab content)
Notes:
- Because of the non-js version, you will need to maintain the content of the page in two locations, unless the framework it is used on can support content includes.
Principles
Actionable
Only use this pattern when the user will likely only want to select one of the pieces of content.
Flexible
Should work or an unknown number of icon/word elements, but the content for each should be consistent in size and density.
Discoverable
It should be obvious that clicking on an icon/word in the grid will open a tab or lead to additional content. It should also be obvious how to close the tab.
Key Components in vanilla this pattern uses
It’s mostly bespoke but actually shares more in common with the matrix pattern than the tab pattern
Recommendations
- Use something visual as the clickable item in the grid (if text is used then it should be short, bold or accompanied with an illustrative image)
- Use for small amount of content
Do:
Only use when:
- the user will only ever want to read one or two pieces of content
- it is highly advantageous from a marketing perspective to lead the user deeper into the content
Don’t
- use to show large amounts of content in the content pane
- have inconsistent amounts of content in each content pane
- use it shorten the page visually, hiding detailed, important content
- use it when users might click on two or more tabs in a session
This pattern in use - real product examples
Non-Canonincal examples
Expandable grid plugin
https://www.weavium.com/stacks/expandable-grid
CSS-only version
https://medium.com/@jahvi/css-only-accordion-grid-496137f6fc5a
Known issues
- JS only (in current implementation)
- Current design doesn’t make much distinction