Дизайн UI/UX для користувачів з дислексією

Зараз підприємства будь-якого масштабу працюють над покращенням своєї інклюзивності. Ця гідна похвали ініціатива дозволяє людям отримувати переваги товарів і послуг незалежно від обмежень у здоров’ї.

Цифрові послуги також намагаються прийняти інклюзивність, причому галузі веб-розробки та мобільних розробок лідирують у цій гонці. Instagram нещодавно запустив оновлення свого додатка з двома функціями доступності: автоматичним альтернативним текстом і спеціальним альтернативним текстом.

Ці функції дозволяють користувачам із вадами зору отримати найкращий досвід використання програми.

Наразі індустрія все ще вчиться створювати інклюзивні дизайни UX/UI, які були б однаково зручними для різних людей. У цьому тексті ви знайдете інформацію про дизайн UI/UX для користувачів з дислексією.

Якщо вам цікаво, чому це важливо, ось один факт: на основі своїх досліджень Єльський центр дислексії та творчості прийшов до висновку, що до двадцяти відсотків населення світу може страждати від дислексії в тій чи іншій мірі. Тобто двоє з десяти користувачів вашого додатка чи веб-сайту можуть не отримати належного досвіду під час використання.

Усвідомлення дислексії

Дислексія — це стан, який викликає труднощі з письмом, орфографією та читанням у дітей і дорослих будь-якого віку, етнічної приналежності, соціального статусу та рівня інтелекту. Дислексія — це поширена неврологічна недостатність у навчанні, яка не повністю виліковна. Він не заразний і не передається у спадок. Цей стан не має нічого спільного з лінню і небажанням вчитися. Хоча ця нездатність до навчання мови невиліковна, вона автоматично не заважає людям із цим захворюванням досягти успіху в навчанні, професійній та особистій діяльності. За умови належного втручання та технічної допомоги хворі на дислексію можуть вести успішне життя, як і всі інші.

Деякі відомі та успішні люди мають дислексію. У Альберта Ейнштейна, Річарда Бренсона, Тома Круза, Джима Керрі, Волта Діснея та Вупі Голдберг діагностували дислексію. Ця умова не завадила Джону Кеннеді, Джорджу Вашингтону та Джорджу Бушу стати президентами США. Якщо дислексію не діагностувати та не лікувати належним чином, вона може спричинити академічну неуспішність, сильну тривогу, розчарування та низьку самооцінку.

Існують також юридичні аспекти того, як зробити Інтернет доступним для всіх. Ви можете переглянути ресурси політики веб-доступності WAI, щоб переглянути статті про правову політику щодо доступності.

Дизайн для дислексії

Сучасна освіта дуже цифровізована. Досить часто діти вивчають основи читання та письма зі своїх iPad. Однак вони не єдина група, яка потребує доступних рішень. Різні люди в усьому світі потребують доступних веб- і мобільних інструментів, якими вони можуть користуватися та отримувати користь незалежно від їхніх обмежень.

Деякі досить успішні цифрові освітні рішення для дислексиків вже існують. Серед них такі програми, як Leo, Teen and Adults Phonics Library, Knoword, Reading Machine і Draw Something. Ознайомтеся з ними, щоб отримати натхнення під час роботи над дизайном вашого продукту для людей з дислексією.

Розробити UX та UI для дислексії може бути важче, ніж створити звичайний веб-або мобільний додаток. У цьому випадку дизайнер повинен робити більше, ніж просто слідувати найкращим практикам галузі. Щоб розробити UX/UI, сприятливий для людей з дислексією, потрібно йти в ногу з останніми розробками в цьому секторі та дотримуватися вказівок, які вже довели свою ефективність. Щоб зробити свій веб-сайт або додаток зручним для людей з дислексією, найкраще працювати з дизайнерами, які мають відповідний успішний досвід і можуть показати вам свої портфоліо або тематичні дослідження.

Коли ви робите свій продукт доступним для певної групи людей, дотримання найкращих практик недостатньо. Ви завжди повинні дозволяти цільовій аудиторії тестувати продукт, щоб побачити, як вони з ним взаємодіють. Навіть після ретельного тестування якості може виникнути проблема, яку може помітити лише людина з дислексією. Незалежно від того, який цифровий продукт ви розробляєте, ви повинні постійно стежити за його користувачами. Рішення, яке здається вам найкращим, може бути заплутаним і несприятливим для людей, які насправді його використовують.

