Визуализация UX: советы и примеры

943

Вы читаете перевод статьи UX Visualization Examples & Tips, подготовленной по материалам UX Alive, UX Conference & Workshops in Istanbul 2016. Над переводом работали Ольга Кокоулина и Ринат Шайхутдинов. При поддержке iSpring.

iSpring — решение для запуска дистанционного обучения.

Ада, администратор. Самодостаточная отличница. Андрэ, разработчик. Любит деньги. Фред, идеальный пользователь. Одержим контролем.

**Визуализация UX**

Любое решение UX-задачи должно четко пониматься не только дизайнером, но и всеми участниками проекта. Чтобы достичь этого, используйте графические изображения. Они подходят для этой цели гораздо лучше скучных текстовых отчетов.

Так что смело визуализируйте UX и создавайте более качественные и надежные продукты!


Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.


**Примеры визуализации UX**

Карты путешествий потребителя (Journey Maps), карточки персонажей (Personas), инфографики — все это великолепные примеры визуализации UX. Представляем вашему вниманию более 50 примеров визуализации пользовательского опыта:

*Карта путешествий потребителя (Customer Journey Maps или CJM)*

Макро-карта (Macro Map)

OneStop — комплексная программа, призванная помочь иностранным студентам приспособиться к новой культурной среде и облегчить переезд в новую страну.

Макро-карта Onestop.
Карта эмоций клиента для каждого этапа.

Карта опыта RailEurope (Experience Map)

Данная карта опыта — часть крупной инициативы Rail Europe Inc, американского дистрибьютора, который предлагает северо-американским путешественникам приобретать билеты и проездные для поездок по Европе в одном месте.

Визуализация дизайна сервиса Blueprint+

Академическая группа из Hochschule Luzern (центр оценки компетенций) в Швейцарии создала визуальное представление сервиса. Оно отражает взаимодействие различных людей с различными службами и иными точками соприкосновения.

Визуализация путешествия потребителя— наглядный и цепляющий внимание формат. Он иллюстрирует процессы с точки зрения клиента и позволяет убедиться, что именно опыт пользователя стоит во главе стола.

Карта путешествий потребителя в цифровом маркетинге

Схема показывает, насколько сложными бывают пользовательские путешествия. Постоянное управление всеми точками контакта в различных каналах — сложнейшая задача.

Customer Journey Map

Визуализация пользовательского опыта от LEGO

Посмотрите на результат пошагового сопровождения клиента LEGO. Мы видим, как достигается WOW-эффект от полета в Нью-Йорк.

“Колесо опыта” LEGO

Карта путешествий Userspots

Опыт пользователей от AAFMAA

AAFMAA User Experience

Канва путешествия потребителя (Customer Journey Canvas)

Анализ сервиса с помощью путешествия потребителя

Новый способ создания карты путешествий потребителей

Управление муниципальным транспортом Сан-Франциско создало карту, отражающую ключевые типы пассажиров, их действия, эмоции, обстоятельства и контекст. Каждая категория отмечена своим цветом.

Дизайн для мобильной коммерции

При разработке дизайна для мобильной коммерции прежде всего узнайте, как покупатели определенных брендов (в том числе конкурентов) используют мобильные устройства на каждом этапе покупательского цикла.

Путешествие потребителя

Прогресс игрока

Путешествие потребителя

Проекты с 3D-персонажами призваны оживить зачастую скучные пользовательские путешествия для клиентов.

Пользовательские путешествия абонентов сотовой связи и Интернета

Карта опыта (Experience Map)

Эта карта опыта иллюстрирует огромное число вариантов мест, где можно приобрести книги и фильмы. Она носит скорее описательный характер и призвана направлять в нужное русло обсуждения дизайнеров, пользователей и заказчиков.

*Карточки персонажей (Personas)*

Mailchimp

Команда UX-дизайнеров Mailchimp пообщалась с десятками пользователей и собрала тонны данных об их мотивации, характерных чертах и потребностях. Затем на основании полученной информации они создали серию архетипов клиентов, которые служат отправной точкой при дизайне.

Shopify

Карточки клиентов Shopify Plus.

Weebly

Карточки персонажей Weebly иллюстрируют мотивацию пользователей на создание веб-сайтов.

Кейт — новичок в вопросе создания сайтов.
Эми хочет получить вторую профессию.

Карточки персонажей Userspots

Еще карточки персонажей

Карточки призваны сфокусировать нас на основных пользовательских случаях, трудностях и возможностях.

Карточки персонажей от Энди Гамильтона.
Карточки персонажей от Кристины Лейкуэй.
Карточки персонажей от Ванессы Ли.

AppliedByDesign

Команда AppliedByDesign искала лаконичный формат без лишней мишуры для более аналитического представления, поскольку большинство их клиентов — IT-компании.

Карточки персонажей Digital Worksplace

Векторные персонажи для брендирования виртуального рабочего пространства.

Шаблон для карточек персонажей

Карточка персонажей от Fakecrow

Карточка персонажа — владельца транспортной компании

Руководство по созданию карточек персонажей

Бесплатный инструмент для создания карточек персонажей Xtensio

*Карта сайта*

YTravel

Student Guide

Визуализация карты сайта для редизайна портала Student’s Guide.

В работе использованы мокапы от Creative Market.

Карта сайта

Карта сайта Codeacademy для редизайна

Комплексная карта редизайна сайта, разделенная на четыре секции. Каждая секция обозначает двухнедельный цикл разработки.

Omnigraffle Stencil

*Сценарии поведения пользователей (User Flows)*

Apple Watch

Создание однозначных сценариев

