From early March, the new advice content on citizensadvice.org.uk is going to look a bit different.
We’re making technical changes so that the site works better for people using screen readers or who only use a keyboard. We’re also making design changes so that our advice is easier to read and understand for everyone, across all kinds of devices.
These designs have been tested with users and put through an independent accessibility assessment. The new content will comfortably meet AA standards as outlined in the W3C’s Web Content Accessibility Guidelines. They also start meeting some of the AAA requirements. We test with users, as well benchmarking against these guidelines, to make sure our digital content works for as many people in as many different situations as possible.
Here are some of things we’re changing and why.
We’re making the page ‘thinner’
The more characters per line of text, the more difficult it is to read. We’re shortening our lines so they meet the optimal 80 characters per line. In testing, the number of people who said that the information looks complicated went from 100% to 15%.
Compare this to our current layout for advice on universal credit.
Switching the side bar
Moving the navigation bar to the right-hand side of the page means that people’s eyes focus on the most important information first – the advice content, not a navigation panel.
On phones, the navigation will fit at the top of the page in a revealable content box, which proved more consistent with people’s expectations.
Wider line spacing, with more distinct headings
This makes it easier for people to understand things at a glance and navigate pages.
A clearer toolbar
Testing showed people were sometimes confused by our icons. ‘Email’ is a way to email the page to yourself or someone else – but some thought it was how to get in touch with an adviser. ‘England’ is the country that this advice is relevant to – but some thought it meant the language the advice is written in.
Changing these icons meant fewer users misinterpreted their functions.
Bigger, brighter buttons with larger ‘hit’ areas
It’s now easier to see and press buttons on the site. This makes a big difference for older users and people on mobile devices.
More accessible colours
We tested callout boxes over and over again. The solution – a bright border with a lighter filled area – was easy to read for all users. We’ve also added text so that screen readers and colour blind users can pick this up.
You can see more design changes in the Citizens Advice Style Sheet – a guide to all of our digital design put together by designers Eliot and Dom. It’s a great resource and a live document, so we’ll keep updating it as we learn more about how people respond to the evolving design.