Введение
Создание высокодетализированных прототипов не всегда является любимым этапом процесса продуктового дизайнера. Тем более, когда это не просто линейный путь из трёх экранов, а проектирование гигантского флоу со сложной статусной моделью, влияющей на большие и не очень куски продукта.
Вне сомнения, самая бесячая часть протипирование - это внесение любых изменений в уже вылизанный флоу, где часто теряется часть уже продуманный интерактивности, банально, из-за количества экранов и состояний. В своих прототипах я всегда стараюсь следовать правилу «если я уже настраивала такое взаимодействие где-то еще, то значит я делаю что-то не так». Сегодня я покажу несколько принципов эффективного прототипирования, которые помогут избежать бесполезной траты времени и сосредоточиться на более важных этапах дизайн процесса.
Высокодетализированный нелинейный прототип - это не прихоть дизайнера. Он позволяют пользователю идти не только по заготовленному идеальному сценарию, но и «сворачивать в сторону», что является ситуацией наиболее приближенной к реальности. Давая пользователю совершать ошибки в процессе тестирования, мы понимаем его настоящий пользовательский опыт, а не искусственный, а соответственно и получаем более качественные инсайты с юзабилити тестирований. Помимо перечисленных мною очевидных плюсов, такой метод крайне полезен для тестирования юзабельности интерфейсов без одного конкретного сценария, где к одной и той же цели можно прийти несколькими разными правильными способами.
Что значит «прототипировать эффективно»?
Любая эффективность по итогу утыкается в скорость и сложность, но выделить конкретные пункты всё таки возможно:
- Быстрое создание новых сценариев
- Быстрое изменение существующего сценария
- Быстрое изменение контента в самих экранах
- Повторяться по минимуму
Добиться выполнения этих пунктов возможно, выбирая правильные принципы прототипирования для разных задач.
3 базовых принципа прототипирования
Принцип 1: навигация
Кликая/тапая на элемент на странице 1 происходит переход на страницу 2
Когда использовать: При проектировании сознательного перехода с одной страницы на другую.
Как использовать: Добавить Action: Navigate to или Action: Back
Не путать страницу с фреймом в Figma. Страницы — это отдельные самостоятельные сущности в интерфейсе, которые могут быть представлены в виде разных фреймов, где элементы находятся в разных состояниях. Из страниц можно проваливаться в другие страницы также с помощью принципа 1.
Для возвращения на предыдущий экран я рекомендую использовать Back, а не Navigate to, потому что он сразу делает «обратную анимацию», без каких-то дополнительных манипуляций, тем самым также экономя вам кучу времени, если например вы потом решите поменять длительность или тип анимации.
Принцип 2: интерактив в компоненте
Совершая действие с инстансом компонента, он меняет свое состояние
Когда использовать: При проектировании компонентов с некоторым набором состояний, переход между которыми происходит при взаимодействии с самим инстансом этого компонента.
Как использовать: Создавая компонент с набором вариантов и проектируя интерактив между этим вариантами используя Action: Change to.
Принцип 3: событие
Совершая действие с элементом происходит событие.
Когда использовать: При проектировании флоу, в которых изменение состояния или контента элемента X можно запустить взаимодействием с любыми элементами интерфейса, включая также с самим элементом X.
Как использовать: Создавая переменные и привязывая их к тем слоям, которые должны каким-то образом меняться после изменения переменной, вызванного каким-то действием.
К сожалению, изменение состояния через переменную нельзя сделать с помощью Smart animate. Все будет происходить только через анимацию Instant.
Используя только Navigate to, вы создаёте себе много проблем
В начале своего пути Figma сделала возможным только первый принцип навигации, тем самым посеяв у дизайнеров неправильное понимание для чего в принципе нужен Navigate to, ведь никак по другому сделать например изменение состояния компонента было нельзя.
Но если сегодня вы всё еще прототипируете большие флоу, просто таская стрелки по разным фреймам, где компоненты представлены в разных состояниях, то я могу лишь представить насколько вам больно и сложно вносить изменения в такой прототип.
Разберём на примерах насколько меньше фреймов нужно делать, а соответственно и рисовать стрелочек, если использовать в работе интерактивные компоненты, и даже комбинацию интерактивных компонентов с событиями:
Комбинации принципов
Принцип 4: навигация с событием
Кликая/тапая на элемент на странице 1 происходит переход на страницу 2 с определенным событием
Когда использовать: Подходит для создания флоу, где клик/тап по элементу помимо перехода на какую-то страницу также подтверждает какое-то изменение во флоу.
Как использовать: Создаём интерактив с элементом, где одним экшеном будет Navigate to, а вторым Set Variable. Если событие должно поменять что-то на ближайшей странице, на которую переходим, то лучше Set Variable поставить первее, тогда изменение из-за переменной произойдёт незаметно для зрителя.
Принцип 5: интерактив в компоненте с событием
Совершая действие с инстансом компонента он меняет свое состояние и происходит событие
Когда использовать: Подходит для ситуаций, где компонент не просто вызывает где-то эффект, но ещё и сам при этом меняется, давая пользователю моментальный видимый фидбек о своём текущем состоянии.
Как использовать: Создаём компонент с несколькими вариантами, настраиваем для них внутренний интерактив. Для тех вариантов, при переходе на которые, должно происходить какое-то событие, также вешаем дополнительный Action: Set Variable и задаём новое значение для используемой переменной. Переменную привязываем к тому, на что она влияет.
Принцип 6: интерактив в компоненте с навигацией
Совершая действие с инстансом компонента на странице 1, он меняет свое состояние и по клику происходит переход на страницу 2
Когда использовать: В ситуациях, где по клику на компонент, навигирующий на какую-то страницу, он также должен визуально обрабатывать интерекшен с ним.
Как использовать: Создаём компонент с несколькими вариантами, настраиваем для них внутренний интерактив:
- Если нужный внутренний интерактив — это клик/тап, то навигацию к нужной странице можно засунуть в виде дополнительного экшена по тому же триггеру, но такой способ подходит для узкоспециализированных компонентов, которые будут вести на одинаковую страницу, вне зависимости от того, где находятся. То есть, для кнопки, которая используется в разных контекстах и ведёт на разные страницы, это не подойдёт, так как навесив на её инстанс навигацию случится конфликт одинаковых триггеров. Подробнее про это расскажу чуть дальше.
- Если действие — что-то другое (например while pressing), то это действие станет внутренним интерекшеном компонента. Снаружи, на инстанс, уже навешивается клик и переход на страницу. P.S. Дизайнеры часто путают разницу on click и while pressing. On click – это то, что произойдёт после завершения нажатия, то есть когда палец или мышка уже полностью прекратили взаимодействовать с элементом. While pressing – это то, что происходит после того как мы уже нажали, но ещё не отпустили. А после этого из состояния while pressing компонент вернётся в своё предыдущее состояние. Соответственно, если мы хотим, например, продемонстрировать эффект от нажатия любой кнопки, то это мы можем спокойно вынести на уровень компонент, а уже то, что произойдёт после клика – вынести в виде интерекшена с инстансом.
Таким образом на сегодняшний день в Figma есть почти все возможности, чтобы прототипировать, действительно эффективно. Главное разобраться в каких случаях, какой принцип использовать.
Неочевидные особенности компонентов контролов
Думаю, что те дизайнеры, которые раньше не знали об интерактивным компонентах, очень обрадуются узнав о возможности запрототипировать все популярные базовые компоненты контролы, особенно такие как чекбоксы, свитчи, радиобаттоны. Но не спешите это делать.
Увы, но компоненты, которые могут быть в нескольких состояниях, меняющихся по клику, обычно не находятся в безконтекстном вакууме. Такой компонент существует, чтобы в разных своих состояниях, давать какой-то эффект на интерфейс, например активировать задизейбленную кнопку, добавлять дополнительного шага во флоу и тд.
Разберём потенциальные варианты решения на трёх разных контекстах использования чекбокса:
Распространённая ошибка #1
Во внутренний интерактив заложить все потенциальные контексты, в которых будет использоваться наш контрол.
Проблема: Новые контексты будут продолжать появляться, а компонент разрастаться и становится слишком сложным для поддержки. Это также является нарушением атомарности.
Распространённая ошибка #2
Во внутреннем интерактиве оставить только визуальное отображение клика, а контекст вынести в виде клика на внешний уровень.
Проблема: Для обоих уровней триггером будет клик и при совершении триггера в прототипе будет происходить конфликт (выполнится только внешний интерактив)
Правильный вариант
Сделать интерактивный компонент, но логику привязать не к клику, а к переменной.
Задачи для самостоятельной работы
Задача #1
Виджет быстрых переводов людям из своих контактов. По клику на человека, переходим на страницу перевода денег, где в поля уже вставлены данные человека, на которого кликнули.
Условие: 1 страница-фрейм с виджетом и только 1 фрейм страницы перевода денег
Задача #2
Выбор тарифа на странице оплаты. Цена тарифа, который в данный момент выбрали подставляется в кнопку «Оплатить X ₽».
Условие: только 1 фрейм страницы оплаты
Задача #3
Страница с полем ввода адреса, где есть сразу 4 тега предложенных адресов. По клику на каждый из тегов поле адреса будет предзаполнение наполнением тега, на который кликнули.
Условие: только 1 фрейм
Ответы на задачи
Кидайте свои решения в комментарии :) Каждый прокомментирую и в следующей части выложу ответы.
В следующей части разберём:
- Оверлеи
- Условия
- Скролл к
- Sections
- Операции с переменными
Лайк, подписка и заходи в мой телеграм канал Дизайн Диктатура
