Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>1 июн 2023</li>

3 <li>0</li>

4 </ul>Простыми словами о пути пользователя: зачем его используют и как создают.

5 Иллюстрация: Аня Макарова для Skillbox Media

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

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

8 Рассказываем простыми словами:

9 <ul><li><a>что такое user flow,</a></li>

10 <li><a>зачем его разрабатывать,</a></li>

11 <li><a>что нужно, чтобы спроектировать user flow.</a></li>

12 </ul>На русском языке понятие user flow - это "путь пользователя" или "диаграмма пользовательского пути", хотя вернее было бы переводить это как "поток пользователя".

13 Термин "поток", flow, пришёл в дизайн и разработку интерфейсов из фундаментальной науки - психологии восприятия. Он означает состояние полной включённости в текущее занятие, которое приносит человеку удовлетворение.

14 Для дизайнеров и менеджеров проекта user flow - это всегданаглядное представлениепути пользователя, а не просто концепт или описание текстом.

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

16 Кроме термина user flow, можно встретить и другие названия: user flow chart, user flow diagram, user interface flow, task flow diagram, UX flow, interaction flow.

17 Сотруднику пункта вывоза заказов надо провести инвентаризацию, но не вручную, а с помощью приложения. Для этого ему надо совершить некоторый путь через экраны и выбрать опции - это его user flowИзображение: "Яндекс" / дизайн студии "<a>Луч</a>"User flow - это диаграмма из блоков и связей. Она подобна карте: отражает каждый шаг пользователя и главные действия, которые он должен совершить с момента запуска приложения или входа на сайт и до достижения своей цели. А целью может быть что угодно: купить вещь, узнать количество шагов за день, проверить статус доставки, написать в службу поддержки.

18 Пример user flow для сервиса подписки на курсыИзображение: Anna Mogilnitskaia /<a>Behance</a>User flow - это инструмент, а не некая формальность. Он необходим всем, кто создаёт и развивает цифровые продукты и сервисы:

19 Дизайнерам

20 Чтобы фокусироваться на проектировании понятного, жизнеспособного интерфейса и подбирать эффективные дизайн-решения. Благодаря user flow создают дизайн для человека, а не дизайн ради дизайна.

21 Именно после проработки пути пользователя создают макеты и проектируют вайрфреймы, собирают UI-элементы и задают визуальный стиль интерфейсам.

22 Разработчикам

23 Чтобы оптимизировать свою работу, не возвращаться раз от раза к вопросам, какая у процессов логика и как всё должно работать.

24 Без прописанного user flow программисты способны сделать проект. Но вполне вероятно, что из-за этого придётся исправлять множество недочётов, переписывать код. А это означает перенос сроков и рост бюджета.

25 Менеджерам продукта

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

27 Менеджерам проекта

28 Чтобы распределять задачи между дизайнерами, разработчиками и аналитиками.

29 Маркетологам и продавцам

30 Чтобы анализировать, как работает или не работает воронка продаж.

31 Цветовая схема подобрана под этапы пути пользователяИзображение: Govhar Guliyeva /<a>Behance</a>Инструмент user flow полезен не только специалистам с конкретными ролями и задачами. Он нужен всей команде в целом:

32 <ul><li>Все видят единый сценарий. Все понимают, откуда берётся структура цифрового продукта и к каким точкам обращаться, чтобы изменить её или добавить ответвления.</li>

33 <li>Каждый может обращаться к наглядной схеме и демонстрировать коллегам, как, куда и зачем можно внедрить изменения. Или, например, какие моменты стоит доисследовать.</li>

34 <li>У всех есть единый инструмент, чтобы оценивать, есть ли в интерфейсе что-то, что мешает потоку.</li>

35 </ul>И пользователям:

36 <ul><li>User flow - одна из основ человекоцентричного дизайна. Поэтому сайтами и приложениями, созданными с достаточным вниманием к его разработке, пользоваться комфортно.</li>

37 </ul>И заказчикам:

38 <ul><li>Благодаря user flow получается цифровой продукт, к которому пользователи возвращаются, потому что он им удобен и ценен.</li>

39 <li>Продуманный user flow проявляет возможные нюансы до начала работы над дизайном и кодом. Это сохраняет время, деньги и упрощает коммуникацию между исполнителями и другими сторонами.</li>