Найкращі практики розробки UX/UI для хворих на дислексію

Доступний UX/UI, зручний для людей з дислексією, можна розробити таким чином:

• Висока контрастність і дислексія погано поєднуються. Людям з дислексією часто важко читати тексти на екранах із високим рівнем контрастності. З їхньої точки зору виглядає так, ніби літери, слова та рядки «танцьовують», міняючи своє місце і заважаючи читачеві. Щоб полегшити роботу користувачам, вибирайте пастельні фони замість висококонтрастних кольори. Виберіть темно-сірий текст замість чорного під час роботи з білим фоном. Це не вплине на чіткість і читабельність для звичайних користувачів, але значно покращить її для людей з дислексією.

• Будьте обережні зі шрифтами. Шрифти, які підходять для хворих на дислексію, мають збільшений міжрядковий інтервал і чіткі друкарські елементи для літер, які їх зазвичай заплутають. Існують шрифти для людей з дислексією, наприклад Dyslexie або Open Dyslexic. Шрифт Comic Sans, який часто висміюють, також напрочуд добре працює для цієї аудиторії. Причина цього досить проста – літери в цьому шрифті мають великі проміжки між собою та мають унікальні елементи типографіки, які допомагають користувачам легше розрізняти схожі літери. Якщо ваш вибір шрифту обмежений звичайними варіантами, виберіть Arial, Century Gothic, Tahoma, Trebuchet або Verdana.

• Тримайте текст коротким. Ця порада стосується рядків тексту зокрема та екранів загалом. Дослідження показують, що рядок на екрані не повинен містити більше 45 символів для кращого розуміння. Крім того, не рекомендується вибирати шрифти розміром менше дванадцяти-чотирнадцяти пунктів.

• Не перевантажуйте стиль тексту. Хоча літери, як правило, танцюють в очах хворих на дислексію, одягнення їх у модний курсив і підкреслення не покращить ситуацію. Щоб зробити ключові моменти тексту зрозумілими для хворих на дислексію, використовуйте жирний шрифт. Ви можете підкреслити важливі блоки тексту за допомогою рамок і великих літер нижнього регістру.

• Включіть інструменти читабельності. Надайте своїм користувачам більше способів зрозуміти тексти у вашому продукті, увімкнувши інструменти для читання. Користувачі з дислексією та вадами зору отримають значну користь від функції перетворення тексту в аудіо. Ви можете реалізувати цю функцію одним із двох способів: використати сторонній автоматизований інструмент або додати аудіозаписи, на яких хтось читає текстові області до продукту.

• Розділена функціональність. Якщо на одному екрані занадто багато функцій, спробуйте або зменшити кількість функцій, або розділити екран на дві частини. Краще мати кілька надзвичайно чітких екранів додатків, ніж кілька перевантажених, які можуть викликати труднощі в адаптації користувачів до них.

• Пріоритет гнучкості. Розробляючи дизайн для користувачів з дислексією, зробіть своїм пріоритетом створення гнучкого продукту. Не завадить побудувати кілька шляхів, щоб дістатися до одного пункту призначення для ваших користувачів. Уникайте створення глухих кутів, які змусять ваших користувачів повторювати довгі складні кроки та знову вводити рядки тексту. Жоден користувач не буде радий це зробити.

• Дозволити налаштування. Дизайнер може вибрати найкраще поєднання кольорів, контрастів, шрифтів і стилів. Однак для деяких користувачів вашого цифрового продукту заздалегідь визначений вибір може бути несприятливим. Не завадить дозволити розумний рівень налаштування дизайну. Дозвольте користувачам вибирати шрифти, збільшення тексту, кольори тексту та фону.

• Доповніть текст графікою. За можливості використовуйте значки для підтримки тексту або використовуйте їх замість тексту для кращого розуміння. Зображення та відео повинні допомагати текстам і робити дизайн більш зрозумілим і покращувати його доступність. Супроводжуйте відео субтитрами для користувачів із вадами зору.

