The Importance of Usability and Accessibility in Design

Whether you’re a new, seasoned, or aspiring UX designer, there’s always more to learn about accessibility and usability in design.

You can have the most amazing product idea, but if your design excludes whole groups of people (which can happen more easily than you might think), the product isn’t living up to it’s full potential—and could even be doing harm.

So let’s break down what accessibility and usability are in the context of UX design. I’ll outline the importance of both of these in UX design as well as the subtle (yet crucial) differences between them.

Read to the end for a checklist of everything you need to ensure your designs are both usable and accessible in order to give your users the best experience possible. Here’s what I’ll cover:

1. Accessibility vs. usability
2. What is accessibility?
   • Technical considerations for accessibility
   • Physical considerations for accessibility
3. What is usability?
4. It’s all about research and testing
5. Conclusion

Let’s get started!

1. Accessibility vs. usability

Accessibility is not a synonym for usability; the two terms have distinct meanings. However, great usability includes great accessibility. If your users cannot access your website or app, is it really usable?

Let’s use a metaphor to better understand this. Remember those Corona commercials that urged viewers to find their beach? Indulge me for a second—imagine your beach.

Perhaps there’s lots of sunshine, crystal clear blue waters, powdery white sand. All of your friends are there and there’s a restaurant cooking up your favourite food.

But there’s a catch: There’s no way to get onto that beach.

A great beach that no one can access isn’t really a great beach at all—not if the purpose of seeking out the beach is to spend time on it!

Similarly, a usable website that nobody can access isn’t really usable. The story of the inaccessible beach illustrates why both usability and accessibility are important in web and app design.

Note: Affordances are a key component in good, usable, accessible UX design (they’re worth exploring!), as is skeuomorphism.

2. What is accessibility?

I’ll write about accessibility first for reasons you have just experienced: just like you can’t spend time on an inaccessible beach, an inaccessible website will have no users to use it!

Accessibility means enabling people with diverse abilities and methods of access to effectively use your interface. The aim of accessibility is to remove barriers for perceiving, understanding and navigating your interface and ensure that nobody is excluded. In the words of Tim Berners-Lee, the inventor of the Wold Wide Web:

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

In general, designers have to consider two different groups of users when aiming to make their interfaces accessible for all: people with disparate technical abilities and people with disparate physical abilities.

Technical considerations for accessibility

Understanding the technical abilities of your users entails considering what devices they are using, where they’ll be accessing your content and how technically literate they are. The following questions are great starting points:

• Will my users be able to access my site with different devices?
• What is the experience like when Wi-Fi is spotty?
• What if they are using an old operating system?

It’s sometimes difficult to remember that not everyone is as technically savvy as the UX/UI community. Some people still rock the flip phone. Yes, that means they don’t have a smartphone—which is totally cool! You just need to be wary of these types of situations.

In order to help this group of users, designers might consider the following tactics, most of which relate to the underlying code of your design:

1. Add alternative text to images, multimedia and other non-text objects. Sometimes users with low bandwidth will disable images and media, so it is important to give them another way to understand your content.
2. Cache static pages on your site. This could include caching small sections like the footer or navigation.
3. Consider a lightweight version of your interface that can be used with many different types of bandwidth.

While developers will likely be the ones executing these strategies, designers must nonetheless know they are potential solutions to complaints they may hear from users.

Physical considerations for accessibility

Not only do designers have to keep users’ technical limitations in mind, but they also have to consider users with disabilities including visual, auditory, physical, speech and neurological disabilities.

In this case, questions like the following should help get the ball rolling:

• Do my users have any physical limitations and what are they?
• Do they need assistive features?
• Are there alternative methods that we can use to deliver the same content?

Again, remember that you are designing for your users, not yourself. A little bit of research and empathy will go a long way.

Similarly to designing for those with technical limitations, designing for those with physical impairments includes tactics which deal with the underlying code of your interface. A few concrete ideas include:

1. Screen readers that read your content aloud.
2. Screen magnifiers that enlarge your content.
3. Voice recognition software for user generated content.

To sing the refrain again, knowing your users will determine what features of accessibility you should incorporate. The strategies above are just a starting point. For further reading, take a look at W3C’s page on managing web accessibility.

Accessibility falls under the larger umbrella of inclusive design, which is coming into the conversation more than ever with companies like Microsoft leading the way (check out Microsoft’s Inclusive Design Toolkit).

3. What is usability?

“I’ll make it very easy to use,” said most designers ever. Usability is something that designers know they should strive for, but why exactly should we be striving for usability in the first place?

Let’s look at an example.

Have you ever heard of Penny Juice? Of course you haven’t.

In their own words:

“Penny Juice is a 100% blended fruit juice concentrate that is specifically designed for childcare centers, preschools, Head Starts, etc. Penny Juice uses only the highest quality fruit juice products available.”

That sounds like a noble cause, right? Well, there’s one problem: their website is pure madness. I bet you can’t spend more than a minute on it without begging for mercy. If users can’t spend enough time on the site to actually buy something, then the business does not survive.

Many businesses these days rely on having a usable interface in order to keep the lights on. Quick example: all social media sites. If your site acts anything like Penny Juice’s, you’re in trouble.

So what does good usability look like? You’ll generally find that good usability goes unnoticed. In other words, a highly usable website means that your users are getting around so easily that they don’t even know how good they have it.

Five quality components to usability

To be more specific, I’d like to do a bit of “borrowing” from CareerFoundry’s excellent UX Design Course (shameless promotion intended). CareerFoundry defines 5 quality components to usability:

1. Learnability: Can a first-time user easily understand basic navigation?
2. Efficiency: How quickly can a user perform tasks?
3. Memorability : If users do not use the design for a while, will they be able to re-establish proficiency?
4. Errors: What are the errors that users make, how severe are they, and how can users rebound easily?
5. Satisfaction: To what degree is using the interface enjoyable for the user?

4. It’s all about research and testing

Taking these factors into consideration is easier said than done, and there isn’t a simple set of tools that will suddenly make your interface highly usable. However, generally, we can say:

1. Research, research, research your users. You need to get inside the head of your users and understand how they think and use things. Interviews and surveys are common methods.
2. Test, test, test your designs. You may think that your design is hot stuff, but your users may not. Usability tests and A/B testing will help evaluate your work.

While the tactics for developing great usability differ from those for developing great accessibility, both have the common thread of understanding users first and foremost.

If designers can get a firm grasp on what the users need, then delivering a great experience for them will be much more likely.

To learn more, check out our guide on how to conduct inclusive UX research.

5. Conclusion

So there you have it—some concrete ideas on how to ensure your interfaces are both usable and accessible. The broad takeaways that I want you to remember from this article include:

• Getting to know your users will guide how you implement usability and accessibility.
• Accessibility is a component of usability. A site that is highly usable will include best practices of accessibility.
• To achieve accessibility, you must first understand the technical and physical limitations of your users, and then determine how the underlying code of your design can empower them.
• To achieve usability, you need to research your users, make your site accessible and test your designs.

Accessibility and usability are indeed crucial aspects of the design process. Designers who keenly incorporate best practices of both will end up delighting their users.

Now go forth and make highly usable and highly accessible designs. And may you one day frolic on your beach!

If you’d like to know more about usability and accessibility, you’ll find these articles useful:

• 11 Usability heuristics every designer should know
• The importance of simplicity in UX design
• Design thinking vs. user-centered design: What’s the difference?
• Universal vs. inclusive design: Key differences

Finally, this list of design thinking books includes several about inclusive design that we highly recommend for anyone working is UX design!