Слава Шестопалов і Женя Шикірявий, куратори курсу «Інклюзивний дизайн графічних інтерфейсів» у школі Projector, у колонці для AIN.UA розказали про 8 способів, як розробити інклюзивний дизайн та навіщо це взагалі робити.

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

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

Крок 1. Виміряти контрастність

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

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

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

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

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

Як тлумачити дані цих інструментів?

Крок 2. Набрати «чарівну фразу» вподобаним шрифтом

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

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

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

Крок 3. Відкласти мишу чи тачпад, взяти до рук важку сумку

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

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

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

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

Крок 4. Вимкнути інтернет або знайти слабкий сигнал

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

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

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

Крок 5. Виміряти відстані й розмір елементів

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

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

Ці два параметри — близькість і розмір — взаємозалежні. Тобто якщо ми хочемо зберегти доступність кнопки, розташованої далеко, краще зробити її більшою, а елементи керування, що завжди у фокусі уваги, можуть бути трохи меншими. Погляньте на Microsoft Word: стрічка з інструментами вгорі має величенькі іконки, а спливаюча панелька, яка з’являється, коли ви виділяєте текст, значно компактніша.

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

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

Отже, знаючи це все, як провести оптимально перевірку?

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

Крок 6. Зайти через застарілий пристрій і браузер

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

На жаль, не всі користувачі мають сучасні пристрої та доглянуті, оновлені до останньої версії браузери. І сайт повинен якимось чином не втрачати зрозумілість, якщо не матиме доступу до геотегів, буде завантажений у базовій версії або не матиме доступу до «реп’яшків».

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

Завдяки інструменту «Textise» можна перетворити будь-яку сторінку з кольорової та ілюстрованої на чистий текст.

Крок 7. Прослухати сайт через екранний читач

Ми рідко замислюємося над тим, як незрячі люди користуються комп’ютером. Доволі давно настільні та мобільні платформи оснастили «екранними читачами» (або ж скрінрідерами). Ці програми або плагіни розпізнають текст та озвучують його за допомогою синтезатора мовлення, надаючи людині змогу «почути» сайт, а не побачити його.

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

Наприклад, є різні способи, як створити кнопку «Купити». Це може бути спеціальний елемент «кнопка» (в коді сайту це звучатиме <button>), а може бути просто зафарбований прямокутник із текстом посередині (так званий <div>). Зряча людина і те, і те побачить однаково, а от користувач екранного читача може заплутатися і подумає, що це картинка з підписом.

Як перевірити чи вашим застосунком або веб-сайтом можна користуватися за допомогою екранного читача?

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

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

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

Крок 8. Дати покористуватися бабусі

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

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

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

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

* * *

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

Автори: Слава Шестопалов, Lead UX Designer, та
Женя Шикірявий, дизайн-менеджер, в компанії ELEKS