От классной идеи до качественного продукта: зачем вам нужен User Flow
Люди из IT-тусовки очень хорошо знакомы с историями о “невероятно крутой идее, которая бы взорвала рынок и стала спасением для тысячи людей! Мы собрали команду, сделали MVP, начали привлекать пользователей и…”. Чаще всего на этом моменте глаза говорящего потухают и следует невнятное “В общем, не выгорело…”.
28 показов
10K открытий
Я сама как сооснователь IT-стартапа слышала с десяток подобных историй. Мой собственный проект пришёл к своему печальному завершению тем же образом. Что же мы упускаем?
Я хочу поговорить об одной составляющей IT проекта, правильное использование которой поможет подняться на уровень выше своих конкурентов, увеличить шансы успешно запустить проект и удовлетворить пользователей.
Поговорим о User Flow.
Что такое User Flow?
Представьте ситуацию: на платформе для поиска знакомств вы находите подходящего партнёра, жмёте на кнопку “Отправить запрос”. и дальше ничего не происходит. Сервис не уведомляет об успешном отправлении запроса, не предлагает перейти в раздел отправленных. Пользователь в растерянности: что делать дальше? Разработчики явно не смотрели на процесс отправки запроса глазами покупателя. Им бы не помешало продумать User Flow.
User Flow – это визуальное представление пути пользователя. На практике он выглядит как схема действий, которые должен совершить пользователь с момента запуска приложения и до достижения своей цели. User Flow можно составить как для всего приложения в целом, так и для его отдельной функции.
Почему без User Flow не обойтись
“Идея – огонь, продукт нужно как можно скорее запускать, пока никто не сделал этого раньше! А детали… Детали доделаем в процессе.” В этот момент и запускается лавина проблем. Пренебрегать проработкой User Flow – ошибка, которая может стоить жизни продукта.
С User Flow вы создаете продукт, который удерживает пользователя.
Придумать крутую идею и реализовать ее – это большая и сложная работа.Но сделать интерфейс интуитивно понятным и комфортным – еще сложнее. Если упустить это, то отличная идея и большая работа пойдут прахом.
Пользователь выбирает приложения, которые упрощают ему жизнь. Наша цель – освободить его от рутины, например, от ручного подсчета прибыли и других операций, которые можно автоматизировать. Освободившееся время человек может отвести личной жизни, семье, отдыху. Тому, что действительно важно.
Мне нравится аналогия User Flow с поездкой. Ваша задача – добраться до Нью-Йорка чтобы купить себе новенький блестящий автомобиль. Наша – просчитать все возможные действия, которые вы будете совершать от сбора чемоданов (вы не забыли билеты? если да, то что тогда делать?) до приземления в аэропорту Большого Яблока. Увидеть все возможные ошибки, которые вы как пользователь можете совершить, уберечь вас от них, или придумать способ их решения. Согласитесь, неприятно уже в аэропорту обнаружить, что вы забыли взять с собой билеты.
User Flow помогает выявить скрытые на первый взгляд моменты, о которых мы не задумываемся в момент прорабатывания идеи. Мы можем не вспомнить о них при разработке продукта.
Возьмем, например, сервис для поиска работ фрилансерами. На словах действие звучит так: исполнитель просмотрел заказы – откликнулся на один – выполнил – отправил. Что может быть проще? Но когда начинаешь прописывать каждый шаг детально, возникают условия. А как пользователь найдет заказ по своей специальности? Нужен фильтр. А если у него возникли вопросы по заказу? Добавить возможность задать вопрос без отклика. А что произойдет после того, как откликнулся?
Эти детали играют решающую роль в том, будет опыт использования продукта позитивным или негативным, и будут ли его вообще использовать.
Кейс из нашей практики: мы создавали личный кабинет пользователя сервиса. Изначально задача казалась простой. MVP уже был собран на коленке и состоял из четырех экранов. Затем мы поняли, что половина функций требует запроса в техническую поддержку. Пользователю нужно тратить время на письма, а технической поддержке – отвлекаться на любую мелочь, вместо того, чтобы решать действительно сложные проблемы. Мы пришли к тому, что все эти функции может совершить пользователь. Это гораздо быстрее и проще для всех. Пользователи довольны, техподдержка занята своим делом.
Четыре с виду простых экранов превратились в это:
Полное руководство по User Flow: как сделать, примеры и советы
Анастасия Свеженцева Продуктовый дизайнер (UX/UI), веб-дизайнер и бренд-дизайнер. Опыт проектов в международных компаниях Omega-R (агентство), iSpring Solutions (продуктовая) и со стартапами по всему миру. Делюсь опытом в дизайне на офлайн- и онлайн-платформах с 2017 года: Институт программных систем, godesign.school, онлайн-платформа breezzly.ru и пишу микролекции о дизайне на Яндекс.Кью (226 ответов). Июн 11, 2022 · 8 мин читать
User flow — это наглядное представление последовательности действий, которые выполняет пользователь для достижения значимой для себя цели на сайте или в приложении. Может охватывать как какую-то отдельную функцию, так и весь продукт. Рассказываем на примерах, как построить карту и с помощью каких инструментов это удобнее сделать. ������ Фактически концепцию потока в UX-дизайне впервые предложил психолог Михай Чиксентмихайи. Поток (англ. flow) — это психическое состояние, в котором человек полностью включён в то, чем он занимается, что характеризуется деятельным сосредоточением, полным вовлечением в процесс деятельности. Поэтому при проектировании User Flow мы будем опираться на эти фундаментальные концепции психологии восприятия.
- Что такое User Flow и для чего он нужен?
- Инструкция по разработке User Flow
- Что важно учесть при построении User Flow
- Что еще нужно знать: связь User flow Map и User Story Mapping
- Пример User Flow мобильного приложения
- Пример User Flow для веб-сайта и веб-приложения
- Что еще почитать на тему проектирования и дизайна сценариев
- Вывод и рекомендация
Что такое User Flow и для чего он нужен?
User Flows (в переводе — диаграмма пользовательского пути), также известны как User flow, UX flow, user flow charts, interaction flows, activity flows, user interface flows, navigation flows, user flow diagrams, task flow diagrams или блок-схемы. Представляют собой диаграммы, отображающие полный путь, по которому движется пользователь при использовании продукта. User flow описывает продвижение пользователя по продукту, отображает каждый шаг, который делает пользователь — от точки входа (начало) до финального взаимодействия (значимая цель достигнута, ценность получена).
Говоря простыми словами, User Flow — это маршрут путешествия пользователя через экраны приложения к важной цели. А каждое приложение — это целая карта таких маршрутов (User Flow Map).
Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? ��
Использовать User Flow в команде следует по следующим причинам:
- Во-первых, User Flow фокусирует команду на дизайне интуитивно понятного интерфейса с ясной последовательностью шагов до цели. Кратчайшее расстояние до цели — прямая. User Flow помогает вам не терять эту прямую из виду и добиваться максимально эффективного дизайн-решения для достижения целей пользователя.
- Во-вторых, User Flow помогает оценить, подходит ли интерфейс для решения поставленной задачи. Такая схема вовлекает в поток развития продукта и побуждает команду задавать исследовательские вопросы на темы: Удается ли сосредоточиться на достижении целей? Ощущается ли контроль над движением к цели? И серию других вопросы связанные с состоянием потока по Чиксентмихайи.
- В-третьих, помогает наглядно продемонстрировать команде идеи по развитию системы. Собираете комплект ключевых сценариев приложения в User flow Map (карта на 1 лист A4), связываете общей навигацией (меню) и показываете где в этой карте появится новый маршрут, или какой из существующих Flow вы предлагаете сделать лучше и как именно.
User Flow — это наглядный инструмент для донесения идей в четком, запоминающемся виде. А еще User Flow помогает создать единое видение по сценарию работы в определенной жизненной ситуации.
Инструкция по разработке User Flow
В самом простом варианте построение диаграммы пользовательского пути происходит следующим образом:
- Опишите пользователя: окружение пользователя, цель и ожидания/страхи на пути к цели, мотиваторы продолжать движение. Может содержать различные метрики. Идеально, если вы будете опираться на наблюдения поведением живых пользователей (в реальности, внутри продукта, а лучше комплексно).
- Отобразите ожидаемый (пользователем) план действий по достижению цели: схема мышления здесь (A-начало) → (1) → (2) → (3) → (B-цель), а 1→2→3 — это шаги, которые требуется выполнить, чтобы достичь цели — все как с рецептом приготовления стейка. Так вы создадите некую историю. Эта история должна быть максимально четкой и ясной, чтобы в конечном итоге отобразить нам полную картину взаимодействия пользователя с продуктом. Идеально, если вы будете опираться на то, что уже знакомо пользователю, его привычки, ментальные модели: к примеру отпуска частенько планируют на конкретные даты, поэтому при создании приложения по покупке туров может пригодится шаг в выбором дат, а еще ввод данных паспорта, оплата и билеты на руки.
- Затем выполните визуализацию блок за блоком для каждого шага. Алгоритм визуализации такой же как с классическими блок-схемами, которые вы микскуете с экранами интерфейса. помощью готовой библиотеки User Flow для Miro или UX Flow для Figma — такие библиотеки хороша как основа, каждый дизайнер развивает подобный конструктор для проработки User Flow в конкретной предметной области. Идеально, если с вами в паре работает бизнес-аналитик, которые помогает со сборкой всего бизнес-процесса в формате BPMN.
Что важно учесть при построении User Flow: 8 советов для дизайнеров
User Flow может выглядеть совершенно по-разному, но вне зависимости от этого, каждая диаграмма пользовательского пути должна иметь 8 следующих ключевых элементов:
1. Название с полезным действием
Дайте вашему User Flow содержательное имя, с сутью в корне. Например, вы можете назвать так «Вызов такси к дому до офиса» или «Заказ пиццы и других ништяков на компанию из 7 человек ко дню рождения друга».
2. Все движутся только в одном направлении
При таком подходе у вас будет ясный маршрут из (A) → (B). Стремитесь к балансу функциональности и лаконичности. Избегайте превращения простой прямой в запутанный клубок разнонаправленных сценариев.
3. Одна цель на Flow
Чтобы понять эту концепцию, то просто представьте, что вас просят обновить фото вашего профиля во время публикации сообщения!
Пользователь ныряет в продукт, чтобы достичь одной конкретной цели. Поэтому постарайтесь организовать его работу таким образом, чтобы пользователь двигался этап за этапом, шаг за шагом к этой цели. Помогайте пользователям достичь цель и не отвлекайте их на пути к цели.
4. Добавьте легенду
Каждому в команде схема станет понятнее, если вы сделаете классическую легенду по краю карты, как в играх. Так каждый сможет разобраться что здесь к чему. Например, укажите в легенде, что кружки — это точки входа, прямоугольники — экраны, ромбы — развилки принятия решений и т. д. Вы также можете обратиться к легенде BPMN-нотации, чтобы как с UI-китом уже опираться на некий стандарт компонентов и иконок известных многим специалистам.
5. Определитесь с точкой входа
У каждой диаграммы должна быть ясная точка входа. Тогда каждый в команде сможет однозначно читать диаграмму путешествия из (A) → (B) и вовлекаться в развитие продукта.
6. Ясные подписи
Обозначьте ключевые действия, добавьте подписи с предназначениями экранов.
7. Цвета со смыслом
User Flow обычно выполняют в функциональном минималистичном монохроме. Такой подход помогает сосредоточиться на функции и цели и концентрирует внимание только на важных вещах.
8. Проверьте достижение цели
Всегда проверяйте, что ваши User Flow действительно помогают достигать значимых для пользователей целей. Минимизируйте неопределенность и, если требуется, проведите дополнительные исследования.
Что еще нужно знать: связь User flow Map и User Story Mapping
Если вы применяете User Flow, то вы следуете международному подходу к разработке интерфейсов. Такой подход называют User Centered Design и Goal Oriented Design.
User Centered Design — клиент нанимает продукт, чтобы тот помог сделать значимую для клиента работу.
Goal Oriented Design — пользователь понимает, как достичь цели, открыв приложение.
Продакт-менеджеры тоже живут в той же парадигме — они наращивают ситуации, в которых приложение дает больше пользы, чем конкуренты. Один из инструментов управления продуктов у продакт-менеджера — это User Story Mapping
User Story Mapping
User Story Mapping — инструмент управления продуктом, полезен продакт-менеджеру — это вся карта задач, которые можно попросить сделать продукт. Представляют в виде двумерной сетки. Рекомендую на эту тему статью User Story Mapping – инструкция по применению →
User flow Map
User flow Map — инструмент дизайнера — развернутое представление User Story Mapping в формате диаграммы потоков. Два инструмента логично дополняют друг друга.
Если приложение как ваш цифровой помощник, которому можно поручить дело, то User Story Mapping — это книга дел, которые ему можно поручить, а User flow Map — это карта всех инструкций, как он будет действовать по шагам.
Итак, мы разработки параметры сборки одного User Flow, а сейчас разберем подход к подаче всей карты маршрутов вашего приложения.
Для сборки User Flow Map мы берем весь комплект User Flow и скрепляем их навигацией.
Пример User Flow мобильного приложения
В примере интересный вариант оформления User flow на примере приложения Toronto Zoo.
Пример User Flow для веб-сайта и веб-приложения
Пример от digital-агенства Focus Lab. Ребята проанализировали выполненные проекты и создали библиотеку для проектирования User Flow (User Flow Kit). В основе алфавита проектирования у ребят прослеживаются черты BPMN-нотации.
Что еще почитать на тему проектирования и дизайна сценариев
Автор книги изучил историю появления успешных сервисов и продуктов, взял интервью у более чем 30 продуктовых дизайнеров, выяснил, на что они опираются при создании дизайн-решений и обобщил наблюдения в виде tech-практик, которые стоит попробовать в ваших проектах.
Вывод и рекомендация
User Flow помогают сосредоточиться на человекоцентричном дизайне и добиться максимально комфортного и эффективного маршрута до цели. А еще они добавляют согласованности в работе команды и экономят время и деньги.
User Flow также направляют принятие решений в дизайне и подсвечивают недочеты еще до того, как начнется фаза детальной работы над компонентами и визуальной проработкой. И самое главное — они побуждают искать самый простой способ достижения цели пользователем и вовлекают в поиски алтернатив. Попробуйте их в вашим следующем проекте.
Напомню, что прокачать навыки в создании User Flow вы можете на платформе Breezzly. На Breezzly вы тренируетесь в контексте сайтов, мобильных и веб-приложений и даже на примере приложений для смарт-часов.
Руководство по переходу от «что за хрень я вижу», к четкому юзерфлоу
Что такое юзерфлоу и почему их нужно использовать. Иллюстрированное руководство по переходу от «что за хрень я вижу», к четкому дизайну работы вашего приложения. Цель всей моей жизни –рассказать о юзерфлоу… На самом деле, нет, но меня сильно волнуют технологии и то, как мы рассказываем об их работе. Мне нравится думать о том, какие инструменты и методы мы используем, чтобы распространять свои идеи среди других дизайнеров. Мне также нравится думать о том, как мы общаемся с людьми за пределами нашей профессии, не используя профессиональный жаргон и без знакомых инструментов. Меня интересует юзерфлоу, потому что я работаю над этим проектом. В этой статье мы ответим на вопрос, что такое юзерфлоу, каковы его основы, а затем закончим статью несколькими примерами.
Содержание:
- Что такое нахрен юзерфлоу? ?
- Что за хрень я вижу? ? ⁉
- Основы юзерфлоу ?
- Все вместе с примерами ?
Что такое нахрен юзерфлоу?
Что такое юзерфлоу в двух словах?
Это последовательность шагов, которые пользователь предпринимает для достижения важной цели.
И зачем их используют?
Они используются для отображения предполагаемого сценария перехода пользователя на различные страницы и его действий в приложении или на веб-сайте.
Отлично, и из чего они состоят?
Юзерфлоу обычно включает имя, шаги, пользователей и описание того, что происходит на каждом шаге.
И откуда я взял эту ? цитату?
Alex Handley, сооснователь Primary?
Другие дизайнеры также продвигали процесс юзерфлоу и предлагали свое собственное определение. Существуют такие инструменты, как Overflow и Flowmapp, которые помогут вам создавать юзерфлоу. Ryan из Basecamp изобрел отличную короткую формулу для юзерфлоу (он называет их UI flows – сценарии пользовательского интерфейса):
Что такое юзерфлоу? — Коротко и ясно. Источник
Юзерфлоу – это еще один метод сегментации и определения цели вашего цифрового продукта, опыта клиентов, веб-сайта или приложения.
Таким образом, это еще один метод, но он обладает одним замечательным свойством – юзерфлоу позволяют определять разделы такой грубой, абстрактной и технической вещи, как «кросс-платформенный мобильный опыт» с точки зрения пользователя.
- Не базовый сценарий технологии. ❌
- Не сценарий технологий разработки. ❌
- Не человек, выполняющий сценарий дизайна. ❌
- Это юзерфлоу. Другими словами, это люди, для которых вы проектируете. ✅
Помните одну вещь о юзерфлоу, их нужно определять по цели, которую пользователь достигает, завершая сценарий.
Например, в юзерфлоу можно подробно расписать, как посетители сайта создают учетную запись, заказывают огнемет или подписываются на рассылку.
Вот пример стандартного юзерфлоу:
И для чего-то более интересного (покупка огнемета):
Что за хрень я вижу?
Мне посчастливилось помочь и получить помощь от более, чем десятка стартапов в этом году. В каждом разговоре я думаю, «что это за хрень». Ну, вы поняли, это я о юзерфлоу.
Вот реконструкция нескольких типичных разговоров и почему они подчеркивают потребность в юзерфлоу.
Продакт-дизайнер. Я забыл добавить Sketch-файл размером 2.1GB
Бизнес аналитик ака UX дизайнер
Ок, этот пример не очень нам помог ?
Технология чудесно свободна. Свободна, как вирус H1N1, в международном аэропорту. Свободна, как команда, независимо создающая различные части кубика-рубика, где цвета и количество сторон определяются в прогрессивных спринтах.
Уважаемые тренеры Agile, пожалуйста, не стесняйтесь писать в комментариях, что мое отрицательное отношение к Agile проистекает из моей неспособности выполнить Agile или недостаточного применения всех Agile-принципов.? Фото: Alvaro Reyes
Эта свобода подходит для программного обеспечения, но имеет свои побочные эффекты. Я думаю, что юзерфлоу – лучшее противоядие для проблемы «что за хрень я вижу», которая возникает при обсуждении технического проекта. Они помогают нашей аудитории ориентироваться в вопросах без знания профессионального жаргона:
- Какова цель этой вещи (приложение/веб-сайт/продукт)?
- Кто это делает?
- и как они это делают?
Давайте рассмотрим простую систему создания этих раскрученных (чрезмерно?) юзерфлоу.
Основы юзерфлоу ?
Я думаю, что есть три основных принципа создания юзерфлоу. Некоторые люди думают иначе, они сторонники «свободного сценария» (я только что придумал название) и выступают за свободу, бесконечный скроллинг, выбирают собственное приключение.
После того, как я увидел достаточное количество проектов программного обеспечения, я являюсь сторонником упорядоченной структуры.
Принцип 1: Юзерфлоу показывают свою цель ?
Юзерфлоу имеет имя, которое описывает его цель. Цель, которую ваши пользователи достигают, выполнив определенные шаги. Название ваших юзерфлоу – важный фактор и его часто упускают из виду.
Назовите юзерфлоу в соответствии с целями пользователя и получите бонусные очки, указав, кем является пользователь
Принцип 2. Юзерфлоу направлены в одном направлении ➡
Придерживаясь одного направления и ограничивая точки принятия решений в своих схемах юзерфлоу, вы отделяете их от растянутых карт сайтов и кликабельных прототипов.
Они тоже полезны, но для передачи четкого поведения юзерфлоу подходят лучше всего. (Таким образом, юзерфлоу ≠ карта сайта или прототип с высокой детализацией).
Юзерфлоу могут иметь несколько путей, но только для отображения разных состояний, а не разных целей
Почему юзерфлоу работают? Основная причина заключается в том, что они рассказывают историю. Наш мозг старается запомнить истории и вовлеченных в них людей.
Хотя юзерфлоу «Создать учетную запись» может быть и не самая интересная история, читателю гораздо легче ее запомнить, чем растянутую карту возможных сценариев. И это проще для гуманитариев.
Принцип 3. Юзерфлоу показывают завершенную задачу ✅
Чтобы поддерживать дизайн вашего приложения (или любого цифрового продукта), юзерфлоу должны быть ограничены одной задачей или целью вашего пользователя.
Если юзерфлоу – это всего лишь фрагмент, он теряет способность рассказать историю своих пользователей. Если он слишком растянут, пользователи потеряют смысл.
Если у вас есть интерфейсы (прототипы, макеты), покажите их! Опишите каждый шаг и детально распишите, почему существуют альтернативные пути
Юзерфлоу должны быть понятной моделью вашего приложения или дизайна веб-сайта.
Убедитесь, что вы указали всю необходимую информацию, чтобы показать причину проектирования юзерфлоу.
Все вместе с примерами
Теперь давайте воплотим эти основные принципы на практике.
1. Юзерфлоу показывает свою цель?
Юзерфлоу выше может быть и красивое, но его неопределенность скрывает потенциальную сложность и не сообщает достаточно информации зрителю.
Давая название юзерфлоу, вы сможете проектировать с точки зрения пользователя и разделять сценарии исходя из его целей.
2. Юзерфлоу направлены в одном направлении ️️➡
Это работает как хорошая карта сайта или демонстрация навигации.
Лучше разбить юзерфлоу на отдельные сценарии.
3. Юзерфлоу представляют завершенную задачу ✅
Это юзерфлоу недостаточно информативно
Избегайте добавления деталей, которые не помогают сообщать сценарий и действия пользователя.
В этом примере любой может прочитать и понять юзерфлоу.
Если вы внимательно читали эту статью, тогда у вас должно быть свое мнение по этой теме.
Если вам понравилось мое мнение, ставьте лайк. А свое мнение вы можете изложить в комментариях ниже.
Что такое юзер-флоу и как организовать приятный пользовательский опыт
Приложение или сайт успешным делает не красивый дизайн и не навороченная логика с кучей функций. Успех определяет один критерий — что пользователь получил то, за чем пришёл. Он без проблем нашёл товар или заказал клининг — и не заблудился в дебрях сайта. Даём 7 советов о том, как сделать продукт, который понравится пользователю.
Что такое юзер-флоу
Хорошо проделанная работа на этапе юзер-флоу упростит аудитории путь в приложении — упростит отслеживание логики и последовательности событий, которые разработчик спрятал за дизайном продукта.
Для ноукод-разработчика качественный юзер-флоу играет две роли — помогает не сбиться с пути при проектировании и становится частью документации в техническом задании. С хорошим юзер-флоу больше шансов на получение качественного продукта.
Не ленитесь сделать хороший юзер-флоу — и вот что для этого нужно.
Хотите научиться делать вайрфреймы и юзер-флоу? Этому мы учим на курсе веб-разработки на Bubble.
Как создаётся юзер-флоу
Юзер-флоу отрисовывается в графических редакторах. Есть специальные программы, где функции заточены именно на создание юзер-флоу. Разработчик делает там прототипы экранов будущего продукта, на которых располагает картинки, логотипы, формы, карточки товаров и всё прочее, что будет в будущем проекте.
Конечно, всё это не настоящее, нерабочее — на кнопки нельзя кликнуть, товары нельзя заказать, формы нельзя заполнить. Части продукта, кнопки, формы, элементы, изображают кружками и прямоугольниками. Можно поставить настоящие фотографии, логотипы, картинки.
Главная часть юзер-флоу — стрелки-коннекторы, которые показывают путь пользователя. Тот путь, который пользователь пройдёт, когда начнёт нажимать на кнопки и покупать товары в реальном приложении. Эти стрелки ведут от экрана к экрану, показывая события и логику приложения.
Как выстроить качественный юзер-флоу
1 совет. Используйте смысловые заголовки
В юзер-флоу отрисовываются разные сценарии пользовательского пути, которые и будут разворачиваться в реальной жизни.
- Вот пользователь впервые зашёл в приложение и хочет создать аккаунт ➡️ он идёт на экран с формой регистрации.
- Вот пришёл ваш постоянный клиент ➡️ ему хочется зайти во вкладку заказами, найти там товар двухнедельной давности, оставить отзыв, а потом пойти поискать похожие товары.
- Или другой постоянный пользователь нашёл нужный товар ➡️ и теперь идёт путь оплаты заказа.
Для каждого пользовательского сценария — свой юзер-флоу, свой поток. Давайте им понятные смысловые заголовки, например: «Путь зарегистрированного пользователя в «Online Shop».
2 совет. Оставляйте свободное место между экранами
Располагая экраны юзер-флоу на рабочей области графического редактора, оставляйте между ними достаточно места, чтобы расположить там стрелки, пояснения и другие элементы юзер-флоу.
Грамотное расположение потоков и его элементов позволят избежать беспорядка и правильно отразить информационную архитектуру приложения.
3 совет. Используйте реальные «скины» экранов
Объясним, что такое скин на примере разработки мобильного приложения.
Скин — рамки экрана телефона, имитирующий его внешний вид и размеры.
Почему полезно использовать скин? Потому что вы точно увидите, как смотрится ваше приложение в реальном обрамлении — например, в частности то, сколько информации и текста с экрана видно пользователю.
4 совет. Объясняйте шаги и действия ярлыками
Стрелки между экранами — из ещё называют коннекторами — лучше помечать. Например, если вы соединяете экраны с оплатой, то поставьте между двумя экранами ярлыки — «К выбору метода оплаты», а дальше «Верификация оплаты», а следом «Успешная оплата».
Пусть тот, кто будет изучать ваш юзер-флоу, всё поймёт и не строит догадок о том, как выстраивается пользовательский поток.
Впрочем, моменты, когда эти объяснение-ярлыки вовсе и не нужны. Ярлыки нужны когда есть дополнительный контент или когда экраны не детализированы и непонятно, что на них.
5 совет. Используйте разный стиль стрелок-соединителей
Стрелки-соединители, или коннекторы, могут и должны быть разными. Вы можете по-разному отображать путь пользователя вперёд по пути или на шаг назад.
К примеру, изобразить прямой линией-стрелкой шаг вперёд или пунктиром изобразить шаг назад. Это очень облегчит понимание взаимодействия.
Совет 6. Используйте формы для разных событий
Между экранами может быть не только стрелка-коннектор и ярлык, но и отдельная форма. На этой форме можно сделать заметку-пояснение — это объясняет, что происходит в данный момент в приложении и какой поток может развернуться от той или иной точки в случае нерядовой ситуации.
Использование дополнительных пояснений нужно, чтобы выделить нетипичные ситуации. И особенно важно, если это ранняя стадия юзер-флоу — когда экраны изображены схематично и непонятно, что тут вообще происходит.
Совет 7. Делите разные крупные пользовательские потоки
Разбивайте большой путь пользователя на подпоток. Самый большой путь начинается от момента входа в приложение. Пользователь зашёл в приложение — но дальнейший его путь зависит от его роли.
Он новый пользователь? Или постоянный? Он впервые вводит пароль или пришёл создать его заново? Или он отправился в каталог? А там что — идёт искать отзывы на конкретный товар или праздно листает каталог?
Видите, сколько вариантов!
Для каждого потока — свой поток, свой набор и последовательность экранов, соединённых стрелками. И всегда — свои смысловые заголовки (см. совет 1).
Совет-резюме
- В создании пользовательского пути руководствуйтесь здравым смыслом — и держите в голове и в сердце разработчика желание сделать хороший и качественный для пользователя продукт.
- Создание хорошего юзер-флоу требует практики и опыта. И очень важно с первых шагов в разработке на ноукоде не лениться делать юзер-флоу. Мы, ноукодеры, конструируем приложение, мы не тратим время на написания элементов IT-продукта кодом, и поэтому у нас есть ресурс на проработку сверхкачественного UX и продумывания каждого шага будущего пользователя.
Хотите больше узнать про ноукод и погрузиться в мир разработки без кода? Смотрите наш бесплатный вебинар по клику на баннер.