Роль розкадровок в UX дизайні

Як UX-дизайнеру, вам часто доводиться використовувати свою уяву, щоб втілювати нові ідеї в життя. Одним з інструментів, який може допомогти в цьому процесі, є розкадровка. Цей інструмент запозичений із зовсім іншої сфери (кіно), але він вже встиг залишити свій слід у світі UX. Розкадровки чудово допомагають дизайнерам уявити, як користувачі будуть використовувати продукти, які вони розробляють.

Що таке розкадровка?

Розкадровка - це візуальна форма представлення сценарію, що містить послідовність кількох подій. Студія Волта Діснея була першою, хто придумав цю ідею в 1930-х роках. Багато інших сфер, включаючи UX-дизайн, прийняли розкадровку як спосіб візуального представлення сценаріїв.

На цьому етапі ви, напевно, запитаєте себе: "Навіщо мені розкадровки?".

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

Ось основні причини, чому це так:

1. Зображення варте тисячі слів - Наш мозок обробляє зображення набагато швидше, ніж текст. Представляючи сценарій візуально, ви прискорюєте процес створення ідеї для всіх учасників.
2. Історії запам'ятовуються - Століттями люди використовували історії для передачі усних традицій молодим поколінням, адже їх набагато легше запам'ятати, ніж факти. Використання історії як першого кроку на шляху до ідеї може створити правильний настрій для проекту з самого початку.
3. Дефіцит цікавості - Історії, особливо ті, що містять прогалини, можуть дуже природно викликати цікавість і активізувати наш мозок, щоб спробувати заповнити відсутні деталі. Цей тип "мозкової енергії" - саме те, що вам потрібно під час ваших сесій ідей.
4. Співпереживайте "реальному користувачеві" - Подібно до того, як ми використовуємо персони для створення емпатії до користувача, який має обличчя та ім'я, розміщення цього користувача в сценарії створить ще вищий рівень емпатії до користувачів серед членів команди дизайнерів.

Використання розкадровок в UX дизайні

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

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

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

Для того, щоб створити всебічно розвиненого персонажа, вам доведеться подумати про наступні речі:

1. У "The основний опис про вашого персонажа, що може включати такі речі, як ім'я, професія, вік, стать і все інше, що має відношення до справи
2. Що? мотивує цього персонажа користуватися вашим продуктом чи послугою?
3. У чому контекст чи користується ваш персонаж продуктом?

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

1. Поінформованість - як користувачі дізнаються про ваш продукт чи послугу в першу чергу?
2. Розгляд - які рішення їм доведеться прийняти, перш ніж вони вирішать купити продукт і почати ним користуватися?
3. Купити - як ваші користувачі будуть купувати продукт?
4. Перший досвід - як виглядатиме їхній перший досвід роботи з вашим продуктом?
5. Звички використання - як виглядатиме їхня звичайна модель використання?
6. Основні переваги - що отримають ваші користувачі від використання вашого продукту?

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

Початок роботи над розкадровкою

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

1. Використовуючи структура розповіді з початком, серединою і кінцем; зосередьтеся на меті, якої має досягти ваш персонаж. Не переходьте одразу до рішень у розкадровці.
2. Подумайте про інструменти Ви можете використовувати ручку та папір, щоб намалювати розкадрування, або ж скористатися програмою для графічного дизайну, залежно від ваших уподобань.
3. Подумайте про рівень деталізації Залежно від того, на якому етапі розробки ви перебуваєте, ви можете створювати історії з більшою чи меншою кількістю деталей, але пам'ятайте, що завжди потрібно залишати простір для фантазії.

Щоб допомогти вам створити гарну UX розкадрування, давайте розглянемо реальний приклад .

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

Припустимо, що ви хочете орієнтуватися на людей у віці від 25 до 45 років, які тільки роблять перші кроки до кращого розуміння вина. Ви вирішили створити додаток "Wine Time", який допоможе їм у цьому.

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

Давайте пройдемося по процесу.

Наша історія починається з головні герої Джейсон і Наталі, молода пара віком близько 30 років, живуть у передмісті Торонто, Канада. Вони люблять пити вино і раз на три тижні ходять до місцевого винного магазину, щоб купити 2-3 пляшки вина. Зазвичай вони купують вина, які рекламує магазин, а іноді отримують рекомендації від друзів про те, що купити. Нещодавно вони захотіли почати займатися виноробствомВони хочуть вивчати більше вин, і вони хочуть бути менш перевантаженими широким вибором у своєму магазині. До цього часу вони купували практично одні й ті ж вина щоразу. Ось що це таке. мотивує Вони намагаються шукати рішення, щоб дізнатися більше про вино.

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

Одного разу подруга Наталі Елісон пропонує їм спробувати новий додаток під назвою "Wine Time". Додаток допомагає дізнатися про вино і знайти вина, які вам сподобаються. На цьому етапі історії Джейсон і Наталі стають усвідомлюю продукту.

Вони завантажують додаток і одразу ж проходять короткий курс "Вступ до вина", який розповідає їм про те, які вина можуть сподобатися на основі різних характеристик. Це буде відповідати їхнім уподобанням. перший досвід з додатком і їхнім моментом "Ага" (найімовірніше). Ми можемо вважати цю частину початком середина нашої історії .

Наприкінці уроку Джонатан і Наталі залишаються в додатку. "Wine Time" пропонує їм вина і перевіряє, чи є вони в наявності в магазинах поблизу. Знайшовши кілька пляшок, які їм сподобалися, вони замовляють їх онлайн і отримують протягом двох днів. Ця частина історії відповідала б Етап купівлі на шляху користувача Потенційно це також може бути пов'язано з подальше використання програми якщо вони вирішать продовжувати замовляти вино через додаток, щоб заощадити час.

Ось тут і починається наша історія кінці де наші герої розуміють, як використовувати додаток "Wine Time" для досягнення своїх мета дослідити більше вин.

Далі поговоримо трохи про інструменти для створення розкадровки.

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

Збереження розкадровки на поточному рівні деталізації може спровокувати цікаві питання на етапі розробки ідеї, наприклад

1. Які навчальні матеріали будуть у додатку?
2. Де у світі буде доступний додаток?
3. З якими винними інтернет-магазинами ми можемо його підключити?
4. Як виглядатиме довгострокове використання?

Погляньте на розкадрування, яке я створив для додатку "Wine Time".

Подорож користувача "Wine Time". Зображення автора.

‍

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