steven-borthwick
commented
6 years ago Screenshot
Mobile view
What problem does this design solve?
Logically groups and orders the information agents need to answer enquiries. Initially tried a one-page design but it was confusing for agents and required a lot of scrolling.
Used card sorting to separate and order the information based on type and frequency of use. So the first tab is what the agent uses to answer most enquiries and is displayed by default.
Which service are you researching this design on? Support for Check your State Pension
How have you approached the design? Started with the pattern on GOV.UK but users didn't always notice them or understand they were tabs. Added a more obvious background to the unfocused states.
What have you learned from research? For complex enquiries, users flick between the tabs a lot. So need to re-consider how the information is structured. A problem with tabs is labeling, agents get used to them but it can be difficult to make their purpose obvious.
Have you tested this for accessibility? Yes, detail to follow.
abbott567
HelenOsg
jonhurrell
Screenshot
What problem does this design solve? There was too much information on one page. Agents needed a way to access the information but didn't necessarily need it all at the same time.
Which service are you researching this design on? Bereavement Payment Service
How have you approached the design? They were influenced heavily by the tabs on the GOVUK bank holidays page. The main difference being the hover colour; as the contrast ratio on the bank holiday tabs fails WCAG-AA. So for accessibility reasons, I lightened the grey on the hover colour to meet AA.
The tabs have been designed and built with accessibility in mind. The Javascript applies aria-hidden attributes to each content panel to let screen readers know which content is visible. It also adds aria-selected to the active tab.
The tabs work as a progressive enhancement. If Javascript is turned off, all of the content is visible in the page in a linear order, and instead of tabs you just get a list of regular links, which are anchor-linked to the sections using their ids.
What have you learned from research? The design started out as multiple pages and links. But agents had issues reorientating themselves when they clicked back and forth as they always ended up at the top of the page once it loaded. The introduction of tabs allowed them to flick between the information quickly without losing their place.
Have you tested this for accessibility? Yes. The tabs have been tested by the accessibility compliance team and with assistive tech users. It has been tested using JAWS, Dragon, ZoomText and Read&Write Gold.
Link to code https://dwp-design-examples.herokuapp.com/example/tabs