Почему мы так любим кликабельные прототипы
Почти в каждом кейсе Yusmp Group есть ссылка на кликабельный прототип. Мы делимся ими, чтобы у вас было представление о том, как работают наши продукты. Однако интерактивные прототипы создаются еще во время разработки — на стадии аналитики и дизайна. В статье объяснили, почему этот артефакт так важен при создании новых продуктов.
Что такое кликабельный прототип
Кликабельный прототип — это интерактивная схема будущего приложения, которая симулирует взаимодействие пользователя с интерфейсом.
Прототипы могут быть разной степени точности. Это могут быть просто черно-белые эскизы (Wireframes), их используют, когда нужно проверить сценарии взаимодействия и быстро внести коррективы.
Детализированные (high-fidelity) прототипы — это готовые макеты приложения, где все компоненты (карточки, изображения, тексты, кнопки) находятся на своих местах. Здесь используется утвержденный на дискавери-фазе дизайн-концепт, или цветовая схема. Такой прототип может служить фактически основной для разработки приложения.
Это довольно гибкий инструмент, который можно адаптировать под текущие задачи проекта: если нужно проверить гипотезы и получить общие ощущения от продукта — мы ограничиваемся схематичным вариантом. Если важно сосредоточиться на совершенствовании визуального дизайна, то создается высокоточный прототип.
Пример работы детализованного прототипа. Кейс Car and bots.
Зачем нужен
Главная задача прототипов — показать работу и будущего приложения или другой системы и на раннем этапе диагностировать возможные проблемы на пути бизнес — и пользовательских целей.
Еще прототипы демонстрируют работу приложения в динамике, и мы можем оценить состояние потока (flow), то есть все ли идет гладко, быстро и понятно.
Такой инструмент дает возможность дешево и быстро получить обратную связь от заказчика, и, что немаловажно, от целевой аудитории. Именно пользовательское тестирование дает возможность внести изменения в итоговом продукте.
Плюсы использования кликабельных прототипов
Инструмент позволяет проверить юзабилити разрабатываемого продукта до начала написания кода, а значит сократить сроки и бюджет разработки. В прототипы гораздо проще вносить изменения, чем в уже готовые приложения.
С помощью кликабельного прототипа можно наглядно и схематично увидеть сценарии и user flow приложения, способствующие достижению пользователем своих целей.
Зачастую прототипы приводят к неожиданным открытиям и новым идеям, которые могут вывести проектируемый продукт на новый уровень.
Что используем при работе над кликабельным прототипом
В зависимости от конкретной цели, для создания кликабельного прототипа используются разные инструменты:
- Если нам важно показать user flow, рассказать историю, показать сценарии, то скорее мы будем использовать Figma или Invision. В них удобнее создавать генеральный план дизайна, видеть проект целиком.
- Если же нашей целью является демонстрация глубокого взаимодействия, поведения приложения и анимации, то для этого скорее подойдут Protopie, Principle или Framer. Эти программы ориентированы на прототипирование и оживление микровзаимодействий: поведение элементов при взаимодействии, переходы, анимацию и прочие эффекты, которые так же играют не последнюю роль в пользовательском опыте.
Пример работы детализованного прототипа. Веб-приложение для сети аптек
Что важно запомнить о кликабельном прототипе
- Кликабельный прототип — это интерактивная схема будущего продукта.
- Есть два вида: схематичные — чтобы просто увидеть, как пользователь будет взаимодействовать с системой. Детализированные — показывают реальные экраны и могут стать основой для разработки.
- Дают возможность увидеть узкие места на ранней стадии.
- Можно показать конечным пользователям и собрать обратную связь.
- Важные изменения и новые идеи можно вводить быстро и недорого.