Прототипування та UX для менеджерів

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

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

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

У чому різниця UI та UX

User Interface designer (UI) займається формою, кольором, підбирає шрифти, працює з інтерфейсами, тобто створює візуальний дизайн, продумуючи розташування всіх елементів на сайті. Завдання UI-дизайнера — зробити таку програму або сайт, на який користувачам буде приємно дивитися.

User Experience designer (UX) проєктує взаємодію: на першому місці зручність користування, а не краса. UX-дизайнер не створює красивих картинок або кольорових кнопок, він будує досвід взаємодії користувача з продуктом:

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

Загалом, можна сказати, що UX-ер описує дизайн взаємодії (interaction design), спрямований на створення привабливих для користувачів інтерфейсів зі зрозумілою схемою поведінки й дій.

Сам термін UX-дизайн з’явився понад 15 років тому у компанії Nielsen Norman Group. У 90-х роках у компанії задумалися, як відрізнити поганий UX від хорошого, і виробили загальні правила для оцінки будь-якого дизайну: сайту, додатку чи сервісу. Вийшло 10 базових принципів проєктування інтерфейсу.

Принципи Нільсена допомагають перевірити абсолютно будь-який UX-дизайн, знайти проблемні місця і покращити якість досвіду користувача.

Правила проєктування інтерфейсу Якоба Нільсена

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

1. Відображення системного статусу: чи знає користувач, де зараз перебуває і що відбувається. Потрібно чітко повідомляти про стан системи, жодні дії чи наслідки не повинні відбуватися без повідомлення людини. Наприклад, якщо файл завантажується, користувач має бачити актуальний стан і скільки залишилося до кінця процесу.
2. Взаємозв’язок системи з реальним світом: чи говорить інтерфейс мовою користувача. Якщо інтернет магазин розрахований на всіх, використовуйте максимально зрозумілі слова. Жаргон також можливий, але не сленг розробників, а професійна термінологія користувачів продукту: наприклад, бухгалтерів, дизайнерів, перекладачів. Використання фраз і понять, знайомих користувачеві у світі діє краще, ніж спеціалізовані технічні терміни.
3. Контроль та свобода користувача: чи є у користувача можливість скасувати або зупинити небажаний сценарій, знову повернутися до скасованих операцій. При роботі з продуктом людина вільна робити різні дії, натискати кнопки, закривати сторінки, заходити до пунктів меню. При цьому має бути можливість скасувати негативну дію — видалення облікового запису або завантаженого документа. Користувачі часто помиляються, вибираючи системні функції, тому потрібен чітко видимий “аварійний вихід” — кнопки “зберегти”, “скасувати” та ін.
4. Послідовність і стандарти: чи не плутаєте ви людину, описуючи те саме по-різному. Не можна розфарбовувати в різні кольори кнопку з однією і тією ж дією в різних частинах програми. Будьте послідовними та використовуйте стандартні технології комунікації.
5. Уникнення помилок: чи зведено до мінімуму умови, за яких користувач може помилитися. Наприклад, передбачте можливість повідомити користувача про проблеми з новим паролем: занадто короткий, потрібні великі літери чи цифри, — і не змушуйте людину вгадувати, що не так.
6. Впізнаваність краще/замість згадування: чи очевидні для людини принципи використання продукту, чи легко відбувається взаємодія. Не примушуйте запам’ятовувати велику кількість інформації під час переходу з однієї частини системи до іншої.
7. Гнучкість та ефективність використання: чи ефективна ваша система для користувачів із будь-яким рівнем досвіду. Спростіть функції, якими відвідувачі користуються найчастіше, не перевантажуйте досвідчених користувачів зайвою інформацією, дайте їм можливість здійснювати часті події (наприклад, вхід у додаток) якнайшвидше і простіше.
8. Естетика та мінімалізм у дизайні: чи немає в текстах вашого продукту непотрібної інформації. Кожне зайве слово погіршує сприйняття і зменшує можливість знайти те, за чим відвідувач прийшов у продукт.
9. Діагностика та виправлення помилок: наскільки користувачеві зрозумілі повідомлення системи про помилки. Чи виражені вони доступною мовою, чи описують проблему, чи пропонують варіанти рішення.
10. Допомога та документація: легко знайти необхідну інформацію в довідці програми. Звичайно, добре, коли продуктом можна користуватися без документації. Але якщо користувачеві знадобиться допомога, вся інформація має бути у зручному місці та конкретно описувати кроки щодо вирішення проблеми.

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

На етапі, коли в команді немає UX дизайнера, його роботу виконує менеджер. Якщо на проєкті є бізнес-аналітик, він допомагає РМ враховувати досвід і поведінку користувачів.

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

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

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

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

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

