UI-дизайн

Що це означає

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

UI-дизайн спирається на UX-дизайн, який розв'язує загальний досвід користувача, його потреби і шлях виконання завдань. Якщо UX відповідає на запитання, що інтерфейс має дозволяти і в якій послідовності, то UI визначає, як це виглядатиме і як керуватиметься.

Добрий UI-дизайн послідовний, зрозумілий і відповідає бренду компанії згідно з брендбуком. Водночас він має бути доступним людям з інвалідністю, наприклад завдяки достатньому контрасту, читабельному шрифту і керуванню з клавіатури, як вимагає WCAG.

Як це працює на практиці

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

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

Результати UI-дизайну треба перевіряти юзабіліті-тестуванням і вимірюваннями, наприклад коефіцієнта конверсії форм. Гарний дизайн, яким користувачі не можуть керувати, дає менше, ніж простіший, але зрозумілий.

На що звернути увагу

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

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