7 кінцевих результатів ux: що я робитиму як ux-дизайнер?

7 кінцевих результатів ux: що я робитиму як ux-дизайнер?

Оригінал статті: https://www.interaction-design.org/literature/article/7-ux-deliverables-what-will-i-be-making-as-a-ux-designer
Автор: Андреас Камнінос
Переклад та адаптація:

Що створює UX-дизайнер? У статті ми розглянемо концепцію кінцевих результатів UX – цей термін описує результати процесу UX-дизайну різних етапах. Результати, створені UX-дизайнерами, відрізняються в залежності від їхньої ролі у команді дизайнерів, а також в залежності від методів та інструментів, які використовуються кожною цією роллю. Ми розглянемо деякі з найпоширеніших типів результатів.

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

  • Розуміння почуттів користувачів (вивчення аудиторії)
  • Визначення проблеми (визначення потреб користувачів)
  • Створення ідей (генерація ідей для дизайну)
  • Прототипи (перетворення ідей на конкретні приклади)
  • Тест (оцінка дизайну)

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

Результати досліджень користувачів

Персони

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

Copyright holder: Rosenfeld Media, Flickr. Copyright terms and license: CC BY 2.0

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

Розкадрування

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

Copyright holder: Rosenfeld Media, Flickr. Copyright terms and license: CC BY 2.0

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

Карта подорожей споживача

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

Copyright holder: Tobias Maier, Wikimedia. Copyright terms and license: CC BY-SA 3.0

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

Результати створення ідей

Мозковий штурм

Мозковий штурм – це процес, при якому команда розробників генерує ідеї про те, як розв’язувати проблеми та можливості, виявлені на етапі дослідження користувачів. Концепція тут залежить від генерації якомога більшої кількості ідей (навіть якщо вони цілком божевільні), щоб дизайнери могли згодом відсіяти непотрібне та звести їх до ідей, які здаються найперспективнішими. Центральним моментом є те, що члени команди можуть досліджувати всі кути та області; дійсно, найкращі рішення можуть іноді виникати з найбожевільніших уявлень.

Copyright holder: visualpun.ch, Flickr. Copyright terms and license: CC BY 2.0

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

Маршрут користувача (User Flow)

User flow – проста діаграма, яка описує кроки, які користувач повинен зробити з вашим продуктом або послугою для досягнення мети. На відміну від карти подорожі споживача, у user flow враховується лише те, що відбувається з вашим продуктом (тобто ігноруються всі зовнішні фактори). Ці діаграми можуть допомогти дизайнерам швидко оцінити ефективність процесу, необхідного для досягнення мети користувача, і можуть допомогти визначити як (тобто виконання) великих ідей, визначених за допомогою мозкового штурму.

Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0

Приклад діаграми user flow, яка показує дії користувача у програмі.

Результати прототипування

Карти сайту

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

Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0

Приклад карти сайту, яка показує, як організовується контент на веб-сайті, і як користувачі можуть перейти від розділу до розділу. Тут дизайнер показує ієрархію шляхом нумерації розділів вмісту (наприклад, 2.0 є «батьківським» розділом та 2.1 є підрозділом).

Прототипи з низькою точністю

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

Copyright holder: VFS digital design, Flickr. Copyright terms and license: CC BY 2.0

Приклади насувних вручну (ліворуч) та на комп’ютері (праворуч) прототипів з низькою точністю.

Прототипи з високою точністю

Ці прототипи на щабель вище прототипів із низькою точністю. Часто вони називаються ідеально-піксельними прототипами (pixel-perfect prototypes), тому що вони намагаються показати всі візуальні та типографічні деталі продукту, як це було б показано на цьому екрані. Вони враховують розміри фізичного екрана та створюються у розмірі, що відповідає розміру фізичного пристрою. Хоча ці прототипи вимагають набагато більше часу для створення у порівнянні з прототипами з низькою точністю, вони часто є прикладом ілюстрації, яку ви хотіли б показати клієнту чи зацікавленій особі.

Copyright holder: amire80, Wikimedia. Copyright terms and license: CC BY-SA 3.0

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

Інтерактивні прототипи

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

