Framer Platform для UX24.03.2025 19:46

В самом начале

Framer был создан в 2014 году бывшими дизайнерами из Facebook и Google для создания прототипов с использованием кода, основанный на JavaScript и CoffeeScript. Основные функции включали анимацию и взаимодействие.

Для дизайнера Framer представляет интерес с точки зрения прототипирования и юзабилити тестирования мелких фичей, например создания адаптивных списков с данными либо небольших сценариев где пользователь может переходить от одной страницы в другой используя браузер. Сложность и глубина проработки таких прототипов может быть в разы выше чем в Figma так как Framer непосредственно является page билдером.

Что мы можем сделать c помощью Framer?

• Реальные веб-страницы
  Все что связано с web мы так или иначе можем воспроизвести с помощью Framer

• Дизайн и компоненты
  Создание компонентов для элементов интерфейса как в Figma

• Экспорт и хостинг
  Создание независимых ссылок на прототипы и дежурный хостинг вебсайта

• Отзывчивые макеты
  Каждая страница может иметь любое количество брейкпоинтов как и отдельные компоненты

• Презентацию для разработчиков
  Простой способ показать как должен работать дизайн в реальной среде и учесть все возможные проблемы до имплементации

• Дополнительные интерактивные компоненты для страниц
  Framer позволяет использовать расширенный функционал интерактивных функций который может влиять на восприятие прототипа конечными пользователя (Например: проигрывание видео, смена языка, навигация и хлебные крошки, всплывающие меню, формы которые могут собирать данные и другие функции)

Framer Motion

Framer Motion это простой и интуитивно понятный API для создания сложных анимации и микровзаимодействий. Библиотека позволяет дизайнерам и разработчикам использовать единую среду и создавать анимированные прототипы с минимальными усилиями.

Чем плоха Figma?

• Ограниченная интерактивность
  Прототипы в Figma на 100% статичны

• Менее реалистичное поведение
  Так как Figma предлагает прототипы как статические страницы в одном размере, тяжело предсказать как увидит flow конечный пользователь.

• Нет адаптивности

• Отсутствие поддержки кода
  Нет возможности добавлять embeded участки кода непосредственно на страницу

• Другие ограничения
  Ограничения на создание динамических и интерактивных компонентов, таких как анимированные списки или сложные переходы

Юзабилити тестирование

Figma не всегда позволяет проводить полноценное тестирование из-за определенных ограничений, в то время как во Framer:

• Прототипы выглядят и работают как реальные сайты и приложения;

• Больше возможностей;

• Прямой экспорт из Figma;

• Адаптивно на различных экранах, а значит можно тестировать адаптивность;

• Позволяет интегрировать прототипы с реальными данными;

Здесь для Юзабилити тестирования я использовал сервис UserTesting.com. Я привожу примеры сценариев для тестирования «Matching flow», пользователю требуется пройти путь начиная с регистрации на платформе до бронирования своего первого урока. В процессе тестирования я проверяем как пользователи взаимодействуют с сервисом, сравниваем старый и новый дизайн карточек преподавателей, а также пытаемся понять как новые теги, такие как »Great for Advanced» или «Tech Savvy» влияют на их выбор.

В процессе тестирования я предлагаю пройти несколько этапов поиска преподавателя используя прототип Framer, и оставить голосовой отзыв по каждому пункту связанному с тестируемыми элементами:

• Как вы можете описать учителя основываясь на данных предлагаемых в карточке преподавателя?

• Понятно ли вам что значат бейджи типа »Great for Advanced»?

• Повлияли ли эти бейджи на ваше решение в выборе того или иного преподавателя?

Результатом исследования будет сравнительная таблица в которой будут вынесены:

• План тестирования включающий списки вопросов;

• Подробный отчет по каждому ответу отдельного пользователя;

• Ссылки на записи процесса тестирования;

• Общий позитивный фидбек от группы пользователей;

• Общий негативный фидбек от группы пользователей;

• Рекомендации озвученные пользователями;

• Заключение от модератора теста;

Framer как альтернативный инструмент может помочь в тестировании комплексных сценариев, а также позволяет создавать компоненты со встроенными данными что дает возможность тестирования списков.

Кроме того для получение качественных результатов тестирования часто важны детали, например так как карточки преподавателей содержали интерактивное introduction видео, мы смогли полноценно протестировать сценарий когда пользователь смог оценить информативность карточки полноценно воспользовавшись всеми ее элементами.

Framer далеко не идеальное решение, но как альтернативный инструмент, он может выполнять ряд важных и полезных задач.