Making your UI accessible with Universal Design

From keyboard web-browsing to voice UI, Universal Design is making web experiences all-inclusive – here’s your design guide

In honor of World Usability Day tomorrow, we’re talking Universal Design. Making digital platforms accessible, usable and inclusive to everyone, regardless of their ability, age, education or language, is becoming increasingly important. Why? Because inclusive websites make for a more complete user experience and engage more visitors.

But not only that. Designing inclusively can help convert visitors into users. The more visitors you target, the greater the possibility of a visitor converting.

Sounds great right? So let’s get stuck in. Designing with Universal Design principles from early on, say at the wireframing stage, will ensure that your website or application really is all-inclusive.

This post will help you get started designing accessible, inclusive web pages. We’ll explore the principles of Universal Design, their impact on the UI design process and how we can use them to build accessible user interfaces.

What is Universal Design?

Universal Design refers to the concept of creating buildings, products and spaces inclusively. This means that everyone, including the elderly and disabled, are able to access them.

Ronald Mace, architect and polio victim, coined the term ‘Universal Design’ in the 1970s. Having graduated in 1966 with a degree in architecture, he decided to focus on building accessible housing, experimenting with the idea of a ‘design for all’. Nowadays, Universal Design is used not only for equal access building construction, but also to build inclusive websites and applications.

The inclusion principle in UX design

User experience designers can have a real impact on the overall experience by using universal or inclusive design. Why? Because they are providing world-wide access for users.

The inclusion principle encourages designers to ‘honor the uniqueness of people’s different talents, beliefs and ways of living’. When designers aren’t limited to the concept of one user group, they can embrace the similarities and differences of different users in order to design interfaces that all users can enjoy in a place of similarity and common ground.

“To create resources that can be used by the widest spectrum of potential visitors rather than an idealized “average,” web page designers should apply “universal design” principles.” Washington.edu

What are the Universal Design principles?

1. Equitable use: the web or mobile interface is usable and marketable to different kinds of users.

Example: a website that provides screen reader technology for the blind. Remember, different users access the web through different technologies.

2. Flexibility in use: the UI accommodates a range of individual preferences and abilities.

Example: allowing users to either listen to or read (with subtitles) video.

3. Simple and intuitive use: the UI is instinctive and easy to use, regardless of the user’s individual experience.

Example: use of bold, contrasting colors in Call to Action buttons that stand out against the UI’s background color – and micro-interactions!

4. Perceptible information: the UI communicates all the necessary information to the user.

Example: use tooltips to display additional information.

5. Tolerance for error: the UI minimizes hazards and conflicts after unintended actions by the user.

Example: error messages in an input form.

6. Low physical effort: the UI can be used easily without tiring the user

Example: using uncluttered visual elements and design standards, as well as parallax scroll bars that keep menus visible so users don’t have to scroll up to access them.

7. Size and space for approach and use: UI elements are appropriately sized and spaced for approach, reach and manipulation for all users

Example: flexible web design, such as responsive web design or adaptive web design

How to build your website using universal design principles

Perform UX research

Folding universal design guidelines into a web design will encourage engagement from web visitors. But in order to design for all users, UX designers must start by considering the needs of all end users by performing usability testing with real users at the start of each project. Only then can they ensure that on-screen elements engage users and give them the best possible experience.

Create a web or mobile wireframe

Once you’ve completed a round of UX research, you should have some user goals defined. These will help you create the skeleton of your website or application. Start to create a paper prototype or wireframe out the high-level plan of your site’s information architecture and navigation flow – don’t forget about your universal design principles! Simple, intuitive, adaptive.

Try using a low to high-fidelity wireframe tool, like Justinmind, so that you can build up your design without having to switch tools

Build up to a mid to high-fidelity prototype

Next, create a mid to high-fidelity prototype to flesh out your design. Here, you can start to build out the visual and interactive elements.

With Justinmind, you can drag and drop UI elements to the canvas and then add events to make them interactive. Download the prototyping tool now to try it out. If you want to see things from the user’s perspective, click the Simulate button and you’ll be able to interact with your design in real-time.

Do user testing

“Accessibility is part of UX (it isn’t a swear word)” Léonie Watson

Testing your design assumptions is potentially the most important part of the UX process – especially when designing for different types of users. When testing with users, make sure you have a range of users so as to validate your prototype effectively. Observe how each user interacts with your interface and note any errors or difficulties they have

Explore Justinmind’s prototyping tool with this great tutorial on how to prototype a grocery app in 7 easy steps. 

Iterate on previous design assumptions

Iterating on your prototype – it’s time to improve your design with your users’ feedback. This step is essential for employing Universal Design as it will ensure that your web or mobile product reaches the broadest range of users, and get those conversion rates up!

Universal Design: the takeaway

2018 will be yet another opportunity for web designers to shape the experiences of users. In order to create meaningful experiences for all users, we must design inclusively and look to our users in order to do so.

Our question to you: what might the world look like if the design were more inclusive?