Приклад того, як можна створити інтерактивний прототип з таким простим інструментом, як програма для презентацій Keynote від Apple.

Результати оцінки

Звіт з юзабіліті

Після того, як ви створите дизайн (навіть якщо це буде тільки інтерактивний прототип), ви можете почати оцінювати його за допомогою реальних користувачів. Оцінка може здійснюватися у різних формах. Ви можете попросити деяких користувачів спробувати ваш дизайн, а потім взяти інтерв’ю у них або працювати з ними у фокус-групі. Це приклад якісної оцінки. Ви можете привести користувачів до лабораторії та попросити їх виконати певні завдання за допомогою свого прототипу, а самі вимірюватимете такі речі, як кількість помилок, кількість кліків або час, витрачений на виконання завдання. У лабораторії можна використовувати спеціальне обладнання, таке як камери стеження за очима, щоб дізнатися, на що спрямована увага користувачів при навігації по певному дизайну. Ви також можете попросити їх виконати те саме завдання, використовуючи прототипи, які пропонують альтернативні варіанти виконання дизайну, так ви можете порівняти їх і побачити, який дизайн краще (спосіб відомий як тестування A/B).

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

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

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

Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0

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

Аналітичний звіт

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

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

Copyright holder: pexels, pixabay.com. Copyright terms and license: CC0

Аналітичний звіт – це більше, ніж просто дані та візуалізація. Він повинен містити ваші власні пояснення поведінки користувачів і рекомендації про те, де можна поліпшити дизайн.

На закінчення

У статті 2015 року для Norman Nielsen group, спеціаліст з UX Пейдж Лобхаймер (Page Laubheimer) аналізував тип UX-результатів, який UX-розробники подавали найчастіше. Як повідомляється, найбільш часто створювалися вайрфрейми та прототипи, а також блок-схеми, карти сайтів та звіти з юзабіліті/аналітики.

Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0

Аналіз найчастіше створюваних UX-результатів, згідно з групою Нормана Нільсена. Це показує частоту, з якою професіоналів UX просять створити специфічні результати та поділитись ними. Результати з більш низькою частотою попиту, як і раніше, створюються, але зазвичай ними не діляться з іншими.

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

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

Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0

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

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

Посилання і де дізнатися більше:

Hero Image: Copyright holder: Mark Congiusta, Flickr. Copyright terms and license: CC BY 2.0

Лобхаймер П. (Laubheimer, P). (2015). Які кінцеві результати UX найчастіше створюються та передаються іншим?

https://www.nngroup.com/articles/common-ux-deliverables/

Teixeira, F. & Braga, C. (2016). Методи та результати UX-дизайну

https://uxdesign.cc/ux-design-methods-deliverables-657f54ce3c7d

Бабич Н. (Babich, N.) (2017). Повний перелік результатів UX

https://uxplanet.org/a-complete-list-of-ux-deliverables-d62ccf1de434

Морвілл П. (Morville, P. (2009)) Результати UX

http://semanticstudios.com/user_experience_deliverables/

Гудман, Е. (Goodman, E.) (2012). Як я навчився припинити турбуватися і любити результати взаємодій, 19 (5), 8-9.

Отримайте безкоштовно 3 місяці навчання на найпрестижнішій у світі платформі для UX-дизайнерів

Вас також може зацікавити

Що таке дизайн взаємодії або interaction design?

Суть «interaction design» можна пояснити найпростішими словами. Це дизайн взаємодії...

Зовнішнє пізнання в дизайні продукту: 3 способи використання зовнішнього пізнання в дизайні продукту

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

Створення карт емпатії: перший крок у дизайн мислення

Наша робота як професіоналів UX – відстоювати інтереси користувача. Однак...

Використання мобільних додатків – тест «один палець, одне око» для хорошого мобільного дизайну

Дизайн мобільних пристроїв повинен враховувати, те як користувачі працюють з...

Процеси розробки потоку – орієнтування на потреби користувача

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

Ментальні моделі у дизайні

Ментальні моделі відіграють важливу роль у людино-комп'ютерній взаємодії (HCI) та...

Поділіться цією публікацією

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *