Building inclusive UI for Neurodivergent Users
Most commonly, people think of users with various hearing or vision abilities when including accessibility features. You may even think of elderly user or a 'temporarily disabled' user (like someone with a broken arm) but let us also remember to be mindful of our cognitive and neurodivergent users as well.
Sometimes these users may not always be included, not purposely, but due to lack of awareness. I have been guilty of this too. My daughter is the whole reason this type of awareness was brought to my attention.
To give a little insight, I have a 7-year-old who is autistic and has a sensory processing disorder. A few years, I open the Starz application on our television and as the logo enlarges on the screen, a loud drum noise bellows out. I watch my daughter grab her ears and squeeze her eyes tightly closed, the run into a corner with the tv out of sight. I was so confused. I'd seen and heard this plenty of times before and it never bothered me. I thought maybe she was overreacting. Then, the same type of issue happened when opening the Netflix application, after aloud chime and an array of flashing colors scroll across the screen, I look at my daughter and she is in tears, eyes closed, and tightly covering her ears. I wondered...what was going on? why would this be her reaction?
What I learned was some people with autism and/or sensory processing disorders tend to perceive sensory stimuli differently. The sounds that may not influence myself but can be painful and overwhelming to her. Also, she has a very low tolerance to bright, flashing lights.
She is the reason why I am here. After those events occurred, I began to wonder how many others are affected by loud or repetitive noises, or flashing, pulsating animations when use the web. I want to encourage you to create for users like her, as well as others with various cognitive and neurodivergent abilities (ex: ADHD, Autism, and Dyslexia).
Issues and barriers users with different neurodivergence or cognitive abilities may experience:
An overload of bright colors, this may become overstimulating or even distracting to the web experience
Large sections of text may make it difficult to understand, impair reading comprehension, and word recognition
Having visible timers on screen, this can sometime cause anxiety and create unnecessary stress
Loud music and/or sound effects
Flashing light, and lights with pulsing patterns, could potentially cause seizures in some cases
Blinking images, Gifs, automatic scrolling sections, these could be overstimulating and distracting
Too many images or information in one block, content- crowding, cluttered sections crammed with text, images, videos, etc. This is known as Visual noise.
Here are a few practices that you may want to implement:
Keeping navigation/menu placement consistent throughout the website/application. This creates accessibility for all users and predictability. Users need to understand the order of menu items, and where the search bar and navigation links are located.
If possible, do not include content that flashes, blinks repeatedly, or pulsates at a particular rate or pattern. If this type of content is necessary, add warnings to the users before the content is displayed. It would even help to give users a way to switch off the animations if they aren't essential.
Giving users the ability to use commands like pause and stop on content such as rotating images or slides. Also, the ability to hide non-related articles or content.
Use of a Screen Mask. This is a reading tool that follows the mouse or touch to assist with eliminating page distractions. This gives the user the ability to focus one block of information at a time. (Google Chrome has a screen mask tool induvial can use on their browser)
Of course, all the listed techniques will not be possible to implement on every application. The goal is to find a way to ensure that users with neurodivergent conditions can adjust and navigate a website that suit their personal needs. Slight changes, like font size, color contrast, and alternative ways to relay information (i.e., video, audio) could make the difference for a more comfortable web experience.
We all have unique abilities, personalities, and ways of communicating. It is important for us as developers, designers, content creators to understand that when we create, build, design, and write with purpose of making our websites and applications accessible first, the web experience is enhanced for us all.
Top comments (2)
Accessibility is a huge plus, great article.
Thank you!