8 простих порад, як перевірити дизайн сайту або застосунку на інклюзивність

Інклюзивний дизайн — дизайн для всіх. Стереотипно «інклюзивний» сприймають, як призначений для «людей з особливими потребами», але це дискримінація і не аргумент для бізнесу щось змінити на краще. Утім, є низка прикладів, коли компанії, роблячи щось зручним для конкретної аудиторії, врешті-решт, робили користь для всіх клієнтів. Бо те, що добре для людей із порушеннями зору, звичайно, буде краще видно і тим, хто не має порушень.

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

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

Ми не говоримо про очевидні випадки, як чорний текст на білому фоні, що має максимальний контраст, або сірий на сірому, який майже нечитабельний. Але часто буває, що компанія має брендовий колір — скажімо, блакитний (Airbus), червоний (Coca-Cola) або помаранчевий (Amazon). І потрібно розробити інтерфейс, що узгоджується з наявним фірмовим стилем.

Складнощі найчастіше виникають із дизайном посилань і кнопок. Наприклад, чи буде блакитне, червоне або помаранчеве посилання достатньо видимим на білому фоні сайту? А якщо говоримо про кнопки, то робити текст на кольоровому тлі чорним чи білим? Наприклад, у застосунку Twitter кнопки мають білий текст на фірмовому блакитному, а на сайті Medium це зелений текст на білому тлі із зеленим контуром.

Перевірити контрастність можна онлайн — за допомогою безплатних інструментів:

1. Онлайн-перевіряч «a11y» аналізує готовий сайт, але можна ввести коди кольорів вручну, якщо ви ще на стадії дизайну.

2. Онлайн-сервіс «Aditus» аналізує готові сайти.

3. Плагін «Stark» для графічних редакторів «Sketch», «Figma» та «Adobe Experience Designer» допомагає дизайнерам перевірити контрастність у макеті і симулювати колірну сліпоту.

«Чарівна» фраза, яка вмить розлютить будь-якого дизайнера: «А можеш погратися зі шрифтами?» Але це, на жаль, не допомагає обрати оптимальний шрифт — добре читабельний та естетичний, а ще який утілює цінності бренду та водночас сприяє комфортному читанню. Справжні «чарівні» слова, у цьому контексті, дещо інші.

Одна з головних ознак читабельного шрифта — легкість розпізнавання окремих символів, особливо подібних за формою. Є багато, на перший погляд, красивих шрифтів, де вкрай важко розрізнити цифру «три» (3) і велику кириличну літеру «зе» (З) або, наприклад, маленьку латинську літеру «ел» (l), велику латинську «ай» (I), цифру «один» (1), а також вертикальну риску-розділювач (|).

Існують спеціальні сполучення символів, які допомагають оперативно оцінити шрифт з погляду читабельності, наприклад, «oec bdpq 1Il| 3З 0О 9g 68В» або «m1IIionalre». Скопіюйте ці фрази, і використайте на таких шрифтових сервісах, як Google Fonts або Myfonts, у полі «Введіть ваш текст». Звісно, це не єдиний параметр читабельності, але принаймні дасть вам змогу швидко відфільтрувати очевидні варіанти.

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

Якщо у вас уже є доступ до робочої версії сайту, спробуйте походити по сторінках винятково за допомогою клавіатури. Тобто так, якби у вас не було змоги бачити, куди прицілитися і клікнути, або, приміром, якби була травмована кисть. Натискання клавіші «Tab» повинно вести логічно за ієрархією від головного до другорядного. Спершу заголовок сторінки, потім меню, потім підрозділи, і за цим же принципом далі — справа наліво та згори донизу.

Якщо на сайті є якісь пропозиції — наприклад, безплатний, дешевший і дорожчий пакети послуг — варто спершу перекидати людину на безпечніший (безплатний) варіант, а не маніпулювати, підсовуючи найдорожчий. Особливу увагу звертайте на поля вводу інформації. Чи зручно й логічно ви між ними перемикаєтеся і чи досягаєте бажаної кнопки «Надіслати» або «Сплатити»?

