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