OOUX: новый подход к дизайну взаимодействия

Ия Пфанштиль797читать м.2 Мая 2016
OOUX: новый подход к дизайну взаимодействия
Представьте, что вы создаете дизайн социальной сети, которая помогает поварам обмениваться рецептами с экзотическими ингредиентами. Проведя исследование, вы разработали подробнейшую персону (Пьер, шеф-новатор, работающий в ресторане изысканной кухни) и определили свое положение на рынке. Вы хорошо знакомы с индустрией и вам понятны цели проекта. Самое время приступить к дизайну. Но с чего вы начнете? Спланируете ли вы процесс привлечения шеф-поваров? Ведь без них не будет и социальной сети. Поэтому стоит убедиться, что первое взаимодействие с ними будет замечательным. Возможно, вы начнете с самого популярного действия: публикации нового рецепта. А потом перейдете к опыту поиска – как другие шеф-повара будут искать новые рецепты. Многие дизайнеры начинают работу с планирования путешествия клиента, понимания, как кто-то будет использовать готовый продукт. Одно взаимодействие направляет лиды в другой поток взаимодействия. Вскоре получается целая сеть потоков. Добавьте к ней навигацию, и продукт готов. ux, веб дизайн, юзабилити, UX-дизайн, взаимодействие, прототипы, CTA, призыв к действию, OOUX, функциональный дизайн Однако при таком подходе (с ориентацией на действия) существует одна проблема. Дизайнеры планируют действия, не понимая, на что они направлены. У них есть субъект (пользователь) и глагол (действие). Но где же объект? Когда мы сразу переходим к действию, то рискуем создать продукт с размытым отражением ментальной модели пользователя. Определив же объект, мы можем создать более реальный и приятный пользовательский опыт. Для начала нужно определить своего пользователя, понять, кто он. Затем создать его ментальную модель, в которую входят все объекты, из которых состоит проблема, и которые пользователь видит в качестве части ее решения, а также отношения этих объектов друг к другу. Затем, наконец, создаются взаимодействия. Это и есть OOUX – ориентированный на объект пользовательский опыт. В этой статье мы рассмотрим, как перейти от создания объектов к дизайну взаимодействий, используя простой инструмент – список CTA.

Что такое список CTA и почему это важно?

CTA (призывы к действию) – основная точка входа в потоки взаимодействия. Если поток взаимодействия – это общение пользователя и системы, то призыв к действию – это возможность для пользователя начать общение. Создав систему объектов, вы можете добавить к ним возможные CTA. ux, веб дизайн, юзабилити, UX-дизайн, взаимодействие, прототипы, CTA, призыв к действию, OOUX, функциональный дизайн Список CTA – это потенциальные призывы к действию, организованные вокруг объектов. Создаются они на основе того, что пользователи хотят делать в вашей системе, точнее, что они хотят делать с объектами в вашей системе. Создание списка CTA помогает, во-первых, сузить направленность дизайна взаимодействий, во-вторых, помогает:
  • думать о взаимодействиях креативно
  • проверять эти взаимодействия
  • создавать более точную смету проекта
Давайте рассмотрим эти три преимущества подробнее.
Творческие вызовы и более эффективный мозговой штурм
Простое понимание ваших объектов поможет определить, что пользователи могут с ними делать. Кода мы думаем о взаимодействии в контексте объектов, мы создаем основу для мозгового штурма. При использовании этого подхода мы ярче проявляем свою креативность и реже упускаем из вида важные моменты. Например, давайте подумаем об объекте «ингредиент» в нашем приложении для шеф-поваров. Что может Пьер захотеть сделать с ингредиентами?
  • Добавить ингредиент в избранное
  • Обозначить себя экспертом по ингредиенту
  • Добавить ингредиент в корзину
  • Проверить наличие ингредиента в местных магазинах
  • Получать уведомления о новых рецептах с этим ингредиентом
  • Написать совет по использованию этого ингредиента
Используя объектный подход, можно открыть для себя функции, о которых даже не задумывались раньше, когда мозговой штурм был слишком общим. Подобная структура также дает возможность проявить весь потенциал своего креативного мышления.
Ранняя проверка действий
Хорошие новости: вы можете протестировать систему объектов и действия еще до того, как потратите часы на дизайн взаимодействия. Создайте прототип, который позволит пользователям переходить от одного объекта к другому. Наблюдая и проведя интервью, убедитесь, что ваша система соответствует их ментальной модели. Вы подобрали правильные объекты? Их взаимоотношения имеют смысл? К объектам ведут правильные «кнопки»? Имея подобный прототип, вы можете обсудить функциональность с пользователями, без необходимости создания прототипов взаимодействий.
Более точная оценка стоимости
Дизайн взаимодействий отнимает много времени и ресурсов. Необходимо заранее продумать все возможные проблемы и ошибки, учесть множество факторов. Объем и сложность дизайна взаимодействия будет влиять на сроки, бюджет и требования к персоналу. Со списком CTA вы можете быть уверены, что имеете четкое понимание предстоящего фронта работ. Вы можете предсказать возможные трудности и лучше к ним подготовиться. Звучит многообещающе. Но как же создать список CTA? Начнем со схемы, затем обсудим создание официальной и подробной версии.

