Monica Feng designed this original illustration for this article.

I wrote this article to help designers, product owners, product managers, UXers, developers, and anyone else to craft more inclusive product experiences.

It’s normal to approach design through the lens of our own perspective, believing our experiences reflect those of everyone else. This natural bias in our human nature can work against us when solving design problems since we’re only solving for people who are like us.

The challenge in design is to create experiences that are adaptable, flexible, scalable, and most importantly, usable by as many people as possible. Our goal as designers is to be advocates for improving the human experiences of everyone, not a measly few.

In this piece, I’ll share a few ways we can move in the direction of building more inclusive, accessible, and accepting digital products.

1. Designing with color

As designers, color is our world. Designing an inclusive product doesn’t mean avoiding the use of color or resorting to lackluster palettes. It does, however, have guidelines that enable people with visual impairments or color deficiencies to use our products the same as a non-visually-impaired person can.

Here are a few rules of thumb to follow:

• There must be a color contrast ratio of at least 4.5:1 between all text and background.

• Do not rely on color alone to convey information. For example, an error state shouldn’t only be displayed with a red outline, use a warning icon and descriptive text as well to alert that as issue has occurred.

To ensure we’re meeting color standards, download the Stark plugin for Figma, XD, or Sketch (If you’re not using these, use Colorable to check contrast ratios). Stark makes it easy to ensure designs are accessible by simulating color blindness, checking contrast, and providing smart color suggestions.

• The Material palette generator can be used to generate a palette for any color you input. Hue, chroma, and lightness are adjusted by an algorithm to create palettes that meet accessibility standards and are aesthetically pleasing. — Material Color System Guidelines

Instead of creating a palette from scratch and ensuring values are accessible, consider using Material’s Palette Generator (located near the bottom of the page). The colors generated are beautiful and accessible — win, win!

2. WCAG & ADA

Web Content Accessibility Guidelines (WCAG) and the Americans with Disabilities Act (ADA) are two standards that make electronic and information technology accessible to people with disabilities (e.g., color blindness, vision disabilities, hearing disabilities).

ADA requires that businesses, state and local governments, and nonprofit services providers be accommodating to their disabled users so they can access the same services as non-disabled visitors. WCAG is not the law but simply a collection of guidelines to follow to achieve accessible web content.

Currently, as of October 2020, there are no explicit web accessibility laws for private entities in the United States. In other words, there is no exact answer as to what is required to be ADA compliant.

The ADA encourages the self-regulation of accessibility standards, and the Department of Justice is currently developing regulations to provide specific guidance (nothing is expected in 2020 or 2021). Until then, the best practice is to develop our website in accordance with WCAG 2.0 AA.

We follow these guidelines because designing a product is no different from building a public establishment like a library, school, or bakery — it needs to be inclusive and accessible to all.

And although ADA standards don’t yet exist, companies can still find themselves under the hammer. Just ask Domino’s — they were sued by a blind man who could not access their website because it wasn’t accessible to him. Don’t be like Domino’s, design for accessibility.

So what are the standards? Here are a few — see more at Accessible.org:

• Keyboard only (2.1.1): All content and functions on a website must be accessible by keyboard only (i.e. no mouse).

• Alt text (1.1.1): All images and non-text content needs alt text (there are exceptions)

• Images of text (1.4.5): Do not use images of text unless necessary (e.g. logo).

• Live captions (1.2.4): Any live video presentations must have closed captions.

• Text resize (1.4.4): Text must be able to be resized up to 200% without negatively affecting the ability to read content or use functions.

• Focus order (2.4.3): Users must be able to navigate through a website in a logical, sequential order that preserves meaning.

3. Diversity in graphics

Monica Feng designed this original illustration for this article.

One piece of low hanging fruit in the conversation on inclusive design is the addition of diverse graphics. Whether it’s an existing illustration style or one being created from scratch, considering how we create graphics and illustrations that more people identify with is a big win.

