Как создать потоки пользователей для электронной коммерции

Представьте, что вы создаете новый сайт для своего интернет-магазина. Вы заходите в конструктор страниц, такой как WordPress, и начинаете добавлять разделы на страницы, решая, что панель навигации должна быть по центру или что ваш клип «О программе» должен быть первым.

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

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

И поклонник Поллока или нет, но его картинам никогда не приходилось переходить от одного этапа воронки к другому.

В новую эпоху онлайн-покупок наличие веб-сайта электронной коммерции имеет решающее значение — потенциально полезное приложение.

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

Хорошо разработанный веб-сайт не начинается с выбора вашего любимого шрифта и анимации. Это начинается с отображения ваших пользовательских потоков.

Что такое блок-схема пользователя?

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

Пример диаграммы потока пользователей от UX Collective.

Роль пользовательских потоков в UX-дизайне

Дизайн пользовательского опыта (UX-дизайн) — это создание дизайна, ориентированного на пользователя. Ставя своих пользователей, то есть потенциальных клиентов, в центр вашего выбора дизайна, вы повышаете их опыт и увеличиваете шансы на то, что они перейдут к концу продажи.

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

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

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

Пример диаграммы потока пользователей от Creately.

Высокоуровневые и подробные потоки пользователей

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

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

Некоторые отличают пользовательские потоки от потоков задач тем, что пользовательские потоки подчеркивают, что задача может выполняться пользователями по-разному в зависимости от личности и точки входа.

Потоки пользователей и пути пользователей

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

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

Как построить пользовательские диаграммы

1. Определите цель диаграммы

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

Дайте пользовательскому потоку четкое название, основанное на его назначении, для дальнейшего использования.

2. Поймите своего типичного пользователя

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

Проведите исследование пользователей, чтобы собрать:

• Цели
• Мотивы
• Желаемые функции
• Уровень опыта/знаний
• Барьеры

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

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

Изучение потоков ваших конкурентов также может дать представление.

3. Создайте ключ потока задач

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

Общие символы пользовательского потока включают:

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

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

Другие типы пользовательских блок-схем

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

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

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

Пример пользовательского потока от Salinthip Kaewkerd на Behance.

4. Нарисуйте схему вашего пользовательского потока

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

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

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

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

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

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

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

5. Сократите свои потоки

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

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

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

6. Ярлык с намерением

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

Оптимизируйте потоки пользователей с помощью данных

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

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

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

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

Проанализируйте шаги, связанные с показателями отказов, и выдвиньте гипотезу, в чем может заключаться проблема (и решение). A/B-тестируйте свои решения до тех пор, пока количество отказов не уменьшится и больше пользователей не перейдут к следующему шагу.

Дифференциация потока вашего веб-сайта электронной коммерции

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

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

Можете ли вы предложить больше? Могут ли ваши пользователи воспользоваться дополнительными функциями?

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

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

При создании потоков для веб-сайтов и приложений электронной коммерции помните обо всех этапах воронки электронной торговли:

• Рассмотрение
• Оценка
• Покупка
• После покупки

Стимулируйте продажи с помощью эффективных UX-потоков

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

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

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

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