By Viacheslav Mykhailov in Дизайн-Ґайди — 19 трав 2023 р.

Інклюзивний UX або як зробити продукт доступним для користувачів

X in American Sign Language by Xurxe Toivo García on Dribbble

Привіт, дизайнере! У сучасному цифровому світі інклюзивний UX дизайн стає все більш важливим. Його цінність в тому, що він забезпечує доступність вашого продукту для різних категорій користувачів, включаючи тих, у кого є обмежені можливості. В цій статті ми дослідимо принципи, прийоми і інструменти, які допоможуть вам створити такий дизайн. Готові прийняти цей виклик? ;)

Значення доступного UX дизайну

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

Доступність для всіх користувачів

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

Наприклад, Apple зосереджується на створенні доступних продуктів, які мають вбудовані можливості для людей з обмеженими можливостями. Їхній VoiceOver дозволяє незрячим та слабозорим користувачам отримати доступ до вмісту на пристроях Apple шляхом аудіо-відтворення.

Розширення аудиторії та збільшення конкурентоспроможності

Інклюзивний UX дизайн дозволяє залучити більше користувачів до вашого продукту, включаючи тих, хто раніше був виключений через обмежені можливості. Це відкриває нові можливості для росту вашого бізнесу

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

Покращений досвід користувача

Покращує досвід користувача в цілому, надаючи зручну та приємну взаємодію з продуктом для всіх користувачів.

Наприклад, Google Maps надає можливість налаштування маршруту з урахуванням додаткових можливостей для користувачів з візуальними або фізичними обмеженнями. Це дозволяє їм зручно переміщатися та отримувати необхідні вказівки.

Інклюзивність в дизайн додатків та інших інтерфейсів має значення як для користувачів, так і для бізнесу. Вона забезпечує доступність продукту для всіх, розширює аудиторію та покращує загальне враження користувачів. Залучаючись до цього руху ми можемо зробити світ трішечки кращим. Памʼятайте, дизайн змінює світ ;)

Основні принципи інклюзивного UX дизайну

Ці принципи допоможуть вам створити продукт, який буде доступний та корисний для всіх користувачів незалежно від їхніх можливостей. Давайте розглянемо ці принципи детальніше, а також подивимося на інструменти, які можна використовувати для перевірки відповідності цим принципам, зокрема до WCAG (Web Content Accessibility Guidelines).

Перцептивність

Перцептивність відноситься до способу сприйняття та розуміння інформації користувачами. Для створення перцептивно-доступного дизайну використовуйте наступні принципи:

Кольоровий контраст: як мінімум, має бути достатній контраст між текстом і фоном, щоб забезпечити читабельність для людей зі зниженим зором. Ви можете використовувати інструменти, такі як Contrast Checker, для перевірки контрастності вашого дизайну.
Альтернативний текст: Додайте альтернативний текст до зображень, щоб люди з візуальними обмеженнями могли отримати інформацію про зображення. Використовуйте атрибут alt у HTML для цієї мети.
Звукові сигнали (аналогічно і з тактильними): Використовуйте аудіо-сигнали або повідомлення для надання важливої інформації тим, хто не може читати чи бачити. Забезпечте можливість керування гучністю звукових елементів.

Управління

Управління стосується способів взаємодії користувачів з продуктом. Для створення доступного управління, використовуйте наступні принципи

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

Розуміння

Розуміння стосується чіткості та простоти, однозначності інформації, яку отримують користувачі. Для створення «зрозумілого» дизайну, використовуйте наступні принципи

Мова та комунікація: Використовуйте просту та зрозумілу мову в інтерфейсі, уникайте складних термінів чи фраз. Розробляйте зрозумілі інструкції та повідомлення для користувачів.
Структура і організація: Організуйте контент та інформацію логічно та чітко. Використовуйте заголовки, списки та інші елементи для структурування інформації. Фактично це теж має стати певним контрастом.

