как создаются популярные приложения и сайты / Хабр

Всем привет!

Я – Максим Скворцов, UX/UI-дизайнер Omega-R, международной компании по разработке и интеграции IT-решений. Я занимаюсь проектированием и визуализацией интерфейсов мобильных и веб-приложений.

На базе своего опыта в сфере информационных технологий и экспертизы компании хочу поделиться своим видением и подходом к применению одного из инструментов проектирования дизайна – user flow. Почему его используют и почему он является ценным помощником для дизайнера? Как может выглядеть user flow и как его создать?

Что такое user flow?

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

User flow – это визуальное представление последовательности действий, которые пользователь выполняет для достижения своей цели. Может охватывать как какую-то отдельную функцию, так и полностью весь продукт.

Чтобы составить последовательность, необходимо провести исследование и ответить на три базовых вопроса:

1. Кто является пользователем?
2. Какова его цель?
3. Какие шаги он должен предпринять для достижения этой цели?

Это главные вопросы, на которые иногда бывает сложно дать четкие ответы, поэтому могут помочь вспомогательные вопросы:

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

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

User flow – это история о пользователе

User flow позволяет взглянуть на взаимодействие пользователя и приложения глазами пользователя.

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

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

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

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

Роль дизайнера

Представьте, что вы работаете над продуктом в одной команде, где есть Project Manager, Backend- и Web-разработчики. Предположим, есть даже какое-то техническое задание от заказчика, которое написано достаточно подробно и добротно. Осталось просто взять и сделать продукт.

Что же должен сделать дизайнер? Если судить по ожидаемому результату – нарисовать все нужные экраны так, чтобы конечный продукт был удобным и красивым, и отдать разработчикам.

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

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

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

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

Ценность для продуктовой команды

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

Для PM на основании user flow удобно заводить задачи для разработчиков – достаточно очевидно и прозрачно, какие изменения необходимо внести в текущую логику или какие новые функции будут добавлены.

Тестировщики могут готовить use cases (тесты) и чек-листы, поскольку они в удобном формате демонстрируют пользовательские сценарии.

User flow очень полезен для команды, особенно когда состав команды достаточно большой – не нужно каждому отдельно объяснять логику работы. Таким образом, user flow вовлекает в процесс проектирования заказчика, мотивирует команду, направляет весь рабочие процессы в единое русло, поскольку каждый член команды видит картинку в целом.

Ценность для заказчика

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

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

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

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

Как всё выглядит?

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

User flow может быть представлен в виде комбинаций из:

• task flow
• wire flow (lo-fi)
• screen flow (hi-fi)

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

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

1. открыть интернет-сайт магазина;
2. набрать в поиске «кухонный комбайн”;
3. сравнить несколько товаров из результатов поиска;
4. положить понравившийся товар в корзину;
5. оформить покупку;
6. оплатить;
7. закрыть сайт.

Task flow

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

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

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

Wire flow (lo-fi)

Wire flow – это объединение блок-схемы и wireframes. Wireframe – это низкодетализированный набросок дизайна экрана, упор в котором делается не на визуальную составляющую, а на расположение элементов, структуру и содержание экрана.

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

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

Пример такой схемы:

Screen flow (hi-fi)

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

Screen flow можно по сути назвать прототипом, если ему добавить интерактивность. Его особенностью является высокая точность или идеальное пиксельное соответствие: в нем учитывается физический размер экрана и представляются все визуальные и типографические детали продукта. Элементы screen flow – это фактически макеты экранов готового приложения.

Заказчик приложения может быть приятно удивлен скоростью разработки, когда вы покажете ему screen flow, и может подумать, что разработка близка к завершению. Мы, как правило, заранее сообщаем заказчику, что за screen flow не стоит никакого кода, но наличие screen flow дает заказчику гарантию, что за отлично подготовленными UX и UI последует не менее идеальный код.

Пример screen flow:

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

Как вы понимаете, самым затратным по времени является самый проработанный – screen flow. Именно он выглядит как рабочее приложение и готов к интерактивному прототипированию, тестированию, новым итерациям, утверждению и передаче разработчикам. Для командного проектирования user flow существует множество инструментов автоматизации, среди которых Overflow, Miro, Flowmapp и другие.

Таким образом, user flow, охватывая весь продукт, систематизирует и структурирует процесс его создания, максимально ориентирует продуктовую команду на потребности пользователя и на их единое понимание, позволяет создать предельно понятный и интуитивный продукт с помощью анализа пользовательских сценариев. Всё это не только существенно ускоряет скорость разработки, но и углубляет взаимодействие с заказчиком. User flow заставляет IT-компанию всегда думать о бизнес-требованиях заказчика, чтобы создавать приложение более эффективным и успешным, чем это возможно в рамках выделенного бюджета и времени без применения user flow.

Руководство по переходу от «что за хрень я вижу», к четкому юзерфлоу

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

Цель всей моей жизни –рассказать о юзерфлоу… На самом деле, нет, но меня сильно волнуют технологии и то, как мы рассказываем об их работе.

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

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

В этой статье мы ответим на вопрос, что такое юзерфлоу, каковы его основы, а затем закончим статью несколькими примерами.

Содержание:

• Что такое нахрен юзерфлоу? ?
• Что за хрень я вижу? ? ⁉
• Основы юзерфлоу ?
• Все вместе с примерами ?

Что такое нахрен юзерфлоу?

Что такое юзерфлоу в двух словах?

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

И зачем их используют?

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

Отлично, и из чего они состоят?

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

И откуда я взял эту ? цитату?

Alex Handley, сооснователь Primary?

