Tabs

[StephenHill-NHSBSA]

What

The tabs component lets users navigate between related sections of content, displaying one section at a time.

Why

Tabs can be a helpful way of letting users quickly switch between related information if:

• your content can be usefully separated into clearly labelled sections
• the first section is more relevant than the others for most users
• users will not need to view all the sections at once Tabs can work well for people who use a service regularly, for example, users of a caseworking system. Their need to perform tasks quickly may be greater than their need for simplicity of first-time use.

Anything else

Government component (currently experimental): https://design-system.service.gov.uk/components/tabs/

[davidhunter08]

Thanks @StephenHill-NHSBSA, do you have any examples of tabs being used in an NHS service?

[monsterlimo]

https://moj-design-system.herokuapp.com/components/sub-navigation

We've used the MOJ sub navigation within Cervical Screening. We've added some extra bits to help users as they are completing tasks within the tabs so giving them a feedback on the number left to complete was useful to our users. Our users are power users completing lots of the same tasks in a list so this number was important to them

[danjohnstonUX]

On the Summary Care Record redesign we used tabs in a number of ways.

Our users need to be able to search for a patient or person in a number of ways, either by their NHS Number, some basic details or some advanced details:

We tested a number of designs but landed on the following as users found the grey active/selected tab worked well with the grey page background colour, and that the white non-active/non-selected tabs were obvious as being selectable.

We implement this same style once a user has found the relevant patient or person:

Because our patient banner is blue, we found that using blue within the tab design caused the tabs to become lost in the page and users therefore struggled to see them, even when complimentary colours such as warm yellow were used to help differentiate the active tab.

We've tested the implemented designs intensively (as a subsection of the various parts of our service) over the past 18 months and have always found that users both use and understand them well.

Some of our initial ideas that were tested can be found at http://scra-redesign.herokuapp.com/v1/start but the overwhelming feedback from users was that the design we opted for "felt more like tabs" than any of the others.

[StephenHill-NHSBSA]

On the Summary Care Record redesign we used tabs in a number of ways.

Our users need to be able to search for a patient or person in a number of ways, either by their NHS Number, some basic details or some advanced details:

We tested a number of designs but landed on the following as users found the grey active/selected tab worked well with the grey page background colour, and that the white non-active/non-selected tabs were obvious as being selectable.

We implement this same style once a user has found the relevant patient or person:

Because our patient banner is blue, we found that using blue within the tab design caused the tabs to become lost in the page and users therefore struggled to see them, even when complimentary colours such as warm yellow were used to help differentiate the active tab.

We've tested the implemented designs intensively (as a subsection of the various parts of our service) over the past 18 months and have always found that users both use and understand them well.

Some of our initial ideas that were tested can be found at http://scra-redesign.herokuapp.com/v1/start but the overwhelming feedback from users was that the design we opted for "felt more like tabs" than any of the others.

Do you have a username and password for your prototype @danjohnstonUX - wouldn't mind taking a look at the implementation. Thanks.

[chrimesdev]

The Image gallery component that is currently being researched and prototyped uses a form of Tabs

https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/279

[baracoffice]

Tabs are used regularly in Dashboards in Data Services. These are generated using Tableau, but there is likely to be a push to explore making them in house using web tech, and not embedded Tableau or MSFT BI elements. This is likely to be another use case for Tabs.

[benturner1976]

We have been looking to help users find content easily on a Profile page that can be very variable in length. We tried a long scrolling page with clear headers. We also tried in-page anchor links. Both these options were not ideal for our users who gave negative feedback that they had to scroll too much and that we were using valuable page space inefficiently. Users also missed some content they were looking on the longer pages.

We have tried using @andymantells tabs #750 (https://github.com/nhsuk/nhsuk-frontend/pull/750) to good effect in our Care Identity Management prototypes. The content has been easy to find for users and gives the added benefit of not having to load data heavy calls for content onto the page unless it is needed by the user.

Link to latest prototype we tested https://urs2-prototype.herokuapp.com/v10/find-user/profile

[henocookie]

Found an interesting article that details attempts by Open UI to "get a native, accessible element into HTML": https://daverupert.com/2021/10/native-html-tabs/ 👀

[joe-hutchinson]

NHS Jobs service has used tabs allowing employer users to view various details about the vacancies and make changes. A DWP pattern was used due to the way on mobile the content remains in tabs rather than having all of the content become visible on a single page.

[taylor-la]

On the Apply for Care ID service, we've been using tabs to group applications into different statuses for an admin dashboard. We've reused the component from Care Identity Management (CIM) mentioned by benturner1976

In testing, users have understood which applications require their attention and are presented with enough detail to action. Users have fed back that they would like to see how many applications are in each tab, so that they don't have to click into it only to find nothing there. We're also hoping to test out whether highlighting which tabs have 'new' applications would be beneficial.

[sarawilcox]

We've agreed to publish tab component guidance, based on GOV.UK and marked experimental, to enable people to test it and comment. Working on this for a Feb 2023 release.

[sarawilcox]

The NHS tabs component has a slight improvement on the GOV version. As you hover over the different rows the row background colour changes to a light grey. Useful for visually separating the row from the others when you are scanning down the list of rows, especially if you have a table with a lot of rows.

[sarawilcox]

Published: https://service-manual.nhs.uk/design-system/components/tabs

[anandamaryon1]

A recent Accessibility audit of the Design System to WCAG 2.2 has raised the following point:

Advisory: the code relating to tabs is correct. However, developers may benefit from understanding that key pieces of information should be included that provide context for screen reader users. Users should be able to focus and navigate the tab options using both tab and arrow keys. Each tab control should mention it is part of a group and which option it is, e.g., "tab 2 of 3". Finally, the tab option should only be activated on manual interaction when the user presses the Enter key. This information should help developers create accessible tab controls.

Impact on users
Non-sighted users, in particular, have difficulty with inaccessible tab controls. The user must be able to recognise the control and have an idea of how to operate it. If they do not, then they are unlikely to appreciate that it is operable and exposes content that was not previously visible. Additionally, keyboard-only controls and predictable operation can be an issue with inaccessible controls.

We will be investigating adding guidance to cover this in our upcoming work: https://github.com/nhsuk/nhsuk-service-manual/issues/1981. Update: released in version 6.5.0

[anandamaryon1]

We've had feedback that this sentence is confusing:

Do not use the tabs component if the total amount of content the tabs contain will make the page slow to load. For this reason, do not use the tabs component as a form of page navigation.

as tabs are often used for navigation, and on mobile, the component shows as a list of links.

We'll look to clear this up when we work on more navigation components and patterns, such as: https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/259