How to catch the inclusive design wave by drawing on the experiences of real people

The main characters of the article: Oksana M, Alena K, Alexey T

Convenience. What is this? Have you ever wondered why the railings at the stairs are on the right hand, the numbers in the elevator go from bottom to top in ascending order, and the soda bottle is shaped so that the hand can comfortably clasp it?

Such details are very important for certain categories of people. In ordinary offline life, you can notice that people with disabilities are being considered more than they were a few years ago. Convenient ramps, markings on the street at traffic lights and in underground passages. But why then are apps and websites lagging behind?

Today I would like to talk to you about the topic of inclusive design. It’s about how important it is to pay attention to the accessibility of your solution when designing a mobile application or website for people with disabilities. In this article, I am not going to give you some kind of theoretical basis, which you can already find on the Internet. Here I will not write simple truths about how to design application interfaces according to the rules so that people with disabilities can use them consistently. I would like to address the real stories and pains of such people. Talk about their regular experience with daily use of applications.

But first, let’s define an important term: “universal design.” Few people know this phrase, but it is the foundation that helps build convenient interfaces for everyone.

“Universal design” is a concept coined by American architect Ronald L. Mays. He outlined 7 principles of “universal design” that describe how to create good environments for people of different ages and abilities. He believed that easy access to buildings and freedom of movement would make life easier for everyone. Selwyn Goldsmith reformulated Mace's quote in his book Designing for the Disabled. He came up with the concept of “free design”. These terms then became known as “inclusive” and “accessible design.” So how are they different?

Let's start with a simple explanation.
“Accessible design” is a simple, direct and fast interaction between the user and the interface, created for people with disabilities. This approach is part of an inclusive design strategy.

“Inclusive design” is a design developed for human needs, an interface that easily fits a diverse group of people with different characteristics and features. All people are different in age, gender, the language they speak, and the environmental conditions in which they live. Some have limited access to technology, time and money. Inclusiveness makes design accessible and usable for everyone.

Now that we've clarified the important terms, we can turn to my research. Why all this? I didn’t want to rewrite the theory again and convince you how important it is to remember each user with his individuality and give examples of what the font and text should be. I think it’s important to use examples of conversations with real users to show the pain points and highlight important facts to build a truly user-friendly interface. This is especially important when you strive to regularly improve user experience and brand perception. And every in-depth interview with a user provides “bright points” to strengthen inclusivity.

Below are 3 types of users with disabilities: complete blindness, hearing and vision impairment, and double arm amputation. I interviewed these different people and saw them interact with the devices.

Hero No. 1 Oksana M.

It is important for Oksana that interfaces are intuitive, all elements are at a good distance from each other and have clear and bright buttons

Oksana works at the main office of a well-known bank and is engaged in the adaptation of offline services for people with disabilities.

She uses gadgets (mobile phone and computer) using screen access programs – screen readers. These programs convert text on the screen into speech. They allow Oksana to interact with interface elements, read texts, and perform actions. When you press a key, the screen reader, using a speech synthesizer, pronounces the letter or character that the user pressed. The screen reader also receives information when the user, for example, has moved to another page, and notifies what is on this page. Can navigate, read, interact with the interface

The VoiceOver system extension can be enabled in Settings. When you touch an element, it is highlighted and the voice assistant says the name of the element

— What apps and websites do you use every day??
Among applications and websites, I often use a mobile application on iOS for delivering healthy food, search services, instant messengers, social networks, ordering a taxi, listening to audiobooks and music subscriptions, working with office applications for editing documents, viewing email in a mobile client, ordering cosmetics in a beauty market. And, of course, banking applications. Note: Oksana uses Windows, has started to master Mac and always uses an iPhone.

— What prevents you from using websites and applications?
It is important to know that screen reader users do not use a mouse at all. All navigation occurs using the keyboard, all commands are also set from the keyboard. The trackpad is perfectly integrated on the Mac, so you can combine. A blind screen reader user navigates a website page using the keyboard. You can move through headings, links, and edit fields. That's why it's important for my use to have a normal page structure.

Since Oksana highlighted an application for the delivery of healthy food, let’s consider it from the point of view of accessibility.

– What don’t you like?
A new trend when stories are impossible to read because they are pictures. There is an excellent example from one of the banks, where stories are in text and can be read by a reader.
It is uncomfortable when elements do not have labels, that is, they are not signed. In this case, the screen reader can read: “button” or “link”. Then I, as a user, have to guess what this button is and what will happen if I click on it.

– What do you like?
There are not a large number of filters, and for people with visual impairments this is important, since analyzing “quick filters” and regular ones is extremely labor-intensive.
The cards have headings; a screen reader is a good way to read the information.

