5 ways to achieve better accessibility in UI design

Accessibility in UI design leads to a better experience for all users, regardless of ability. Here are 5 ways to create more accessible user experiences

User-centered design is the philosophy that our web and mobile apps should be clear and coherent. But do clarity and coherency inherently mean accessibility in UI design is achieved?

According to the WHO, roughly 285 million people are visually impaired, between 110 million and 190 million adults have significant mobility difficulties and 360 million people worldwide have disabling hearing loss.

That’s a lot of people. As designers who want to deliver a user experience that people love, it’s important that we don’t neglect those who have different needs and requirements and this means designing in a way that’s accessible.

Don’t take our word for it either. The inventor of the world wide web, good ol’ Tim Berners-Lee says

“the power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect”

Together we’ll explore 5 ways to make your web and mobile apps accessible for users with disabilities and how prototyping with Justinmind’s UI design tool makes accessible web design more attainable.

Use color and contrast to create distinction

Of the 285 million visually impaired people in the world, a large chunk of those people will suffer from decreased sensitivity to certain colors and contrast – which is directly related to UI design.

Designing for a colorblind user or someone who wears prescription glasses navigates your designs is as important as designing for somebody who doesn’t have these disabilities – it’s the spirit of universal design.

First, try to make your web or app prototype distinguishable. Use smart color matching color to highlight information that is already visible, rather than using it to show something that would otherwise have been missed.

For example, highlight URLs and links to make their intended purpose more meaningful. Boldface and underlined links are more likely to be picked up on by users who skim read, or users with low vision.

Color blind people benefit from well-contrasting colors. Consider placing light elements against dark backgrounds and have fun with whitespace especially in minimalist websites.

Take Justinmind’s tool. The application has two types of UI layout. The classic UI has a dark-themed background with lighter elements on the surface which is best for users who have trouble differentiating colors, while the light theme has a cleaner appearance, allowing users to differentiate types of text and other UI elements better.

Contrast isn’t just about color though. Take the idea of big and small, full and empty or even Serif and Sans-Serif. These concepts are contrasts and playing around with them in your web UI can help make it more accessible.

Design is about creating magic within specific constraints.

Achieve accessible UI design with visual hierarchy

Contrast and color lead quite effortlessly to visual hierarchy. Think of your favorite websites out there. It’s a sure bet none of them have their content cramped together in one corner. Instead, content is methodically placed in a hierarchical way.

Visual hierarchy is paying close attention to how UI elements are positioned in your web design and creating a coherency between those respective elements to drive meaning. Using reliable UI Patterns such as card UI design could help you strike the right balance. 

Don’t crowd your screens. That’ll only scare your user. Note that people with impaired vision may require items on-screen to be magnified, so make your content scalable and look into the power of responsive typography.

Think too about the other typographic choices you’re making in your design process. Is that cursive, highfalutin’ serif that’s usually only found on 5-star restaurant menus really appropriate for this children’s educational website? Probably not.

Visual hierarchy implicates your call-to-action buttons. They should be clear and distinctive. And important information is best placed near eye level.

A focusing on color and placement of content in your web or mobile app UI early on can give you a better idea for what your app is going to turn out like, as well as saving yourself from reworks.

Prototyping with Justinmind’s tool allows you to integrate your fave design tools. You can import your designs from Sketch, giving you the freedom to add as much or as little color detail as needed to your designs. Additionally, many of our UI elements and icons have been made using SVG vector files, meaning you can easily change their color and scale them.

Form design is a classic example of design that calls for impeccable visual hierarchy. Check out our post on research survey examples and see them in action.

Use your interactive UI elements to drive meaning

When we wrote about prototyping for all ages – particularly children – using participatory design, we talked about affordances and feedback. These two ideas are extremely important when designing for younger people.

Feedback is good for any user, not just children. But explicit feedback is necessary for users who can’t interact with applications is a traditional manner.

Take older users. What’s obvious to a digital native will radically differ to what is obvious to someone over 50 because their mental models for operating tools are different. UX expert Jeff Johnson talks about UX for the over 50s more in depth.

Affordances are useful to guide people during a user experience, to tell them how something should be used. Sometimes our designs aren’t as obvious at first glance so affordances are a powerful way to boost accessibility. Just look at a mug. Most people will understand how to use it, thanks to the handle. But a social media network? Not so easy.

Interactive elements are one way in which you can deliver feedback and affordances to help improve the accessibility of your designs. They have to be clear and intentional. If there’s a particular gesture a user needs to use, tell them.

In Justinmind, you can use events on your UI elements to create gestures and cues. And, if your users are visually impaired you can embed HTML into your prototypes so that your users have the option to listen. A sector that has got the important of gestures down is games UI design! Learn more about it with our post. 

Adaptable design improves web accessibility

Making something accessible doesn’t involve reinventing the wheel. A small change in your design, however innocuous, can change the world of your user who is suffering. That’s where adaptability comes in.

Your users will have different needs. That’s a given. Those needs can be different depending on the device that they’re using. You can tell where we’re going with this.

By having a design that is customizable – say adjusting content depending on screen size – you’re giving the user more options and more access.

Responsive design is great for tackling those issues. Responsive design isn’t simply about designing for different screens. The design should respond to the user and their needs. A responsive layout will allow your design to scale at different screen sizes on a variety of devices.

Flexibility, according to Shaun Anderson, is the key to ensuring the your website is accessible to everyone.

Prototyping responsive design is actually pretty easy in Justinmind’s tool thanks to our latest update. Now you can create responsive designs with a click here and there – nothing else is required.

Adaptability isn’t confined to browser size either. Desktop applications can be more accessible than apps that require an internet connection, for example.

Justinmind doesn’t require an internet connection, just download and you’re good to go. There’s nothing worse than getting struck with an idea but your internet is broken and you can’t whip up a prototype.

Web accessibility design and user testing

Your web UI might look accessible. It might feel accessible. But is it? Until you get real people in on the game, you won’t truly know. Enter user testing.

User testing has many benefits. Crucially, you’ll be able to understand the range of functional limitations of your design and then provide solutions to those limitations.

Here is where you can really make your design more accessible because you have the opportunity to explore, investigate and understand how real people deal with your design.

Maybe the position you chose to put a link to your support section was perfect in the prototyping stage but when it came to the real McCoy, your users were lost and couldn’t find it easily.  

Justinmind is also integrated with your fave user testing tools from UserZoom to UserTesting all the way to Validately which just makes accessibility in UI design all that more easier.

Conclusion

Accessibility affects us all and mobile apps and websites really are better when everyone’s needs are taken into account. With the tips above, you’ll be on your way to prototyping and designing user experiences that are much more inclusive. Want something different? Check out our post and discover skeuomorphic design.