Inclusive Design in User Interface
To design something to be inclusive means to make it approachable for a diverse set of users. Often, this focuses on optimization for accessibility without compromising the experience of users not using assistive technology. (Assistive tech might include things like screen reader apps that “read” a web page for visually impaired users, speech input software, and other programs and products.)
Inclusive design has gained popularity in UI/UX more recently because it’s valuable in guiding a better design process and appealing to a diverse population. For instance: if an interface is created with high contrast color scheming to accommodate color blind or visually impaired users, that “feature” may come in handy to everyone else, too. Let’s say you are viewing a site on your phone on a sunny day. It’s helpful if you can differentiate elements and text through the glare from the sunlight.
You might be thinking that this sounds a lot like accessibility, and it is! But simple accessibility and inclusive design are different. Something can be accessible without being inclusive. You often see buildings where there’s a staircase leading up to a main entrance, and then a sad little sign advising physically disabled visitors to use a side entrance. An inclusive solution would be to put one accessible ramp up to the door — that way everyone can use the main entrance if they want to. (And better yet, everyone will be thankful for that ramp when they are trying to move furniture in and out of the building.)
Why should we care about accessibility?
As people who make and plan products and technologies used globally, designers set the standards for how people interact with the world. If we are making sites that are inclusive and optimized, our competitors are going to have to do the same thing to keep up. Have you ever found something that annoyed you about a product you are using, and wondered how you could change it? We have the power to shape the expectations for our industry and make it better. If you create something that makes someone’s life worse, that’s 100% on you.
Empathy
Empathy for your users is really important when designing products you want people to actually use. There is a difference between empathy and sympathy. When you are sympathetic towards someone, you feel bad for them. Maybe you’ll send them a card or something. But when you are empathetic, you’re putting yourself in the place of another person, even if you don’t necessarily have their experience. It’s important that the things you make are not alienating or uninviting to certain groups of people. Empathy for your audience is a good way to approach UX problems and create inclusive products.
Commercial Payback
Studies show that when you take the time to create with a diverse audience in mind, your product will work better. When things work better, people use them more. Good examples of this can be found in this white paper published by WSI, which outlines multiple case studies of companies that moved towards more accessible web solutions and saw significant revenue increase as a result. One case I found particularly interesting was that of Tesco, a UK grocery store chain, who optimized their online ordering service for screen readers and saw an increase of £13m per year in online sales. This was because all users — ”typical” users and those using assistive technology — liked the “accessible” navigation system better, and the design swayed them to use the service. Tesco ended up making their “accessible” site their only site.
Statistically speaking, it could be you.
The probability of you or someone you are close to experiencing disability is relatively high. About 1 in 4 twenty year olds will become disabled prior to retirement, and just about 40% of people over 65 years of age are disabled. Saying “This is not MY problem!” is short sighted — it’s likely you will be in this position at some point, so it is worth it to make the world a better place for people in this group. It is the only marginalized group that you can end up joining involuntarily, at any time.
How does all of this apply to interface design?
Often, these principles are applied to the web exclusively within code. Yes, alt tags (text descriptions of images) can help. Yes, ARIA attributes (code descriptions that define objects like sliders and buttons for screen readers) can help. But there are no clear standards available for designing user interfaces. The visual aspects of a user experience are just as important as the code that drives it, if not more. The first impression a user gets of your site determines whether or not they come back or continue to use it; making sure people can use it regardless of physical ability or device is a key component to bringing bounce rates down.
Implementation
At this point, you may be interested in designing your interfaces to be more inclusive. Here are some approaches, ideas, and tools I’ve gathered in my pursuit of a more inclusive web.
Color & Contrast
There are two possible impairments I think of when it comes time to select colors for a project. Color blindness and vision impairment are pretty common issues that can inhibit a user from exploring your project effectively. You can address these issues by establishing the right contrast ratios and by avoiding troubling color combinations for the color blind.
The first resource is the widely acclaimed colorsafe.co, which aims to enable designers to create beautiful color schemes that follow WCAG Guidelines of text and background contrast ratios. Good contrast ratios make interfaces more usable to both the groups I mentioned above.
Another helpful tool is Color Oracle, a Mac OSX and Windows application that provides simulations of the way that someone with the three most common forms of color blindness would see your screen. It enables designers to be their own user testers, in that it shows them a different perspective that they may not have otherwise considered.
Typography
Vision impairment comes back into play when it comes to selecting type for a project. There are many considerations you need to take into account when selecting and laying out type in an interface.
The UI trend of ALL CAPS FOR COPY needs to stop. Capital letters are fine to use for single words, but in strings of text, the letters all blob together. With sentence case, there is more individuality between the letterforms, which results in easier reading, especially for people living with dyslexia or vision impairment. (Also, you come across as more intelligent, friendly, and not screaming.)
Some other considerations include if there enough differences in the alphabet, contrast in the strokes that make up the letterform, and x-height.
When it comes to type size, you should be making your text easy to read. When you write media queries for mobile, you do not need to bring down your type size for copy. Phones are often held further away than computer screens are from a person’s face. You should not assume that a user will scale up your type to read it. You’re going to annoy a lot less people by making your text a little too big instead of too small. I usually start with 18pt for text on the web, and adjust depending on the content and typeface.
My favorite resource for this is “Typography for Visually Impaired People.”
Scaling of Elements
This is especially applicable to mobile interfaces. You need to make sure all users can tap buttons, read text, and actually see your images. For links and buttons, you’ll see a lot of different suggestions for minimum size acceptable, but I’d say a good range to start with is 45–50px.
Motion
Animated interactions are a great way to engage users, and can help in telling a more interesting story. But getting motion-happy can not only slow your page down, but make users with vestibular disorders or motion sensitivity hate your site.
Val Head has written pretty extensively on how to balance using animation to engage users, and how to not nauseate them. Considerations you need to make when adding animation to a web page: the scale of the movement relative to the size of the viewport (how far an element is moving), logical matching of direction and speed, and perceived distance covered in the virtual space. An example of potentially problematic animation for some users would be exaggerated, full page parallax.
Final Thoughts
It’s probably not practical to attempt to perfectly meet every potential concern brought up here, but the goal is for designers and developers to take not only their content into consideration, but their audience. A good step to take at the start of a project is to decide who you are trying to create for. Try to understand the concerns and challenges that face your users. Based off of that, you can decide which measures you need to take to include your entire target audience in a practical way. Caring about things that seem trivial can result in better overall design and user experience.
Want to learn more? Check out the case study I wrote for the project that led to all of this research!
Originally published at www.evolvingmedia.net on July 8, 2016.