Кому потрібні прототипи:

• Product менеджеру за допомогою прототипів легше провести презентацію для стейкхолдерів та замовників.
• Бізнес-аналітики можуть виявити та створити наочні вимоги до функціональності, інтерфейсу, веб-сайту.
• РМ за допомогою прототипу керує очікуваннями: замовник бачить у реальності те, що невиразно припускав подумки і може порівняти власне уявлення з реальними можливостями.
• Менеджери та ВА ілюструють прототипами user story та use cases, роблячи їх зрозумілішими.
• Дизайнеру прототип допомагає зафіксувати в голові ідеальний сценарій і правильно прийняти вимоги до продукту.

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

Wireframe

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

Менеджерам, ВА, маркетологам вайрфрейм допомагає:

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

Low-fidelity

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

Прототипи низької деталізації допомагають остаточно затвердити функціональні блоки із замовником або product owner-ом та розблокувати роботу команди.

Часто буває, що замовник нескінченно змінює кольори, розташування, просить щось зробити чистіше, змінити розміри та вигляд шрифтів.
Відповідно, менеджер узгоджує зміну відтінків, змінює відстань між блоками, підбирає та затверджує фотографії для сайту.
І весь цей час команда розробників простоює, чекає і пише РМ: «Коли ж ми почнемо щось робити?»

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

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

High-fidelity

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

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

Популярні сервіси для прототипування

• InVision — цей інструмент дозволяє перетворювати статичні зображення в інтерактивні прототипи. InVision також підтримує онлайн-співпрацю, дозволяючи обговорювати роботу в режимі реального часу і створювати персональні чати​​.
• Axure — професійний інструмент, який дозволяє створювати детальні прототипи з високою точністю. Axure включає в себе різноманітні інструменти для моделювання вигляду віджетів, створення анотацій та специфікацій, і тестування відображення сторінок на різних пристроях​​.
• Sketch — програма для Mac відома своєю простотою і швидкістю. Sketch відрізняється меншою кількістю вбудованих інструментів для анімації порівняно з Figma та Adobe XD, але пропонує широкий спектр плагінів та інтеграцій для розширення можливостей​​.
• Adobe XD — цей інструмент є частиною Adobe Creative Cloud і забезпечує інтуїтивне середовище для дизайну інтерфейсів, прототипування та роботи з анімацією. Adobe XD вирізняється своєю фокусуванням на анімаціях і переходах​​.
• Moqups — універсальна онлайн-платформа, яка дозволяє працювати над каркасами, макетами та прототипами у режимі реального часу. Moqups містить бібліотеку з понад 1000 візуальних елементів і дозволяє легко редагувати, коментувати та анотувати проекти прямо в шаблонах​​.
• Balsamiq — програма зосереджена на створенні каркасів інтерфейсу з низькою точністю, що імітує процес рисування на блокноті. Balsamiq пропонує сотні вбудованих елементів управління та значків інтерфейсу в ескізному та чистому вигляді​​.

Ці сервіси надають різні можливості для прототипування, від створення базових каркасів до розробки складних інтерактивних прототипів. Вибір конкретного інструменту залежить від ваших потреб і умов роботи.

Як презентувати чорно-білий прототип

Може здаватися, що показувати замовнику чорно-білий прототип — не дуже хороша ідея: клієнт не зрозуміє, чому дизайн не кольоровий, подумає, що додаток буде таким самим, почне засмучуватися і нервувати.

Насправді, люди можуть уявити собі кольори, як і можуть сприймати чорно-білі фото. Потрібно просто правильно налаштувати клієнта та команду, пояснити, що відбуватиметься.

Краще не відправляти прототип малої деталізації в електронному вигляді, а зібрати мітинг та розповісти, що це за картинка, чому так виглядає і для чого потрібна.

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

Ми сьогодні це обговоримо, разом внесемо зміни, і команда вже зможе робити якісь естімети.

А після того, як приймемо остаточний варіант, можемо спокійно приступити до вибору гами кольорів або готового набору графічних елементів (UI kit), і просто розставимо це все так, як на прототипі».

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

Будь-який дизайн, і прототип у тому числі, потрібно перевірити на відповідність 10 принципам Нільсена, потім створити готовий клікабельний прототип Figma, InVision, Balsamiq, Marvel і протестувати зручність і зрозумілість системи на потенційних користувачах.

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

А якщо потрібно швидко навчитися робити прототипи, проводити дослідження та вирішувати завдання бізнесу за допомогою гарного UX, приходьте на курс UX Matters.