Developing Inclusive Interface Design: A Complete Guide

Pocket Coach Case Study

Achieving higher inclusion and accessibility is one of the global values today. Let’s talk about how these notions apply to design. What makes a design inclusive? First and foremost, it should be accessible for people of any individual differences, such as physical or mental health conditions. We’ve been focusing on this for a while now, as we research and accumulate theoretical and practical knowledge on the matter. We’re glad to work with clients who also understand the importance of accessibility in each element of the product. Recently we’ve released a case study for a project we developed for a local branch of Special Olympics.

‘Pocket Coach’ is a service providing kids with mental health issues with access to regular sports training and keeping in touch with their coaches. ‘Pocket Coach’ was highly relevant during the pandemic period, when Covid restrictions limited social gatherings. While those limitations felt inconvenient and hard for all of us, they were critical for children with mental health issues. JetStyle’s task was to create a website for online sports classes for children with such mental health issues as Down Syndrome and Autism Spectrum Disorder. You can read all about the design development process on our website (click the button).

To make the future interface design inclusive, we had to go through tons of related studies and research on the Internet. After releasing the project, we took over the idea of promoting accessibility to other projects and to design approaches in general. We strongly believe in the idea of making the world more inclusive.  

This is why we developed an inclusive design guide for general use. Maks Smirnov, a JetStyle’s art director, presented the guide at conferences and workshops for designers and received positive feedback. So we thought it’d be a great idea to share it with you. This guide is a comprehensive compilation of theoretical information about how people with Down Syndrome and Autistic Spectrum Disorder interact with the world and information. Knowing how they perceive information is crucial when we try to take all of these differences into account. In the second part of this guide, we outline a few recommendations for creating interfaces for people with Down Syndrome and Autistic Spectrum Disorder. Why don’t we start with some biological background?

Now you have a general idea of how people with Down Syndrome and Autistic Spectrum Disorder, behave and communicate with the world around them. Here are several checklists you may use if you develop web interfaces for people with mental health issues. They include both our own expertise and expert recommendations from the global design community. These ideas deal with such aspects of web design as text, layout, colors, sound, video.

Texts

Down Syndrome

1. It makes sense to avoid unusual, complicated, or technical words. If it’s impossible, make sure to provide an easily accessible text definition on the same web page.
2. Working on the text density, you may be guided by a reading level for secondary education; try using short and consecutive sentences of less than 15 words.
3. Don't use metaphors, as they are likely to be misunderstood. The more literal your text is, the better.

If you look at Pocket Coach, you’ll see how specific, polite and positive we strive to be in the call to actions, motivational captions, health & lifestyle advice, etc.

To avoid ambivalent perception of emotions, we added images symbolizing them. Thus, children have a clear idea of how to estimate their emotions and well-being after the workout.

4. Dark text on a light background is the best combo.

5. Avoid fonts that use the same characters for different letters. For example, in the Gill Sans font, the "l", the "i" and the number "1" are identical characters, I-I-I.

6. Icons are great for drawing users’ attention, but in most cases people do not understand their meaning. If possible, it’s better to avoid them.

Autistic Disorder

1. Every thought should be expressed via both text and image: they are equally important for adequate perception of the meaning.

In Pocket Coach design, we added simple illustrations to healthy lifestyle recommendations on the website. We structurized them as Bingo cards to initiate competitive activity:

2. It’s better not to place text on top of images.

3. Two types of text is a maximum: one for headlines and one for typeset text.

4. Instead of using capital letters or italics to emphasize text, try underlining or using bold type.

5. For dates and days of the week, use the full format: Wednesday, April 13, 2023.

6. Phone number digits are better perceived when separated: +48 12 396 65 35

7. Always use numbers, not equivalent words, even if the number is less than 10.

8. Never use Roman numerals.

9. Do not align text to the width or to the right. Do not break long words.

Audio

Down Syndrome

The background sounds should be four times quieter than the main sound. If you don’t do this, most probably the message will go unnoticed. Pause and restart buttons are of great help to give users freedom of choice.

Autistic Disorder

As we mentioned before, the mind of a person with autistic disorder perceives and processes everything at once - music, the words of the interlocutor and street noise, without dividing sounds into primary and background ones. Therefore, to avoid sensory overload from all sounds, the autistic brain simply shuts off the auditory channel of perception and focuses on other ways of receiving information - for example, visual or tactile. If you can, simply avoid audio information and stick to texts. Sudden sounds or picture changes can cause panic and irritation.

We included no audio information into the website, as we wanted to avoid overloading the kids with content. Instead, in Pocket Coach the visual information channel is the main one, as kids with ASD and DC perceive images better than audios.

Video

Down Syndrome

1. Visual elements are much more preferable than auditory ones, as kids tend to have an auditory attention deficit.
2. It’s better to avoid sign language or iconic language.
3. Audio is more effective when supported with subtitles. However, if in the video you have a visible narrator, subtitles can distract users.

