Як виміряти UX? 10 корисних посилань — про метрики, KPIs та фреймворки

• HEART Framework Template
Miro

• 49 UX Metrics, Methods, and Measurement Articles
MeasuringU

• How to Measure the Impact of UX Research?
Medium

• How to Choose the Right UX Metrics for Your Product
Home

• Google’s HEART Framework for Measuring UX
Interaction Design Foundation

• Top 5 UX Frameworks to Measure User Experience
DEV Community

• How to Measure User Experience: 7 Key UX Metrics
Userpilot

• The 7 Most Important User Experience (UX) KPIs
UX Design Institute

• The Complete Guide to UX Metrics
HubSpot

• Effective UX Metrics and KPIs to Measure User Experience
ScreenRoot

Навчіться перетворювати розмиті цілі та чіткі КРІs дизайну на інтенсиві Віталія Фрідмана — Measuring UX and Impact of Design. Зрозуміємо, що і як міряти, щоб досягати результатів вже 4 грудня.

Дістаємо з шухлядки спосіб тестування 2002 року

Microsoft Reaction Card Method — це простий і канонічний інструмент для збору емоційного фідбеку.

Як працює?
• Користувачам дають перелік із 118 слів: позитивних, нейтральних, негативних.
• Їх просять вибрати ті, що найкраще описують продукт чи досвід.
• Після цього користувач пояснює, чому обрав саме ці слова.

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

З плюсів: низький бар’єр для участі та достатня емоційна глибина, де на питання типу «що вам не сподобалося?» користувачі справді діляться асоціаціями та почуттями. Більше — у статті NN/g.

Користуєтеся цим методом?
🤝: так
🌚: ні
💅: тестувати — шлях слабких

7 iconic книг про UX дизайн

• «Don't Make Me Think», Steve Krug
Класика про принципи зручності використання продуктів. Автор пояснює, як зробити інтерфейс інтуїтивно зрозумілим.

• «The Design of Everyday Things», Don Norman
Основоположна книга про психологію дизайну: як зробити об'єкти та системи простими для використання?

• «About Face: The Essentials of Interaction Design», Alan Cooper, Robert Reimann, David Cronin & Christopher Noessel
Посібник, який охоплює основи проєктування інтерфейсів та створення зручного цифрового середовища.

• «Lean UX: Designing Great Products with Agile Teams», Jeff Gothelf & Josh Seiden
Практичний підхід до UX дизайну в умовах Agile. Книга вчить, як швидко створювати цінність для користувачів, інтегруючи UX у процес розробки.

• «Hooked: How to Build Habit-Forming Products», Nir Eyal
Дослідження, як створювати продукти, які формують звички.

• «Smashing UX Design: Foundations for Designing Online User Experiences», Jesmond Allen & James Chudley
Комплексний посібник для дизайнерів, який охоплює всі аспекти UX дизайну: від досліджень до прототипування та тестування.

• «A Project Guide to UX Design», Russ Unger & Carolyn Chandler
Практичний гайд для початківців у UX, який охоплює процеси створення продуктів — від досліджень до кінцевого дизайну.

Які б додали ви?

Хто з вас?

Дизайнерам інтерфейсів приготуватися! Під ваші ялинки рушає адвент вікторина 💙

Що це?
1. З 1 по 30 грудня ми опублікуємо 15 питань: спочатку кейс, наступного дня — правильну відповідь.
2. Ви відповідатимете в коментарях — що більш розгорнуто, то краще.
3. Автори кейсів обиратимуть кращі відповіді з коментарів.
4. 31 грудня ми підіб‘ємо підсумки та визначимо трійку інтерфейсних розумників і розумниць.
5. Зіграємо Святого Миколая — прийдемо з подарунками.

У ролі подарунків: сертифікати на менторські сесії від спеціалістів Prjctr Mentorship Platform.

У ролі авторів кейсів: куратори та команда Проджа.

Line-up: Віталій Фрідман (Smashing Media), Франческо Кутоло (Wolt), Стас Говорухін (Djinni), Борис Бакланов (Klarna), Євген Олексюк (EPAM Systems), Мар’яна Бучкович (Fedoriv), Ян Гладченко (Raiffeisen Bank Ukraine), Анна Дем’яненко (Lazarev), Оля Алтухова (airSlate).

Бонус: фанові питання від команди.

Щоб що брати участь?
🔹Буде цікаво та освітньо: круті питання крутих спеціалістів.
🔹Перевірте себе, поміряйтеся скілами з іншими та відчуйте силу ком'юніті — хай коментарі перетворяться на інтелектуальний батл.
🔹Подарунки — це ж круто, еге ж?

Діліться з друзями-дизайнерами, щоб змагатися і з ними.

Вмикайте сповіщення, щоб не пропускати питання — спамити не будемо!

Ready, steady, go brace yourself the winter is coming… 🫂

Ви підготували перший драфт дизайну для клієнта за раніше узгодженим брифом.

Проте на зустрічі клієнт каже, що «все не те», дизайн «не метчиться з його очікуваннями».

Але не дає конкретних правок.

Питання: Як ви будете діяти, щоб отримати від клієнта чіткіший фідбек і зрозуміти, які саме аспекти дизайну потрібно змінити?

Кейс від Мар’яни Бучкович — кураторки Figma Autolayout Workshop, Senior UX/UI Designer у Fedoriv.

Що робити, якщо клієнту «все не те»?

Насамперед, підкреслю два моменти:

1. клієнт не завжди неправий, тож злитись чи засмучуватись не варто. Сприймайте це як можливість створити найкраще рішення;

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

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

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

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

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

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

Кейс від Мар’яни Бучкович — кураторки Figma Autolayout Workshop, Senior UX/UI Designer у Fedoriv.

