Способность сопереживать пользователям — неотъемлемая часть дизайна, про которую, к сожалению, часто забывают. Но без этого мы не сможем понять истинных проблем пользователей и услышать заказчика. Что может привести к проблемам в дальнейшем: непродуманная архитектура, отсутствие обучения, неправильная расстановка приоритетов и так далее.
Эмпатия — это способность понимать и идентифицировать себя с контекстом, эмоциями, целями и мотивами другого человека. Таким образом, эмпатия в дизайне шире понимания потребностей пользователей, она затрагивает контекст, ограничения, привычки и взаимосвязи между людьми в целом.
Недостаток понимания, как пользователи думают и действуют — большая и частая проблема, к сожалению. Но как добиться эмпатии при проектировании интерфейса? В этой статье вы познакомитесь с несколькими методами, которые мы используем в Fingers, чтобы делать эмпатический дизайн, работать в ключе Human Centered Design (ориентированного на человека дизайна) и создавать классные продукты.
9 важных вопросов перед началом проектирования пользовательского интерфейса
Первое, с чего стоит начать — это поговорить с заказчиком, провести исследование и узнать ответы на вопросы:
- Какая цель проекта?
- Зачем заказчику этот продукт и какие его цели?
- Кто наши пользователи в глазах заказчика, для кого он создает продукт?
- Какие задачи мы поможем решить пользователям?
- Почему они будут пользоваться именно нашим решением?
- Как мы узнаем, что добились цели?
- Как эти задачи решают конкуренты?
- Какие отзывы о продуктах конкурентов?
- Какие функции и контент нужны для решения пользовательских задач?
Важно не просто проговорить у себя в голове ответы на эти вопросы, а зафиксировать их и обсудить с командой и заказчиком. Так вы добьетесь синхронизации и общего понимания проблемы и того, каким путем вы будете ее решать. В свою очередь, сэкономит вам кучу времени и сил в процессе проектирования сайта или приложения.
Это основные вопросы, но при возможности стоит узнать у заказчика как можно больше информации о проекте, его бизнесе и ожиданиях. Никогда не знаешь, какая именно информация поможет вам в будущем. Анализируйте во время проекта, какой информации вам не хватает и возможно, в итоге вы составите свой список вопросов.
Обязательно записывайте все, что услышите во время встречи. Хорошая практика — делать после собрания meeting minutes — протокол встречи — и высылать заказчику, чтобы зафиксировать информацию. Некоторые даже практикуют запись интервью на аудио, чтобы всегда можно было обратиться к нему и переслушать.
Сделайте небольшую шпаргалку с целью проекта и периодически сверяйтесь с ней, чтобы убедиться, что движетесь в правильном направлении.
Скачать чек-лист вопросов к заказчику перед началом проекта.
И еще небольшое дополнение к вопросам: ответьте сами себе, зачем вам этот проект и что вы хотите получить в итоге? Крутой кейс в портфолио, изучить новую сферу, попробовать себя в другой стилистике… Это поможет оставаться мотивированным на протяжении всего проекта, даже если что-то пойдет не так.
Портреты пользователей
Теперь вы знаете, какие вопросы задавать заказчику, чтобы во время проектирования все шло гладко. Далее начинаем работать с аудиторией приложения или вебсайта. Первый шаг — дизайн персоны (портреты пользователей).
Как создать
Дизайн персона — описание вымышленного человека, основанное на целевой аудитории продукта. Подробно о том, как создавать такое описание, мы уже писали в нашей статье о дизайн персонах.
Конечно, идеальный вариант, когда есть возможность пообщаться с пользователями, провести интервью и исследования. Но бывают разные ситуации и не всегда есть ресурсы, особенно, когда проверяется гипотеза и проектируется MVP. Не отчаивайтесь, всегда есть обходные пути: можно воспользоваться инструментами аналитики типа Google Analytics, поискать целевую аудитория в социальных сетях, или, возможно, уже есть готовые результаты исследований по вашей теме.
Пример дизайн персоны в Fingers
Скачать шаблон дизайн персоны (портрета пользователя) для Figma или посмотреть.
Преимущества
Портреты пользователей — первый шаг, чтобы “включить” эмпатию в вашей команде. Стоит помнить, что процесс эмпатии и анализа — это взаимоисключающие мыслительные операции. И так как чаще всего работа команды связана с анализом, может быть сложно переключиться в режим эмпатии. Но когда под рукой есть портрет пусть и не реального человека, но максимально приближенного и со всеми атрибутами (фотография, имя, увлечения, страхи, цели и так далее), то проявлять человечность значительно легче.
Дизайн персона играет важную роль для следующих двух инструментов — карты эмпатии и карты пути пользователя.
Карта эмпатии
Следующий инструмент — карта эмпатии. Этот инструмент можно использовать как альтернативу персоне, так и работать с ними в паре, они хорошо дополняют друг друга. Лучше работать над картой в команде, но можно составить такую карту и в одиночку.
Как создать
Для составления карты можно использовать как бумаги и ручку, так и доску и стикеры. В центре карты — ваша персона. Далее нужно разделить область на 4 сектора:
- что пользователь говорит;
- думает;
- делает;
- чувствует.
Заполняем области в соответствии с вашей персоной:
Говорит. В этот блок следует вписывать реальные цитаты пользователей из интервью или исследований. Если нет возможность провести интервью, то, например, можно посмотреть отзывы на приложения конкурентов, найти форумы, блоги по теме или даже статьи с нужной вам информацией.
Думает. Здесь записываем мысли, которые возникают у пользователя во время использования продукта или сервиса. О чем он думает? Что для него сейчас важно? Информация может быть похожа на блок “Говорит”, а может и отличаться, ведь люди не всегда говорят то, что в действительности думают.
Делает. Какие действия пользователь совершает в процессе использования продукта? Как он это делает? Например, при долгой загрузке нажимает на индикатор прогресса, или чтобы вернуться к началу ленты новостей скроллит вверх, а не нажимает на кнопку “home”.
Чувствует. Беспокойства, ощущения и эмоциональное состояние в целом. Как положительные эмоции, так и отрицательные.
Традиционно используются эти четыре сектора, но можно расширить карту и ниже добавить еще два: боль и достижения. В блок “боль” помещаем препятствия, страхи и негативные сценарии, а в “достижения” потребности и желания, что значит успех для пользователя.
Шаблон для создания карты эмпатии, который мы используем при проектировании приложений и вебсайтов
Скачать шаблон для создания карты эмпатии
Не тратьте много времени на размышления, если какая-то из идей подходит для нескольких секторов. Просто выберете один и поместите ее туда. Куда важнее если вам совсем нечего добавить в сектор. Это звоночек о том, что нужно лучше разобраться в своей аудитории и провести дополнительные исследования.
Преимущества
Карты эмпатии помогают:
- определить приоритеты и потребности пользователей;
- увидеть возможности для решения задачи;
- категоризировать уже имеющиеся знания о пользователях и понять, какой информации не хватает;
- настроить команду на одну волну;
- принимать и аргументировать решения.
Карта пути пользователя
Карта пути пользователя используется для визуализации поведения, выявления болевых точек, препятствий, негативных сценариев. Но в отличие от карты эмпатии, эти показатели фиксируются для конкретных шагов (экранов), поэтому в итоге получается более подробная информация и легче сформировать выводы о том, что нужно делать дальше.
Пример карты пути пользователя для приложения такси (Uber)
Как создать
Такая карта, как вы могли уже догадаться, так же завязана на целевой аудитории, а точнее, на дизайн персоне. Одна персона — одна карта.
Блоки на карте пути могут отличаться в зависимости от целей и сферы. В Fingers мы используем следующую структуру: выбираем главный сценарий для данной персоны, и для каждого экрана приложения или сайта прописываем:
- задачу пользователя;
- какие действия он совершает;
- что пользователь думает и в каком контексте находится;
- препятствия и вопросы, которые могут возникнуть у пользователя;
- негативные сценарии.
Пример карты пути пользователя для вебсайта Fingers
Иногда к карте мы добавляем блок с идеями, как на каждом этапе улучшить взаимодействие пользователя с приложением или вебсайтом. Карта получается объемная, но хорошо помогает выявить проблемные точки, и дает всей команде наглядную информацию о поведении пользователя.
Например, при проектировании приложения для оказания медицинских услуг, карта пути пользователя помогла нашей команде проработать негативные сценарии. Это было очень важно, ведь пользователь использует такое приложение чаще всего в плохом самочувствии и хочет поскорее получить помощь. Понимая это, мы создали кратчайший путь к достижению цели и убрали промежуточные шаги, такие как онбординг.
Пример шаблона для карты пути пользователя (Customer Journey Map)
Скачать шаблон для создания карты пути пользователя
Преимущества
Таким образом, карта пути пользователя:
- дает понимание нужд пользователей через визуализацию и сторителлинг;
- команда видит болевые точки, препятствия привязанные к определенным действиям пользователя;
- помогает выявить возможности для улучшения.
Вывод
Инструменты, которые мы рассмотрели в это статье, важны, но все же остаются инструментами. Важно уметь их использовать, но понимать, когда они необходимы, и когда можно обойтись и без них. Хорошо составленные персоны или карты пути пользователей помогают аргументировать и принимать решения. Но не нужно их использовать только потому, что это модно или другие компании так делают. Понимайте цели проекта и синхронизируйте свои действия с ними.
В любом случае, потребность в эмпатичном дизайне только увеличивается, и такой подход позволяет понять, как люди ведут себя, чувствуют и решают проблемы. В эпоху глобализации и разнообразия уже нельзя оставаться в стороне от потребителей продукта, который вы создаете. Разрушайте границы и будьте открытыми.
Подробнее о картах эмпатии в статье Nielsen Norman Group.
