Menu
Visual design
Users in control
Our users need to feel as though their in the driving seat with everything at their fingertips. As part of this, our web pages, apps and emails must flex and adapt in order to give users the ability to view our designs in a way which best suits them.
UX Owner: Emma Wiltshire
Creative Owner: Aimee Tilling
In CTRL…
When it comes to our designs it’s not a one size fits all situation. Users need the ability to view our designs at a range of different scales and orientations so we must therefore be mindful of the following when designing:
Allow users to zoom
No, not meetings, but scaling up your designs! Even though we have measures in place to make our designs as legible as possible at 100% zoom, some users will still need the option to zoom in further in order to improve their visibility and readability. Giving users the ability to zoom in and ensuring designs flex to suit that scale provides them with the control they need and a better experience for all.
Reflow content for up to 400% zooming without horizontal scrolling
The importance of allowing users to zoom is outlined above. The designs must flex to compensate this requirement. The web page design should re-flow for up to 400% zoom, meaning it is presented in one column with no need for a horizontal scroll. One directional scrolling on zoom results in much less effort required from the user to view the designs and ensures no content is hidden off screen.
Diagram coming soon
See the WCAG guidelines on reflow for more guidance
Zooming in on images
Images are more likely to become pixelated and illegible the more they are scaled up. As best practice we should avoid using text in images if the text can be built into the page.
In the instance of illustrations, data charts or icons we should be using SVGs which are Scalable Vector Graphics. The clue is in the name, these are scalable and will therefore remain clear even at larger scales.
Be mindful when using pngs or jpgs as these are pixel based and may become less clear as users zoom in. If the image in question is informative then test it out at larger scales to see whether it’s still legible.
Provide layouts for portrait and landscape orientations
Our designs mustn’t be restricted to one orientation (portrait or landscape). Some users may have the device fixed in place with a set orientation like the arm of a wheelchair for example. Designs should therefore should flex to suit both orientations giving all users the ability to view our designs at their preferred or default orientation.
Consider this when designing, it might be of use to show how the designs would work at both portrait and landscape orientations and speak with the devs for advice on how best to implement this.
See the WCAG guidelines on orientation for more guidance