Когда в прошлом году мы переделывали процесс бронирования для сети бутик-отелей, наибольшее улучшение показателей завершения заказа произошло не из-за реструктуризации макета или переписывания текстов. Оно появилось благодаря маленькой анимированной галочке, которая появлялась после завершения каждого шага. Эта деталь - микровзаимодействие длительностью едва ли 300 миллисекунд - заметно снизила отказы от формы. Это напомнило нам в очередной раз, что самые маленькие дизайнерские решения часто имеют наибольший вес.
Что такое микровзаимодействия?
Микровзаимодействия - это локальные моменты внутри продукта, которые вращаются вокруг одной задачи. Кнопка, которая слегка меняет цвет при наведении. Переключатель, который скользит с приятной плавностью. Жест «потянуть, чтобы обновить», который запускает короткую анимацию. Каждое из них - микровзаимодействие, небольшой, сфокусированный обмен между пользователем и интерфейсом.
Дэн Саффер, написавший определяющую книгу на эту тему, разбивает их на четыре части: триггер, правила, обратная связь, а также циклы или режимы. Триггер инициирует его (клик, прокрутка, системное событие). Правила определяют, что происходит. Обратная связь сообщает о результате. А циклы определяют, повторяется ли взаимодействие или изменяется со временем. Понимание этой структуры помогает дизайнерам создавать микровзаимодействия, которые выглядят целенаправленными, а не декоративными.
Почему они важнее, чем вы думаете
Пользователи редко замечают хорошие микровзаимодействия, и в этом-то и смысл. Они работают на подсознательном уровне, обеспечивая подтверждение, руководство и восторг, не требуя внимания. Когда вы отправляете форму и видите короткий спиннер, за которым следует индикатор успеха, вы уверены, что действие завершено. Уберите эту обратную связь, и пользователи начнут дважды кликать на кнопки отправки, обновлять страницы и терять доверие.
Мы работали над внутренним инструментом для логистической компании, где сотрудники склада использовали портативные устройства для сканирования посылок. Исходный интерфейс не давал обратной связи при успешном сканировании - товар просто появлялся в списке. Сотрудники постоянно пересканировали посылки, потому что не были уверены, что первое сканирование зарегистрировалось. Добавление тонкой зелёной вспышки и мягкого тактильного импульса резко сократило избыточные сканирования и ускорило весь рабочий процесс.
Добавление «липких» функций
Микровзаимодействия способствуют тому, что дизайнеры продуктов называют «липкостью» - качеству, которое заставляет пользователей возвращаться. Подумайте об удовлетворении от архивирования письма жестом смахивания в хорошо спроектированном почтовом клиенте или о лёгком отскоке, когда вы достигаете конца прокручиваемого списка. Эти моменты создают тактильное, отзывчивое ощущение, которое делает интерфейс приятным в повторном использовании.
В Kosmoweb мы определяем возможности для «липких» взаимодействий, составляя карту пути пользователя и отмечая каждый момент неопределённости или перехода. Каждый из этих моментов - кандидат на микровзаимодействие, которое обеспечивает ясность, вознаграждает прогресс или сглаживает переход между состояниями. Прогресс-бар при загрузке файлов, скелетный экран во время загрузки контента, подсказка, которая появляется, когда пользователь наводится на незнакомую иконку, - всё это не украшения. Это функциональные элементы, которые снижают трение.
Проектирование микровзаимодействий в Figma
Возможности прототипирования Figma развились до того уровня, где мы можем проектировать и демонстрировать большинство микровзаимодействий, не написав ни строчки кода. Smart Animate, варианты компонентов и интерактивные компоненты позволяют нам создавать реалистичные прототипы, которые точно передают разработчикам движение и тайминг.
Наш процесс начинается с определения состояний. Для кнопки это может включать: по умолчанию, наведение, нажатие, загрузка, успех и ошибка. Мы создаём каждое состояние как вариант компонента, а затем связываем их с помощью панели взаимодействий Figma. Прототип становится живой спецификацией - разработчики могут проверять кривые плавности, длительности и переходы между состояниями напрямую.
Для более сложных анимаций мы экспортируем конкретные взаимодействия как Lottie-файлы или предоставляем разработчикам аннотированные спецификации, которые включают точные значения времени, функции плавности (такие как параметры cubic-bezier) и условия триггера. Цель - не оставлять места для интерпретации, чтобы реализованное взаимодействие соответствовало задуманному дизайну.
Избегайте перебора
Существует тонкая грань между интерфейсом, который кажется отзывчивым, и тем, который кажется беспокойным. Каждая анимация потребляет долю внимания пользователя. Наложите их слишком много вместе, и интерфейс начнёт казаться шумным и отвлекающим. Мы следуем простому правилу: если микровзаимодействие не служит чёткой функциональной цели - подтверждению действия, предоставлению обратной связи, направлению внимания, - оно, вероятно, не должно существовать.
Производительность - ещё одна проблема. Анимации, которые вызывают пересчёт макета или работают в основном потоке, могут вызвать рывки, особенно на менее мощных устройствах. Мы придерживаемся CSS-трансформаций и изменений прозрачности, где это возможно, и тестируем на Android-устройствах среднего класса, а не только на новейших флагманских телефонах. Красивая анимация, которая заикается на бюджетном смартфоне, хуже, чем отсутствие анимации вообще.
Делаем это практичным
Если вы хотите внедрить микровзаимодействия в существующий продукт, начните с моментов наибольшего трения. Определите, где пользователи колеблются, где растёт количество ошибок или где концентрируются запросы в поддержку. Это места, где правильно размещённая обратная связь окажет наибольшее влияние.
Создайте небольшую библиотеку повторно используемых паттернов взаимодействия - состояния загрузки, подтверждения успеха, индикаторы ошибок, эффекты наведения - и применяйте их последовательно по всему продукту. Последовательность важна, потому что она обучает пользователей распознавать паттерны. Когда каждое успешное действие подтверждается одинаково, пользователи развивают уверенность в интерфейсе.
В Kosmoweb мы поддерживаем внутреннюю библиотеку паттернов взаимодействия, которая растёт с каждым проектом. Это экономит время, обеспечивает согласованность и даёт нашим дизайнерам общий словарь при обсуждении движения и обратной связи. Инвестиции в каталогизацию этих паттернов окупились много раз.