Другие дизайнеры также продвигали процесс юзерфлоу и предлагали свое собственное определение. Существуют такие инструменты, как Overflow и Flowmapp, которые помогут вам создавать юзерфлоу. Ryan из Basecamp изобрел отличную короткую формулу для юзерфлоу (он называет их UI flows – сценарии пользовательского интерфейса):

Что такое юзерфлоу? — Коротко и ясно. Источник

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

Таким образом, это еще один метод, но он обладает одним замечательным свойством – юзерфлоу позволяют определять разделы такой грубой, абстрактной и технической вещи, как «кросс-платформенный мобильный опыт» с точки зрения пользователя.

• Не базовый сценарий технологии. ❌
• Не сценарий технологий разработки. ❌
• Не человек, выполняющий сценарий дизайна. ❌
• Это юзерфлоу. Другими словами, это люди, для которых вы проектируете. ✅

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

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

Вот пример стандартного юзерфлоу:

И для чего-то более интересного (покупка огнемета):

Что за хрень я вижу?

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

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

Основатель стартапа

Продакт-дизайнер. Я забыл добавить Sketch-файл размером 2.1GB

Бизнес аналитик ака UX дизайнер

Ок, этот пример не очень нам помог ?

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

Уважаемые тренеры Agile, пожалуйста, не стесняйтесь писать в комментариях, что мое отрицательное отношение к Agile проистекает из моей неспособности выполнить Agile или недостаточного применения всех Agile-принципов.? Фото: Alvaro Reyes

Эта свобода подходит для программного обеспечения, но имеет свои побочные эффекты. Я думаю, что юзерфлоу – лучшее противоядие для проблемы «что за хрень я вижу», которая возникает при обсуждении технического проекта. Они помогают нашей аудитории ориентироваться в вопросах без знания профессионального жаргона:

• Какова цель этой вещи (приложение/веб-сайт/продукт)?
• Кто это делает?
• и как они это делают?

Давайте рассмотрим простую систему создания этих раскрученных (чрезмерно?) юзерфлоу.

Основы юзерфлоу ?

Я думаю, что есть три основных принципа создания юзерфлоу. Некоторые люди думают иначе, они сторонники «свободного сценария» (я только что придумал название) и выступают за свободу, бесконечный скроллинг, выбирают собственное приключение.

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

Принцип 1: Юзерфлоу показывают свою цель ?

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

Назовите юзерфлоу в соответствии с целями пользователя и получите бонусные очки, указав, кем является пользователь

Принцип 2. Юзерфлоу направлены в одном направлении ➡

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

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

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

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

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

Принцип 3. Юзерфлоу показывают завершенную задачу ✅

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

Если юзерфлоу – это всего лишь фрагмент, он теряет способность рассказать историю своих пользователей. Если он слишком растянут, пользователи потеряют смысл.

Если у вас есть интерфейсы (прототипы, макеты), покажите их! Опишите каждый шаг и детально распишите, почему существуют альтернативные пути

Юзерфлоу должны быть понятной моделью вашего приложения или дизайна веб-сайта.

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

Все вместе с примерами

Теперь давайте воплотим эти основные принципы на практике.

1. Юзерфлоу показывает свою цель?

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

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

2. Юзерфлоу направлены в одном направлении ️️➡

Это работает как хорошая карта сайта или демонстрация навигации.

Лучше разбить юзерфлоу на отдельные сценарии.

3. Юзерфлоу представляют завершенную задачу ✅

Это юзерфлоу недостаточно информативно

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

В этом примере любой может прочитать и понять юзерфлоу.

Если вы внимательно читали эту статью, тогда у вас должно быть свое мнение по этой теме.

Если вам понравилось мое мнение, ставьте лайк. А свое мнение вы можете изложить в комментариях ниже.

Перевод статьи Alexander Handley

Что такое поток пользователей?

Что такое поток пользователей?

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

Поток пользователей и путь клиента — одно и то же?

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

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

Почему важны потоки пользователей?

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

1. Они сообщают заинтересованным сторонам цели и планы продукта.

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

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

2. Они ускоряют разработку и уменьшают количество ошибок.

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

3. Дизайн, ориентированный на пользователя.

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

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

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

Каковы некоторые распространенные примеры потоков пользователей?

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

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

Совет для профессионалов: создавайте потоки пользователей на основе данных об использовании продукта

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

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

Изучение этого может помочь команде обновлять продукт (и создавать будущие продукты) более интуитивно.

Как вы можете улучшить свои пользовательские диаграммы?

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

1. Ограничьте каждую диаграмму одной целью.

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

2. Ограничьте каждую диаграмму одной точкой входа.

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

3. Создайте дорожную карту UX/UI.

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

Связанные термины

юзабилити-тестирование, взаимодействие с пользователем, исследование пользователей, дизайн-мышление, UX-дизайнер

Что такое потоки пользователей в UX-дизайне? [Полное руководство для начинающих]

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

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

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

1. Что такое потоки пользователей?
2. Почему мы используем пользовательские потоки?
3. Типы пользовательских блок-схем (с примерами)
4. Как пользовательские потоки вписываются в процесс проектирования UX?
5. Ключевые выводы

Давайте исследуем удивительный мир потоков пользователей.

1. Что такое пользовательские потоки?

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

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

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

Пользовательские потоки чрезвычайно полезны, если вам нужно:

Создать интуитивно понятный интерфейс

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

Оценка существующих интерфейсов

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

Представьте свой продукт клиентам или коллегам

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

3. Типы пользовательских блок-схем

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

Потоки задач

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

Потоки проводки

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

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

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

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

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

5. Основные выводы

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