Иногда нам может не хватать возможности прототипирования Figma.
Например, Figma не позволит нам делать поля ввода, использовать камеру или гироскоп устройства. В большинстве случаев можно обойтись без этого и просто эмулировать ввод текста по заготовленному сценарию.
Но, если эти ограничения прототипов Figma блокируют проведение юзабилити-теста, встаёт вопрос о более сложном прототипе. Либо мы привлекаем разработчиков и тратим их ресурс, либо делаем высокоточный прототип.
Здесь нам на помощь могут прийти инструменты для создания Hi-Fi прототипов. Если про Axure RP знают многие, я расскажу про не менее крутые ProtoPie и Origami Studio.
ProtoPie
Я давно являюсь фанатом ProtoPie, в нём легко разобраться после небольшого обучения на примерах.
Механика работы
ProtoPie позволяет импортировать дизайн из Figma, Sketch или Adobe XD с помощью плагинов. Плагин переносит выбранные объекты в ProtoPie с сохранением структуры слоёв и стилей, которые потом можно редактировать.
Я копирую фрейм из Figma.
И он сразу переносится на экран открытого проекта ProtoPie.
Я хочу показать простой пример, в котором кнопка меняет цвет при наведении курсора.
Чтобы каждый раз не повторять микровзаимодействия с кнопкой, я сразу создаю компонент кнопки.
Перехожу к редактированию компонента и добавляю Trigger Mouse Over.
Выбираю слой с векторной иконкой и добавляю событие Color.
В свойствах события задаю цвет, который будет применяться.
Если оставить как есть, то цвет поменяется однократно и не вернется обратно. Добавляю Trigger Mouse Out, чтобы вернуть цвет при отведении курсора от кнопки.
Теперь в прототипе кнопка будет менять цвет при наведении курсора.
Для пользователей Figma прототипирование таких простых взаимодействий выглядит сложно, но ProtoPie создавался для сложных взаимодействий с использованием трггеров, которых нет в Figma.
Возможности
Если нам нужно проверить прототип с вводом данных и потом использовать эти данные в прототипе, ProtoPie справится с такой задачей очень просто.
Пример готового интерфейса ввода расходов по рекламным каналам. Я заполняю форму и после нажатия на кнопку «Добавить» в таблице появляется строка с веденными данными.
Чтобы провести удаленный юзабилити-тест, можно скопировать ссылку на прототип и отправить респонденту для удаленного юзабилити-теста. На десктопе ссылка откроется в браузере, на мобильных устройствах респонденту придется установить клиент для iOS или Android.
Киллер фича, которой нет у других инструментов, это возможность связывать триггеры двух разных прототипов. Например, можно воспроизвести общение в мессенджере между двумя прототипами на разных устройствах.
Возможности ProtoPie поражают, от математических выражений для элементарной корзины покупателя и распознание голоса для голосовых интерфейсов (без поддержки русского языка) до взаимодействия с внешними устройствами, вроде, Arduino.
Со всеми возможностями и примерами вы можете ознакомиться на сайте ProtoPie.
Недостатки
Функция Handoff для передачи спецификации анимаций разработчику доступна только в командной подписке.
Раньше ProtoPie распространялся по модели пожизненных лицензий, лицензия стоила около $120 с годовым обновлением до новых версий. Это приемлемая цена для подобного инструмента, но позже ProtoPie стал распространяться только по подписке. А в прошлом году они в край объелись ухи и подняли цену подписки до $800 в год для персональной лицензии. Мотивируя это тем, что они не хотят делать инструмент для массового пользователя, а хотят сосредоточиться на профессионалах.
Благо, появилась бесплатная лицензия с неприятными ограничениями:
- Нельзя сохранять проекты на диск;
- Только 2 прототипа в облаке.
Origami Studio
Немного более сложный инструмент созданный корпорацией Марка Цукерберга, но мощный и бесплатный.
Механика работы
Origami Studio позволяет импортировать дизайн из Figma и Sketch с помощью плагина. Плагин копирует объекты со всеми слоями в буфер обмена, после чего необходимо вставить скопированные объекты на артборд редактора.
Важный плюс, Origami Studio поддерживает Layouts и импортирует дизайн из Figma с Auto Layout. Из импортированного дизайна легко создать компонент. Сначала создается компонент в файле, но его можно перенести на диск в личную библиотеку. Такие компоненты сохраняются как отдельные файлы, ими можно делиться с командой настроив Git.
Как и в ProtoPie можно делать переходы между экранами, но они будут без анимации. Всё прототипирование построено на визуальном программировании, через готовые функции — patches, в которых есть inputs и outputs.
Соединяя patches между собой, мы можем изменять контент или свойства слоёв.
Выглядит просто.
Разберём подробнее на примере
У меня есть компонент текстового поля и при наведении курсора я хочу сделать обводку немного ярче.
Важно, я переключаю прототип на десктопное устройство, чтобы мне были доступны patches для десктопа.
Теперь я вызываю окно с patches и размещаю patch Hover.
В patch в секции Inputs выбираю слой, при наведении на который будет срабатывать patch.
Далее я добавляю patch Transition и связываю Output Hover c Transition, в котором выбран Type Color.
В Start задаю исходный цвет, в End цвет, который должен примениться.
Если мне нужна небольшая плавность анимации в смене цвета, добавляю patch Classic Animation.
Теперь, чтобы применить изменение к конкретному свойству, выбираю слой. Нахожу свойство Color и нажимаю на иконку плюса.
Добавляется patch свойства слоя, соединяю output анимации с input свойства слоя.
Готово, у компонента меняется цвет обводки при наведении курсора мыши.
Как и ProtoPie для простых прототипов инструмент избыточен, поменять цвет обводки при наведении гораздо быстрее и проще в Figma через интерактивные компоненты.
Возможности
Возможностей не меньше, чем в ProtoPie, за редким исключением, но чтобы ими пользоваться, придется обучаться.
Поддерживаются текстовые поля для ввода текста, есть готовые компоненты полей для iOS и Android их можно найти в библиотеке слоёв. Чтобы сделать своё поле, можно стилизовать уже готовые поля, либо создать свой компонент и скопировать логику взаимодействия из готового компонента.
Есть логические и математические операторы. Поддерживается работа с JSON данными, с помощью которых можно делать персонализированные прототипы с данными респондента. Сетевые запросы, можно как получать JSON по URL так и передавать. В теории, можно построить взаимодействие между двумя прототипами, но потребуется простая серверная логика.
Можно использовать камеру или микрофон устройства, воспроизводить звуки и вибрацию. Есть уникальные функции, вроде, распознавания лица, положения глаз, изменение положения слоёв в 3D и создание своих функций с помощью JavaScript Patch.
Со всеми возможностями и примерами вы можете ознакомиться на сайте Origami Studio.
Недостатки
- Есть версия только для macOS;
- Нельзя поделиться ссылкой на прототип. Для удаленных юзабилити-тестов можно отправить файл прототипа пользователю и открыть клиентом на iOS или Android. Для удаленного теста десктопного приложения или сайта, как вариант, продемонстрировать экран и отдать управление респонденту. В оффлайне поддерживается Mirror экрана, нужно подключить мобильное устройство по USB;
- Нет инструмента Handoff для передачи прототипа в разработку, зачем-то корпорация выпилила эту возможность. Файлы прототипов, это бинарники, из которых тоже не получится получить спецификации;
- Корпорация немного забила на развитие продукта, либо не выделяет должного бюджета. Обновления частые, но в основном, это исправления ошибок и редко добавляют новые функции;
- Чтобы скачать Origami Studio и получать обновления, вам потребуется VPN.
Резюме
Мне нравятся оба инструмента, они оба хороши, но использую я их крайне редко.
ProtoPie прост в освоении, а прототипы настолько точные, что респонденты путают прототипы с реальными приложениями.
С Origami Studio можно поиграть и попробовать сделать что-то толковое. Энтузиасты могут попробовать перенести в неё дизайн-систему и уже быстрее собирать высокоточные прототипы. Но эти прототипы не так просто использовать на практике в юзабилити-тестах.
Origami Studio настолько сложный, что время на освоение можно потратить на изучение Python с JavaScript на базовом уровне для создания более сложных прототипов, чем я и занялся. Конечно, освоив программирование на базовом уровне вы не сможете так быстро делать голосовые интерфейсы или отслеживать положение глаз через камеру устройства, но эти знания могут пригодиться гораздо больше.
