Creating an inclusive visual design means re-evaluating the imagery, icons, and colors you rely on, and understanding how your visuals could embrace or exclude potential users. Photos, illustrations, and the overall visual aesthetic are the first thing your users will see.
“As system designers, we have a responsibility (and opportunity) to design systems with stronger values. They may not change us (we are old), but our children will see the values in these systems as normal. That is both scary and exciting.”Buster Benson paraphrasing Eric Meyer’s XOXO 2015 presentation
Better photos and graphics
Photos and images of people are shown to improve engagement. But photos and images of people that don’t seem real or that only represent a small portion of your audience are more likely to drive potential users away.
Here are some tips for better inclusive graphics:
Lose the stock. Use your own photos.
- Bring a photographer along on your research (and get permission from your participants before you take and use their photos)
- Use photos of or by your employees (again, with their permission of course)
- Let your users share their own photos
- Don’t be tempted to Photoshop in more diversity to your existing photos. It’s better to fix the actual problem than be caught trying to fake it.
If you aren’t yet diverse and inclusive, don’t try to fake it in your photos. Commit to the hard work of recruiting and promoting diversity. In the meantime you could use some of the following for imagery instead.
Personify your design with a mascot
Mascots may make you think of sports and those large-headed costumed characters dancing around on the sidelines, but plenty of big companies have their own mascots. You might not always know their names, but I’m willing to bet you’ve seen images of them. There’s Larry the Twitter bird. MailChimp has Freddie Von Chimpenheimer IV. Reddit has Snoo the alien. Google has Bugdroid for their Android operating system.
Think mascots are just limited to wacky tech companies? Think again. They’re practically rampant in the food industry: Ronald McDonald, pretty much every children’s cereal ever, Poplin’ Fresh (the Pillsbury dough boy), and the list goes on. Still not satisfied? How about a certain famous mouse?
Mascots give your brand a personality and a specific voice. If you want to create an emotional connection with your users, mascots can do a lot of the heavy lifting. So how do you come up with a great mascot? Aarron Walter of MailChimp wrote a great guide to creating a design persona and even provides some handy templates.
Use diverse colors in illustrations
When Slack recently promoted their new “Add to Slack” button, the post featured an image with a brown hand holding the button. To paraphrase Neil Armstrong, it was a small step for the designer, but a potentially giant leap for many others who feel underrepresented.
Even if you can’t capture great photos of a diverse user base, you can definitely make efforts in artwork and elsewhere to welcome and encourage a more diverse audience.
In a similar vein, look at any mockups floating around with images of your product. Strive to use mockups that incorporate more than one skin tone or gender. Facebook has a basic starting kit for a variety of mobile devices available on GitHub.
Focus on your product or outcome instead
The straightforward approach is to focus on your products and services, with images revolving around your product (screenshots or photos of it in action), infographics on the outcomes you’re trying to achieve, and graphics showing processes and frameworks. Here’s a few ideas for other images:
- Infographics about how users use your product or service
- Screenshots, videos, or animations of your product or service in action
- Process maps, mind maps, or flowcharts about how various components relate
- More complex icons representing outcomes, features, or problems you’ve solved
Now that you’ve got some better imagery, take a closer look at the iconography you use. What can those tiny symbols represent to people of different genders, races, cultures, and preferences? Your icons may be small in size, but they can make a much larger statement than you intend.
Let’s start with the profile icon. A quick Google Image search for ‘profile icon’ returns this:
It’s not uncommon for the default avatar icon in most major icon sets to have a distinctly male appearance, especially in more detailed sets. At best, many icon sets include the typical generic circle head and semicircle shoulders icon. There are other more interesting alternatives for displaying a profile icon though, including:
- Showing the user’s profile photo
- Showing a random choice from a series of abstract images.
- Hand-painted geometric faces like Basecamp
Looking further at icons, pay particular attention to icons that symbolize people, relationships, and gestures. Facebook recently reworked their Friends icon to be more balanced between women and men. Did you notice that the “thumbs up” icon on the default like button embedded on other sites has disappeared? (That’s probably in part because a thumbs up sign in some parts of the world is roughly the equivalent of a middle finger in the United States.)
Before we wrap up, let’s talk colors real quick. Color has a huge impact on how people perceive a design. Color contrast has a huge impact on readability. The colors you choose set the mood and personality of your product. Certain colors can even denote status or intent.
When choosing colors for your design, first and foremost choose background and foreground colors that are easy on the eyes and provide enough contrast for users with and without vision problems. Not sure? Check them with the WebAIM Color Contrast Checker.
Different colors can stimulate different emotional responses. As you consider colors for your design, keep the mood and personality you want to invoke in mind. Be careful when setting color preferences to represent your users, however. While it’s still common these days for new parents in the US to be deluged with blue or pink, gender-specific colors are still a relatively modern trend and not universal across cultures.
Colors and color blindness
Finally, be careful to avoid using only color to denote status or intent. For instance, errors on forms are commonly highlighted in red. For some colorblind users, those errors appear identical to every other piece of information on the form. A better solution would be to use multiple differentiators - an error icon, bolder text, a background color on the error message itself, etc.
Colors are also commonly used to denote different statuses, either for items or transactions. Think green for a successful submission or a better item in a list, red for an error or a less desirable item in a list, and yellow for warnings or items in between. If you’re only using the color to differentiate these statuses, colorblind users will have trouble discerning a difference. Therefore it’s better to combine the colors with other visual cues, like shapes, icons, or textures, that can be discerned with or without the color cues.
Want to preview how different types of colorblind users might see your designs? Upload your images (or screenshots) to the Color Blindness Simulator to see through other’s eyes. If you’re a Mac user, you can download Sim Daltonism to test images directly on your computer.
As you look at the prototypes, design systems, and final product visuals you create, ask yourself the following questions:
- Does this embrace different people and perspectives?
- Do the images feel genuine and trustworthy?
- Are the images and icons biased to my own experience and background?
- Will this exclude or offend someone?
- Does this promote existing stereotypes or challenge them?
- Am I encouraging a better, more inclusive vision of the future?