Нарративные стратегии в UX

Аудио перевод статьи
0:00
0:00
Аудио перевод статьи
0:00
0:00
·

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

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

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

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

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

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

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

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

Контекст

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Во время работы над данным проектом я понял еще глубже, насколько важно внимание к повествованию в построении взаимодействия с продуктом. Дело в том, что даже если сознательно не использовать "нарративную стратегию", в продуктах все равно будут присутствовать нарративы, ведь эти цифровые продукты — не просто двумерные или трехмерные объекты. У них больше измерений, и пользователи часто совершают несколько путей в рамках одного и того же продукта. Время играет важную роль в создании впечатлений от взаимодействия с продуктом. На самом деле, одной из моих любимых моделей создания впечатлений является модель 5E, в которой путешествие пользователя определяется с использованием следующих пяти E — Entice(приманка), Enter(вход), Engage(взаимодействие), Exit(выход), and Extend(продолжение).

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

Результат

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

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

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

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

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

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

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

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

Источник:
medium.com
·
comments powered by HyperComments