Нарративные стратегии в UX: что это и как работает

Как использовать нарративные стратегии для снижения когнитивной нагрузки?

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

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

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

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

Сегодня цифровые продукты несут в себе большой объем информации для пользователей. Чаще всего эти продукты имеют следующие ограничения для выполнения своих задач:

  • Время — диапазон времени, когда внимание пользователей максимально сосредоточено;
  • Пространство — физические размеры цифровых устройств.

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

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

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

  • строк и столбцов цифр;
  • нескольких слов.

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

1. Контекст

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

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

  • корректировки бухгалтерских отчетов;
  • взыскания;
  • отмены;
  • налоговая информация;
  • комиссионные;
  • акции;
  • скидки;
  • перерасчеты для исправления отклоненных операций. 

Эти случаи создают в каждой истории множество сюжетных линий.

Основными заинтересованными сторонами, вовлеченными в этот процесс, являются:

  • туристические агентства;
  • финансовая команда TravelTriangle; 
  • путешественники. 

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

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

2. Процесс проектирования

В рамках проекта в соответствии с вышеизложенным был разработан новый подход.

3. Процесс оплаты

После детальной проверки процесса были определены все точки соприкосновения платежей и вовлеченные в процесс субъекты.

Во время проектирования проводились следующие исследования:

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

4. Стратегия и решение

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

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

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

Якоб Нильсен

Окончательное решение состоит из двух частей:

  • Сводный вид  (свернутая карточка) — содержит в себе центральный элемент;
  • Детальный вид (открытая карточка) — содержит все подробности, точно так же, как флешбеки в фильме разворачивают события один за другим, объясняя, почему, когда и как это произошло .

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

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

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

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

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

Информация, связанная с ваучерами и платежными документами с цветовым кодом для идентификации и определения приоритетности следующего действия.
Этот шаблон предназначен для поощрения пользователей к чтению слева направо (от A-G), чтобы история была изложена наиболее простым способом.

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

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

Благодаря этому проекту я еще больше осознал то, насколько важно уделять внимание повествованию в построении взаимодействия с продуктом. Дело в том, что даже если сознательно не использовать "нарративную стратегию", в продуктах все равно будут присутствовать нарративы, ведь эти цифровые продукты — не просто двумерные или трехмерные объекты. У них больше измерений  и пользователи часто совершают несколько путей в рамках одного и того же продукта. 

Время играет важную роль в создании впечатлений от взаимодействия с продуктом. На самом деле, одна из моих любимых моделей создания впечатлений — это модель 5E, в которой путешествие пользователя определяется во времени с помощью следующих пяти E:

  • Entice — приманка;
  • Enter — вход;
  • Engage — взаимодействие;
  • Exit — выход;
  • Extend — продолжение.

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

5. Результат

  1. Данные изменения значительно сократили количество операций, создаваемых агентствами для оплаты.
  2. Улучшена коммуникация по вопросам оплаты между агентом и путешественником. Это привело к урегулированию нерешенных вопросов оплаты, связанных с поездкой.

6. Как аналогичный продукт может вдохновить на решение проблемы.

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

Маленький кусочек вдохновения, который очень помог.

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

В рассмотренном выше примере TravelTriangle взимает комиссию с агентов, а также 1% TDS (Tax Deducted at Source). Эти сборы применяются только к определенным суммам, а не ко всем. Это все становится сложным, когда один из пунктов поездки или вся поездка отменяется, в таких случаях, ясность о примененной комиссии поможет пользователю понять происходящее.

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

Источник:
medium.com
arrow