40 </ul>В приложении тематической социальной сети можно сохранять черновик рецепта и возвращаться к нему. Эта опция была продумана на этапе user flow: писать рецепт и добавлять фотографии - это долго, и пользователь наверняка отвлечётся от занятияИзображение: Olga Vavilova /<a>Behance</a>Когда пользователь приложения-магазина "Леруа Мерлен" перебирает корзину перед оформлением заказа, после каждого клика "Перенести товар в список покупок на потом" у него есть пять секунд на отмену этого действия. Такая фича могла появиться из разработки пути пользователя и вопроса: "А что, если клиент уберёт товар, но моментально передумает?"Скриншот: приложение "Леруа Мерлен" / Skillbox MediaЕсли проект небольшой и в команде всего несколько человек, то задача спроектировать user flow обычно ложится на дизайнера интерфейса.

41 Если проект средний или крупный, то user flow обычно "рисуют" несколько участников:

42 <ul><li>CX-исследователь,</li>

43 <li>аналитик,</li>

44 <li>UX/UI-дизайнеры.</li>

45 </ul>Чаще всего user flow изображают как блок-схему, которая описывает:

46 <ul><li>на каком экране находится пользователь;</li>

47 <li>какие перед ним встают условия;</li>

48 <li>что он делает, чтобы продвинуться дальше.</li>

49 </ul>Блок-схема может быть и общей, и очень детализированной - это зависит и от масштаба самого цифрового продукта, и от ресурсов тех, кто его производит. Но чтобы user flow стал прикладным и понятным инструментом, в нём следует визуализировать несколько основных элементов:

50 Точку начала. Обычно это момент, когда пользователь открывает сайт или приложение.

51 Действия и процессы. Так показывают шаги, которые выполняет юзер: заполняет форму логина, закрывает окно с рекламой, ставит лайк в карточке товара.

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

53 Связи. Благодаря этим элементам видно, какие точки и действия связаны.

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

55 Фото: The Data Visualisation CatalogueГрамотный user flow можно создать, если предварительно изучить аудиторию, рынок и контекст, в котором цифровой продукт будет существовать. Для этого проводят исследования, и чем глубже они будут, тем больше нюансов будет учитывать схема пути пользователя.

56 <ul><li>Для исследования аудитории проводят опросы, включённые наблюдения, глубинные интервью и тестирование. На этом этапе UX/UI-дизайнерам и менеджерам крайне важно не полагаться только на личный опыт и собственные мнения, а обращаться к другим людям - потенциальным пользователям.</li>

57 <li>Чтобы понять рынок, изучают сайты и приложения конкурентов. Не поверхностно и не только с точки зрения эстетики: погружаются в опыт использования и рефлексируют над тем, что было удобно и приятно, а что нарушало "состояние потока".</li>

58 <li>Контекст - это ситуации, в которых пользователю будут нужны конкретные цифровые продукты, поэтому на этапе исследования важно их моделировать и оценивать, как внешние условия влияют на опыт пользователя. Например, функциями навигатора он, скорее всего, будет пользоваться за рулём, поэтому для безопасности крайне важно, чтобы путь до результата был максимально коротким и простым.</li>

59 </ul>Кроме того, важно быть в курсе бизнес-целей продукта. Особенно если это интернет-магазин или промоприложение. Каждый шаг пользователя должен быть логичен и удобен не только для него, но и приводить его к целевому действию, который нужен компании. Например, user flow должен вести к результату "Оплатить" или "Поделиться видео".

60 Воронка продаж, необходимых бизнесу заказчика, может влиять на проектирование user flowИзображение: Caprice / дизайн агентства "<a>Атвинта</a>"Чтобы разработать user flow, надо узнать своих пользователейИзображение: Виталий Яковлев / Nikita Pervushin /<a>Behance</a>Есть много инструментов для командного проектирования user flow. Это можно делать как угодно: и маркером на доске, и в Excel, и в Google Docs, и в любом графическом редакторе.

61 Один из популярных инструментов -<a>FigJam</a>, доска для совместной работы дизайнеров и менеджеров от Figma.

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

63 <ul><li><a>Miro</a>,</li>

64 <li><a>FlowMapp</a>,</li>

65 <li><a>Lucidchart</a></li>

66 <li><a>Overflow</a>.</li>

67 </ul>Такие сервисы позволяют синхронно работать над схемами, добавлять в них интерактивность, создавать на их основе эстетичные презентации и даже прототипы экранов.

68 Шаблон для user flow в FigJam из Figma CommunityСкриншот:<a>Figma</a>/ Skillbox MediaUser flow можно представлять и не блок-схемами - главное, чтобы визуализация была понятна всем участникамИзображение: Elena Stavetskaia /<a>Behance</a><a>Практический курс: "Профессия UX/UI-дизайнер + ИИ" Узнать о курсе</a>