Подібне тестування робимо і з мобільною версією. У 2020 році це вже не екзотика, а необхідність. І щоби змоделювати реальну ситуацію використання, радимо користуватися смартфоном стоячи і тримаючи щось важке в руці. Помилки нерідко виникають через те, що «стрес-тест» застосунку або сайту організовують в лабораторних умовах. А насправді люди читають електронні книги під мерехтливі лампи і шум метро, друкують особисті повідомлення, лежачи на боці на дивані, і переглядають фото з банкою пива в руці.

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

От, приміром, Facebook подбав, щоби нейромережа аналізувала кожну фотографію і присвоювала альтернативний текст — короткий опис світлини, що з'являється, коли її не вдалося завантажити. Наприклад, «група людей на природі» або «їжа на столі».

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

1. На смартфоні прикладіть палець до всіх активних елементів. Наскільки палець перекриває кнопку чи іконку? Чи не задіває сусідні елементи? Наскільки поруч розміщено «безпечні» та «небезпечні» функції?

2. Відкрийте макет сайту в якомусь графічному редакторі, де можна малювати лінії, або роздрукуйте сторінку на папері. Оберіть типовий сценарій користувача, як-от: заповнити форму, ввести банківські дані, завантажити світлини тощо. А тепер з'єднайте лініями те, де користувач має клікнути, щоби прости сценарій. Наскільки довгий шлях між діями? Як часто лінії перетинаються? Чи можна розмістити логічно пов'язані функції ближче одну до одної

1. Спершу увімкніть екранний читач. В операційній системі Windows він зветься Narrator. Для телефонів на базі Android зазвичай це TalkBack. А в продуктах Apple — Voice Over. Увімкнути всі ці програми можна в налаштуваннях «Доступність» (англ. «Accessibility»). До речі, рекомендуємо не пропускати вступну частину, що знайомить із тим, як працює читач.

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

3. Слідкуйте за процесом і аналізуйте все, що відбувається Чи зручно виконувати кожен крок? Наскільки можна зрозуміти елементи інтерфейсу на слух? Чи є щось незрозуміле без можливості побачити контекст?

Екранний читач — як пандус. Нібито встановлений для людей на візках, але допомагає всім: якщо ви тягнете важку валізу на колесах у подорож або повертаєтеся з прогулянки з дитиною на візочку.

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

У 33 високорозвинених країнах світу 5% населення вільно володіють комп'ютером, включаючи спеціалізовані професійні програми. Ще 25% людей мають середні вміння, які передбачають роботу з такими простими програмами, як Microsoft Word чи Google Chrome, онлайн-замовлення товарів, перегляд фільмів і прослуховування музики тощо.

Близько 45% людей мають проблеми з елементарними завданнями, а ще приблизно 25% не володіють електронікою взагалі. І це у високорозвинених країнах на зразок Канади, Німеччини, Японії, США, де комп'ютерна техніка й інтернет добре поширені.

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

Буде чудово, якщо замість прохань-підказок на зразок «А тепер натисни червону кнопку» ви поставите відкриті запитання, як-от: «Що ти бачиш зараз? Що, на твою думку, тут можна зробити? Як би ти міг зберегти улюблених виконавців?» Спостерігайте за діями, адже вони більш промовисті за слова. Людина може хвалити прекрасний дизайн і водночас не могти додати товар у кошик або ввести свою адресу.

Станом на 2018 рік лише 10% усіх сайтів світу можна було вважати інклюзивними. Такі дані оприлюднила громадська організація «Консорціуму Усесвітнього Павутиння», що створила і постійно оновлює найавторитетніший стандарт із веб-доступності. Тільки 10% інклюзивних сайтів, а от до комфорту і задоволення від користування прагнуть усі. Що ж робити? Тестувати якнайраніше і якнайчастіше описаними вище способами і не тільки.