Как тестировать user flow: четыре метода и лайфхак для бесплатного UI тестирования
Работа над User flow, пользовательским сценарием — важный этап создания интерфейса. User flow принимает различные формы в зависимости от этапа развития продукта. Расскажу, как тестировать сценарии в разных ситуациях и как это можно делать бесплатно. Пригодится людям, задействованным в создании интерфейсов: UI дизайнерам, менеджерам продуктов, UX исследователям.
User Flow — пользовательский сценарий иллюстрирует порядок действий, который пользователь выполняет для решения задачи. Сценарий — это скелет интерфейса, состоит из шагов — отдельных экранов. Удобный для пользователя интерфейс начинается именно с проработки user flow, структуры.
В оригинале пользовательский сценарий представляет собой блок-схему с логическими связями и пересечениями. Но тестировать сценарий в таком виде затруднительно и бессмысленно.
Интерфейс — это подход к решению задачи. Для проверки логики смотрим, насколько интерфейс выполняет свою функцию.
Для теста User Flow достаточно последовательных экранов или даже нарисованных от руки черновиков. Большинство дизайнеров, продактов и исследователей имеют дело уже с работающим цифровым продуктом, поэтому начнем именно с этой ситуации.
Тестировании User Flow продукта — это гигиеническая норма. Для оценки общего уровня удобства важны количественные метрики. Подход к сбору данных зависит от исследовательской культуры и возможностей.
Для проверки сценариев достаточно провести онлайн опрос. Даем респондентам ссылку на продукт и задание. По итогу прохождения задаем вопросы из стандартной анкеты по оценке юзабилити (SUS). Полезно наравне с собственным продуктом тестировать прямых и косвенных конкурентов. В разнице оценок и содержится наиболее полезная информация.
Пример: летом 2019 года провели сравнительное исследование трех онлайн супермаркетов. За несколько часов получили общие метрики по удобству интерфейса, а из открытых ответов почерпнули информацию о разрывах в пользовательском сценарии.
Fastuna Task Flow Click (UX Benchmark) Ссылка на отчет
Я не смогла добавить все товары в корзину. При добавлении только 1 товара мне сразу предлагают оформить доставку, а я хотела добавить другие товары.
Опрос дает количественные оценки и прямую речь. Фиксируем показатели, которые отклоняются от нормы или результатов конкурентов. Изучаем упомянутые в открытых ответах проблемы. Полученных данных бывает достаточно для принятия бизнес решения. Если вопросы остались, то обращаемся к более глубоким методам исследований.
Предположим ситуацию: продукт функционирует без багов, но люди не доходят до выполнения целевого действия. Точного понимания причин нет. Поиск проблемы — это качественная, а не количественная задача, предполагает погружение в опыт отдельных людей. Здесь подходят два метода: модерируемые и немодерируемые юзабилити тесты. Первый метод быстр, доступен почти всем. Модерируемый тест способен дать более глубокие данные, но требует времени и специальных навыков.
Немодерируемые тестирования занимают от одного до нескольких дней. Люди под запись экрана делают попытку выполнения задания, а потом дают обратную связь. Изучаем видеозаписи и пониманием, в чем заключена проблема: в логике user flow, в функциональных элементах или в оформлении интерфейса.
В статье “Смотрим видео и страдаем. Как я анализировал записи UX-исследования” рассказываю о том, как выглядит анализ немодерируемого юзабилити теста и с какими неожиданными трудностями сталкиваются люди при использовании привычных элементов.
Применимо, когда есть потребность в большей детализации и погружении. Респондент получает задание, а интервьюер очно или онлайн наблюдает за человеком в режиме реального времени, задает уточняющие вопросы. Личные интервью с людьми — более трудоемкий и времязатратный метод, требует особых компетенций, но при правильном проведении дает ценную информацию. Модерируемые юзабилити интервью рекомендуем по возможности проводить с привлечением штатных сотрудников, погруженных в продукт.
При тестировании User Flow путем модерируемых и немодерируемых юзабилити тестирований важно помнить, что эти методы относятся к качественной методологии, служат для формулировки предположений, а не для проверки гипотез. На нескольких интервью вы найдете проблему, но не ее распространенность.
Предположим, мы нашли проблему в пользовательском сценарии и работаем над улучшением User Flow. Новый пользовательский сценарий обретает плоть. Сначала в виде последовательных макетов. Мы не палим ресурсы разработки впустую, поэтому удостоверяемся, что новый вариант работает, люди понимают, куда нажимать на каждом шаге для выполнения задания, дойдут до конца маршрута.
Для количественной проверки гипотез, при оценке сценария на интуитивность подходит тест первого клика
Как это работает: даем 100-400 людям задание и последовательно показываем экраны интерфейса. На каждом экране человек делает только один клик, который приблизит к выполнению задания. По итогу получаем тепловую карту кликов на каждом шаге. Видим, на каком этапе пользовательского сценария возникает больше всего затруднений.
Пример: я тестировал пользовательский сценарий по поиску дверной ручки на сайте строительного гипермаркета. На втором шаге сценария, при попадании в каталог 71% ищут дверные ручки в разделе двери и окна. И лишь 6% в скобяных изделиях, где они и находятся. Вывод: интерфейс не решает задачу для сценария по поиску этого товара.
Если задача — общая оценка то из исследований наиболее релевантен опрос с применением классической шкалы SUS или ее разновидностей.
Если на этапе готового продукта ищем проблему в User Flow, то в зависимости от требуемой детализации и ресурсов используем немодерируемое или модерируемое юзабилити тестирование.
На этапе разработки, когда user flow представлен в виде последовательных экранов рекомендую тест первого клика — он покажет, на каком шаге люди теряются, поможет при размещении кнопок.
Обещанный лайфхак: перечисленные решения доступны бесплатно. Fastuna специализируется на готовых решениях на базе онлайн панели. Но при использовании собственной базы все решения можно использовать бесплатно. Каждой компании доступно 500 интервью в месяц. Да, это касается даже немодерируемых юзабилити тестирований с записью экрана.
Полное руководство по User Flow: как сделать, примеры и советы
Расскажу о ценности User Flow, а также покажу, как создать User Flow по шагам. Чек-лист с примерами и рекомендациями в конце статьи.
Продуктовый дизайнер (UX/UI), веб-дизайнер и бренд-дизайнер. Опыт проектов в международных компаниях Omega-R (агентство), iSpring Solutions (продуктовая) и со стартапами по всему миру. Преподаватель курсов «UI-дизайн и анимация интерфейсов» и «Веб-дизайн» в Институте программных систем и godesign.school.
Июн 11 · 8 мин читать
User flow — это наглядное представление последовательности действий, которые выполняет пользователь для достижения значимой для себя цели на сайте или в приложении. Может охватывать как какую-то отдельную функцию, так и весь продукт. Рассказываем на примерах, как построить карту и с помощью каких инструментов это удобнее сделать. 👩💻👇
Фактически концепцию потока в UX-дизайне впервые предложил психолог Михай Чиксентмихайи. Поток (англ. flow) — это психическое состояние, в котором человек полностью включён в то, чем он занимается, что характеризуется деятельным сосредоточением, полным вовлечением в процесс деятельности. Поэтому при проектировании 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 (UX Flow) крупным планом.
Говоря простыми словами, User Flow — это маршрут путешествия пользователя через экраны приложения к важной цели. А каждое приложение — это целая карта таких маршрутов (User Flow Map).
Использовать User Flow в команде следует по следующим причинам:
User Flow — это наглядный инструмент для донесения идей в четком, запоминающемся виде. А еще User Flow помогает создать единое видение по сценарию работы в определенной жизненной ситуации.
Инструкция по разработке User Flow
В самом простом варианте построение диаграммы пользовательского пути происходит следующим образом:
Что важно учесть при построении 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-нотации.
Вывод и рекомендация
User Flow помогают сосредоточиться на человекоцентричном дизайне и добиться максимально комфортного и эффективного маршрута до цели. А еще они добавляют согласованности в работе команды и экономят время и деньги.
User Flow также направляют принятие решений в дизайне и подсвечивают недочеты еще до того, как начнется фаза детальной работы над компонентами и визуальной проработкой. И самое главное — они побуждают искать самый простой способ достижения цели пользователем и вовлекают в поиски алтернатив. Попробуйте их в вашим следующем проекте.
Напомню, что прокачать навыки в создании User Flow вы можете на платформе Breezzly. На Breezzly вы тренируетесь в контексте сайтов, мобильных и веб-приложений и даже на примере приложений для смарт-часов.
Как оптимизировать проект Data Science с помощью Prefect
Есть ли способ оптимизировать рабочий процесс проекта Data Science всего в несколько строк кода? Да. Это Prefect. Делимся кратким руководством по работе с этим инструментом, пока у нас начинается флагманский курс Data Science.
Зачем это нужно?
Почему вас как специалиста по анализу данных должна волновать оптимизация рабочего процесса? Начнём с примера базового проекта в области науки о данных. Представьте, что вы работаете с набором данных Iris и начали с функций обработки данных.
Определив функции, вы выполняете их.
Код отработал нормально, и вы не увидели ничего плохого в выводе, поэтому считаете, что рабочий процесс достаточно хорош. Однако линейный рабочий процесс, как ниже, может иметь множество недостатков.
Вот эти недостатки:
Если в функции get_classes произошла ошибка, вывод encode_categorical_columns будет потерян и рабочий процесс придётся начинать с начала. Это может быть неприятно, если выполнение функции encode_categorical_columns занимает много времени.
Поскольку функции encode_categorical_columns и get_classes не зависят друг от друга, их можно выполнять одновременно:
Запуск функций таким образом может предотвратить трату времени на неработающие функции. Если в get_classes произошла ошибка, рабочий процесс перезапустится сразу, не дожидаясь завершения encode_categorical_columns.
Что такое Prefect?
Prefect — это фреймворк с открытым исходным кодом для построения рабочих процессов на Python. Он позволяет легко создавать, запускать и контролировать конвейеры данных различного масштаба. Чтобы установить его, выполните эту команду:
Строим рабочий процесс с Prefect
Чтобы узнать, как работает Prefect, давайте инкапсулируем рабочий процесс в начале статьи с его помощью.
1. Создаём задачи
Задача — это отдельное действие в Prefect. Начните с превращения определённых выше функций в задачи с помощью декоратора prefect.task:
2. Создаём поток
Поток Flow представляет весь рабочий процесс, управляя зависимостями между задачами. Чтобы создать поток, просто вставьте код запуска ваших функций внутри контекстного менеджера with Flow(. ).
Обратите внимание, что ни одна из этих задач не выполняется при выполнении приведённого выше кода. Prefect позволяет вам либо запустить поток сразу, либо запланировать его. Давайте попробуем сразу же выполнить поток при помощи flow.run():
Выполнив приведённый выше код, вы получите результат, подобный этому:
Чтобы понять рабочий процесс Prefect, полностью визуализируем его. Начните с установки prefect[viz]:
Затем добавьте в код метод visualize:
И вы должны увидеть визуализацию рабочего процесса data-engineer:
Обратите внимание, что Prefect автоматически управляет порядком выполнения задач, чтобы оптимизировать рабочий процесс. Это довольно круто в смысле дополнительных частей кода!
3. Добавляем параметры
Если вы часто экспериментируете с различными значениями одной переменной, идеальным вариантом будет превратить эту переменную в Parameter.
Рассматривать Parameter можно как Task, за исключением того, что он может получать пользовательские данные при каждом запуске потока. Чтобы превратить переменную в параметр, воспользуйтесь task.Parameter.
Первый аргумент Parameter задает имя параметра. default — необязательный аргумент, это значение параметра по умолчанию. Повторный запуск flow.visualize даст такой результат:
Перезаписать параметр по умолчанию можно для каждого запуска:
Добавим аргумент parameters в функцию flow.run():
или воспользуемся CLI Prefect:
ещё вариант — файл JSON:
Файл JSON должен выглядеть примерно так:
Вы также можете изменять параметры каждого прогона с помощью программы Prefect Cloud. О ней поговорим ниже.
Мониторинг рабочего процесса
Обзор
Prefect также позволяет контролировать рабочий процесс в Prefect Cloud. Чтобы установить зависимости Prefect Cloud, следуйте этой инструкции. После установки и настройки всех зависимостей начните с создания проекта:
Затем запустите локальный агент, чтобы развернуть потоки локально на одной машине:
… в конце вашего файла вы должны увидеть что-то похожее на это:
Нажмите на URL-адрес в выводе, и вы будете перенаправлены на страницу обзора. На этой странице отображаются версия потока, время его создания, история выполнения потока и сводка выполнения.
Вы также можете просмотреть сводку других запусков, время их выполнения и их конфигурацию.
Очень здорово, что эта информация автоматически отслеживаются Prefect!
Запуск рабочего процесса с параметрами по умолчанию
Обратите внимание, что рабочий процесс зарегистрирован в Prefect Cloud, но ещё не выполняется. Чтобы выполнить рабочий процесс с параметрами по умолчанию, нажмите Quick Run в правом верхнем углу.
Щёлкните созданный прогон. Теперь вы увидите активность для вашего нового потока в режиме реального времени!
Запуск рабочего процесса с пользовательскими параметрами
Чтобы запустить рабочий процесс с пользовательскими параметрами, перейдите на вкладку Run, а затем измените параметры в разделе Inputs.
Настроив параметры, просто нажмите кнопку Run, чтобы запустить прогон.
Просмотр графа рабочего процесса
Нажав кнопку Schematic, вы увидите граф всего рабочего процесса.
Другие функции
Prefect также предоставляет другие возможности, которые значительно повышают эффективность рабочего процесса.
Кеширование ввода
Помните проблему, о которой мы упоминали в начале статьи? Обычно, если функция get_classes завершится неудачей, то данные, созданные функцией encode_categorical_columns, будут отброшены, и весь рабочий процесс придётся начинать с самого начала.
Однако в Prefect сохраняется вывод encode_categorical_columns. В следующий раз при повторном запуске рабочего процесса вывод encode_categorical_columns будет использован следующей задачей без повторного запуска encode_categorical_columns.
Это может привести к значительному сокращению времени выполнения рабочего процесса.
Сохранение вывода
Иногда вам может понадобиться экспортировать данные задачи. Это можно сделать, вставив код сохранения данных в функцию Task.
Однако это затруднит тестирование функции. Prefect позволяет легко сохранять результаты выполнения задачи на каждом запуске. Вот что нужно для этого сделать:
Установите контрольную точку в True:
Теперь вывод задачи split_data сохранится в директории data/processed:
Если вы хотите настроить имя вашего файла, добавьте к @task аргумент target:
Prefect также предоставляет другие классы Result, такие как GCSResult и S3Result. Результаты вывода API можно проверить здесь.
Вывод других потоков в текущий поток
Если вы работаете с несколькими потоками, например с потоками data-engineer и data-science, вы, возможно, захотите использовать вывод data-engineer для data-science.
После сохранения вывода data-engineer вы можете прочитать их с помощью метода read.
Подключение зависимых потоков
Представьте ситуацию: вы создали два потока, которые зависят друг от друга. Поток data-engineer должен быть выполнен до потока data-science. Кто-то не понял взаимосвязи между этими двумя потоками. Потоки data-science и data-engineer были выполнены одновременно, и произошла ошибка!
Чтобы этого не произошло, мы должны определить взаимосвязь между потоками. К счастью, Prefect облегчает нам эту задачу. Начните с захвата двух различных потоков с помощью StartFlowRun. Добавьте wait=True к аргументу, чтобы нисходящий поток выполнялся только после завершения восходящего потока.
Вызовем data_science_flow с with Flow(. ). Используйте upstream_tasks для указания задач/потоков, которые будут выполняться перед выполнением data-science.
Теперь два потока соединены:
Планируйте свой поток
Prefect также позволяет легко выполнить поток в определённое время или с определённым интервалом. К примеру, чтобы запускать поток каждую минуту, вы можете создать экземпляр класса IntervalSchedule и добавить schedule к with Flow(. ):
Теперь ваш поток будет повторяться каждую минуту! Узнать об этом больше вы можете узнать здесь.
Логирование
Логировать печать внутри задачи вы сможете, просто добавив log_stdout=True в @task :
Вывод будет примерно таким:
Заключение
Поздравляю! Мы только что разобрались, как Prefect с помощью нескольких строк кода оптимизирует ваш рабочий процесс Data Science. Небольшая оптимизация в коде может привести к огромному повышению эффективности в долгосрочной перспективе. Свободно форкайте исходный код из этой статьи:
Попробовать Prefect в деле вы сможете на наших курсах:
Data Science и Machine Learning