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.
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
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
- 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.
Only use this pattern when the user will likely only want to select one of the pieces of content.
Should work or an unknown number of icon/word elements, but the content for each should be consistent in size and density.
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
- 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
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
- 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
Expandable grid plugin
- JS only (in current implementation)
- Current design doesn’t make much distinction