- Avoid distractions-using clear and consistent information structure.
- Aviod complex background pattern/color.
- Using whitespace to organize the layout and make space for different contents.
Presenting information on a single page instead of multiple pages if possible.


University of Michigan - Ann Arbor

According to World Health Organization, "one in 160 children has an autism spectrum disorder (ASD)."(WHO, 2019). ASD affects people’s ability in communication and behavior, and an autistic designer, Irina Rusakova comments that “they feel most comfortable online — learning, communicating, shopping, and gaming” (Rusakova, 2020). She also mentions that products designed for autistic users should accommodate their needs instead of trying to fix or change their habits and emphasizes the importance of “clear visual structure and consistent layout for similar types of information” in the UI design for autistic people (Rusakova, 2020).

Designing for Autistic People

Fabri, A., & Andrews, P. (2016, June 22). Human-centered design with autistic University students: Interface, interaction and information preferences. SpringerLink. https://link.springer.com/chapter/10.1007/978-3-319-40355-7_15
 
Pavlov, N. (2014, July). User interface for people with autism spectrum disorders. ResearchGate. https://www.researchgate.net/publication/276495184_User_Interface_for_People_with_Autism_Spectrum_Disorders
 
Rusakova, I. (2020, November 2). Designing for autistic people — overview of existing research. Medium. https://uxdesign.cc/designing-for-autistic-people-overview-of-existing-research-d6f6dc20710e
 
Satpathy, L. (2020, August 28). Why designs to accommodate people with autism are better for everyone. Medium. https://uxdesign.cc/why-designs-that-accommodate-the-needs-of-autistic-people-are-better-for-everyone-dc5fb2144b15
 
World Health Organization. (2019, November 7). Autism spectrum disorders. WHO | World Health Organization. https://www.who.int/en/news-room/fact-sheets/detail/autism-spectrum-disorders

- Preferably using soft, earth tones, but making sure it still has valid color contrast.


Color

- Sans-serif fonts are preferred.
- The text should be in a single column.
- Ensuring to follow the principle of simplicity: “a text box clearly separated from the rest of the content, presented in a single, left-aligned column, using clear fonts. Clear sections and large margins on a page are beneficial too” (Rusakova, 2020).

Image Source: Sarif vs Sans-Serif font

Text

- “Using simple graphics to enhance readability” (Satpathy, 2020)
- Avoid overlap text on images. A solid color background is preferred.
- Using images to convey messages instead of artistic pleasure.
- Avoid using complex designed icons, which could be a distraction.
- “Include images and words next to each other to support the understanding of both” (Rusakova, 2020).

Image Source: DropBox

Image (including Icons & Graphics)

Content and Layout

- Call to action: the interaction should be easy to follow and understand. “animations and transitions were positive only when they added a clear benefit to the interaction they supported”(Rusakova, 2020)
- Elements such as automatic pop-up, animation, and autoplay with sounds, and horizontally scrolling should be best avoided.
- Recover from error: Presenting message for errors.	
- Providing feedback: Offering indicators for their task progress.
- Personalization: Supporting users with more freedom and allowing them to personalize some basic settings, such as background, font, and size. Examples: Open Book, The National Autistic Society.


Interaction

- Ensuring users would be able to identify the pages where they are located.
- Multiple navigation options - mouse or keyboard.
- Using descriptive labels.
- Avoid complex hierarchical menus.


Learn Before

Related