— Any other wishes?
Build accessibility at the prototyping stage. Because later, when everything is already done, implementing such solutions is more expensive and more difficult.

Use accessibility guidelines. Moreover, both standards and those that can be obtained from experts will be much easier. Learn, collaborate with specialists from other companies. Use autotesting. Special tools will help you find small erroneous solutions (incorrect layout, huge letters on small resolutions) already at the initial stage.

Interact with the target audience: you can involve focus groups or hire some specialists for full-time or part-time.

Adjust frequency scenarios to perfection so that everything is accessible. The degree of frequency will be determined by the researcher. Ideally, it would be great if a company has a small department dedicated to inclusivity.

Total
From Oksana’s comments, we can highlight the main principle when designing an application for users like her: each product card should have a clear title, quick filters should contain only the most important criteria (do not clutter up the space), buttons should be large to press and well drawn, and all interface elements are clearly labeled.

An example of good and bad product card design

Hero No. 2 Alena K.

Alena prefers practical sites with clear navigation

Our next hero is Alena. She is deaf-blind. She has a hearing prosthesis, which helps a little, but does not allow her to capture sounds as much as possible. He is active on social networks, especially loves his blog, where he talks about his interesting and active life. Helps people who have encountered obstacles overcome them and find positivity in the little things.

Alena uses her smartphone via a Braille keyboard. This is a special gadget that translates everything displayed on the screen into Braille. Every day he only uses apps, not websites. Because the reading speed in the mobile application is faster, since the information is arranged in one place and the keyboard can display information without any problems.

When you click, one page opens where all the information is located and there is nothing superfluous. On the site, in addition to the sections located at the beginning of the page, some key information may be deep below. You need to “get to” it and read it, and this is a waste of time. Therefore, the application is more convenient.

— What apps and websites do you use every day??
Every day I go to social networking applications, instant messengers, other notes, and sometimes marketplaces. I use the rest as needed, but not every day.

— What do you like and what does it bother you that makes you spend less time on this site/app?
Applications are not always well thought out in terms of accessibility. But I find it more pleasant to use ones where everything is thought out. It’s easier and faster to find the right buttons for different actions, to read one page of a product, without advertising or anything unnecessary, the main thing is that there is a “back” button in the upper corner of the screen to return to the previous page. Inconvenience is caused by those applications in which the buttons are not labeled or are absent altogether (for example, buttons without outlines are often used, the application cannot count the button and pronounce it as text) and where there are a lot of advertisements.

I use those applications in which all the buttons are labeled. This way I can quickly find the information I need and take key actions. If the app's accessibility is really bad, then I simply delete it.

— How do you usually use such applications, where do you look, how do you behave when searching in this application, how do you scroll (your user path/experience)?If we are talking about online stores, then I look at the catalog, read the composition, description and reviews, and add the product I like to the cart. This process is the same everywhere. On social networks, I scroll through the news feed, correspond with people, post posts on my blog, look at the number of likes and views, and read comments. In other applications, I only do things: for example, pay utility bills, make an appointment with a doctor, call a taxi, and so on. I am glad that government applications now have an inclusive interface – many have a well-designed interface for people with disabilities, so there are no difficulties in using such applications.

— What would you tell the creators of your ideal app/website to make it as comfortable as possible for you to use it with your personality?
I am grateful that now we are starting to think about convenience more often than we did a few years ago. It is important that the application primarily performs its task, and the interface displays key actions, because this is so important to people who are a little different from others.

It’s ideal when push notifications arrive on time and inform you about the delivery of goods, messages from support, and order status. Such notifications are very helpful for blind people like me to be aware of what is happening on the phone screen. Using VoiceOver, the phone announces that a notification has arrived. It is important that the notification does not contain unnecessary meanings and symbols.

Total
Alena would like to use a mobile application with less unnecessary information in the form of banners that could be confused with a product card, since this kind of “noise” interferes with key actions. It is especially important that the interface has a “back” button, otherwise such a user may get lost in the interface. It is important that push notifications are not full of emoticons, and VoiceOver can clearly and clearly notify about order statuses and promotional offers.

An abundant number of banners and non-accent buttons make working with interfaces impossibly difficult

Hero No. 3 Alexey T.

It is important for Alexey that the interface does not have small elements and has a good algorithm for remembering the delivery address — It is important for Alexey that the interface does not have small elements and has a good memorization algorithm
delivery addresses

Our next interviewee is Alexey. He received disability at age 18. Alexey has both arms amputated to varying degrees. He uses prostheses: at the same time, only the left prosthesis is maximally active; he can use the right prosthesis much less – when working with mobile devices. Alexey is completely uncomfortable using buttons (typing) in everyday life; he controls the mouse on his laptop with his right leg, and with his left prosthesis he can only operate with one finger.

