December 3, 2018

UX-проектирование

UX - User eXperience - опыт пользователя, ощущения пользователя от вашего продукта и реакция на его использование. Каждый пользователь уникален, поэтому различны и способы взаимодействия с продуктом или услугой. Задача UX-проектировщика - сделать этот опыт максимально приятным и полезным.

Официальное определение пользовательского опыта звучит так:

«Восприятие, возникающие у человека при использовании и/или предполагаемом использовании продукта, системы или при получении услуги» (ISO 9241-210:2010, подраздел 2.15).

В основе работы проектировщика:

  • Эмпатия к пользователю - способность поставить себя на место пользователя, проникнуться его проблемами и желание помочь преодолеть эти трудности,
  • Понимание бизнеса заказчика, нацеленность на решение задач бизнеса.

UX-проектирование включает 4 этапа:

  1. Портреты пользователей
  2. Информационная структура
  3. Бумажный прототип
  4. Интерактивный прототип

Заказчик будет говорить, что его продукт - “уникален, для всех, решает миллион проблем”. Не верьте не слово, а задавайте больше вопросов.

  • Кто будет пользоваться продуктом или услугой - этот вопрос даст вам начальное представление о целевой аудитории. Раз за разом сужая круг, вы убедитесь, что продукт вовсе не для всех, а для группы специалистов.
  • В чем их боль - какие проблемы ЦА решает сервис(помогает отслеживать заказ, делает почтовую рассылку с напоминаниями о событиях, автоматизирует работу других сервисов).
  • Почему не конкуренты - определяет уникальность торгового предложения (использование новой технологии, большая клиентоориентированность).
  • Что нужно бизнесу - возможно, самый приятный вопрос для заказчика. Ответом может быть желание привлечь внимание к бренду, заработать на продукте, продать с помощью продукта.

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

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

Важно: создавать не более 4-х персонажей, из которых 1-2 -- основные. Агрегировать персонажей по их боли и целям.

2. Информационная структура

По сути это mind-map со структурой сайта, создание которой предполагает прохождение таких этапов: создание полного набора функций (исходя из сценариев персонажей), дополнение и преобразование этого набора в многоуровневую структуру, добавление детализации.

При создании структуры стоит учитывать 8 принципов информационной архитектуры Дэна Брауна. Для удобства они сгруппированы в четыре более общих:

  1. Принцип раскрытия - не обязательно представлять на главной странице все возможные разделы. Распределите их на наборы, исходя из частоты использования.
  2. Принцип примеров - актуально для интернет-магазинов. Для каждой категории товаров покажите пример самого характерного представителя, это облегчит навигацию.
  3. Принцип множественной классификации - продолжает предыдущий пункт, товар можно найти не только в одной категории, но и в смежных.
  4. Принцип парадного входа - пользователь должен понимать, куда он попал, какие задачи решает сервис. Помогают предзаполненные поля, хорошо структурированная информация, расположение элементов (логотип, разделы, поиск)

Когда информационная структура готова, самое время перейти с созданию бумажного прототипа.

3. Бумажный прототип

Бумажный прототип значительно экономит время во время интерактивного прототипирования. Все, что нужно - маркер и листы бумаги.

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

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

4. Интерактивный прототип

Интерактивный прототип может показаться лишним шагом, но на деле он позволяет проверить бизнес-гипотезу и протестировать UX до дизайна и разработки. Главный плюс интерактивного прототипа в сравнении со статичным - возможность тестировать на пользователях, так как имитируются возможности реального сервиса.

Приложения и сервисы для создания интерактивных прототипов: justinmind, proto.io, flairbuilder, marvelapp, axure, pidoco.

Итак, ваш UX-прототип готов. Настало время UI-дизайна.

Ссылка на trello доску онлайн-курса