Readability & Web: Let's build great inclusive projects

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

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

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

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

UTC+2 • 10h Amsterdam & Rotterdam, Netherlands

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

READABILITY: LET’S BUILD GREAT AND INCLUSIVE EXPERIENCE

Readability, why?

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

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

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

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

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

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

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

How do we read?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Saccades & fixations, experimentation by Nielsen Norman Group

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

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

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

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

Readability 101.

credits: Mijksenaar

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

Continuity: repetition of the information until the endpoint

Conspicuity: being eye-catching and understandable

Consistency: keeping the same wording along the way

Clarity: the message needs to be clearly understandable

Thanks Paul Mijksenaar 👍

Readability & web content.

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

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

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

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

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

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

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

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

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

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

Inclusive Design 24 • 2018 • #id24 • @iamhiwelo

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

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

You know… this kind of really useful distractions

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

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

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

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

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

How to experiment with your projects?

Let’s take a generic text

Start by adding more hierarchy

And remember, we always need more whitespace!

Less accurate than eye tracking but use moves heatmaps

The famous F-pattern

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

Some good examples.

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

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

A good grid and a good hierarchy is everything.

Readability and content grouping with in clear way

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

A website full of animations and really readable

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

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

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