Как стать автором
Обновить
628.6
Альфа-Банк
Лучший мобильный банк по версии Markswebb

Переменные и условия: как быстро сделать в Фигме нелинейный прототип

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров9.5K

Например, прототип формы, поля которой можно заполнять непоследовательно.

Иногда сценарии и механики перехода между экранами (или состояниями одного экрана) получаются такими сложными, что для подготовки прототипа и тестирования на респондентах приходится переносить макеты из Фигмы в специальные инструменты вроде ProtoPie или Axure.

Летом 2023 года в Фигме появились условия и переменные, благодаря которым можно показывать всё более сложные взаимодействия. А также меньшими усилиями добиваться того, что раньше требовало усилий значимых, например, давать респондентам возможность заполнить поля формы в произвольном порядке.

Не все дизайнеры, с которыми я общался, знают о подобных способах применения связки переменных с условиями. Поэтому я и решил об этом рассказать на примере кейса с непоследовательным заполнением полей формы.

В чем проблема прототипов без условий и переменных?

Для примера возьмём форму настройки автопополнения счёта в Альфа-Банке со счёта в другом банке, а именно макеты Альфа-Онлайн (мобильный банк в браузере). Кстати, фича уже реализована, ей можно пользоваться.

Форма создания автопополнения
Форма создания автопополнения

В ней шесть полей, из которых пользователь не взаимодействует с двумя («Счёт пополнения» и «Частота пополнения»), так как по сценарию их исходные значения его устраивают.

Если допустить, что респонденты на пользовательском тестировании будут заполнять поля последовательно, в прототипе надо реализовать 5 состояний формы:

  1. Все поля заполнены исходными значениями.

  2. Изменено значение в поле «Название перевода».

  3. Изменены значения в полях «Название перевода» и «Откуда».

  4. Изменены значения в полях «Название перевода», «Откуда» и «Какого числа».

  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 (значение по умолчанию, установленное при создании переменной) и форма отображается в исходном состоянии — незаполненная.

Настроим это для поля «Откуда».

Добавление экшена Conditional
Добавление и настройка триггера After delay
Добавление экшена Conditional

В форме полю «Откуда» (локальный компонент From) добавим триггер After delay, который с минимально возможной задержкой (1 ms) запустит экшен Conditional.

Настройка условия, связанного с переменной
Настройка условия, связанного с переменной
Переменная должна быть равна True

При настройке экшена Conditional надо указать условие, при котором произойдёт то или иное действие. В моём случае: если локальная переменная FromChoosen равна True.

Донастройка экшена Conditional
Добавление экшена, если условие соблюдено
Настройка экшена Change to

В блок if добавим экшен, который сработает, если условие соблюдено. Выберем Change to, который переключит поле «Откуда» (локальный компонент From с триггером After delay) на вариант Changed.

Добавление экшена, если условие не соблюдено

В блок else добавим экшен на случай, если условие не соблюдено: Change to, переключающий поле «Откуда» на вариант Default.

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

То же самое повторим для поля «Какого числа».

Что получилось

Я не стал добавлять экраны с клавиатурой и фокусом на полях «Название перевода» и «Сумма», так как для иллюстрации кейса хватило шторок выбора банка и числа. В итоге получится нужный прототип:

Кстати, в отличие от предыдущего, у него нет проблемы с потерей уровня прокрутки формы при переключении между состояниями. Но это потому что одни поля заполняются в оверлеях, а другие — простой сменой варианта компонента поля по нажатию.

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

А вы используете переменные и условия в Фигме? Поделитесь в комментариях своими кейсами.

Теги:
Хабы:
Всего голосов 25: ↑24 и ↓1+26
Комментарии20

Полезные ссылки

Как агенту изменений выйти за границы возможностей и выжить там, где тебя не ждут?

Уровень сложностиПростой
Время на прочтение17 мин
Количество просмотров1.8K
Всего голосов 26: ↑24 и ↓2+24
Комментарии0

Как дизайн-система помогает дизайнеру не налажать

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров969
Всего голосов 10: ↑10 и ↓0+14
Комментарии0

«Я тебя слепила из того, что было» и другие принципы IT-обучения в пьесе в трёх актах

Уровень сложностиПростой
Время на прочтение11 мин
Количество просмотров1.9K
Всего голосов 29: ↑27 и ↓2+28
Комментарии1

Избавляемся от Android в api-модулях

Уровень сложностиСредний
Время на прочтение4 мин
Количество просмотров2.8K
Всего голосов 16: ↑16 и ↓0+18
Комментарии9

Опыт работы с библиотекой h3: гексы, геопризнаки и Geo Feature Store

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров860
Всего голосов 13: ↑12 и ↓1+11
Комментарии0

Информация

Сайт
digital.alfabank.ru
Дата регистрации
Дата основания
1990
Численность
свыше 10 000 человек
Местоположение
Россия