<aside> 💡 Інклюзивний дизайн — дизайн для всіх. Стереотипно «інклюзивний» сприймають, як призначений для «людей з особливими потребами», але це дискримінація і не аргумент для бізнесу щось міняти на краще.

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

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

</aside>

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

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

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

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

  1. Онлайн-перевіряч «a11y» (https://color.a11y.com/contrast) аналізує готовий сайт, але можна ввести коди кольорів вручну, якщо ви ще на стадії дизайну.
  2. Онлайн-сервіс «Aditus» (https://www.aditus.io/button-contrast-checker) аналізує готові сайти.
  3. Плагін «Stark» для графічних редакторів «Sketch», «Figma» та «Adobe Experience Designer» (https://www.getstark.co) допомагає дизайнерам перевірити контрастність у макеті і симулювати колірну сліпоту.

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

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

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

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

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

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

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

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