Designing with the autistic community
Product design principles that will improve usability for everyone.
How often do we use websites while being in a quiet, empty room with no distractions and plenty of time to browse around? In the digital world, where everything is competing for our attention, it’s easy to get distracted. Cognitive overload, the term created in the context of education to describe that every brain has a limited capacity, is something most of us experience in our daily life.
But there is one group that experiences this on a much larger scale — autistic people. This community accounts for approximately 1% of the global population and prefers to do most activities online. However, most websites are not considering the requirements of this group during the product design and development process.
In this guide, I will outline the core principles of designing for autistic people and reducing the cognitive load for everyone who uses digital products. These principles conclude my research described in the previous articles: an interview with Victoria and an overview of existing studies on designing for autistic people. I also reached out to the autistic community to review and co-create this guide. Their contribution was invaluable in forming the final version.
1. Design for Clarity, Consistency, and Simplicity
- Create a clear layout: Create a logical, structured, and clear presentation of information using the most appropriate content type.
- Apply consistent design patterns. Use patterns consistently within the interface templates to create clarity of interaction. Consistent page architecture will help people to process and navigate content.
- Simplify navigation. Display only the main navigation elements by using the principle of clustering. Surface only the most commonly used features and controls to reduce the number of components on complex pages.
- Limit navigation to one toolbar. Keep the navigation consistent throughout the product. Clearly label every page and show a progress bar in all journeys that are more than one page.
- Group the content. Aim to display all the content about one subject on a single page, rather than break it down into multiple pages.
- Simplify text fields. Create text fields clearly separated from the rest of the content. Present them in single, left-aligned columns, using clear fonts with large margins.
- Avoid using images as a background to text.
- Use clear calls to action. Buttons, links, and all other controls should have descriptive labels: e.g. ‘Attach file’ rather than ‘Click here’. Aim to have only one primary call to action within the view.
- Create a clear hierarchy. The complexity of layout with multiple text fields and navigation can be overwhelming. Prioritise the content to highlight the core features.
Clean layouts reduce cognitive load, increasing the usability of a page for everyone.
2. Avoid ambiguity
One of the cognitive differences between autistic and neurotypical people is that autistic people see details first before seeing the bigger picture. This is relevant when it comes to designing navigation or a page layout as much as writing up information or highlighting the purpose of a web page. The importance of clarity and consistency is also relevant when it comes to text and the use of words. A literal approach to language and its nuances can create ambiguity with expressions and figures of speech.
- Use plain English. This will increase the readability and understanding of content. Apply the same principle to labels, calls to action, and Alt text.
- Add labels to iconography. Support all iconography and emojis with text.
- Avoid verbal metaphors, sayings, or expressions.
Ask yourself, “could this be misunderstood or misinterpreted?” If the answer is yes, then it needs to be redesigned.
This principle will also benefit people of different cultures and those whose first language is not English.
3. Mind the colour
A large percentage of autistic people are highly sensitive to the brightness of colours. This is caused by hyper-sensation, which makes autistic people experience bright colours and strong contrasts as sensory overloading.
- Reduce the brightness and luminance of colours.
- Use natural, earthy or muted colours.
- Avoid extreme colour contrast like the combination of pure black and pure white. For a grayscale theme, use white with dark grey tones.
This principle will also benefit people with photosensitive epilepsy, as light and dark patterns can trigger seizures
4. Avoid unexpected interactions
According to gov.uk, 40% of autistic people have an anxiety disorder, and the autistic community suggests that this percentage is even higher. While an intrusive interaction or sound on a page might be an annoyance to a neurotypical person, for an autistic person, it can cause severe anxiety.
- Avoid unexpected pop-ups. Avoid automatic pop-up elements and any sudden interactions.
- Default to sound off. If you are showing video or audio content, avoid sudden sounds or other interactions. Also, autoplay ads should default to have sound off.
Most people find these interactions intrusive, disorientating and distracting.
5. Support control
- Give control of time. Allow people to process information and interact with it at their own speed. For example, some people would like to have more time filling in forms as they feel uncomfortable with time pressure. Allow users to save and return to forms, and ensure ‘time outs’ are reasonable.
- Ensure precise interactions with content. Animated elements on a page that are hard to control are very uncomfortable and distracting for autistic people. If multiple elements on a page are animated, make sure that interaction is consistent.
- Allow personalisation. Support browser and platform settings such as font size, contrast and zoom. If a person created their preferences for the most comfortable way to interact with content, don’t override it — design with this flexibility in mind.
- In apps, games and software include settings to adjust font typeface, font size, line spacing, colours, themes for text background and foreground colours.
6. Design pages in the context of flows
- Review the page layouts in the context of the whole user journey. If one page of the journey is difficult to interact with, it can affect the following pages’ performance in the flow. Individual pages or elements of a site may be well-designed for accessibility, but the cumulative effect can result in the overall digital journey becoming inaccessible.
- Make logging inflows and password handling as easy as possible. Many digital journeys, including the crucial ones, for example, check out, start with logging in. Making it as straightforward as possible will result in the successful completion of that journey. On the other hand, getting through a complicated log in can then make a person more anxious for what follows. Review the way your system handles passwords, captchas, and error prevention. Can it be simplified and clarified?
- Add feedback and reinforcement. Anxiety and low tolerance to uncertainty can force autistic people to give up on an online journey if something feels too challenging. Adding messages of reassurance along the way together with a clear progress bar and information about what’s coming up will make this flow easier to complete.
7. Incorporate broader accessibility guidelines
Due to sensory overload and anxiety, autistic people will often turn to additional accessibility features when accessing information or navigating flows. For example, turning off the sound and using captions on videos, or using text-to-speech software to “hear” content rather than reading it, or using Tab or arrows to navigate. Therefore, the overall accessibility of a digital product will benefit the experience of an autistic person.
I co-created this guide based on feedback from the autistic community about using digital products and research of existing studies focused on designing for autistic people. It’s difficult and unlikely for any neurotypical person to imagine the perception of an autistic person. Therefore I recommend using this guide as a starting point of designing for these communities and including autistic people in the design process to create an inclusive and accessible experience.
Many of these principles are aligned with the rules for user experience and usability. But how many existing websites follow them? I hope that highlighting them in the context of designing for neurodiversity will underline WHY as designers, we need to follow and advocate for these rules to be applied. Deviation from these principles can irritate a neurotypical person, and make a website inaccessible for an autistic person and even negatively affect their wellbeing.
However, following these simple rules will result in a better experience for everyone. In the age of the attention economy with so many things fighting for our attention, and we are overloaded with information, coming across a digital space that is calm, structured, and clear can only be a delight.
I want to say thank you to the autistic community that helped to form this guide and, in particular:
Peter Crosbie @autvntg