Як вберегти себе від мільйона зайвих правок

Ставте чіткі KPIs зараз, щоб не плакати потім:

1. Визначте цілі на старті проєкту

Правки зазвичай виникають, коли замовник чи команда не до кінця розуміють, чого вони хочуть. Запитайте:

• Що ми хочемо досягти?
• Які проблеми вирішуємо?
• Як успіх буде вимірюватись?

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

2. Пріоритезуйте метрики

Коли всі орієнтуються на єдину мету, кількість непотрібних правок значно зменшується. Оберіть одну або кілька метрик:

• Юзабіліті: чи стало користувачам простіше виконувати потрібні дії?
• Конверсії: чи зростає кількість виконаних завдань?
• Залученість: як часто і довго користувачі взаємодіють із продуктом?

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

3. Комунікуйте візуально

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

4. Тестуйте та отримуйте ранній фідбек

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

5. Аналізуйте дані

Коли у вас є KPI, які можна виміряти, дискусії стають раціональними. Замість «мені не подобається ця кнопка» з'являється «поточний дизайн збільшує конверсії на 15% замість очікуваних 25%».

Що покаже ефективність дизайну? KPI. Що вбереже вас від мільйона зайвих правок? KPI. Що допоможе розв'язати проблему невизначеності всередині команди? KPI.

Де навчитися їх ставити та доносити цю необхідність стейкхолдерам? На інтенсиві Measuring UX and Impact of Design: без смс, з реєстрацією та промокодом на знижку -20% — DESIGN20. Стартуємо уже ща 2 дні.

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

Питання: Як будете підходити до дослідження і тестування такого продукту?

Кейс від Бориса Бакланова — автора і куратора курсу Product Design, Senior Product Designer у Klarna.

Як отримати фідбек від користувачів без користувачів?

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

Я опишу декілька шляхів, як отримати швидкий фідбек і зібрати інформацію залежно від типу продукту.

B2B: Використовуйте внутрішні ресурси

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

• Сейлз менеджери: мають цінні дані про потреби потенційних клієнтів.
• Customer success / account менеджери: взаємодіють з наявними клієнтами. Попросіть приєднатися до дзвінка з користувачем на 10-15 хвилин, щоб поставити свої запитання або показати рішення. Це не лише допоможе зібрати дані, але й залучить клієнтів до розвитку продукту.
• Support менеджери: знають про всі поточні проблеми. Їхні дані допоможуть зрозуміти, що найбільше турбує користувачів. Бонус: ті, хто вже звернулися в підтримку, часто готові детальніше обговорити свої потреби.

B2C: Використовуйте великі обсяги даних

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

• Поведінкова аналітика та записи сесій: показують, як користувачі фактично взаємодіють із продуктом. Використовуйте ці дані для прийняття рішень.
• Збір фідбеку всередині продукту: короткі форми чи опитування, запущені після виконання конкретної дії, дають високий рівень відгуків. Для фіча-реквестів підійдуть сервіси на кшталт Canny.
• Рев’ю та відгуки: переглядайте AppStore, TrustPilot та подібні платформи, щоб зрозуміти ставлення до продукту, сильні та слабкі сторони.
• Створення ком’юніті: групи на Facebook, Reddit, Slack чи Discord допоможуть посилити зв’язок із користувачами. Якщо ком’юніті ще немає, створіть його. Це підвищить кількість фідбеку та спростить взаємодію з клієнтами для всієї команди.

Що далі?

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

Кейс від Бориса Бакланова — автора і куратора курсу Product Design, Senior Product Designer у Klarna.

Дизайн-система для команди, а не для галочки

Гайд Бреда Фроста, як створити систему, що не лишиться декоративним елементом. Якщо вона не скорочує час розробки чи не забезпечує узгодженість, це сигнал до змін. Яких?

1. Почніть із реальних проблем

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

2. Дозволяйте зміни

Якщо система надто жорстка, команди її ігноруватимуть. Залишайте простір для локальних адаптацій.

3. Інвестуйте в документацію

Створіть чіткі гайдлайни з прикладами та поясненнями. Поганий підхід — вимагати від дизайнера розбиратися в коді, щоб зрозуміти компонент. Гарний підхід — доступна документація, яка відповідає на запитання.

4. Фокусуйтеся на «дизайн-багах»

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

5. Міряйте результат

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

Дизайн-система — це інструмент для прискорення та спрощення роботи, а не тягар. Як створити дизайн-систему, що не обтяжує, а розкладає по поличках і відгукується команді — навчимося на інтенсиві Design Systems.

Куратор: Франческо Кутоло, Design Lead у Wolt, ex. Design Lead Klarna, Figma community advocate у Швеції.

Старт: 6 грудня — приєднуйтеся зі знижкою 10% за промокодом SYSTEM10.

Збирайте скіли, респект і підвищення на інтенсиві 💙

Кейс на сьогодні: відкритий бриф на мем.

Продовжіть фразу: дизайнер, коли…

Кейс від Проджа — інституту вільної освіти. Зірка на фото — кіт Чуча нашої графічної дизайнерки Крістіни Шпетної.

Знаємо, ви таке хвостате любите 💙

Бонусний мем: дизайнер, коли правки надіслали 9-ма хвилинами голосових повідомлень (звісно, 50% — слова-паразити)

Дякуємо вам за вас, ми дуже сміялися! Комісія Проджа визначить найкращого жартівника чи жартівницю 🤝

Буде складно. Бажайте успіхів.

P.S. Це все та ж зірочка — кіт Чуча нашої дизайнерки Крістіни. Ставте серденька, Чучі та Крістіні буде приємно.