Як створювати дизайн для людей з різними видами колірної сліпоти — мій досвід і UX рекомендації

Усім привіт, я Марина Брижак, UX-дизайнерка у Craft Innovations. Нещодавно ми працювали над проєктом, який спонукав нас набагато ширше поглянути на проблему accessibility — доступності в дизайні — та заглибитися в тему колірного сприйняття.

До цього я рідко задумувалась про те, що мільйони людей всюдисвітно мають різні типи колірної сліпоти. Причому багато хто з них цього навіть не помічає — наприклад, не здогадується, що індикатор зарядки до MacBook змінює колір. Через цю особливість люди сприймають інтерфейси не так, як їх проєктували дизайнери, і це може повністю змінити користувацький досвід.

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

Як команда дізналася про проблему

Ми створювали платформу Web 3.0 для віртуального продажу землі. Однією з її основних інтерактивних частин була карта, розділена на шестикутники одного розміру (як бджолині стільники), які користувачі могли купити.

Ці шестикутники мали різні статуси, які були критичними для логіки продукту та взаємодії користувача.

Карта з кольоровим оверлеєм

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

Коли ми підготували hi-fi прототип (high fidelity — високодеталізований прототип, що повторює весь функціонал сервісу), то, перш ніж перейти до UI, провели юзабіліті-тестування. Ми хотіли побачити, як користувачі взаємодіють з платформою, та знайти блокери чи «сліпі» зони. Для цього ми обрали 8 учасників і випадково виявилося, що один з них мав порушення кольоросприйняття.

Тоді ми задумалися: якщо 1 із 8 випадково обраних користувачів мав проблеми зі сприйняттям кольору, наскільки це взагалі актуально для нашої аудиторії?

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

Знахідки, які виявили в інтерв’ю з користувачами

За результатами інтерв’ю та опитувальників ми можемо виділити два типи користувачів. Перший — люди, що мають низький рівень порушення колірного зору. Вони зазвичай не знають, що бачать кольори по-іншому, поки не пройдуть медичні тести, наприклад, для водіїв чи служби в армії.

Як правило, вони не відчувають жодних незручностей у повсякденному житті. Бувають лише кумедні ситуації, як у прикладах нижче.

Але були й інші відгуки, від людей зі значним рівнем порушення колірного зору та користувачів форумів. Вони розповідали про відчутний дискомфорт чи навіть нездатність виконувати деякі завдання через своє кольросприйняття.

«Я звик покладатися не тільки на колір. Завжди намагаюся знайти інші елементи, які могли б допомогти мені розрізнити кольори — мітки, текстури чи значки.»

Приблизно 300 мільйонів людей у світі мають дефіцит колірного зору. 1 з 12 чоловіків має порушення кольоросприйняття (8%). 1 з 200 жінок має порушення кольоросприйняття (0,5%).

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

Сприйняття кольору у цифрових інтерфейсах

Подумаймо — які типи цифрових інтерфейсів дуже покладаються на колір?

Візьмемо менеджери задач, дашборди, e-commerce. Чи використовують ці типи продуктів кольорове кодування в інтерфейсах? Так, дуже часто. Са́ме кольорове кодування найчастіше використовується для орієнтації користувачів та навчання роботи з інтерфейсом.

Ось, наприклад, схема станцій метро. Інша лінія — інший колір. Яку альтернативу можна використати, щоб відрізнити одну лінію метро від іншої?

Гілки метро в Токіо (джерело — personal.sron.nl)

Менеджер задач (фото з інтернету)

Графіки (фото з інтернету)

E-commerce (фото з сайту Amazon.com)

Як деякі з цих типів інтерфейсів можуть виглядати для людей з вадами кольоросприйняття

Як ми вирішили проблему

У Figma є кілька плагінів, які допоможуть створити доступні цифрові інтерфейси. Ми вибрали спеціальний плагін, який генерує, як виглядатиме інтерфейс для людей із 8 різними сприйняттями кольорів. Він називається Color Blind.

Вам просто потрібно вибрати фрейм, з яким ви працюєте, натиснути кнопку Create Views, і ви побачите 8 варіантів сприйняття вашого інтерфейсу.

Ось так виглядав наш перший вибір колірної палітри для людей з дейтеранопією (червоно-зелена кольорова сліпота).

Дейтеранопія — це найпоширеніший розлад сприйняття кольорів. Її мають 6% чоловічого населення, при тому, що колірну сліпоту всього мають 8%.

А ось наш фінальний вибір колірної палітри на основі ітеративного підходу до дизайну з використанням плагіна Color Blind.

Маленька порада: ви можете користуватися цим сайтом з кольоровими палітрами, які добре сприймаються людьми з порушеннями колірного зору та вдало поєднуються між собою.

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

Вирішили цю проблему ми за допомогою інших контрастних інструментів — обведень і товщини ліній.

Кольоровий оверлей на карті — не єдиний елемент інтерфейсу, на який ми повинні були звернути увагу. Контраст кольорів у всіх UX-компонентах необхідно перевірити та привести до стандартів.

Щоб наші дизайни легко читалися, ми використовуємо ще один плагін — A11 Color contrast checker, і перевіряємо, чи розмір і контраст тексту відповідають стандартам.

Адже контрастність — критичний фактор для Screen readers, якими, з великою ймовірністю, користуються люди і з особливостями кольоросприйняття, і з вадами зору.

Ми прагнули зробити платформу достатньо гнучкою, тому додали функцію Card View, щоб користувачі могли або ж вибрати шестикутник на карті, або подивитися на картки.

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

Так ви отримаєте хорошу репутацію і нових потенційних клієнтів або з просто лояльних поціновувачів вашої компанії.

Рекомендації

Головне — зробіть так, щоб колір був не єдиним засобом передачі інформації. Дотримуйтесь цих рекомендацій, якщо хочете створити доступний інтерфейс для людей з вадами кольоросприйняття:

1. Переконайтеся, що ви додали текстові мітки для позначення кольорів. Наприклад, якщо ви використовуєте червоний і зелений для відображення різних станів, також додайте текстові мітки або інші візуальні підказки.
2. Використовуйте іконки, схеми та рамки для спрощення сприйняття. У цій презентації ви знайдете кілька хороших прикладів використання шаблонів.
3. Створюйте кольорові палітри, доступні для людей з колірною сліпотою. Цей сайт може стати відправною точкою під час роботи над палітрою кольорів. Коли виберете кольори, протестуйте їх на користувачах або за допомогою плагінів.
4. Переконайтеся, що ви перевірили інтерфейс із плагіном. Ми використали плагін Color blind у Figma, який дозволяє користувачам генерувати 8 різних варіантів сприйняття кольорів.
5. Перевірте контрастність усіх UX-елементів в інтерфейсі. Плагін A11 Color contrast checker допоможе переконатися, що ваш інтерфейс можна використовувати, наприклад, з програмою зчитування з екрана.
6. Зверніть увагу на ці аспекти не пізніше, ніж на етапі hi-fi прототипування. Ви заощадите багато часу, якщо визначите критичні моменти до етапу UI чи, тим більше розробки.
7. Проведіть user-тестування. Найкращий спосіб дізнатися, чи інтерфейс зрозумілий та легкий для сприйняття, — запитати реальних людей. Але в жодному разі не запитуйте: «Які кольори ви тут бачите?». Краще запитайте «Чи простий цей інтерфейс, на вашу думку?» або «Чи легко зчитувати інтерфейс та орієнтуватися в ньому?».

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