Переменные и условия: как быстро сделать в Фигме нелинейный прототип
Например, прототип формы, поля которой можно заполнять непоследовательно.
Иногда сценарии и механики перехода между экранами (или состояниями одного экрана) получаются такими сложными, что для подготовки прототипа и тестирования на респондентах приходится переносить макеты из Фигмы в специальные инструменты вроде ProtoPie или Axure.
Летом 2023 года в Фигме появились условия и переменные, благодаря которым можно показывать всё более сложные взаимодействия. А также меньшими усилиями добиваться того, что раньше требовало усилий значимых, например, давать респондентам возможность заполнить поля формы в произвольном порядке.
Не все дизайнеры, с которыми я общался, знают о подобных способах применения связки переменных с условиями. Поэтому я и решил об этом рассказать на примере кейса с непоследовательным заполнением полей формы.
В чем проблема прототипов без условий и переменных?
Для примера возьмём форму настройки автопополнения счёта в Альфа-Банке со счёта в другом банке, а именно макеты Альфа-Онлайн (мобильный банк в браузере). Кстати, фича уже реализована, ей можно пользоваться.
Форма создания автопополнения
В ней шесть полей, из которых пользователь не взаимодействует с двумя («Счёт пополнения» и «Частота пополнения»), так как по сценарию их исходные значения его устраивают.
Если допустить, что респонденты на пользовательском тестировании будут заполнять поля последовательно, в прототипе надо реализовать 5 состояний формы:
Все поля заполнены исходными значениями.
Изменено значение в поле «Название перевода».
Изменены значения в полях «Название перевода» и «Откуда».
Изменены значения в полях «Название перевода», «Откуда» и «Какого числа».
Изменены значения во всех нужных полях.
Плюс нужны экраны, показывающие механику заполнения каждого поля. Я не стал добавлять экраны с клавиатурой и фокусом на полях «Название перевода» и «Сумма», так как для иллюстрации кейса хватит шторок выбора банка и числа. Минимальный прототип при последовательном заполнении полей получится таким:
Фреймы прототипа для последовательного заполнения полей
На видео можно заметить, что при переключении между состояниями не сохраняется уровень прокрутки формы, и она каждый раз отображается с самого начала. Это можно исправить, но статья не об этом, поэтому не стану здесь останавливаться.
Если для проверки какой-то гипотезы в прототип надо добавить возможность заполнения полей в произвольном порядке, состояний формы в прототипе станет намного больше. До лета 2023 года нужны были выдающиеся усидчивость и внимательность, чтобы справиться с этим в Фигме.
Даже если убрать дублирующиеся состояния формы в разных пользовательских путях (один респондент заполняет сначала первое поле и потом второе, а другой сначала второе и потом первое, и оба приходят к одному и тому же состоянию), получится 16 экранов. Вот схема переходов между ними:
Схема состояний формы
А переменные и условия сильно упрощают прототип.
Собираем прототип с условиями и переменными
Из предыдущего прототипа потребуется только один экран формы. Поля, с которыми взаимодействует пользователь, заменим на локальные компоненты с вариантами Default (не заполнено или заполнено значением по умолчанию) и Changed. И конечно, нужны будут шторки выбора банка и числа.
Фреймы прототипа для произвольного заполнения полей
Перейдём на вкладку Prototype и всё настроим. Я пропущу простые настройки и остановлюсь только на использовании переменных и условий.
Выбор банка
В шторке выбора банка после нажатия на необходимый, надо не только вернуть пользователя на экран формы, но и запомнить, что выбор банка состоялся. Запомнить это можно с помощью локальной переменной.
Добавление экшена Set variable
Повесим на банк «ВТБ» триггер On click, который запустит экшен Set variable.
Добавление локальной переменной типа Boolean
Настройка локальной переменной
При первой настройке экшена придётся создать локальную переменную, с которой он будет работать: тип Boolean, имя FromChoosen, значение по умолчанию False. Важно не установить ей значение по умолчанию True, так как значение True переменная должна получить только после нажатия на банк.
Изменение значения переменной
После создания переменной настроим экшен Set variable. Он установит переменной FromChoosen значение True.
Добавление второго экшена
Добавим второй экшен. Он должен сработать сразу после первого и привести пользователя на экран формы. В моём случае это экшен Close overlay, но это может быть и Navigate to, если шторка открыта не в оверлее.
Выбор числа, ввод названия и суммы перевода
То же самое повторим для выбора числа: запомним, что выбор числа состоялся, вернём пользователя на экран формы. Только локальную переменную назовём уже WhenChoosen.
Запоминать, что поля «Название перевода» и «Сумма» заполнены, и использовать локальные переменные надо, если выполняется хотя бы одно из условий:
При заполнении поля пользователь покидает экран формы. Например, прототип показывает механику заполнения поля при помощи состояния с клавиатурой и фокусом на поле.
После заполнения другого поля пользователь возвращается на экран формы экшеном Navigate to, а не закрытием оверлея.
В моём прототипе пользователь заполняет поля «Название перевода» и «Сумма» простым нажатием (триггер Click, экшен Change to, меняющий вариант компонента поля на Changed), а другие поля — в оверлеях. Поэтому локальные переменные здесь не нужны.
Изменение состояния формы
Когда пользователь открывает экран формы (впервые или возвращается после заполнения поля), надо проверить значения локальных переменных. Если связанная с полем переменная имеет значение True, значит, пользователь его уже заполнил и надо переключить компонент поля на вариант Changed. Таким образом в прототипе отобразится актуальное состояние формы.
Если пользователь открывает экран формы впервые, все локальные переменные равны False (значение по умолчанию, установленное при создании переменной) и форма отображается в исходном состоянии — незаполненная.
Настроим это для поля «Откуда».
Добавление и настройка триггера After delay
Добавление экшена Conditional
В форме полю «Откуда» (локальный компонент From) добавим триггер After delay, который с минимально возможной задержкой (1 ms) запустит экшен Conditional.
Настройка условия, связанного с переменной
Переменная должна быть равна True
При настройке экшена Conditional надо указать условие, при котором произойдёт то или иное действие. В моём случае: если локальная переменная FromChoosen равна True.
Добавление экшена, если условие соблюдено
Настройка экшена Change to
В блок if добавим экшен, который сработает, если условие соблюдено. Выберем Change to, который переключит поле «Откуда» (локальный компонент From с триггером After delay) на вариант Changed.
Добавление экшена, если условие не соблюдено
В блок else добавим экшен на случай, если условие не соблюдено: Change to, переключающий поле «Откуда» на вариант Default.
Важно, чтобы настраиваемый таким образом компонент поля не находился внутри другого компонента, например, отвечающего за общую структуру экрана. В противном случае родительский компонент придётся раздетачить.
То же самое повторим для поля «Какого числа».
Что получилось
Я не стал добавлять экраны с клавиатурой и фокусом на полях «Название перевода» и «Сумма», так как для иллюстрации кейса хватило шторок выбора банка и числа. В итоге получится нужный прототип:
Кстати, в отличие от предыдущего, у него нет проблемы с потерей уровня прокрутки формы при переключении между состояниями. Но это потому что одни поля заполняются в оверлеях, а другие — простой сменой варианта компонента поля по нажатию.
Благодаря условиям и переменным можно без чрезмерных усилий создавать довольно сложные прототипы, например, позволяющие респондентам заполнять поля формы в произвольном порядке.
А вы используете переменные и условия в Фигме? Поделитесь в комментариях своими кейсами.