• Використовуйте автозаповнення, нагадування та підказки. Не змушуйте користувачів вашої програми запам’ятовувати все, що вони коли-небудь вводили та шукали у вашій програмі. Увімкнення поля пошуку, схожого на Google, із пропозиціями з історії користувача буде дуже корисним. Якщо можливо, давайте поради своїм користувачам.

• Включити автоматичне виправлення. Це дратує, коли програма не розуміє вас лише тому, що ви неправильно написали одну букву. Такі сервіси, як Pinterest, вгадують, що має на увазі користувач, і пропонують йому варіанти на вибір. Така функція може бути цінною для користувачів з дислексією. Це також буде корисно молодшій аудиторії та неносіям мови.

• Простіше – краще. Не перевантажуйте свій дизайн непотрібними елементами, які потенційно можуть відволікати й спантеличити користувачів. Дизайн UX/UI для дислексії повинен зменшити когнітивне навантаження на користувача. Воно має бути максимально чітким і не відволікаючим.

Погана практика дизайну дислексії

Існують деякі практики UX/UI, які здаються логічними та корисними для розробників і звичайних користувачів, але дещо несприятливі для хворих на дислексію. Ось короткий огляд поганих практик, яких слід уникати:

• Великі блоки важкого тексту. Хоча вони здаються хорошим варіантом, щоб втиснути якомога більше тексту на один екран, вони завжди є поганим вибором з точки зору читабельності та зручності для користувача.

• Переважні екрани. Не стискайте все на одному екрані. Згідно з останніми тенденціями розробки мобільних і веб-додатків і дизайну, мінімалізм є новим чорним. Подивіться на сторінку профілю Instagram. Ви не бачите на ньому всіх функцій програми. Немає відволікаючих факторів і візуального шуму.

• Подвійний інтервал у кінці речення. Хтось може подумати, що подвійні пропуски в кінці речень роблять текст зрозумілішим. Однак це не стосується користувачів з дислексією. Подвійний інтервал робить текст розмитим, як річка, в очах хворого на дислексію.

• Використання розпливчастих кнопок. Коли на кнопці написано «Натисніть тут», її значення зрозуміле для розробника та творця програми, але воно може бути не таким очевидним для користувачів з дислексією. Зробіть команди на кнопках максимально простими та однозначними.

• Вся інформація на одній сторінці. Хоча було б логічно розмістити всю інформацію про одну річ в одному місці, це не дуже гарна ідея для користувачів з дислексією. Дайте своїм користувачам можливість отримати доступ до одних і тих самих даних кількома різними шляхами.

Заключні думки

Інтернет виник як технологія, доступна кожному. Розробники та дизайнери повинні зберігати цифрові технології недискримінаційними для всіх типів користувачів, незалежно від того, наскільки просунутими та складними вони стають.

Розвиток технологій смартфонів змусив мільйони людей перейти на мобільні пристрої як на основне джерело онлайн-спілкування, взаємодії та розваг. Створення веб- і мобільних додатків з урахуванням доступності має стати другою натурою розробників і дизайнерів.

Питання доступності для хворих на дислексію вивчалося деякий час, і вже є кілька хороших практик, які ви можете використати для свого проекту. Немає нічого надто складного в тому, щоб зробити дизайн вашого цифрового продукту доступним для користувачів з дислексією. Доступність не відніме стильності та елегантності вашого продукту. Як бонус, це зробить його більш рішучим і гуманним. Адже інформація має бути доступною для кожного, адже вона є невід’ємною частиною нашого життя.

Ресурси для роботи з дислексією:

Нижче ви знайдете список відповідних актуальних ресурсів, які можуть допомогти вам створити кращий дизайн UX/UI для користувачів з дислексією:

1. 20 дизайнерських ресурсів для полегшення навчання дітей з дислексією
2. Британська асоціація дислексії: Посібник зі стилю дислексії
3. UX Planet: Дизайн для дислексії
4. Dyslexia International i (некомерційний інформаційний ресурс)
5. Центр дислексії Хелен Аркелл (Благодійний та інформаційний ресурс)
6. Міжнародна асоціація дислексії
7. Усабілла: Як створити дизайн для дислексії