7 конечных результатов UX: что я буду делать в качестве UX-дизайнера?

7 конечных результатов UX: что я буду делать в качестве UX-дизайнера?

 

 

Автор – Андреас Камнинос (Andreas Komninos)

Что на самом деле создает 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.