Designing for Learning Difficulties

More than 1 in 20 people experience difficulty with reading and learning, and those difficulties don’t just end at school. We’ll go through some common learning difficulties including dyslexia and discuss what impact they have on designing for the web.

Chris is here today because of his wife @sazzarj, who is a primary school teacher. Teachers learn how to identify indicators and teach children with learning disabilities; and she started showing Chris the things she was learning.

People have been compelled to share information long before humans even evolved. Neanderthals left warning signs in dangerous caves. Language evolved through many forms through history and we still have extremely different forms of language in the world today.

火 looks a bit like early glyphs, pictures of twigs with flame. It’s not always this easy to see the thread. We’ve mostly moved beyond visual and into phonetic language.

The rules in Italian are reasonably consistent – i is always pronounced “ee”, ch is a hard “k”. Now you know how to say “bruschetta”!

But in German, ch may be hard or soft. Then you have ‘lone words’, like “engagement” which is given the French pronunciation because it’s a word lifted from French.

English is an opaque language with no consistency at all. The/them/theme… horse/worse… “i before e” except when it isn’t. English is put together from a range of root languages.

So language is difficult! It gets much harder when learning difficulties are involved. There are physical differences that show some peoples brains don’t have the same arrangement of connective fibres. This creates learning difficulties, but they may not surface if you learn a language like Italian first; then suddenly when you learn English you have trouble.

So how do we fix this, as designers?

  • There are specific fonts for dyslexic readers, including Open Dyslexic which is free. However their effectiveness has been questioned and there are some more mainstream typefaces that test well, including Helvetica and Arial.
  • There are typsetting rules to support dyslexic readers – larger type, more spacing, etc.
  • Don’t use justified text… for anyone!
  • W3C has cognitive accessibility guidelines
  • Be prepared for the fact some people will be applying their own design settings
  • Meet colour contrast – there are tools to support this, but they are hidden in dev tools or require extensions
  • Dark mode is fantastic for photophobia. We tend to design for light by default, but we should also be handling dark mode as a media query.
  • Extranous Linguistic Complexity…….. use simple words
  • Animation – don’t overdo it! Tone things down, give peoples brains a break. There is a prefers-reduced-motion media query, although browser support isn’t really ready. However there is a trick you can do to avoid switching off motion for everyone (see codepen)
  • Reduce visual noise – don’t autoplay media, don’t hurl dialogs at users for no reason

The conclusion: there is no such thing as normal. We’re all weird. We will all run into a situation where we need some assistance. It’s simple design ethics that we should not exclude people or make their lives harder.

@cliener | links | slides