Designing for neurodivergent users

Designing for a variety of user needs can prove challenging. There is no one-size-fits-all answer.

However, focusing on clarity can make your site easier and more pleasant to use.

Text

Keep text as clear as possible. Organize it for easier reading.

Pick a few good fonts.

Use one or two fonts that are easy to read. Sans serif fonts usually look best on computer screens, and they're easier for dyslexic readers. Make sure the font looks good at different sizes.

Lato, Open Sans, Clear Sans, and Roboto are examples of readable fonts.

Keep text big enough.

Nobody wants to squint. A 12 pt or 14 pt size is ideal.

Use clear headings.

Headings organize your text and make it easier to read. They also provide an outline that helps people understand your main points.

Avoid big paragraphs.

It can be hard to keep your place in a big paragraph. To keep it small:

Set a maximum width for your text area so paragraphs don't get too wide.
Break up long paragraphs into smaller paragraphs.

The ideal line length is somewhere around 50 characters.

Tip: The Hemingway app can help check your sentences for length and clarity.

Skip underlines, italics, and all caps.

These can be harder for people with dyslexia to read. Use bold text if you want to emphasize something.

Color

Use calm colors with enough contrast.

Choose colors for text carefully.

High contrast can help users with low vision see better. But it also makes it harder for users with dyslexia or sensitive eyes to read.

Try to find a happy medium by using black text on an off-white background or dark gray text on a white background.

Offer enough contrast.

Low contrast can make things hard to read. Make sure you have clear contrast when you want people to distinguish between things.

Want to check your contrast? Sim Daltonism and Colour Contrast Analyser are two free tools that include color blindness simulation.

Watch your color saturation.

Over-saturated colors can distract readers or give them headaches. Try using dusky tones or pastels instead. Only use bright colors on areas where you want to draw attention.

Convey meanings with text as well as color.

Don't rely on colors only (like red or green) to convey a message. Make sure you also use text in case someone has trouble seeing colors.

Images and Video

Pair images and video with descriptive text.

Use icons to your advantage.

Pairing text with icons can make your site easier to navigate.

Make captions available.

Some neurodivergent people struggle with understanding audio or reading text on images. Offer captions or image descriptions to make sure it's clear.

All videos should have subtitles. Transcripts can also be useful for people who want to review video content.

Skip flashing lights.

Flashing colors are distracting for many people. Some people can even suffer seizures or migraines.

Buttons and forms

Clarity helps your users complete tasks with ease and minimal stress.

Clarify your call to action.

Make your buttons easy to see. Label them with a clear phrase like "complete purchase" or "sign up" (instead of something vague like "submit").

Put important buttons somewhere easy to see. Use a color that stands out.

Make navigation easy during long tasks.

Forms, quizzes, and other multi-page actions should use progress bars. This helps people know how far along they are.

Allow people to navigate backwards and check their answers.

Confirm what they did.

After a click, give a message telling them:

What they just did (e.g. subscribing to a mailing list)
What information was sent (e.g. their email address)
What to do if they made a mistake (e.g. how to unsubscribe)

Content

Keep content clear, organized, and predictable.

Organize.

Your site should have a consistent, intuitive style. Organize using headers, hierarchies, and clear buttons and links.

Put information in bold or color to highlight its importance. Don't crowd it.

Write in plain language.

Your site should be easy for people of all ages and abilities to read.

Skip metaphors and idioms.
Keep sentences and paragraphs short enough.
Offer examples instead of generalizations only.
Offer summaries.
Mark sarcasm with /s.

Skip the clutter and inconvenience.

A clean, clear design makes your site easier to use (and load on slow connections).

Skip background images and background textures.
Avoid pop-ups and other surprises.
Never make people scroll horizontally.
Keep ads unobtrusive.

Avoid automatically-changing content.

Moving carousels and slideshows can be distracting or too hard to read. People with dyslexia may find it hard to read these. Sensitive people may get distracted or dizzy from the motion.

Skip animations (including GIFs) and autoplay whenever possible.

If your client is really attached to an animation, at least make a prominent "pause" button.

Try using diagrams to illustrate (not replace) complex information.

A diagram can help people with intellectual and learning disabilities understand something better.

Support personalization.

How do you account for different user needs? Let them customize their experience.

Try letting them choose different font sizes.
Try letting them choose background colors.
Support use of mouse and keyboard navigation.