I first called this page “special needs”. Then I thought better.
The term “special needs” often used to refer to school-age students’ challenges that prevent them from fully participating in the mainstream setting. When talking about web design, or design in general, we call it Web Content Accessibility Guidelines (or WCAG) 2.1, a legal term that requires all “public places” to be accessible to everyone (and the wide web of the internet is as public as it gets). For a great discussion on the history of the crusade for the Americans with Disabilities Act (ADA), listen to this 99% Invisible podcast.
Turns out that when we make the required changes to accommodate people with disabilities, everybody fares better, not just people with special needs.
Solve for one, extend to many
Can you see yourself
with a screaming toddler, or hanging out in a noisy coffee house? (i have done both)
as non-native speakers of a language?
having a temporary disability (sprained wrist or eye drops)?
after a sleepless night?
in a hurry, not able to comprehend all the details of a text or announcement?
I could go on with the list … but I am not going to. And yes, we have all been there, and know how important it is to design not just for the able-bodied native speaker sitting in a quiet room, after a good night’s sleep.
Inclusive design
Before we get into the specifics, I want to clarify some points about accessibility guidelines and just plain good design guidelines that help everyone.
Accessibility is meeting the needs of people with disabilities, enabling them to fully participate. They are l legal requirement (ADA, IDEA, WCAG 2.1) based on which lawsuits can be filed.
Inclusive Design does not specifically target people with disabilities and is not integrating assistive technology, instead it
aims to fundamentally redesign a product so that the barrier does not exist in the first place. Inclusive design is also known as universal design.
Recognizes that we are all disabled in certain situations, and designs for that
All benefit from good design to different degrees
Here are some well-known examples of inclusive design:
This watch allows its wearer to read the time just by touchingHandles help both people with fine motor skills, and also those carrying grocery bags to open doors more easilyThis needle is a great help for people with low vision, difficulties with fine motor skills, and also when there is not enough lightThis playground equipment works for able-bodied and wheelchaired people
Cognitive Disabilities
When people talk about the ADA, or WCAG 2.1, they normally mean accommodations for people with hearing and visual problems, even though learning disabilities affect more people. Why is that?
Source: https://disabilitycompendium.org/sites/default/files/user-uploads/2017_AnnualReport_2017_FINAL.pdf
The reasons are manifold.
No clear definition. Cognitive disabilities (sometimes called learning disabilities, or learning differences) are not clearly defined, whereas vision and hearing problems are. Just as an example, ADHD is included in some lists, but not in others.
Measurement. If cognitive differences are not clearly defined, they cannot be clearly tested and measured either, and so it is difficult to prove that an application is not compliant. WCAG 2.1 does mention cognitive differences but fails to provide clear, actionable guidelines.
The stigma attached to learning disabilities. Most testing guidelines and legislation such as IDEA ((U.S. Department of Education’s Individuals with Disabilities Education Act) are put in place for educational settings because they benefit students in school. Once these same people leave school, a diagnosis of cognitive differences stigmatizes them, making it very hard to gain employment. Statistics show that a lot more students have some kind of learning disability than young adults, even though most of these cannot be cured.
In this post, I would like to talk about designing with learning disabilities in mind (stealing Jeff Johnson’s book title a little bit). As I said before, there is no agreed upon terminology and definition of these disabilities, and my list is not scientifically determined. My focus is going to be on the following challenges, along with web design guidelines
Dyslexia is a lifelong language-based learning disability, characterized by difficulties with accurate and fluent word recognition, spelling and reading decoding. About.10-20% of the population is affected by some version of dyslexia. Some famous people who have dyslexia include: Whoopie Goldberg, Steven Spielberg, Anderson Cooper, Tim Tebow
Designing for People with Dyslexia
Language
Use short, simple sentences (max 14 words/sentence)
Choose short words (travel instead of a voyage)
Explain jargon and abbreviations ( may need to provide a glossary)
Use active rather than passive voice
Don’t nominalize (We discussed vs. we had a discussion)
Use examples to illustrate points ( I like sports, such as jogging and weightlifting)
Conceptualizing time, and judging the passing of time
Holding number sequences in their mind, transposing or reversing them (e.g, 345 for 543)
with directions
Famous people include Benjamin Franklin, Cher, Bill Gates
Designing for People with Dyscalculia
Users need to know where they are in the process (breadcrumbs,
and progress bar charts)
Make calculations explicit (when increasing the quantity of an item in a shopping cart, show the math: 2 X $45 = $90
Include reminders of what happened on the previous page
Avoid numeric captchas on web forms
Autism Spectrum Disorder – ASD
a wide range of lifelong mental conditions that are characterized by a(n)
A deficit is social skills and perspective taking (lack of empathy)
Difficulty regulating emotions
Either decreased language skills (many are non-verbal), or precocious vocabulary/speech. Many on the spectrum do not understand sarcasm, satire, parody, allegory, metaphors and will often take things literally.
Obsession and hyperfocus on things/topics (e.g., there are people who are super-focused on ducks). They develop expertise in areas neurotypical people don’t find as fascinating
High need for predictability and routine – they want to know ahead of time what to expect and do not do well with last minute changes
Challenge to shift from one task to another
Heightened sensitivity to stimuli (noise, light, smells, the texture of food, etc.)
1 in 59 children(1 in 37 boys and 1 in 151 girls) have ASD
Autism Spectrum Design Guidelines
as people on the autism spectrum thrive on predictability, they want (to)
See very clear expectations for the steps in a task flows
Know where they are in the process
Use simple, clear navigation, with the browser buttons doing some of the moving from page to page
See icons that are clear, large buttons with text. The icons should NOT be multicolored.
Synopses for longer texts
Context to the text – either by adding images or through reiteration from the previous sentence or paragraph
Text that is separated from images and background (no overlapping or background images.)
Simple graphics, but make sure that no element stands out too much
Texts presented in a single column, using clear sans-serif fonts
Soft, mild colors as the background. Avoid colors with high luminance (yellow and white are the worst offenders, with blue, red and brown the most appealing). On luminance, see the sourceThe lower the value of luminance, the better it works for people on the spectrum.
Anxiety Disorders
Anxiety disorders are quite common (18.1% of the population), affecting twice as many women as men. A general anxiety disorder (GAD) makes people nervous, restless and tense, with a sense of impending danger, panic or doom. This leads to an increased heart rate, and trouble concentrating.
Designing for People with Anxiety
Make sure users have feelings of control and progress toward achieving tasks
Clearly signal where users are in the process
Make interaction results predictable
Make sure that the visual elements have space, and are not crowded together
Increase the credibility of the website by eliminating typos, and poor alignment
Attention Deficit (Hyperactive) Disorder / ADHD
About 5-7.5% of the population has some form of Attention deficit disorder, characterized by
Difficulty sustaining attention, resulting in careless mistakes
Is often easily distracted by extraneous stimuli
Difficulty organizing tasks and activities
Poor time management
Often losing important things (keys, tools, paperwork, cell phone)
Often gets overwhelmed
Being forgetfulness and fidgety
Designing for People with ADHD
Provide a ‘calm’ environment, with soothing colors. No decorations or distractions
Write instructions in the affirmative
Provide a high-reinforcement environment
Distinguish important information by putting it in bold or color. Signpost sections and group related information into panels;
Use large print (12-14 point) and a clear sans-serif font such as Arial;
Help users follow text by writing/highlighting alternate lines in different colors;
Avoid having dynamic or moving images on the site.
Make it clear what point in the process they are at could help them keep track of their progress (see the example of a survey from www.typeform.com to the right
Enable “save it as a draft” and quick/easy resume functions
Make sure that chunks of information can be saved (and without needing to complete the whole page)
Replace long pages that require extensive scrolling with separate pages
Bottomline
Usability testing Design and test with a diverse set of users, for diverse scenarios. Try to recruit people whose native language is not English, and users without a college education. Create realistic scenarios when testing. Most users do not use your interface, do not read your words in a calm testing room, having an hour set aside to complete a task.
Language: Use simple, easy-to-understand language (vocabulary, sentence structure, paragraph). Use visual organizers to get your point across
User-control: Allow the user to feel in control both of the process and as much of the display as possible (i.e.g, customization)