More about subtitles: background color will highlight the text, and different colors for each speaker in the video will provide necessary contrast.

4. It is not recommended to give two different messages simultaneously to people with short-term memory deficits. For example, if the visual information in the video does not complement the audio message, it is better to exclude it.
5. All audio and video files should play only after the user presses the button (not automatically).
6. Studies have shown that people with Down syndrome are more successful in completing tasks when they hear the message and see the speaker. According to the results of the tests, 25% of users did not complete the test when there was sound without a narrator. In the case where both sound and narration were used, all users completed the test. When you have a person speaking in the video, it helps to understand the context better.  

Autistic Disorder

1. If you want your user to memorize what they hear, make sure it is connected to a visual image.
2. Don’t overuse the media. Remember that sudden sounds or picture changes can cause stress in a person with ASD. Studies have also shown that children with ASD find it difficult to absorb multimedia-rich interfaces.

Icons, Images, Symbols, Metaphors

Approximately 55.3% of kids with Down syndrome experience difficulty in expressing themselves in abstract language. For children with Autistic Disorder, it makes sense to avoid images with prohibitory messages. So the following recommendations may be well applied to creating website interfaces for both groups:

1. There are no definite rules in the use of visual images (photos, illustrations, or diagrams). But it is crucial that you stick to one consistent way of denoting the ideas.
2. The image should carry a clear message and explain the text, otherwise it will only distract the user.
3. Do not use a lot of colors in the illustrations and icons at once.

In Pocket Coach, the majority of interface elements have soft and delicate colors. Orange color is used to indicate CTAs. As a result, there is a simple color palette that will not draw too much users’ attention.

Use of Mascot

Animated characters are considered as something positive. Mascots in the website interface and in live events help children with mental health issues cope with their fear of social interactions. Moreover, there’s evidence that communication with friendly animated characters boosts kids’ self-confidence.

This is why for Pocket Coach we created Lynx, the mascot. It greets the children right on the welcome page. The Lynx is a helpful, supportive and cheerful assistant guiding children through the training process.

It is known that people living with autistic disorder tend to avoid direct eye contact. It feels uncomfortable, too pushy and intrusive for them. In order to make the design friendlier, people or animals in images don’t look directly at the user.

That’s why the Lynx in Pocket Coach never looks you directly in the eyes. That was a decision we made at the early stage of the project, as we wanted the children to feel secure and comfortable while using the service.

Interface Elements

Down Syndrome

1. It works better if website forms show hints to the contents.
2. As users with Down syndrome experience motor and neurological limitations, drop-down menus and lists or any hidden options should be excluded, as they may go unnoticed.
3. Forms should better be sized in proportion to the visible space of the web page to avoid the use of scroll bars.
4. Providing information on how to correct errors allows people with Down syndrome to fill out the forms and correct their errors as they browse.
5. The most effective response fields in order of preference:

1. Clickable items (checkboxes, radio buttons, etc.)
2. Blank fields with instructions
3. Drop-down menus and lists

Autistic Spectrum Disorder

1. The first visual image generally leaves a lasting impression and is difficult to change. A slightest change of details can make an autistic person experience stress.
2. Pictures should be placed on the left, and text on the right.
3. The principle of clustering states that the screen should be divided into visually distinct blocks of similar controls. This type of layout helps users find the command they need and creates the feeling of a structure.
4. The more useful the element is, the more visible it needs to be. This declutters the screen thus improving its efficiency.
5. Follow the idea of consistency and use the same screens and interface elements for similar functions. It makes the interface more predictable and saves designers' resources.
6. Color by itself doesn't carry information, but it helps accentuate information.

Website Navigation

Down Syndrome

1. Strive to make all the crucial info available on the spot, without links expanding the “read more” section. Try to put all the information on one page without dividing it.
2. If you give information about a related feature or service, add a direct link to it. For example, if the text says that you can use some settings, it's worth giving a link to the settings page right away.
3. The more info you provide the user regarding their whereabouts, the better: breadcrumbs help users to know where they are.

Autistic Disorder

1. Aim for simple and straightforward navigation, limited to one toolbar.
2. Minimalism is what you strive for: try to use as few elements on the screen as possible.
3. Add supporting text to all icons, unless the meaning of such a button is generally clear (e.g. burger menus, back button).
4. If the action requires waiting, use visual indicators.

***

If you think about it, the recommendations above can make the experience of any user more convenient and smooth, no matter if they have mental health issues or not. However, for designers these checklists may be a guiding light towards putting their users’ interests first. After all, this is what inclusive design is all about.

At JetStyle, we view design as a way of problem solving, i.e. of creating meaningful, useful, accessible and aesthetic design experiences. We always dedicate a lot of time to research and overview the market’s best practice when working with any type of design. Get in touch via orders@jet.style if you want to discuss a project idea with us.

‍