Tabs
Tabs are used when there is limited visual space and content needs to be separated into sections. Tabs shows the primary content by default and alternative versions are hidden. This gives the user control over content that they want to engage with. This reduces the cognitive load and perceived size of the page.
How to use
- Used when content needs to be separated into sections and accessed via a single content area using a flat navigation structure that does not refresh the page when selected
- Positioned as the last item on the main body of the page (white background)
- Used on content heavy pages
Example: jisc.ac.uk contact page
Considerations
- Tab titles need to be relatively short
- Content of each tab should have a similar structure and be of a similar size
- Content of each tab should not reference
Show/hide
The user wants to focus on the task at hand with as few distractions as possible while still being able to access supporting information if necessary. Show/hide is used when there is limited visual space and you wish to hide a piece of secondary content (such as a short case study within a report) within a toggleable block.
How to use
- Provides toggleable block of secondary content that is hidden by default
- Positioned within the main body of the page (white background)
- Used on content heavy pages
Example: jisc.ac.uk contact page
Considerations
- The link text / trigger should be descriptive of the content it contains
- Multiple show/hides can be stacked