Создайте внутреннюю библиотеку иконок, чтобы использовать их повторно в разных пользовательских сценариях. Благодаря этому вы сэкономите время и выдержите единый стиль.

Блок-схема и карта сайта

Компоненты UX-архитектуры.

Большая канва сценариев + референсы

Слияние блок-схемы с пользовательскими сценариями. На примере показаны экраны с вариантами действий пользователя, дополненные контекстом времени и ситуации.

Поскольку сценарии поведения пользователя неотделимы от блок-схемы, это снимает необходимость прилагать дополнительные усилия по согласованию нескольких отдельных документов.

Мобильная адаптация новичков от T-Mobile

T-Mobile нуждались в адаптационной системе, которая помогала бы владельцам новых устройств на протяжении нескольких недель после покупки.

Разработанная система включает в себя серию подсказок и заданий, появляющихся с определенными интервалами. Они призваны помочь пользователям освоиться и получить полное удовлетворение от работы с устройством.

Работа Дианы Домингез.

Блок-схема мобильных UX-экранов

Тестирование сценариев поведения пользователей

Работа Питера Дельтондо.

Сценарий взаимодействия

Схема рабочего процесса

Концепт Жуана Ллерена.

Пользовательский сценарий

Шаблон для визуализации карты сайта, включающий 130 векторных элементов.

Автор — Грег Длюбац.

Шаблон сайта от EasyOne

Пользовательский сценарий для функции поиска пропавшего человека

Работа выполнена Грегом Муром в качестве тестового задания на должность IxD дизайнера в Google.

IxD — проектирование взаимодействия.

Пользовательские сценарии

Пример диаграммы, показывающий все возможные пути пользователя к запланированной целевой странице.

Диаграмма UI-сценария

Прототип Sketches & Paper.

*Скетчи и бумажные прототипы*

Скетч-карта (Sketch Map)

Катриона из InspireUX поделилась интересным подходом к упорядочиванию скетчей вокруг одной главной идеи. Получился микс из ментальных карт и набросков от руки.

Скетчи “O Folhetim”

Скетчи компоновки экранов от Rosenfeld Media

Принцип использования бумажного прототипа: сделать скетчи экранов, определить последовательность действий, протестировать на пользователях.

Бумажный прототип Hanmail (Paper Prototype)

Тестирование системы электронной почты.

*Вайрфреймы (Wireframes)*

Вайрфрейм — это низко детализированное представление дизайна.

Пример вайрфрейма

Приложение для прогноза погоды

Приложение-карта+геолокация

Вайрфрейм, взаимодействие, жесты.

Вайрфрейм для Blueprint

Вайрфреймы геолокации Thanx

Работа Майкла Балта.

*Тестирование юзабилити (Usability Test)*

Инфографика тестирования юзабилити Userspots

Комментарии к тестам

Нет подтверждения регистрации. “…Смущает”; “Не уверен, куда я зарегистрировался”.

Результат теста

Пользовательский тест с пояснениями

Использована графика из отчета Userfocus

Образец отчета о результатах юзабилити-теста

Статистический результат юзабилити-теста в видеоформате

Видео на турецком языке.

*Бенчмаркинг продукта*

*SWOT-анализ*

SWOT-анализ неправительственной организации

*Сортировка карточек (Card Sort)*

Дендограммы (Dendograms)

Матрица подобия (Similarity Matrix)

*Тестирование «дерева сайта» (tree testing)*

Визуализация результатов tree-тестинга The Pietree

**Советы по визуализации UX**

1. Выйдите за пределы таблиц Excel

Работать с графикой в Excel и Word просто, однако большинство людей не желают видеть стандартные линии, гистограммы и круговые диаграммы. Необходимо создавать оригинальные решения без использования этих шаблонов.

2. Сперва данные, затем форма

Это отличный девиз для продуктового дизайна. Ведь оформление должно помогать людям правильно понимать информацию.

3. Узнайте свою аудиторию

Если на совещании присутствует первое лицо компании, сфокусируйтесь на главных вопросах. А вот с продуктовой командой лучше обсудить как можно больше деталей.

4. Сформулируйте ожидания

5. Всегда используйте призыв

Данные должны говорить нечто вроде “Сделай это!” Призывы нравятся всем. Хорошо, когда понимаешь, что нужно делать. Используйте их в своих проектах!

6. Ищите вдохновение

Есть множество ресурсов, где можно получить порцию вдохновения.

Oberhauser

Бюро Oberhauser — студия, специализирующаяся на дизайне интерфейсов и оформлении информации.

Information is Beatiful

Сайт, целиком посвященный превращению сырых данных, информации и знаний в красивые, интересные и, самое главное, полезные визуализации, инфографики и диаграммы.

Linowski.ca

Wireframes Magazine — онлайн ресурс, размещающий образцы дизайна документации для представления информации проектировщиками интерфейсов и UX-специалистами.

Behance

Выставляйте свои работы и изучайте работы из онлайн-портфолио самых известных профессионалов индустрии.

Dribbble

Вместо хлеба насущного для дизайнеров.

CoolInfographics.com

Блог об инфографике Рэнди Крама, в котором он собирает лучшие примеры визуализации данных и инфографик.


Мобильное приложение «Заметки о психике» | Mental Notes

Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.

Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.

Скачать приложение в Appstore →

Посты в категории UX-дизайн

Руководство: как подготовить и провести онлайн-опрос

Ольга Жолудова

10 декабря 2019

Посты в категории UX-дизайн

От тактики к стратегии: что такое сервис-дизайн?

Ольга Жолудова

11 ноября 2019

Посты в категории UX-дизайн

40+ способов сделать опросы точнее: чек-лист для ux-исследователей

Ольга Жолудова

18 октября 2019