As Meg Robichaud said in You Can’t Just Draw Purple People and Call it Diversity: “However you decide to illustrate people, they quickly become both representative of your organization and a reflection of how your organization sees people.”

Using illustration is another way to be inclusive in design and make our product representative of the people that use it. People want to see themselves reflected back in the products they use and consume. Using diverse imagery is a huge step in the right direction for creating an inclusive culture and product experience.

4. Designing forms to be accepting of all genders

Ever fill out a form and wonder why the company needs to know the answer to a certain question? I’m applying for a job, why do they need to know my gender and ethnicity? Whatever the reason, valid or not, little questions like these shape the experiences we have with a product and brand.

As someone who identifies with my given gender at birth, I’m usually unfazed by questions asking for my gender. After reading and speaking with people, though, I’ve learned how these questions can be problematic and I see opportunities to improve products to create a more gender-inclusive experience.

I don’t claim to be an expert on the topic and am still gaining an understanding, but I found an especially insightful article by Sabrina Fonseca: Designing forms for gender diversity and inclusion. In it, she outlines ways in which we can design our forms to be more accepting.

Here are a few of her suggestions:

• Give people a really good reason for asking. Whether we’re asking for their preferred language or annual income, it’s important to clearly state what the information will be used for and how it will improve the experience.

• Make it private, safe, and anonymous.

• Always make it optional to answer questions and allow the option to “decline to answer.”

• Ask for pronouns instead, if that’s all we need to know while including an option for gender-neutral (they, their, theirs)

• Be ready for a custom answer. A list of options with the opportunity to specify further if needed in a custom form can simplify the experience for everyone.

• Don’t ask for gender or other information if we don’t have a good reason.

Again, I recommend bookmarking Designing forms for gender diversity and inclusion for a deeper dive on the topic.

5. Interview and include communities with different backgrounds & experiences in the conversation

As I mentioned earlier, questions about gender in forms are easy for me to answer and often require little to no thought. Only after speaking to others and reading about how others have struggled with this experience did I become aware of the issue.

If I use my experiences and abilities as a baseline, my designs will inevitably make things easy for some but difficult for everyone else. It’s important to acknowledge and become aware of our blind spots to improve everyone's experiences, not just those that are like us.

Here are a few ways to widen our lens:

• Hire people of different backgrounds, experiences, genders, ethnicities, ages, physical abilities, and so on.

• Interview, research, and survey individuals from different walks of life. Interviewing people alike to those that created the product won’t uncover the blind spots.

• Research and read about different experiences people are having in their lives.

6. Adapt to context

A fundamental question we as designers must ask is: Are we forced to adapt to technology, or must technology adapt to us?

Contextual factors influence our abilities and how we interact with products. Factors include our physical location & abilities, the amount of time we have, and our emotional state.

Microsoft Design has a brilliant toolkit for thinking about inclusive design, I recommend checking out their Inclusive 101 doc.

• As people move through different environments, their abilities can change dramatically. In a loud crowd, they can’t hear well. In a car, they’re visually impaired. New parents spend much of their day doing tasks one-handed. An overwhelming day can cause sensory overload. What’s possible, safe, and appropriate is constantly changing. Think about looking into a bright light, wearing a cast, or ordering dinner in a foreign country.

• Designing for people with permanent disabilities can seem like a significant constraint, but the resulting designs can actually benefit a much larger number of people. For example, closed captioning was created for the hard of hearing community. But, there are many benefits of captioning, such as reading in a crowded airport, or, teaching children how to read. Similarly, high-contrast screen settings were initially made to benefit people with vision impairments. But today, many people benefit from high-contrast settings when they use a device in bright sunlight. The same is true for remote controls, automatic door openers, audiobooks, email, and much more. Designing with constraints in mind is simply designing well.

• By designing for someone with a permanent disability, someone with a situational limitation can also benefit. For example, a device designed for a person with one arm could be used just as effectively by a person with a temporary wrist injury or a new parent holding an infant. We call this the Persona Spectrum.

