Reading & learning disabilities: Let's build a great and inclusive digital experience together

A presentation at NLHTML5 × CSS Day in June 2018 in Amsterdam, Netherlands by Damien Senger

Slide 1

READABILITY: LET’S BUILD GREAT AND INCLUSIVE EXPERIENCE NLHTML5 × CSS Day • Amsterdam • June 13, 2018

Slide 2

Damien Senger User-centered designer @iamhiwelo Raccoon Studio raccoon.studio

Slide 3

READABILITY: LET’S BUILD GREAT AND INCLUSIVE EXPERIENCE

Slide 4

Readability, why?

Slide 5

Reading is not an easy thing.

NLHTML5 × CSS Day • @iamhiwelo

Slide 6

Readability is not only useful   for people with reading disabilities

NLHTML5 × CSS Day • @iamhiwelo

Slide 7

Reading issues can be linked to…

NLHTML5 × CSS Day • @iamhiwelo

Slide 8

Vision impairments Blindness Eye infection   Hay’s fever Visual   distraction Microsoft icons

NLHTML5 × CSS Day • @iamhiwelo

Slide 9

Cognitive “impairments” Dyslexia Hyperlexia   (Autism/ADHD) Fluency Stressful   context Microsoft icons

NLHTML5 × CSS Day • @iamhiwelo

Slide 10

Types of reading disabilities Language   comprehension Phonological   deficit Processing speed   & accuracy

NLHTML5 × CSS Day • @iamhiwelo

Slide 11

Yes, there is adult dyslexic people .

NLHTML5 × CSS Day • @iamhiwelo

Slide 12

How do we read ?

Slide 13

The reading experience depends   a lot of the context & environment

NLHTML5 × CSS Day • @iamhiwelo

Slide 14

Reading is not linear,   we are reading by saccades .

NLHTML5 × CSS Day • @iamhiwelo

Slide 15

And between each saccades,   we have something called fixation .

NLHTML5 × CSS Day • @iamhiwelo

Slide 16

And during a fixation, everything except the focus is blurry.

NLHTML5 × CSS Day • @iamhiwelo

Slide 17

A lot of us mainly use   the word shapes to read.

NLHTML5 × CSS Day • @iamhiwelo

Slide 18

Translation:   We are not reading in a   word-by-word manner.

NLHTML5 × CSS Day • @iamhiwelo

Slide 19

Yuo cna porbalby raed tihs esaliy desptie teh msispeillgns.

NLHTML5 × CSS Day • @iamhiwelo

Slide 20

You can probably read this easily despite the misspellings.

NLHTML5 × CSS Day • @iamhiwelo

Slide 21

This shape is possible by   the letters’ identifying features

NLHTML5 × CSS Day • @iamhiwelo

Slide 22

These identifying features able us to read more easily.

NLHTML5 × CSS Day • @iamhiwelo

Slide 23

Readability READABILITY

NLHTML5 × CSS Day • @iamhiwelo

Slide 24

problem porbelm pbleorm

NLHTML5 × CSS Day • @iamhiwelo

Slide 25

Saccades & fixations,   experimentation by Nielsen Norman Group

Slide 26

The shape of a word or a form is one of the first thing we analyse

NLHTML5 × CSS Day • @iamhiwelo

Slide 27

Two spots are with the same color.   Which ones?

NLHTML5 × CSS Day • @iamhiwelo

Slide 28

Let’s try again.

NLHTML5 × CSS Day • @iamhiwelo

Slide 29

Proximity could also help us,   but this is an other topic #gestalt

NLHTML5 × CSS Day • @iamhiwelo

Slide 30

Readability 101 .

Slide 31

credits: Mijksenaar

Slide 32

The 4C of readability

NLHTML5 × CSS Day • @iamhiwelo

Slide 33

Continuity: repetition of the information until the endpoint

Slide 34

Conspicuity: being eye-catching and understandable

Slide 35

Consistency: keeping the same wording along the way

Slide 36

Clarity: the message needs to be clearly understandable

Slide 37

Thanks Paul Mijksenaar
!

Slide 38

Readability   & web content .

Slide 39

First, Open Dyslexia   is not a solution.

NLHTML5 × CSS Day • @iamhiwelo

Slide 40

Always include the most important

points in the first two paragraphs .

NLHTML5 × CSS Day • @iamhiwelo

Slide 41

Use a heading hierarchy   (so users can navigate quickly where the content they are looking for is)

NLHTML5 × CSS Day • @iamhiwelo

Slide 42

Start headings with the words carrying most information

NLHTML5 × CSS Day • @iamhiwelo

Slide 43

Group small related content   with a strong visual system

NLHTML5 × CSS Day • @iamhiwelo

Slide 44

Bold important content

NLHTML5 × CSS Day • @iamhiwelo

Slide 45

Avoid the use of too generic content, be specific for links

NLHTML5 × CSS Day • @iamhiwelo

Slide 46

Be semantic , and visual.   (i.e. a list must be displayed as a list)

NLHTML5 × CSS Day • @iamhiwelo

Slide 47

Keeping consistent layout

motivates our users to read more when looking for an information.

NLHTML5 × CSS Day • @iamhiwelo

Slide 48

Users can be easily bored without good visual hierarchy.

NLHTML5 × CSS Day • @iamhiwelo

Slide 49

NLHTML5 × CSS Day • @iamhiwelo

Slide 50

F-pattern, Z-pattern,   or layer-cake-pattern? Just use a logical pattern.

NLHTML5 × CSS Day • @iamhiwelo

Slide 51

Propose distraction-free   experiences

NLHTML5 × CSS Day • @iamhiwelo

Slide 52

You know… this kind of really useful distractions

Slide 53

Hey buddy! You looks friendly but… no thank you!

Slide 54

And please… let your users the time they need to read.

Slide 55

The last, but not the least…

NLHTML5 × CSS Day • @iamhiwelo

Slide 56

✂

NLHTML5 × CSS Day • @iamhiwelo

Slide 57

Remove unneeded content.

NLHTML5 × CSS Day • @iamhiwelo

Slide 58

How to experiment   with your projects?

Slide 59

Start by adding (almost always) more whitespace

Slide 60

We (almost always) need more whitespace

Slide 61

Less accurate than eye tracking but use moves heatmaps

Slide 62

The famous F-pattern

Slide 63

You can learn what is catchy and how to optimise a page

Slide 64

Some good

  examples .

Slide 65

Except the contrast (

), this is readable and distraction-limited .

Slide 66

Smashing Mag is not afraid using bold and big font-sizes

Slide 67

A good grid and a good hierarchy is everything.

Slide 68

Readability and content grouping with in clear way

Slide 69

A nice & clearly readable design, must-have for webshop

Slide 70

A website full of animations and really readable

Slide 71

Merci beaucoup ! $   Dank u wel! %

@iamhiwelo