Вы читаете перевод статьи UX Visualization Examples & Tips, подготовленной по материалам UX Alive, UX Conference & Workshops in Istanbul 2016. Над переводом работали Ольга Кокоулина и Ринат Шайхутдинов. При поддержке iSpring.
iSpring — решение для запуска дистанционного обучения.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-24.png)
Ада, администратор. Самодостаточная отличница. Андрэ, разработчик. Любит деньги. Фред, идеальный пользователь. Одержим контролем.
**Визуализация UX**
Любое решение UX-задачи должно четко пониматься не только дизайнером, но и всеми участниками проекта. Чтобы достичь этого, используйте графические изображения. Они подходят для этой цели гораздо лучше скучных текстовых отчетов.
Так что смело визуализируйте UX и создавайте более качественные и надежные продукты!
**Примеры визуализации UX**
Карты путешествий потребителя (Journey Maps), карточки персонажей (Personas), инфографики — все это великолепные примеры визуализации UX. Представляем вашему вниманию более 50 примеров визуализации пользовательского опыта:
*Карта путешествий потребителя (Customer Journey Maps или CJM)*
Макро-карта (Macro Map)
OneStop — комплексная программа, призванная помочь иностранным студентам приспособиться к новой культурной среде и облегчить переезд в новую страну.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-18.jpeg)
Макро-карта Onestop.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-19.jpeg)
Карта эмоций клиента для каждого этапа.
Карта опыта RailEurope (Experience Map)
Данная карта опыта — часть крупной инициативы Rail Europe Inc, американского дистрибьютора, который предлагает северо-американским путешественникам приобретать билеты и проездные для поездок по Европе в одном месте.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-25.png)
Визуализация дизайна сервиса Blueprint+
Академическая группа из Hochschule Luzern (центр оценки компетенций) в Швейцарии создала визуальное представление сервиса. Оно отражает взаимодействие различных людей с различными службами и иными точками соприкосновения.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-20.jpeg)
Визуализация путешествия потребителя— наглядный и цепляющий внимание формат. Он иллюстрирует процессы с точки зрения клиента и позволяет убедиться, что именно опыт пользователя стоит во главе стола.
Карта путешествий потребителя в цифровом маркетинге
Схема показывает, насколько сложными бывают пользовательские путешествия. Постоянное управление всеми точками контакта в различных каналах — сложнейшая задача.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-26.png)
Customer Journey Map
Визуализация пользовательского опыта от LEGO
Посмотрите на результат пошагового сопровождения клиента LEGO. Мы видим, как достигается WOW-эффект от полета в Нью-Йорк.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-27.png)
“Колесо опыта” LEGO
Карта путешествий Userspots
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-28.png)
Опыт пользователей от AAFMAA
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-29.png)
AAFMAA User Experience
Канва путешествия потребителя (Customer Journey Canvas)
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-30.png)
Анализ сервиса с помощью путешествия потребителя
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-21.jpeg)
Новый способ создания карты путешествий потребителей
Управление муниципальным транспортом Сан-Франциско создало карту, отражающую ключевые типы пассажиров, их действия, эмоции, обстоятельства и контекст. Каждая категория отмечена своим цветом.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-22.jpeg)
Дизайн для мобильной коммерции
При разработке дизайна для мобильной коммерции прежде всего узнайте, как покупатели определенных брендов (в том числе конкурентов) используют мобильные устройства на каждом этапе покупательского цикла.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-23.jpeg)
Путешествие потребителя
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-24.jpeg)
Прогресс игрока
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-25.jpeg)
Путешествие потребителя
Проекты с 3D-персонажами призваны оживить зачастую скучные пользовательские путешествия для клиентов.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-31.png)
Пользовательские путешествия абонентов сотовой связи и Интернета
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-26.jpeg)
Карта опыта (Experience Map)
Эта карта опыта иллюстрирует огромное число вариантов мест, где можно приобрести книги и фильмы. Она носит скорее описательный характер и призвана направлять в нужное русло обсуждения дизайнеров, пользователей и заказчиков.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-27.jpeg)
*Карточки персонажей (Personas)*
Mailchimp
Команда UX-дизайнеров Mailchimp пообщалась с десятками пользователей и собрала тонны данных об их мотивации, характерных чертах и потребностях. Затем на основании полученной информации они создали серию архетипов клиентов, которые служат отправной точкой при дизайне.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-32.png)
Shopify
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-33.png)
Карточки клиентов Shopify Plus.
Weebly
Карточки персонажей Weebly иллюстрируют мотивацию пользователей на создание веб-сайтов.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-34.png)
Кейт — новичок в вопросе создания сайтов.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-35.png)
Эми хочет получить вторую профессию.
Карточки персонажей Userspots
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-36.png)
Еще карточки персонажей
Карточки призваны сфокусировать нас на основных пользовательских случаях, трудностях и возможностях.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-28.jpeg)
Карточки персонажей от Энди Гамильтона.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-29.jpeg)
Карточки персонажей от Кристины Лейкуэй.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-37.png)
Карточки персонажей от Ванессы Ли.
AppliedByDesign
Команда AppliedByDesign искала лаконичный формат без лишней мишуры для более аналитического представления, поскольку большинство их клиентов — IT-компании.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-38.png)
Карточки персонажей Digital Worksplace
Векторные персонажи для брендирования виртуального рабочего пространства.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-39.png)
Шаблон для карточек персонажей
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-40.png)
Карточка персонажей от Fakecrow
Карточка персонажа — владельца транспортной компании
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-30.jpeg)
Руководство по созданию карточек персонажей
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-31.jpeg)
Бесплатный инструмент для создания карточек персонажей Xtensio
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-41.png)
*Карта сайта*
YTravel
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-42.png)
Student Guide
Визуализация карты сайта для редизайна портала Student’s Guide.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-43.png)
В работе использованы мокапы от Creative Market.
Карта сайта
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-44.png)
Карта сайта Codeacademy для редизайна
Комплексная карта редизайна сайта, разделенная на четыре секции. Каждая секция обозначает двухнедельный цикл разработки.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-45.png)
Omnigraffle Stencil
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-32.jpeg)
*Сценарии поведения пользователей (User Flows)*
Apple Watch
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-46.png)
Создание однозначных сценариев
Создайте внутреннюю библиотеку иконок, чтобы использовать их повторно в разных пользовательских сценариях. Благодаря этому вы сэкономите время и выдержите единый стиль.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-33.jpeg)
Блок-схема и карта сайта
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-47.png)
Компоненты UX-архитектуры.
Большая канва сценариев + референсы
Слияние блок-схемы с пользовательскими сценариями. На примере показаны экраны с вариантами действий пользователя, дополненные контекстом времени и ситуации.
Поскольку сценарии поведения пользователя неотделимы от блок-схемы, это снимает необходимость прилагать дополнительные усилия по согласованию нескольких отдельных документов.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-34.jpeg)
Мобильная адаптация новичков от T-Mobile
T-Mobile нуждались в адаптационной системе, которая помогала бы владельцам новых устройств на протяжении нескольких недель после покупки.
Разработанная система включает в себя серию подсказок и заданий, появляющихся с определенными интервалами. Они призваны помочь пользователям освоиться и получить полное удовлетворение от работы с устройством.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-35.jpeg)
Работа Дианы Домингез.
Блок-схема мобильных UX-экранов
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-48.png)
Тестирование сценариев поведения пользователей
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-36.jpeg)
Работа Питера Дельтондо.
Сценарий взаимодействия
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-37.jpeg)
Схема рабочего процесса
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-49.png)
Концепт Жуана Ллерена.
Пользовательский сценарий
Шаблон для визуализации карты сайта, включающий 130 векторных элементов.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-50.png)
Автор — Грег Длюбац.
Шаблон сайта от EasyOne
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-51.png)
Пользовательский сценарий для функции поиска пропавшего человека
Работа выполнена Грегом Муром в качестве тестового задания на должность IxD дизайнера в Google.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-38.jpeg)
IxD — проектирование взаимодействия.
Пользовательские сценарии
Пример диаграммы, показывающий все возможные пути пользователя к запланированной целевой странице.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-52.png)
Диаграмма UI-сценария
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-53.png)
Прототип Sketches & Paper.
*Скетчи и бумажные прототипы*
Скетч-карта (Sketch Map)
Катриона из InspireUX поделилась интересным подходом к упорядочиванию скетчей вокруг одной главной идеи. Получился микс из ментальных карт и набросков от руки.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-39.jpeg)
Скетчи “O Folhetim”
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-54.png)
Скетчи компоновки экранов от Rosenfeld Media
Принцип использования бумажного прототипа: сделать скетчи экранов, определить последовательность действий, протестировать на пользователях.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-55.png)
Бумажный прототип Hanmail (Paper Prototype)
Тестирование системы электронной почты.
*Вайрфреймы (Wireframes)*
Вайрфрейм — это низко детализированное представление дизайна.
Пример вайрфрейма
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-56.png)
Приложение для прогноза погоды
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-57.png)
Приложение-карта+геолокация
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-40.jpeg)
Вайрфрейм, взаимодействие, жесты.
Вайрфрейм для Blueprint
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-41.jpeg)
Вайрфреймы геолокации Thanx
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-58.png)
Работа Майкла Балта.
*Тестирование юзабилити (Usability Test)*
Инфографика тестирования юзабилити Userspots
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-59.png)
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-60.png)
Комментарии к тестам
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-42.jpeg)
Нет подтверждения регистрации. “…Смущает”; “Не уверен, куда я зарегистрировался”.
Результат теста
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-61.png)
Пользовательский тест с пояснениями
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-43.jpeg)
Использована графика из отчетаUserfocus
Образец отчета о результатах юзабилити-теста
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-44.jpeg)
Статистический результат юзабилити-теста в видеоформате
Видео на турецком языке.
*Бенчмаркинг продукта*
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-62.png)
*SWOT-анализ*
SWOT-анализ неправительственной организации
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-63.png)
*Сортировка карточек (Card Sort)*
Дендограммы (Dendograms)
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-64.png)
Матрица подобия (Similarity Matrix)
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-65.png)
*Тестирование «дерева сайта» (tree testing)*
Визуализация результатов tree-тестинга The Pietree
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-66.png)
**Советы по визуализации UX**
1. Выйдите за пределы таблиц Excel
Работать с графикой в Excel и Word просто, однако большинство людей не желают видеть стандартные линии, гистограммы и круговые диаграммы. Необходимо создавать оригинальные решения без использования этих шаблонов.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-45.jpeg)
2. Сперва данные, затем форма
Это отличный девиз для продуктового дизайна. Ведь оформление должно помогать людям правильно понимать информацию.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-46.jpeg)
3. Узнайте свою аудиторию
Если на совещании присутствует первое лицо компании, сфокусируйтесь на главных вопросах. А вот с продуктовой командой лучше обсудить как можно больше деталей.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-47.jpeg)
4. Сформулируйте ожидания
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-48.jpeg)
5. Всегда используйте призыв
Данные должны говорить нечто вроде “Сделай это!” Призывы нравятся всем. Хорошо, когда понимаешь, что нужно делать. Используйте их в своих проектах!
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-49.jpeg)
6. Ищите вдохновение
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-50.jpeg)
Есть множество ресурсов, где можно получить порцию вдохновения.
Oberhauser
Бюро Oberhauser — студия, специализирующаяся на дизайне интерфейсов и оформлении информации.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-67.png)
Information is Beatiful
Сайт, целиком посвященный превращению сырых данных, информации и знаний в красивые, интересные и, самое главное, полезные визуализации, инфографики и диаграммы.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-68.png)
Linowski.ca
Wireframes Magazine — онлайн ресурс, размещающий образцы дизайна документации для представления информации проектировщиками интерфейсов и UX-специалистами.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-69.png)
Behance
Выставляйте свои работы и изучайте работы из онлайн-портфолио самых известных профессионалов индустрии.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-70.png)
Dribbble
Вместо хлеба насущного для дизайнеров.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-71.png)
CoolInfographics.com
Блог об инфографике Рэнди Крама, в котором он собирает лучшие примеры визуализации данных и инфографик.
![](https://ux-journal.ru/wp-content/uploads/2017/03/word-image-72.png)