Designing for inclusivity: How and why to get started

4 min read
Allison Shaw
  •  Nov 5, 2018
Link copied to clipboard

A product designer’s job is to make people’s lives easier. We are trained to study the people we design for, root out problems, and invent new and innovative solutions.

At Zendesk, my fellow designers and I are constantly talking with customers, understanding the way they use our products, designing improvements large and small—and then validating with our customers to make sure we actually succeeded. And if we didn’t hit the nail on the head, we do it all over again.

“Inclusivity in design will help us build a smarter future—for everyone.”

Twitter Logo

It’s human nature to assume that our experiences are the most common experiences, and that everyone is starting from the same place we are. Naturally, we’re all a little bit biased towards ourselves.

User research combats this bias at the workflow level, but I’ve found that it often falls short in helping us overcome the biases we have around the other ways we experience products. Have you ever done user testing with someone who is blind? Or has only one hand? I don’t think many of us have.

You already use features that help products be more inclusive.

Accessibility is a scary word in product development. It’s such long word that it needs an abbreviation: a11y. Accessibility features are often considered “nice-to-haves,” if they’re even considered at all. I’ve been on teams that believed accessibility was an unnecessary burden that siphoned resources away from feature building. And the connotations people have about those who need accessibility features aren’t much better. Most people think about wheelchairs, seeing eye dogs, and folks who have observable markers of a disability.

My sister Devon has a rare set of disabilities, so I’ve been dealing with accessibility issues for a long time

Just the word accessibility casts an aura of “otherness” on people who use accessibility features. Us normal people over here, and those people over there who need special stuff in order to live. Us versus them.

So, I prefer to use the word “inclusivity” in place of accessibility. In the context of product design, inclusivity means making your software the most usable by the widest range of people, including—but not limited to—people with disabilities.

A disability is a physical or mental condition that limits a person’s movements, senses, or activities. Lots of people have disabilities. All ages, races, and classes. Not all disabilities are visible or what we’ve been taught disabilities look like.

Take aging. Aging itself isn’t a disability, but the side effects of aging do cause disabilities: vision gets worse. Bad hips, bad knees, and bad backs can make us slower on our feet or even wheelchair bound. Memory gets worse. When we get older, we’re more easily fatigued, which can limit our movement and our cognitive abilities. And that’s just the normal stuff!

At some point, we’re all going to need accessible technologyTwitter Logo, like the big text setting on our phones.

“We are all only temporarily abled.”

Twitter Logo

But perhaps old age still seems like something that will never happen to you. So think about this:

Do you wear glasses? Have you ever gotten sick and lost your voice? Do you use hands-free mode while you’re driving? Have you ever held a baby or bag of groceries while trying to use your phone?

Isn’t it safe to say that we are all only temporarily abled?

No matter who your target audience is, people with accessibility needs are already using your products. And the older your audience, the greater that number is.

Remotes, sidewalk cutouts, and OXO’s entire product line are accessibility devices

Remember, some of the things we use every day were originally designed for accessibility: remote controls, sidewalk cutouts, and OXO’s entire product line. OXO’s brand promise is that their kitchen tools are easier for people with arthritis to use—but they’re easier to use for everyone, which is why the company is so successful.

So how can you keep your software relevant to all people, whether they use a screen reader, big text, or just have a janky internet connection?

Design for clarity

The best piece of advice I’ve ever gotten is this: Your audience spends most of their time NOT using your product.Twitter Logo They spend most of their time using other products. (Well, unless you’re Facebook or Google).

“Don’t break conventions if you don’t have to.”

Twitter Logo

Practically speaking, this means don’t be novel for the sake of being novel. Don’t break conventions if you don’t have to. Following established pattern is how you make a product intuitive, how you make people feel like they already know how to use your product without ever reading instructions.

Messaging apps look the same for a reason: to help you use them faster and switching between them easier

Predictability and clarity lower the cognitive load for your users, and helps people perceive your product to be simple and easy to use.

Design for invisibility

Unless you primarily design for voice interfaces like Alexa, Siri, or Google Assistant, you might be wondering what I’m talking about.

I’m talking about keyboard navigation and control. It’s not just for people using screen readers. Chances are, you use keyboard commands every day without even thinking about it. Perhaps you `tab` to get through form fields, or `cmd+tab` to switch between applications. Maybe you key `c` to start composing a new email in Gmail. Are you a designer? Do you key `r` in Sketch to make a rectangle? What about `t` for text? `cmd+s` is used in every native application to save work in progress. Even when you’re messaging, you probably use `enter` to send.

These are power user moves, and they rely on accessibility patterns.

If you use an Apple Magic Mouse, you might find yourself in a situation where the mouse has lost its magic, and you have to charge it in the middle of your work day. It could be time for a coffee break, or it could be time to break out the keyboard commands.

Oh, Apple. Why, oh why?

Give time and attention to designing and developing a logical keyboard navigation paradigm. At Zendesk, we’re fans of the “tab to, cursor through” tactic, which allows users to easily tab between major components, while being able to skip children if they wish (for example, a table).

Great keyboard control will make you a hero to people with accessibility needs AND power users alike.

Design for color

Perceiving color is one of humankind’s super powers. As designers, it can be hard to understand that not everyone sees colors in the same way—or even at all.

So, don’t use color alone as the only means of communicating something to your users.

Take links on websites. Who among us hasn’t designed a site whose links were simply a different color than the body text? I know I have. Or perhaps you communicated form validation just by changing the colors of the text and the outlines?

Without visual cues besides color, a color blind user would have a very difficult time deciphering the difference between these validation states. Even links are difficult to pick out.

Using color alone to distinguish one thing from another thing is problematic for people who have difficulty perceiving color.

But you can easily address this by adding labels, icons, explanations, or otherwise changing visual presentation.

Adding underlines to links and icons with validation text to forms makes this experience better for everyone, not just people with difficulty perceiving color

You can add non-color signals to your links, like carats at the end. You can also change the type weight, style, or size. Or you can just underline them. Underlining doesn’t have to be like the underlining of old; Medium has a great article on how they perfected their link underlines using a background gradient.

The other thing you can do is make sure your content is actually easy to read. You can do this by giving your content good color contrast. The color contrast rule is pretty often ignored by designers aspiring to “minimalism.” And when they see how dark text has to be to pass this ratio, they balk and argue that it goes against the vibe they want their product to have, or that it limits their creativity.

But remember: As product designers, we’re not designing for ourselves—we’re designing for our customers. If people can’t see your content, they can’t read it. And if they can’t read it, they’re probably not going to give you money.

There are millions and millions of accessible color pairings, and I personally enjoy the challenge of designing within the constraint. It’s all the more rewarding to know that those solutions aren’t just on brand, they also make the product easier to use for more people.

“We’re not designing for ourselves—we’re designing for our customers.”

Twitter Logo

Just the tip of the iceberg

The tips above are just a few things you can start designing for right now. Accessible and inclusive design is fun and challenging, and runs much deeper than what I’ve covered here. Books like Accessibility for Everyone and Kat Holmes’ work at Microsoft are great resources.

By including inclusivity within the foundations of your product, you can avoid situations like this where accessibility was an afterthought…

And instead delight your users with integrated and delightful patterns, like this guide path for the blind that is literally built into the streets in Copenhagen:

That’s how inclusivity in design will help us build a smarter future—for everyone. Go forth and be an ally.

Read more posts on designing for inclusivity

Collaborate in real time on a digital whiteboard