[vc_row gap=”20″ equal_height=”yes” wrap_container=”yes” conditional_render=”%5B%7B%22value_role%22%3A%22administrator%22%7D%5D” css=”.vc_custom_1661949750862{border-top-width: 1px !important;border-right-width: 1px !important;border-bottom-width: 1px !important;border-left-width: 1px !important;padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;border-left-color: #262626 !important;border-left-style: solid !important;border-right-color: #262626 !important;border-right-style: solid !important;border-top-color: #262626 !important;border-top-style: solid !important;border-bottom-color: #262626 !important;border-bottom-style: solid !important;}”][vc_column width=”1/6″][vc_single_image image=”3112″ alignment=”center” el_class=”custom_post_style_autor”][/vc_column][vc_column width=”5/6″][vc_column_text el_class=”custom_post_style_autor”]Оригінал статті: https://www.interaction-design.org/literature/article/7-ux-deliverables-what-will-i-be-making-as-a-ux-designer
Автор: Андреас Камнінос
Переклад та адаптація:[/vc_column_text][/vc_column][/vc_row][vc_row wrap_container=”yes” conditional_render=”%5B%7B%22value_role%22%3A%22administrator%22%7D%5D”][vc_column][vc_empty_space][vc_row_inner][vc_column_inner][vc_column_text]Що створює UX-дизайнер? У статті ми розглянемо концепцію кінцевих результатів UX – цей термін описує результати процесу UX-дизайну різних етапах. Результати, створені UX-дизайнерами, відрізняються в залежності від їхньої ролі у команді дизайнерів, а також в залежності від методів та інструментів, які використовуються кожною цією роллю. Ми розглянемо деякі з найпоширеніших типів результатів.
Процес UX-дизайну зазвичай спирається на щось схоже на підхід дизайнерського мислення, який складається з п’яти основних етапів:
- Розуміння почуттів користувачів (вивчення аудиторії)
- Визначення проблеми (визначення потреб користувачів)
- Створення ідей (генерація ідей для дизайну)
- Прототипи (перетворення ідей на конкретні приклади)
- Тест (оцінка дизайну)
Перші два етапи (розуміння почуттів користувачів та визначення проблеми) часто групуються в термін “Дослідження користувачів”, тобто розуміння сутності користувачів і того, як це впливає на їхні потреби. На кожному етапі можна використовувати низку інструментів та методів. Кожен інструмент або метод може надавати інший тип висновку (UX-результат), але тут ми зосередимося на деяких типах, що найчастіше використовуються, щоб надати вам огляд того, що вам належить створювати в ролі UX-дизайнера.[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]
Результати досліджень користувачів
[/vc_column_text][vc_column_text]Персони
Персона – це вигаданий персонаж, який дизайнери створюють як свого роду стереотип користувача. Він представляє типових користувачів, їх цілі, мотивації, розчарування та навички. Інша інформація, така як демографія та освіта, доповнює персону. Залежно від обсягу проєктів дизайнери генеруватимуть кілька різних персонажів, щоб охопити якомога більшу частину аудиторії. Створення персони допомагає дизайнерам співпереживати користувачам та демонструвати повне розуміння того, хто вони та чого хочуть досягти.[/vc_column_text][vc_single_image image=”3131″ img_size=”Full” alignment=”center”][vc_column_text]
Copyright holder: Rosenfeld Media, Flickr. Copyright terms and license: CC BY 2.0
Приклад особи користувача. Демографія, здібності, навички, цілі та мотивації представлені або графічно, або в тексті.[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]Розкадрування
Розкадрування – це ідея, запозичена з кіноіндустрії. По суті, це комікс, який описує дії користувача та обставини, за яких вони виконуються. Сила цієї ідеї полягає в тому, що вона не тільки демонструє, що робить користувач, але також показує середовище, яке може вплинути на те, як і чому користувач робить щось.[/vc_column_text][vc_single_image image=”3133″ img_size=”full”][vc_column_text]
Copyright holder: Rosenfeld Media, Flickr. Copyright terms and license: CC BY 2.0
Розкадрування допомагає візуалізувати дії користувачів, а також середовище, в якому вони відбуваються. Хоча здебільшого вона застосовується для розуміння почуттів користувачів, розкадрування також можна використовувати на етапі створення ідей, щоб допомогти проілюструвати деякі варіанти дизайну.[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]Карта подорожей споживача
Карта подорожі споживача (також відома як карта досвіду) є діаграмою, яка відображає кроки (тобто процес), вжиті користувачем для досягнення конкретної мети. Прокладаючи процес на часовій шкалі, дизайнери можуть зрозуміти зміни в контексті, а також мотиви, проблеми та потреби на цьому шляху. Визначивши основні камені спотикання для користувачів, дизайнери можуть краще зрозуміти їхні проблеми та почати бачити, на якому етапі шляху продукт чи послуга можуть підійти, щоб допомогти користувачеві.[/vc_column_text][vc_single_image image=”3134″ img_size=”full” alignment=”center”][vc_column_text]
Copyright holder: Tobias Maier, Wikimedia. Copyright terms and license: CC BY-SA 3.0
Приклад карти подорожі споживача, що зображає процес ухвалення рішення про купівлю квитка Rail Europe. На кожному кроці процесу дизайнери виклали досвід користувачів, розглядаючи, які дії вони роблять, що вони думають, і як вони почуваються в міру того, як просуваються до успіху у вирішенні свого завдання. Зрештою, також намічені можливості для покращення нинішнього досвіду.[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]
Результати створення ідей
Мозковий штурм
Мозковий штурм – це процес, при якому команда розробників генерує ідеї про те, як розв’язувати проблеми та можливості, виявлені на етапі дослідження користувачів. Концепція тут залежить від генерації якомога більшої кількості ідей (навіть якщо вони цілком божевільні), щоб дизайнери могли згодом відсіяти непотрібне та звести їх до ідей, які здаються найперспективнішими. Центральним моментом є те, що члени команди можуть досліджувати всі кути та області; дійсно, найкращі рішення можуть іноді виникати з найбожевільніших уявлень.[/vc_column_text][vc_single_image image=”3135″ img_size=”full” alignment=”center”][vc_column_text]
Copyright holder: visualpun.ch, Flickr. Copyright terms and license: CC BY 2.0
Мозковий штурм часто робиться з великою кількістю стікерів, де дизайнери записують всі свої ідеї. Потім можна обговорити ці стікери, ієрархічно структурувати, групувати на теми й організовувати так, щоб вони представляли візуальну карту кращих ідей, створених для розв’язання проблеми дизайну.[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]Маршрут користувача (User Flow)
User flow – проста діаграма, яка описує кроки, які користувач повинен зробити з вашим продуктом або послугою для досягнення мети. На відміну від карти подорожі споживача, у user flow враховується лише те, що відбувається з вашим продуктом (тобто ігноруються всі зовнішні фактори). Ці діаграми можуть допомогти дизайнерам швидко оцінити ефективність процесу, необхідного для досягнення мети користувача, і можуть допомогти визначити як (тобто виконання) великих ідей, визначених за допомогою мозкового штурму.[/vc_column_text][vc_single_image image=”3136″ img_size=”full” alignment=”center”][vc_column_text]
Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0
Приклад діаграми user flow, яка показує дії користувача у програмі.[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]
Результати прототипування
Карти сайту
Карти сайту показують ієрархію та структуру навігації веб-сайту. Такі карти також часто створюються для мобільних програм. Вони служать для того, щоб показати, як контент буде організований в “екранах” або розділах, і як користувач може перейти з одного розділу вашої послуги до іншої.[/vc_column_text][vc_single_image image=”3137″ img_size=”full” alignment=”center”][vc_column_text]
Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0
Приклад карти сайту, яка показує, як організовується контент на веб-сайті, і як користувачі можуть перейти від розділу до розділу. Тут дизайнер показує ієрархію шляхом нумерації розділів вмісту (наприклад, 2.0 є «батьківським» розділом та 2.1 є підрозділом).[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]Прототипи з низькою точністю
Коли ваші карти сайту будуть готові, ви можете почати робити нариси того, як розміщуватиметься контент на кожному екрані. Прототип з низькою точністю пропускає будь-які деталі візуального дизайну та служить приблизним посібником, щоб дозволити дизайнерам зрозуміти, як і де вони мають розміщувати контент. Прототипи з низькою точністю можуть починатися як намальовані ескізи (вони відмінні, тому що їх швидко і дешево створювати; ви можете легко викинути їх, якщо передумаєте), а потім більш уточнені у вигляді вайрфреймів, намальованих на комп’ютері, які надають більш вірну інформацію на реальному екрані Але у них все ще не вистачає деталей візуального дизайну.[/vc_column_text][vc_single_image image=”3138″ img_size=”full” alignment=”center”][vc_column_text]
Copyright holder: VFS digital design, Flickr. Copyright terms and license: CC BY 2.0
Приклади насувних вручну (ліворуч) та на комп’ютері (праворуч) прототипів з низькою точністю.[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]Прототипи з високою точністю
Ці прототипи на щабель вище прототипів із низькою точністю. Часто вони називаються ідеально-піксельними прототипами (pixel-perfect prototypes), тому що вони намагаються показати всі візуальні та типографічні деталі продукту, як це було б показано на цьому екрані. Вони враховують розміри фізичного екрана та створюються у розмірі, що відповідає розміру фізичного пристрою. Хоча ці прототипи вимагають набагато більше часу для створення у порівнянні з прототипами з низькою точністю, вони часто є прикладом ілюстрації, яку ви хотіли б показати клієнту чи зацікавленій особі.[/vc_column_text][vc_single_image image=”3139″ img_size=”full” alignment=”center”][vc_column_text]
Copyright holder: amire80, Wikimedia. Copyright terms and license: CC BY-SA 3.0
Приклади прототипів з високою точністю (піксель-ідеальний) для мобільного додатка. Попри те, що вони виглядають як скріншоти із завершеного реального додатку, вони трохи більше, ніж макет! На жаль, багато клієнтів, схоже, вважають, що на цьому етапі ви повинні бути дійсно близькі до фактичного завершення всього проєкту, тому будьте обережні та дайте чітко зрозуміти, що ці прототипи є трохи більше ніж красиві візуальні ефекти без коду за ними![/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]Інтерактивні прототипи
Прототипи з низькою і високою точністю, розглянуті вище, є не що інше, як набір статичних зображень. Щоб краще оцінити ваші проєкти, ви можете перетворити ці прототипи на інтерактивну демонстрацію, націлену на відображення того, як взаємодія може працювати з ними. Програми для комерційного прототипування дозволять визначити активні області, переходи та події, щоб створити інтерактивний прототип, який охоплює user flow та демонструє взаємодію без необхідності писати жодного рядка коду. У деяких випадках ви можете використовувати набагато більш простий інструмент, наприклад PowerPoint або Keynote. Навіть краще, можна використовувати ці інтерактивні прототипи в ранніх тестах користувачів, перш ніж будь-який код буде написаний. Таким чином, ви можете переконатися, що ваш дизайн, ймовірно, буде працювати добре, перш ніж перейти до дорогого та трудомісткого процесу розробки коду.[/vc_column_text][vc_video link=”https://youtu.be/AmXkqZ4dJhE”][vc_column_text]Приклад того, як можна створити інтерактивний прототип з таким простим інструментом, як програма для презентацій Keynote від Apple.[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]
Результати оцінки
Звіт з юзабіліті
Після того, як ви створите дизайн (навіть якщо це буде тільки інтерактивний прототип), ви можете почати оцінювати його за допомогою реальних користувачів. Оцінка може здійснюватися у різних формах. Ви можете попросити деяких користувачів спробувати ваш дизайн, а потім взяти інтерв’ю у них або працювати з ними у фокус-групі. Це приклад якісної оцінки. Ви можете привести користувачів до лабораторії та попросити їх виконати певні завдання за допомогою свого прототипу, а самі вимірюватимете такі речі, як кількість помилок, кількість кліків або час, витрачений на виконання завдання. У лабораторії можна використовувати спеціальне обладнання, таке як камери стеження за очима, щоб дізнатися, на що спрямована увага користувачів при навігації по певному дизайну. Ви також можете попросити їх виконати те саме завдання, використовуючи прототипи, які пропонують альтернативні варіанти виконання дизайну, так ви можете порівняти їх і побачити, який дизайн краще (спосіб відомий як тестування A/B).
Існує багато способів оцінити дизайн. Незалежно від того, що ви зрештою робите для оцінки, вам доведеться узагальнити ваші висновки у звіті з юзабіліті (зручність використання). Повний юзабіліті-звіт зазвичай містить такі розділи:
- Довідкова інформація: що ви протестували, де і коли, інструменти та обладнання, які ви використовували, і хто брав участь у дослідженні.
- Методологія: як ви оцінювали, які завдання ставили перед користувачами, які дані були зібрані, які сценарії використовувалися, хто був учасниками та їхня демографія.
- Результати тестування: аналіз усіх зібраних даних, включаючи ілюстрації, такі як гістограми та текстові описи результатів, а також коментарі користувачів, які можуть бути особливо ілюстративними чи інформативними. Залежно від того, кому ви подаєте звіт, цей розділ може містити кілька технічних подробиць, наприклад, тип статистичного аналізу.
- Висновки та рекомендації: що ви порекомендуєте, на основі зібраних вами даних та ваших висновків? Запишіть, що добре спрацювало, що погано і чому. Вкажіть, що потрібно зробити, щоб поліпшити дизайн або просунутися з процесом вперед.
Пам’ятайте, що звіт з юзабіліті може бути спрямований на низку інших ролей у вашому проєкті. Менеджери, швидше за все, просто потребуватимуть зведеного резюме та викладення того, як результати впливають на загальний графік проєкту. Інші дизайнери будуть більше зацікавлені у тому, як ви виконували свою оцінку та хотіли б отримати усі деталі. Розробників, ймовірно, зацікавлять лише ваші висновки та рекомендації. Переконайтеся, що ваш звіт структуровано та сформульовано відповідним чином для його аудиторії.[/vc_column_text][vc_single_image image=”3143″ img_size=”full” alignment=”center”][vc_column_text]
Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0
Приклад звіту з юзабіліті, складеного у зведеній формі. Більшість подробиць повного звіту тут немає, і основна увага приділяється результатам. Однак ця форма ідеально підходить для керівників та менеджерів, які не мають часу та яких не цікавлять усі деталі.[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]Аналітичний звіт
Коли продукт розроблений, дизайн був випущений і пропрацював деякий час, ваша компанія може надати вам деякі аналітичні дані про використання. Вивчення цих даних може дати велике уявлення про те, як покращити зручність використання, особливо якщо ці дані містять переміщення користувачів та їхню поведінку у вашому продукті.
Наприклад, ви можете виявити, що багато користувачів веб-сайту електронного продажу не реєструються для завершення покупки. Чи означає це, що процес реєстрації недостатньо простий? Чи це означає, що вони не бачать, що існує такий варіант? Аналітичний звіт містить інформацію з цих даних та виділяє області, де проект може бути покращений. Хоча це привабливо просто вставляти красиві графічні елементи та діаграми, створені автоматично такими продуктами, як Google Analytics, але робота UX-дизайнера полягає не тільки в тому, щоб встановлювати факти, але й інтерпретувати їх. Таким чином, ваш звіт повинен містити дані, а також пояснення та рекомендації про те, що треба робити. Це також корисний запис, щоб ви могли побачити вплив змін дизайну на свій сайт після того, як ви визначили проблеми та спробували їх усунути.[/vc_column_text][vc_single_image image=”3145″ img_size=”full” alignment=”center”][vc_column_text]
Copyright holder: pexels, pixabay.com. Copyright terms and license: CC0
Аналітичний звіт – це більше, ніж просто дані та візуалізація. Він повинен містити ваші власні пояснення поведінки користувачів і рекомендації про те, де можна поліпшити дизайн.[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]
На закінчення
У статті 2015 року для Norman Nielsen group, спеціаліст з UX Пейдж Лобхаймер (Page Laubheimer) аналізував тип UX-результатів, який UX-розробники подавали найчастіше. Як повідомляється, найбільш часто створювалися вайрфрейми та прототипи, а також блок-схеми, карти сайтів та звіти з юзабіліті/аналітики.[/vc_column_text][vc_single_image image=”3146″ img_size=”full” alignment=”center”][vc_column_text]
Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0
Аналіз найчастіше створюваних UX-результатів, згідно з групою Нормана Нільсена. Це показує частоту, з якою професіоналів UX просять створити специфічні результати та поділитись ними. Результати з більш низькою частотою попиту, як і раніше, створюються, але зазвичай ними не діляться з іншими.
Це те, що ми вважаємо “класичними” результатами UX, але один важливий момент, який слід мати на увазі, полягає в тому, що хоча ці результати виробляються та передаються іншим, багато інших типів результатів будуть створені, але ними ніколи не діляться з іншими (отже рейтинг нижче в цьому дослідженні).
Щоб створити вайрфрейм, чи не повинен дизайнер мати повне розуміння користувачів та їх потреб? Часто керівництво, клієнти та інші члени команди зацікавлені лише у тому типі результатів, які допомагають їм просувати свої завдання. Враховуючи це, типи результатів, які ви створюєте, можливо, потрібно “налаштовувати” відповідно до того, кому ви збираєтеся їх передавати.[/vc_column_text][vc_single_image image=”3147″ img_size=”full” alignment=”center”][vc_column_text]
Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0
На цій діаграмі показані типи результатів, якими найбільш діляться з іншими членами команди розробників та зовнішніми клієнтами. Інтерактивний прототип – це результат, який кожен хоче бачити!
У вашій ролі UX-дизайнера вам завжди доведеться створювати результати для кожного етапу процесу дизайнерського мислення. Незалежно від того, чи залишаєте ви їх собі чи ділитеся ними з іншими, ви повинні практикувати свої навички, використовуючи настільки широкий спектр інструментів та методологій, наскільки це можливо, та ознайомитись з усіма типами результатів UX.[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]
Посилання і де дізнатися більше:
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.[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]









Матеріали прототипування. Поряд із видруками керівництва для координатора та роздаткового матеріалу для учасників, єдиними додатковими матеріалами, які потрібно організувати координатору, є матеріали прототипування. Я зробила це досить просто, дешево та легко – я обшукала стаціонарну шафу та свої власні шафи вдома, щоб знайти такі речі, як: шматочки обгорткового паперу, фольги, гумові смуги, кольоровий папір, старі кольорові теки та безліч перероблених пакувальних матеріалів (туалетні рулони) , картонні коробки, пакування для яєць тощо). Я також взяла багато клей-олівців, кнопок, пластиліну та скріпок. По суті все, що я могла легко знайти. Якби я мала більше часу, мені б дуже хотілося додати такі речі, як pipe-cleaners (щітки, дріт) та інші виробні матеріали (я пробувала Officeworks, але схоже у них немає цих матеріалів. Пізніше колега запропонував магазини типу Lincraft або Hot Dollar, які я спробую наступного разу).











Southwest Airlines змінили діапазон дат повернення, виходячи з вибору дати вильоту. Після вибору дати вильоту 8-16-16 із діапазону дат за липень-серпень діапазон дат повернення змінився, щоб показати серпень-вересень.
Цей таймер зворотного відліку відокремив компоненти дати та чітко визначив їх.













