TEST

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

Інклюзивний дизайн — дизайн для всіх



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


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


Крок 1.

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



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

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

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




image

Крок 2.

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



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

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

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