Ці принципи інклюзивного дизайну є фундаментом для створення доступного та користувачам зручного продукту. Проте, наряду з основними принципами, існують інструменти, які можна використовувати для перевірки відповідності цим принципам, зокрема до Web Content Accessibility Guidelines.

Lighthouse: Це інструмент, який входить до складу веб-браузера Google Chrome. Він забезпечує автоматичну перевірку доступності вашої веб-сторінки та надає рекомендації щодо виправлення проблем.
Axe: Це розширення для браузера, яке допомагає виявляти та виправляти проблеми доступності на веб-сторінках. Воно надає детальний звіт з рекомендаціями щодо виправлення проблем.
VoiceOver (для macOS) та NVDA (NonVisual Desktop Access): Ці інструменти для емуляції ситуації людей з візуальними обмеженнями. Вони дозволяють вам перевірити, як ваш продукт буде виглядати та функціонувати для незрячих або слабозорих користувачів.
Accessibility Insights: Це набір інструментів, який допомагає виявляти та виправляти проблеми доступності на різних платформах, включаючи веб, Windows та Android.

Рівень відносно WCAG визначається чотирма категоріями: A (мінімальний), AA (середній), AAA (розширений) і AAA+ (найвищий). Рекомендується дотримуватись щонайменше рівня AA, щоб забезпечити базовий рівень доступності. Проте, вищі рівні дозволяють покращити досвід користувача для ширшої аудиторії.

*Dancing On The Ceiling by MUTI on Dribbble*

Доступний дизайн на практиці

Для кращого розуміння та використання інклюзивного дизайну в практичних проектах, давайте розглянемо гучні приклади, які демонструють навіщо і як результат застосування інклюзивного UX дизайну. Вивчаючи ці приклади, ми зможемо зрозуміти, як дизайн може покращити взаємодію та задоволення користувачів.

Kickstarter — Доступність для всіх користувачів

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

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

Trello — Гнучкість та персоналізація

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

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

Duolingo — платформа для вивчення іноземних мов

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

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

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

Набори правил для інклюзивного UX дизайну

Для роботи з таким поняттям як «доступність» (Accessibility) існують набори правил та рекомендацій, які допоможуть вам у цьому процесі. Один з найвідоміших наборів правил — це набір WCAG (Web Content Accessibility Guidelines), розроблений консорціумом W3C (World Wide Web Consortium). Давайте розглянемо цей набір правил та деякі інші, не менш важливі, настанови.

WCAG (Web Content Accessibility Guidelines)

WCAG надає стандарти та настанови щодо доступності веб-контенту. Цей набір правил має три рівні відповідності: A, AA та AAA, що визначають рівні доступності. Деякі з основних принципів WCAG включають:

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

ARIA (Accessible Rich Internet Applications)

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

Design for All (DfA)

Design for All — це концепція дизайну, яка покликана створювати продукти, які будуть корисними та доступними для всіх користувачів, незалежно від їхніх особливостей. Це означає, що дизайн має бути гнучким, персоналізованим та адаптованим до різних потреб та можливостей користувачів.

Mobile Accessibility

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

Набори правил, як WCAG, ARIA, Design for All та Mobile Accessibility, надають дизайнерам орієнтири та рекомендації для розробки доступних продуктів. Подекуди ці «настанови» звучать доволі схоже, проте, як завжди, «диявол в деталях» — зверніть увагу на контекст використання, що рекомендується в кожному з наборів.

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

*Peaple having fun! 4/25 by Ana Luiza Batista on Dribbble*

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

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

Для досягнення інклюзивного UX дизайну ми ознайомилися з наборами правил, які допомагають забезпечити доступність продукту. WCAG, ARIA, Design for All та Mobile Accessibility — це лише кілька з них. Використання цих наборів правил у вашій роботі дизайнера дозволить вам розглядати аудиторію і їх можливості значно більш широко.

Нехай ваша робота допомагає збудувати більш інклюзивний та доступний світ для всіх!