— Inclusive Design by Microsoft

The point is that when we design a solution to one challenging experience, it often carries over into other categories and improves the experience for everyone. As Microsoft says, “solve for one, extend to many.”

7. Enable customization

Without certainty, we can only create designs that are perfect for a blue sky scenario. One in which the user fits exactly into the mold that we’ve used to create the product. This inevitably leaves holes in the experience for the people that don’t fit our typical user.

If we owned a restaurant, we wouldn’t force a customer to eat onions if they didn’t like onions — so why should users be required to have videos autoplay in their feed if they don’t want them to?

We should allow our users to customize how they interact with our product to their liking. Customization is key to not only crafting a more inclusive product, but it’s a core principle for better experiences and usability.

We can achieve this by providing options to customize the design and experience in the settings. I go in-depth about customization in my article, 10 Ways to Make a Fully Personalized UI.

Here are a few ideas to get you started:

• Ability to customize font sizing & styles

• Switch to dark mode/light mode or adjust the color theme

• Toggle haptic feedback on and off

• Adjust notification settings for each type of notification

• Customize gestures or keyboard shortcuts for common actions

8. Avoid industry literacy

Everyone reading this article lives in some kind of bubble. Whether you’re a fisherman or a product manager — industry terms have become second nature to you after time in that bubble. When designing a product, we need to audit the language that we use to ensure we aren’t excluding anyone from our product.

For example, if we’re at a fancy restaurant and one of the menu items says, “Gravlax with hovmästar sauce and lemon.” It would take some Googling to find out that this is a Swedish cured salmon dish. If you’re from Sweden or a foodie, then you may be familiar with the dish — anyone who isn’t is out of luck.

Due to the range of expertise that our customers may or may not have, we should use language and create products that better reflect the needs of both novices and experts.

If our product caters to both doctors and patients, then it’s important that our search capability accepts a wide range of queries. The formal name for “TIA” or “transient ischemic attack” is what most people would call a “mini-stroke.” If the website only had TIA listed, then it wouldn’t be inclusive to those without this level of expertise.

If you’ve ever run a user test, you’re familiar with the jargon that we techies have become accustomed to. Hearing users interact with our products and calling the loading indicator a “spinny thing” or the hamburger menu “the stack of lines” is an indication of how far entrenched in the tech world we are.

9. Design for left and right-handed users

As mentioned previously, when we design for one set of users, we solve for many. A good example is the experience of using products for right vs. left-handed users.

About 10% of the population is left-handed (approx 700 million). If we can solve usability issues for that 10% of users, we will also improve the experience for a person with one arm or a temporary arm injury.

If there is an important action in our application that is done repeatedly — liking a post, for instance, then why not give the user the ability to decide where that action is placed that’s most comfortable for them?

Provide an option to customize the placement of important actions in the settings. Or better yet, place actions in a neutral position so users can tap where they’d like.

If the designer is right-handed, then the product may favor right-handed users. Let some lefties try it out and see what their feedback is.

10. Don’t break conventions

Users have come to expect similar experiences across the web. If our website, app, or software functions differently from what users have grown accustomed to, it won’t be intuitive and could introduce usability issues for a wide range of users.

“Any time conventions are broken, it takes more time for a user’s brain to process the new content. Designers need to take the limitations of human cognition into account, as well as the reality of limited working memory.” — Joanna Ngai, Designer.

An example of this is icons with an established meaning behind them. Icons like “search,” “home,” or “favorite” are represented similarly in the vast majority of interfaces. By using non-standard icons to represent these actions, we run the risk of damaging our user experience and causing a headache for users trying to use our software.

Following established patterns will make newcomers feel like they already know how to use our product without ever using it.

👋 Let’s be friends! Follow me on Twitter and Dribbble and connect with me on LinkedIn. Don’t forget to follow me here on Medium as well for more design-related content.