A presentation at Inclusive Design 24 by Damien Senger
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
Reading is not an easy thing. It is complicated for people with reading or cognitive impairments but also for everybody depending of the context. Luckily for our all our users, there is a lot of small improvements and tips every designer, content-writer and developer can do in a project to improve the life all our users.
The following resources were mentioned during the presentation or are useful additional information.
This study is the one used to illustrate some of the slides in this talk. The study is using eye-tracking to understand how users read content on Internet.
Eyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.
An article I wrote on how to improve text readabbility for dyslexic users with skip-ink underlines for links. Not mentioned during the talk but related to the content.
Here’s what was said about this presentation on social media.
for free. You
can too.