Користувацький досвід
UX від А до Я

Повний наочний посібник для розуміння дизайну, зорієнтованого на людину

01 — Визначення

Що таке користувацький досвід?

UX (User Experience) — це загальне враження людини від взаємодії з цифровим продуктом. Ідеться не лише про те, як він виглядає, а й про те, як він відчувається: чи він інтуїтивний, корисний і приємний.

Зорієнтований на людину
Дизайнерські рішення завжди виходять із реальних потреб, мотивів і контекстів користувачів.
Більше, ніж естетика
UX охоплює інформаційну архітектуру, навігацію, доступність і швидкодію, а не лише зовнішній вигляд.
Ґрунтується на доказах
Рішення підтверджуються даними: тестами юзабіліті, інтерв’ю та реальними показниками поведінки.
Ітеративний процес
UX не закінчується запуском: він постійно розвивається на основі відгуків і нових потреб.

02 — Ключова відмінність

UX і UI: у чому різниця?

UX
Дослідження користувачів
Інформаційна архітектура
Карти шляху користувача
Тести юзабіліті
Вайрфрейми й прототипи
vs
UI
Кольори й типографіка
Іконки та ілюстрації
Візуальні компоненти
Анімації та переходи
Стильовий посібник

UX = як це працює · UI = як це виглядає · Одне без одного не буває

03 — Методологія

Процес UX-дизайну

1
Дослідження (Research)
Інтерв’ю з користувачами, опитування, аналіз конкурентів і вивчення контексту використання. Мета — зрозуміти, хто ці користувачі та які реальні проблеми вони мають.
Інструменти: інтерв’ю, опитування, аналітика
2
Визначення (Define)
Узагальнити інформацію у вигаданих персонажах (персонах), картах емпатії та формулюванні проблеми. Відповідає на запитання: яку проблему ми маємо розв’язати і для кого?
Інструменти: персони, journey map, HMW
3
Генерування ідей (Ideate)
Мозкові штурми, діаграми спорідненості та техніки колективної творчості. Генерують багато ідей без фільтрів, щоб вибрати найперспективніші.
Інструменти: crazy 8s, how might we, ескізи
4
Прототипування (Prototype)
Створення представлень рішення з низькою або високою деталізацією: від паперових ескізів до інтерактивних прототипів. Мета — якнайшвидше втілити ідею.
Інструменти: Figma, Balsamiq, Marvel
5
Перевірка (Test)
Тестування з реальними користувачами, щоб виявити проблеми юзабіліті. Результати знову живлять фазу дослідження й замикають ітеративний цикл.
Інструменти: модеровані тести, айтрекінг, A/B

04 — Основи

10 евристик Нільсена

1
Видимість стану системи
Система завжди має повідомляти користувачеві, що відбувається.
2
Відповідність реальному світу
Говоріть мовою користувача, а не системи.
3
Контроль і свобода
Дозвольте легко скасовувати й повторювати дії.
4
Послідовність і стандарти
Однакові елементи завжди мають поводитися однаково.
5
Запобігання помилкам
Краще запобігти, ніж показувати повідомлення про помилку.
6
Впізнавати > пригадувати
Показуйте варіанти; не змушуйте користувача запам’ятовувати.
7
Гнучкість і ефективність
Скорочення для досвідчених, простота для новачків.
8
Мінімалістичний дизайн
Приберіть усе, що не додає цінності основному сценарію.
9
Допомога в розпізнаванні помилок
Зрозумілі повідомлення, які пояснюють і пропонують рішення.
10
Довідка й документація
За потреби надайте документацію, яку легко знайти й використати.

05 — Поширені помилки

Чого варто уникати в UX?

✗
Проєктувати, не дослідивши користувачів
→ Проведіть щонайменше 5 інтерв’ю, перш ніж проєктувати
✗
Ставити естетику вище за функціональність
→ Гарна, але непомітна кнопка — марна кнопка
✗
Не тестувати з реальними користувачами
→ 5 користувачів виявляють 85 % проблем юзабіліті
✗
Ігнорувати доступність від самого початку
→ Застосовуйте настанови WCAG 2.1 уже на етапі дизайну
✗
Не вдосконалювати продукт після запуску
→ Збирайте дані, шукайте точки тертя й постійно покращуйте

06 — Ресурси

Основні інструменти UX

Прототипування
Figma
Спільний дизайн і прототипи в хмарі
Дослідження
Maze
Віддалені й автоматизовані тести юзабіліті
Аналітика
Hotjar
Теплові карти й запис сеансів
Опитування
Typeform
Форми й опитування для збору відгуків
Співпраця
Miro
Цифрові дошки для воркшопів і генерування ідей
Сценарії
Whimsical
Швидкі блок-схеми та вайрфрейми

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

— Стів Джобс