Framer Platform для UX

Для Прототипирования / Юзабилити Тестирования

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

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

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

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

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

Возможности Framer

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

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

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

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

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

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

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

Интерфейс Framer прост и понятен, панель слоев слева, панель свойств справа

Framer Motion

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

Теги и использование библиотеки в React

Чем плоха Figma?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Примеры вопросов задаваемых в процессе тестирования с usertesting.com

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

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

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

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

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

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

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

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

Пример результатов тестирования

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

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

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