Skip to main content Jisc logo

User experience and design

  • About
  • Key considerations
  • Get started
  • Foundations
  • Guidance
    • Principles
    • Building your layout
    • Design patterns
    • Jisc style
    • User interaction
    • Technical considerations
    • Making resources accessible
  • Resources
  • Assets
  • User experience and design
  • Guidance
  • Design patterns
  • Organising content

Organising content

Using tabs and show/hides

Contents

  • Tabs
  • Show/hide

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
Useful links
  • Cookies
  • Privacy and your data
Contact
  • user.experience@jisc.ac.uk
Archive
  • Looking for the old pattern library?
Jisc logo

We’re a membership organisation, providing digital solutions for UK education and research

jisc.ac.uk

Areas
  • Connectivity
  • Cyber security
  • Cloud
  • Data and analytics
  • Libraries and research
  • Student experience
  • Advice and guidance
Explore
  • Guides
  • Training
  • Consultancy
  • Events
  • R&D