Список CTA: схема

Для начала необходимо создать карту объектов. Для этого:
  • Вычлените общие элементы из целей продукта
  • Определите элементы объектов (основное содержание, метаданные, вложенные объекты)
  • Расставьте приоритеты
В результате получится нечто похожее: Синие стикеры в рамочке – объекты, желтые – основное содержание, розовые – метаданные, синие стикеры без рамочки – вложенные объекты. ux, веб дизайн, юзабилити, UX-дизайн, взаимодействие, прототипы, CTA, призыв к действию, OOUX, функциональный дизайн Как только вы создадите карту объектов, продумайте, какой призыв к действию будет относиться к каждому объекту. Для CTA – зеленые стикеры. ux, веб дизайн, юзабилити, UX-дизайн, взаимодействие, прототипы, CTA, призыв к действию, OOUX, функциональный дизайн CTA лучше обсудить со всеми командами проекта, собрав идеи о том, какие действия пользователи могут совершать над объектами. Для этого просто нужно подумать о том, какие кнопки должны вести к объектам. На каждый объект может потребоваться 10-15 минут, поэтому отведите на мозговой штурм час или два, если в вашей системе 3-5 объектов. Вы удивитесь, сколько идей вам удастся сгенерировать. Однако будьте готовы к тому, что в результате обсуждения вы захотите пересмотреть некоторые цели.

Список CTA: официальная версия

Призывы к действию могут быть довольно сложными. Как и когда будут отображаться призывы к действию, зависит от права доступа, типа пользователя и положения объектов. Даже в нашем примере некоторые CTA будут доступны только определенным пользователям. Например, если я шеф-повар и нахожусь на странице с собственным рецептом, то мне будут доступны кнопки «редактировать» и «удалить», но не будет доступна кнопка «добавить в избранное». И наоборот, если я просматриваю рецепт другого повара, то не смогу его редактировать или удалить, но смогу добавить в избранное. Следующим этапом будет создание более подробного формата списка CTA, официально оформленного в виде электронной таблицы. ux, веб дизайн, юзабилити, UX-дизайн, взаимодействие, прототипы, CTA, призыв к действию, OOUX, функциональный дизайн В таблице создайте матрицу и потоки взаимодействий для каждого CTA. Для этого добавьте следующие колонки: объект, призыв к действию, зачем (причина), кто, где (положение), когда (условия), требуемые усилия, приоритетность, замечания и вопросы. Перед тем, как приступить к дизайну связанных с каждым CTA взаимодействий, ответьте на эти вопросы:
  • Зачем нужен этот призыв к действию? Какова его цель, к реализации какой пользовательской или бизнес-цели он ведет?
  • Кто будет взаимодействовать с этим призывом к действию? Определенная персона или тип пользователя? Кто-то со специальным доступом или ролью?
  • Где будет находиться призыв к действию? Где пользователь будет ожидать его увидеть? Есть ли еще необычные варианты размещения, которые будут отвечать нуждам пользователя?
  • Насколько сложным будет поток взаимодействия, к которому ведет призыв к действию? Как много усилий должен будет приложить пользователь?
  • Какие потоки взаимодействия являются приоритетными? Какой нужно запустить обязательно, какой отложить до следующей фазы, а какой нуждается в тестировании и доработке?
  • Какие вопросы и сомнения вызывает этот призыв к действию?
Создайте ориентированный на объекты прототип и протестируйте ментальную модель с пользователями. Убедитесь, что подобрали подходящие входные точки для взаимодействий. Так будет намного проще предугадать действия пользователя после нажатия кнопки.

Основа функционального дизайна

Итак, вы создали систему объектов и список CTA, разработали прототип системы. Ваш прототип опробовали реальные пользователи: они легко переходят от объекта к объекту, призывы к действию отвечают их нуждам. Замечательно! Но OOUX и список CTA не помогут вам спроектировать сами взаимодействия. Вам все же придется выполнить эту тяжелую работу. Однако если вы будете разрабатывать их на основе потоков взаимодействия, то можете быть уверены в результате. Что более важно, при таком подходе для пользователей навигация будет менее абстрактной и запутанной. Они будут знать, что они делают и зачем. К тому же OOUX позволит сделать процесс дизайна более элегантным, оптимизированным и ориентированным на пользователя.
Другие новости
Отправлять подтверждающие документы для прохождения модерации в Директе стало проще

Отправлять подтверждающие документы для прохождения модерации в Директе стало проще

Пользователи стали на 25% чаще интересоваться покупками в интернет-магазинах

Пользователи стали на 25% чаще интересоваться покупками в интернет-магазинах

Лучший дизайн 2022

Лучший дизайн 2022

Подписаться на новостную рассылку12 тысяч маркетологов уже подписались!
Следующий
Тренды B2B на 2019 год. Исследование

Тренды B2B на 2019 год. Исследование

читать минут
Рекомендуемые

Самые распространенные SEO-ошибки на сайте. Исследование

читать минут

Комментарии (0)

  • Что такое список CTA и почему это важно?
  • Творческие вызовы и более эффективный мозговой штурм
  • Ранняя проверка действий
  • Более точная оценка стоимости
  • Список CTA: схема
  • Список CTA: официальная версия
  • Основа функционального дизайна