Readability & Web: Let's build great inclusive projects

A presentation at Inclusive Design 24 in October 2018 in by Damien Senger

Slide 1

READABILITY: LET’S BUILD GREAT AND INCLUSIVE EXPERIENCE Inclusive Design 24 • October 11, 2018

Slide 2

Damien Senger Product designer • accessibility advocate raccoon.studio • @iamhiwelo Raccoon Studio Castor EDC

Slide 3

Damien Senger Product designer • accessibility advocate raccoon.studio • @iamhiwelo yes, I love raccoons! Raccoon Studio Castor EDC

Slide 4

Damien Senger Product designer • accessibility advocate raccoon.studio • @iamhiwelo and we’re recruiting! Raccoon Studio Castor EDC

Slide 5

UTC+2 • 10h Amsterdam & Rotterdam, Netherlands

Slide 6

Good to know: This talk slides are available on Notist. https://noti.st/hiwelo/SgPVxk and if you like it, don’t hesitate to invite me to your meetup or conference to talk about inclusive design, accessibility or queer representation in design

Slide 7

READABILITY: LET’S BUILD GREAT AND INCLUSIVE EXPERIENCE

Slide 8

Readability, why?

Slide 9

Reading is not an easy thing. Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 10

Readability is not only useful for people with reading disabilities Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 11

Reading issues can be linked to… Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 12

Vision impairments Blindness Eye infection Hay’s fever Visual distraction Microsoft icons Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 13

Cognitive “impairments” Dyslexia Hyperlexia (Autism/ADHD) Fluency Stressful context Microsoft icons Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 14

Types of reading disabilities Language comprehension Phonological deficit Processing speed & accuracy Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 15

Yes, there is adult dyslexic people. Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 16

How do we read?

Slide 17

The reading experience depends a lot of the context & environment Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 18

Reading is not linear, we are reading by saccades. Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 19

And between each saccades, we have something called fixation. Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 20

During a fixation, everything except the focus is blurry. Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 21

And every few fixations, we need a small break Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 22

Saccades, fixations, breaks… nothing linear (at all) Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 23

Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally. Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 24

A lot of us mainly use shapes to identify words when reading. Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 25

Translation: We are not reading in a word-by-word manner. Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 26

Yuo cna porbalby raed tihs esaliy desptie teh msispeillgns. Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 27

You can probably read this easily despite the misspellings. Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 28

This shape is possible by the letters’ identifying features Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 29

These identifying features able us to read more easily. Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 30

Readability READABILITY Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 31

problem porbelm pbleorm Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 32

Saccades & fixations, experimentation by Nielsen Norman Group

Slide 33

The shape of a word or a form is one of the first thing we analyse Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 34

Two spots are with the same color. Which ones? Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 35

Let’s try again. Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 36

Proximity could also help us, but this is an other topic #gestalt Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 37

Readability 101.

Slide 38

credits: Mijksenaar

Slide 39

The 4C of readability Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 40

Continuity: repetition of the information until the endpoint

Slide 41

Conspicuity: being eye-catching and understandable

Slide 42

Consistency: keeping the same wording along the way

Slide 43

Clarity: the message needs to be clearly understandable

Slide 44

Thanks Paul Mijksenaar 👍

Slide 45

Readability & web content.

Slide 46

First, Open Dyslexia is not a solution. Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 47

Always include the most important points in the first two paragraphs. Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 48

Use a heading hierarchy (so users can navigate quickly where the content they are looking for is) Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 49

Start headings with the words carrying most information Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 50

Group small related content with a strong visual system Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 51

Bold important content Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 52

Avoid the use of too generic content, be specific for links Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 53

Be semantic, and visual. (i.e. a list must be displayed as a list) Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 54

Keeping consistent layout motivates our users to read more when looking for an information. Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 55

Users can be easily bored without good visual hierarchy. Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 56

Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 57

F-pattern, Z-pattern, or layer-cake-pattern? Just use a logical pattern. Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 58

Propose distraction-free experiences Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 59

You know… this kind of really useful distractions

Slide 60

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

Slide 61

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

Slide 62

The last, but not the least… Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 63

✂ Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 64

Remove unneeded content. Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

Slide 65

How to experiment with your projects?

Slide 66

Let’s take a generic text

Slide 67

Start by adding more hierarchy

Slide 68

And remember, we always need more whitespace!

Slide 69

Less accurate than eye tracking but use moves heatmaps

Slide 70

The famous F-pattern

Slide 71

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

Slide 72

Some good examples.

Slide 73

Except the contrast (😅), this is readable and distraction-limited.

Slide 74

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

Slide 75

A good grid and a good hierarchy is everything.

Slide 76

Readability and content grouping with in clear way

Slide 77

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

Slide 78

A website full of animations and really readable

Slide 79

Merci beaucoup ! $ Thank you! % @iamhiwelo Tack! & Bedankt! '

Slide 80

Damien Senger Product designer & accessibility advocate raccoon lover raccoon.studio • noti.st/hiwelo @iamhiwelo