— What apps and websites do you use every day??
Usually social networks and applications. I use marketplaces from a laptop or tablet. If from a laptop, then I use a mouse. If from a tablet, then I use a regular stylus. Some prosthetics have a special coating that is recognized by touch screens. I use social networks almost every day. Plus online deliveries of groceries and prepared food. And, of course, search engines, services for watching films and TV series.

— What do you like and what bothers you that makes you spend less time on that site/app?
Due to the specific nature of my disability, I am not very comfortable pressing small keys. For example, in an online store the page with products is flipped: 1, 2, 3, 4, 5. Long scrolling is very annoying and tiring. And, probably, this is my answer to the question of what makes you leave there faster.

Those platforms that are inconvenient are those that do not remember delivery addresses well, for example, some comments on addresses, on purchases, and you have to re-enter them many times: apartment, intercom number, recipient, phone number. The better the platform remembers all these passwords, the easier it is for me to use it.

In addition, in my opinion, never in my history of purchases on online platforms have I made any kind of review on a product. But if it were possible to conveniently transcribe voice messages into text, that is, in essence, recording a review by voice, then perhaps I would sometimes use this and create reviews of high-quality or low-quality products.

— How do you usually use apps? Where do you look, how do you behave when searching in this application, how do you scroll (your user path/experience)?
I would describe my user journey like this.
I understand what I want to buy, for example, a computer mouse or headphones. I enter the specific name of the equipment into the search engine on the marketplace, see how much it costs, and compare it with other marketplaces. Ideally: if it could be entered using voice. Next, I understand where, how many bonuses are awarded, what discounts are based on personal cards of a particular service (points, bonuses, discounts). And, depending on this, I buy. Sometimes I compare them with products that the marketplace itself advertises as similar or analogous. Sometimes I buy them too if there are big bonuses or reduced prices.

— What would you tell the creators of your ideal app/website to make it as comfortable as possible for you to use it with your personality?Probably a smart product suggestion system. For example, I use Samsung equipment. And if the marketplace showed me new products from Samsung and similar products that can be purchased at discounted prices. For example, somewhere in the store there are promotions or increased bonuses, this would be as convenient and interesting for me as possible.

For example, I have several smart speakers from a domestic brand at home, and I bought this equipment for my girlfriend and my parents. Moreover, it was a process extended over six months. And it would be convenient for me if some new products or some interesting promotions pop up in this area and in similar ones.

Total
For people with disabilities who use prosthetics in everyday life to work with interfaces, the following is important: buttons should be voluminous; pagination should not be done, it gets in the way.

It is also important to think about such users and remember their actions as much as possible (automatically insert delivery address, phone number, display products based on interests and topics).
But the most important thing is to adapt the interface for voice search in order to significantly save search time and add comfort to using the service (searching for a product, writing reviews).

Pre-filling and large elements help to place an order faster and make life easier for the user

Inclusion solution for popular sites and applications

Basic rules for building an inclusive interface

After talking with users who know firsthand how important it is for the interface to be convenient for everyone, it’s worth highlighting a few simple rules of convenience.

Functional amenities
The ability to use additional devices to display information on the screen so that the application can show the user what is on the screen. It is advisable to integrate voice control (find a product in the search, fill in the delivery address, leave a review). The buttons should always be well marked and quite large – this is important for people with a prosthetic arm.

Visual Amenities
In the visual component, it is important to remember about the simplified interface: the emphasis is only on the most important elements, and the minor ones should be hidden. Don’t forget that such a user should have a “back” button at hand so that he doesn’t get lost in navigation.

Adaptability
When designing an application or website, it is worth considering the page immediately in the context of the fact that a visually impaired person will want to make the font larger. It is important to check how the page behaves with this setting; if letters and elements move to horizontal scroll, then this is already an error; with such functionality the user will experience inconvenience and will not be able to read information within one screen.

Audio accessibility
The application must have good copywriting so that the visually impaired user does not have to listen to complex syntactic structures. Buttons should contain the logic of use (if a key action, then bright, drawn).

A product designer is not an artist. He should not trust his vision, but must rely on logic and user experience

Conclusion

Remember the main thing, behind your decision there are hundreds of people who want to use the product simply and without problems

Each character in my article is individual in its own way, but each needs a convenient interface. They understand that manufacturers fundamentally rely on the average user. Such people would just like a little more sensitivity, care and understanding. Making the interface a little simpler, making the button brighter and easier to read – all this sounds like a small drop in the ocean of endless possibilities for improving the current picture in the interface market.

This allows you to look at the product from a different perspective: is it convenient for everyone and does it take into account individual characteristics? For a deeper understanding, it is important to have not only a theoretical basis, but also conduct regular interviews in order to have practical material. This method helps to achieve a high-quality approach to correcting defects in interface solutions.