💎 How To Design For Users With Dyslexia. Almost 10% of all of us have some sort of dyslexia, but too often it’s not a part of design conversations. Let’s change that ↓ – For dyslexic users, reading can take up to 3× as long. – Users often confuse and swap b, p, d and n, u and m, w. – Remembering words between screens is difficult. – Heavily distracted by flashing images or sounds. – Difficulty to read analog clocks, time, directions, numbers. ✅ Avoid dynamic, moving or flashing images. ✅ Avoid heavy underlines, uppercase and italics. ✅ Don’t rely on accurate spelling; use autocomplete. ✅ Always align text to the left and avoid text justification. ✅ Avoid lengthy columns for reading (45–65 chars per line). ✅ Consider text-to-speech, Bionic reading and dark mode. ✅ Simple sans-serif fonts with generous spacing perform best. ✅ Use dark grey instead of black, and soft colors instead of white. Useful resources: Neurodiversity Design System https://lnkd.in/eGeWbU_R Dyslexia Style Guide 2023 (PDF) https://lnkd.in/e-8xmN-K Dyslexia-Friendly Style Guide https://lnkd.in/ejQhdCsd Design Guide For Dyslexia https://lnkd.in/euqRXNzQ Designing With Dyslexia, by Alex Morris https://lnkd.in/eZjpGnTS Dyslexia Accessibility Guidelines, by Eva Katharina Wolf https://lnkd.in/eUrqspgX Design For Dyslexic Users, by Pradipto Chakrabarty https://lnkd.in/e_fsrNcs Design for Customers With Dyslexia, by Kate Hughes https://lnkd.in/eNz7Pfy5 What Makes a Typeface Accessible, by Gareth Ford Williams https://lnkd.in/eajbSnqM How to Involve Dyslexic Users Into Your Design https://lnkd.in/ee6Fgxbm How to Write With a Dyslexic Audience in Mind, by Trisha Dunbar https://lnkd.in/eqJk3gmT GOV.UK Accessibility Posters https://lnkd.in/e6u7NqYW Further reading: Inclusive Design Guidelines https://lnkd.in/eSPKnJuR How To Design For ADHD https://lnkd.in/eieb86zZ Designing For Dyscalculia https://lnkd.in/eVY5xfBt Being a Designer With ADHD, by Kasey Robinson https://lnkd.in/efUuPwFb #ux #design #accessibility
I hate to say it, but most of this is simply not true. I contributed to the W3C WCAG initiative and am one of the seven founders of the W3C Mobile Web Initiative where we used WCAG as the foundation for best practices design. I’m also dyslexic and have ADHD - only diagnosed 2 years ago, bringing meaning to my life. 95% of my knowledge about dyslexia comes from books that I consumed post-diagnoses. So, as a dyslexic, I didn’t know what it was. There’s way too much to write, but happy to provide some high-level pointers. For example, there aren’t different types of dyslexia - it’s one thing and everyone is on a continuum. The number is not even remotely close to 10% of the population - it’s much much lower. And of those, only a very small fraction reverse letters or words. Dyslexia is very different to what most people realize. Ironically, dyslexic people are more likely to find the most important information hidden in a sea of data - the opposite to what’s being promoted here. Most of this advice is strange at best and will only misguide others.
That's a great collection of resources! Thanks for giving visibility to the topic and for mentioning my article.
Here's an add: - DON'T use "special dyslexic" fonts like "dyslexie" or other nonsense. - DO use clean, open, well-designed fonts¹ with ample luminance contrast², adequate weight, adequate spacing, and appropriate size. Notes: ¹ The classic Verdana is an example of a very readable font. Roboto also scored well in recent research. I personally like Barlow 500 as a base font. ² There's misleading information on the web regarding "too much contrast", which has led to the use of light gray text on a bright white background, which is terrible for dyslexics and everyone else. By and large, what is being called "too much contrast" is actually too much brightness relative to the ambient environment and therefore adaptation state. In other words, it is better to have a slightly darker background with black text than to have a very bright background with grey text.
And as a bonus it also works for people without dyslexia 😉 solving for accessibility solves for everyone 🎉
I can confirm all of that. But there is a lot more to it. E.g. write short and concise sentences, no text on pictures. 😉
Vitaly, thank you for your resources, fantastic as always! Recently we have finished our research and design case. Within it we have chosen an idea, conducted a research, and decided to create improvements for Duolingo app, which would allow people with dyslexia to learn the English language more effectively. Right now it is in Russian, but tomorrow we will post it in English on Medium. We interviewed and tested real dyslexic people and had a very good feedback from them. https://vc.ru/design/716792-4-fichi-dlya-inklyuzivnogo-dizayna-na-primere-prilozheniya-duolingo https://www.behance.net/gallery/166748179/Duolingo-dlja-ljudej-s-disleksiej
Basically use well established typographic standards? Image and diagrams to support text. Ragged right No to ALLCAPS, underline, Italic or Bold underline. Sounds like the principles Mario Garcia preaches.
If I may Vitaly Friedman i have compiled a whole resource of accessibility 'stuff' please use :) https://docs.google.com/spreadsheets/d/1hZsSv8vuVXZ-8uZT3lHmNYM0qoGDwtY_F9PvxnNxjts/edit?usp=sharing
Thank you for sharing as the numbers might even be hiring. I saw that "According to the International Dyslexia Association, dyslexia affects approximately 15-20% of the population. This means that around 1 in every 5 individuals has some form of dyslexia." and that is a lot to not consider when designing.
A few other useful guides on accessibility: 💎 Accessibility For UX Designers, helpful starter guides on how to design accessible and inclusive websites https://www.linkedin.com/posts/vitalyfriedman_design-ux-accessibility-activity-7063529350658158592-eBtk 🔖 Inclusive Design Toolkits and Templates for UX designers — from audit templates and personas to workbooks and activity cards ↓ https://www.linkedin.com/feed/update/urn:li:activity:7031928918429331456/ 🎁 Fantastic free eBooks for UX designers, kindly shared by the community for everybody to read — hopefully you'll find them useful as well. https://www.linkedin.com/feed/update/urn:li:activity:7016803743031599104 Happy browsing, everyone! 🎉🥳