Good design is inclusive design
Design is more than color, shape, or font — it’s a powerful tool that mediates our relationship with the world. Inclusive design is that, plus potential: the potential to unite heterogeneous cultures in shared understanding. To make products and experiences globally accessible. To connect us.
If we’re not inclusive, we haven’t built a good product (or a good company).Automattic Design’s Three Principles for 2019
Truly inclusive designs are never really finished, and becoming fluent in inclusive design takes more than a checklist. We all need a map when we start exploring any new world, though — let this list of ideas inspire and orient you and your team as you begin your journey into inclusive design.
- Broadening perspectives and building empathy ↓
- Bringing diversity into teams and processes ↓
- Building inclusion into designs ↓
Broadening perspectives and building empathy:
- Expand your social network.
Exposing ourselves to new and different perspectives gives us a richer and more nuanced understanding of the world. That can start with who we follow on social networks — and even which networks we use. Make an effort to follow individuals who represent a range of experiences, backgrounds, and identities. Give special consideration to the topics and experiences being shared by individuals who are different than you and groups you don’t belong to. One way to kickstart this: follow someone you don’t fully agree with, and give some real consideration to their perspective.
- Refresh your advisors.
Most of us have advisors, mentors, or coaches, even if the relationships are informal. Be sure that those who you look to for guidance, design review, for career advice come from diverse backgrounds and experiences. This should reduce the amount of redundant feedback you receive and increase the number of perspectives you are able to integrate into your work.
- Go somewhere new.
You probably have an established home, community, friends, work, and activities — your comfort zone. Being in a new place, with new people who have different values and routines, strips that familiarity away; that’s when we learn the most. This can help you relate to other cultural norms and can increase your ability to empathize with where someone else may be coming from. From visiting a new restaurant, store, or neighborhood to traveling to another country, there are many ways to experience a new place.
- Read more.
Reading is an important tool for understanding the world, and developing imagination, empathy, and critical thinking. It’s also easy to do: pick up a book or browse blog posts written by individuals across the globe from any internet-connected device. Read a variety of opinions and challenge yourself to consider multiple sides of a fruitful conversation or debate. Visit Design.blog for over 50 thought leaders’ essay contributions on design, inclusion, +/- tech.
- Consider nuanced experience.
No individual or group is a spokesperson for an entire community. Everyone has nuanced experiences that make up their identity. We’re each layered and are often not as simple as we may appear to others. When we ignore the points of view of those we’re designing for, we risk designing for someone that doesn’t exist, following stereotypes, and alienating real people.
- Commit to personal growth.
A growth mindset requires approaching the world with the idea that you can learn and grow. You can learn a new skill. You can change your opinion. You don’t know as much about something as you want. You can be a better designer tomorrow than you are today. When we don’t take on a growth mindset, we risk remaining in a fixed state, producing stagnant designs that don’t support evolving needs.
Bringing diversity into teams and processes:
- Diversify your team.
Homogeneous teams create narrow designs; teams with diverse experiences create more inclusive designs. Be sure that members of your team don’t come from the same culture, age group, gender, or gender expression, and don’t all have similar experiences and educations. If your team is limited and you don’t have the ability to expand, actively seek out people with other perspectives to consult or act as project advisors, and give special consideration to their feedback.
- Help your audiences inform your design.
Learn about your audiences: their motivations, needs, behaviors, challenges, pain points, and goals. Consider existing customers, prospective customers, your client’s customers, and past customers. It may be tempting to only pay attention to primary use cases, but get to know the less-common ones and design, review, and test with those in mind as well. Set up user interviews, split tests, and analytics so that your audience can inform your initial design decisions and later iterations.
Building inclusion into designs:
- Use accessibility practices to avoid barriers.
There’s no inclusion without accessibility. Accessible designs will present differently depending on the medium you’re working in; consider physical, visual, auditory, financial, and other factors as well as an individual’s temporary or permanent limitations to accessing each. Is your video accessible to someone with hearing impairment? Is your website accessible to someone with a low internet bandwidth? Is your copy readable by individuals with different education levels, for whom the text is in a second language, or who are new to the subject matter? The more contexts you consider, the more accessible and inclusive your designs will be.
- Provide enough contrast between text and background color.
Whether you’re working in print, digital, with light projection, or something else entirely, readers need contrast between text and background to distinguish letterforms. Designs with low contrast may be easy to read for one person, cause strain for another, and be entirely unreadable to a third. Test your contrast using a well-rated contrast checker and by having a diverse set of people review it and provide feedback.
- Use more than color to indicate important information.
Using color alone to indicate important information, like “proceed” or “cancel,” may exclude those with color blindness or vision impairment. The addition of a written message or icon provides further access to information.
- Write good alt text for your images.
“Alt text” is the common abbreviation for the alt attribute on an image online, and it’s used by screen readers to describe an image to the blind, visually impaired, and others. Images often provide useful context or flavor to content. Including good alt text — text that thoughtfully describes an image — helps more individuals get the full experience of your design.
- Use focus states.
Have you ever noticed the outlines, often blue, that show up around buttons or form fields when you’re filling them out? These outlines are called “focus indicators” or “focus states,” and they’re visual markers to specify which element the user is on within a page or application. Including these in interactive designs — and making them really obvious — goes a long way towards making the elements inclusive. Those who use screen readers due to visual impairment or blindness; those who rely on keyboard navigation, a mouth stick, or switch due to limited mobility; or power users who quickly navigate through pages all benefit from this important design detail.
- Make descriptive links.
Descriptive links provide your audience with context on where a link will take them. Screen readers navigate a page link by link. When a link doesn’t give any detail, but simply says something like “read more,” those engaging with your design via screen reader lack the context needed to get the full experience or make decisions.
- Provide captions and descriptions of video.
Videos usually include spoken information in an audio track, and visual information in a video track. Any information that is only provided visually or audibly is inaccessible to individuals who can’t see or hear. Captions can help for individuals who can’t see, while audio descriptions are useful for making visually complex videos accessible to those without or with limited sight. Lastly, a media transcript is a text-based alternative that includes all audio and visual information, including descriptions of scenes, in a transcript form that can be accessed by all. You may have limited options based on where a video is posted, but keeping the possible limitations to the audio and visuals in mind will help you design accessible solutions around those barriers.
- Provide cost-accessible options of your designs.
Some designs have high price tags due to expensive design details. Designs that are unnecessarily expensive exclude those with fewer resources or who are economically unstable. If high expenses are necessary, consider offering another price level option that doesn’t have the same costs. An expensive hardcover book might also be sold as a less-expensive soft-cover book, e-book, downloadable PDF, or a web page. If your primary offering is done thoughtfully, there should still be a draw for that form with those that can afford it.
- Design for low bandwidth.
One of the biggest factors in user satisfaction with a web product is speed. Optimizing your site or application for faster page and content load times means that more people will enjoy using it. There are also many areas of the globe without broadband internet connections — when you optimize for speed, you’re making your product more accessible to those who would otherwise be excluded because of lower connectivity.
- Provide enough contrast between text and background color.
- Create for clarity and consistency.
Consistency begets usability. Inconsistency creates obstacles. Consider good wayfinding: be clear and consistent with icons, text, colors, and typography to allow the audience to easily follow the system through a changing space. The consistent use of an icon with the word helps orient children, those who don’t speak the interface language, and those who are distracted.
- Choose copy and imagery with care.
Welcome a broad range of people in your imagery and words, because representation matters. While you’re aiming for consistency, avoid sameness. Make sure illustrations, photos, and videos don’t favor one race, gender, age, weight, or other characteristic that will exclude many others.
- Make designs to be maintained, adapted, and to last.
Inclusive design works to meet the customer needs, and to extend the lifecycle of customer satisfaction. Create your designs with maintenance, adaptation, and evolution in mind to limit the number of hurdles the audience will face. Creating applications with the option for automatic updates gives customers the ability to benefit from improvements without having to personally track the evolution of your product or experience potential outages along the way. In print and environmental design, choose durable materials that can stand up to time and use to avoid unnecessary costs and frustrations for your audience.
- Empower your audience.
Good design empowers those who use it — it’s about your audience, not you. Whether that’s a client who wants a lasting brand suite or a customer building their small business online, our responsibility as designers is to help our audience meet their needs without ongoing input from us. A branding system that can be utilized by non-designers at a company achieves this. A website tool that the client can manage themselves without ongoing support also achieves this.
Created by Ashleigh Axios while she was founding the Studio at Automattic.