Пользователь нажимает «В корзину» — и ничего не происходит. Нажимает ещё раз, потом третий. В корзине оказывается три одинаковых товара, а человек раздражён и не уверен, что сайт работает. Достаточно было коротко изменить кнопку и показать счётчик корзины, чтобы этого не случилось. Такие маленькие реакции интерфейса на действия называют микровзаимодействиями, и именно они отличают сайт, которым приятно пользоваться, от сайта, который просто работает.
Что такое микровзаимодействие
Микровзаимодействие — это минимальный законченный цикл «действие — реакция». Пользователь что-то делает или система что-то сообщает, интерфейс отвечает коротким понятным сигналом. Примеры повсюду: переключатель плавно меняет положение, поле подсвечивается при ошибке, иконка избранного заполняется цветом, кнопка показывает индикатор загрузки, пока отправляется форма, счётчик корзины увеличивается на единицу.
У каждого микровзаимодействия четыре части. Триггер — то, что его запускает: клик, наведение, ввод, изменение данных. Правила — что именно происходит. Обратная связь — как пользователь узнаёт о результате: изменение цвета, движение, текст, звук, вибрация. Циклы и режимы — что происходит при повторе или в особых состояниях, например, когда товар уже в корзине.
Анимация здесь — один из способов обратной связи, причём самый выразительный. Но не обязательный: иногда лучше мгновенно поменять текст кнопки на «В корзине», чем запускать сложную анимацию полёта товара через весь экран.
Какие задачи решает анимация
Полезная анимация всегда отвечает на вопрос пользователя. Если вопроса нет, анимация — декорация, и к ней надо относиться строже. Мы выделяем пять функций, ради которых движение в интерфейсе оправдано.
- Подтверждение действия. Кнопка нажалась, товар добавлен, форма отправлена, настройка сохранена. Пользователь не гадает, сработал ли клик.
- Показ состояния системы. Индикатор загрузки, прогресс отправки файла, скелетон вместо контента, который ещё грузится. Ожидание с индикацией переносится легче, чем пустой экран.
- Объяснение изменений. Раскрывающийся блок плавно выдвигается, и видно, откуда появился контент. Удалённый из корзины товар уезжает, а остальные смыкаются — понятно, что произошло.
- Указание на связь. Мини-корзина выезжает из иконки в шапке, модальное окно появляется из кнопки, которая его открыла. Пространственная связь помогает ориентироваться.
- Привлечение внимания. Аккуратная пульсация нового уведомления или подсветка поля, которое нужно заполнить. Использовать редко, иначе внимание рассеивается.
Где анимация чаще всего мешает
За годы работы мы составили список приёмов, которые почти всегда ухудшают опыт пользователя, хотя на этапе макета выглядят эффектно.
Появление контента при прокрутке
Блоки выезжают сбоку или проявляются из прозрачности по мере прокрутки. На первой странице это впечатляет, на третьей начинает раздражать: человек прокручивает быстро, а текст ещё не появился. При быстрой прокрутке экран выглядит пустым, а на слабых смартфонах эффект дёргается.
Долгие прелоадеры
Фирменная анимация загрузки на 2–3 секунды перед показом сайта. Пользователь пришёл за информацией, а его заставляют смотреть на логотип. Часть посетителей уходит, не дождавшись.
Автоматические слайдеры
Баннеры, которые переключаются каждые 3–4 секунды, не дают дочитать текст и отвлекают от остального содержимого. Статистика кликов по слайдам дальше первого почти всегда ничтожна.
Параллакс и сложные эффекты
Многослойные фоны, движущиеся с разной скоростью, нагружают процессор, вызывают дискомфорт у людей с вестибулярными нарушениями и редко добавляют смысла. На мобильных их обычно приходится отключать.
Общий знаменатель этих ошибок — анимация, которая заставляет пользователя ждать. Хорошее правило: движение не должно задерживать доступ к контенту или действию ни на мгновение. Если пользователь может кликнуть раньше, чем закончилась анимация, клик должен сработать.
Длительность и характер движения
Самый частый технический просчёт — слишком медленная анимация. Дизайнер в макете выставляет 600–800 миллисекунд, чтобы движение было заметно на презентации, а на живом сайте это ощущается как торможение. Для интерфейсных анимаций работают другие цифры.
| Тип анимации | Длительность | Пример |
|---|---|---|
| Реакция на наведение и нажатие | 100–150 мс | Смена цвета кнопки, подсветка строки |
| Небольшие изменения | 150–250 мс | Переключатель, чекбокс, появление подсказки |
| Раскрытие и сворачивание блоков | 200–300 мс | Аккордеон, выпадающее меню, фильтр |
| Крупные перемещения | 300–400 мс | Выезд боковой панели, модальное окно |
| Уход элементов | на 20–30% быстрее появления | Закрытие окна, скрытие уведомления |
Важна не только длительность, но и кривая ускорения. Линейное движение выглядит механически. Для появления элементов лучше подходит замедление в конце — объект быстро стартует и мягко останавливается. Для исчезновения — ускорение: объект неспешно начинает уходить и быстро пропадает. На смартфонах длительности стоит сокращать примерно на четверть: расстояния меньше, и пользователь ожидает более быстрой реакции.
Ещё одно правило — единообразие. Все анимации на сайте должны подчиняться общим значениям: две-три длительности и две кривые. Если раскрытие фильтра длится 200 мс, а раскрытие вопроса в FAQ — 500 мс, сайт ощущается собранным из разных кусков. Эти значения удобно закрепить в дизайн-системе как токены.
Микровзаимодействия, которые стоит сделать на любом сайте
Не нужно анимировать всё подряд. Есть короткий список взаимодействий, которые дают максимальный эффект при минимальных затратах. Проверьте, все ли они реализованы на вашем сайте.
- Кнопки меняют вид при наведении, нажатии и получают видимый фокус с клавиатуры.
- При отправке формы кнопка блокируется и показывает индикатор, чтобы исключить повторные отправки.
- Добавление в корзину подтверждается изменением кнопки и обновлением счётчика в шапке.
- Ошибки в полях формы появляются сразу после ухода с поля, а не только после отправки.
- Пока загружается каталог или результаты фильтра, показывается скелетон или индикатор.
- Выпадающие меню и аккордеоны раскрываются плавно, а не скачком.
- Уведомления о результате действия появляются в предсказуемом месте и исчезают сами через 3–5 секунд.
- Копирование промокода или реквизитов подтверждается короткой надписью «Скопировано».
На одном из проектов — магазине товаров для дома — мы добавили только два пункта из этого списка: блокировку кнопки при отправке заказа и подтверждение добавления в корзину. Количество дублированных заказов, которые менеджеры вручную отменяли, сократилось с 30–40 в месяц до единиц, а обращения в чат с вопросом «добавился ли товар» пропали совсем.
Производительность и доступность
Как анимировать без тормозов
Браузер способен плавно анимировать далеко не все свойства. Перемещение, масштаб, поворот и прозрачность обрабатываются видеокартой и дают стабильные 60 кадров в секунду даже на недорогих телефонах. Изменение ширины, высоты, отступов, позиции заставляет браузер пересчитывать раскладку страницы на каждом кадре — анимация начинает дёргаться, а батарея садится быстрее. Поэтому опытные фронтенд-разработчики анимируют почти всё через трансформации и прозрачность.
Тяжёлые библиотеки анимации ради пары эффектов — ещё одна частая проблема. Если сайт загружает 80–150 КБ скриптов, чтобы плавно показать три блока при прокрутке, это ухудшает скорость загрузки больше, чем помогает впечатлению. Большинство интерфейсных анимаций реализуется средствами стилей без скриптов. О влиянии каждого лишнего килобайта на продажи мы подробно писали в статье про скорость загрузки магазина.
Уважение к настройкам пользователя
Операционные системы позволяют включить режим «уменьшить движение», и сайт может это учитывать. Для людей с вестибулярными нарушениями крупные перемещения, параллакс и масштабирование вызывают головокружение и тошноту. В этом режиме разумно отключать декоративные эффекты и заменять перемещения простым изменением прозрачности, сохраняя при этом функциональную обратную связь — смену состояния кнопки, индикаторы загрузки.
Никогда не используйте мигание с частотой более трёх раз в секунду. Такие эффекты могут спровоцировать приступ у людей со светочувствительной эпилепсией, и это не та ситуация, где допустим компромисс ради яркого баннера.
Как проектировать и согласовывать анимацию
Анимацию сложно описать словами, поэтому в техническом задании формулировки вроде «плавно появляется» трактуются кем угодно и как угодно. Мы фиксируем для каждого анимированного элемента триггер, длительность, кривую, начальное и конечное состояние. Для сложных случаев дизайнер делает короткий прототип-ролик, который разработчик воспроизводит.
Проверять анимацию нужно не только на мощном компьютере дизайнера, но и на недорогом Android-смартфоне. То, что выглядит плавным на флагмане, на бюджетной модели может превратиться в рывки. Если эффект не тянет слабое устройство, его упрощают или отключают для мобильных.
Полезно также оценить, как анимация влияет на метрики. Если после внедрения эффектов появления при прокрутке выросла доля отказов или снизилась глубина просмотра на мобильных, это повод упростить решение. А вот улучшение обратной связи в формах и корзине обычно проявляется в обратную сторону: меньше повторных кликов, меньше брошенных форм, меньше обращений в поддержку с вопросами «прошёл ли заказ».
Итоги
Микровзаимодействия — это короткие ответы интерфейса на действия пользователя. Они подтверждают, что клик сработал, показывают состояние системы, объясняют изменения на экране и помогают ориентироваться. Хорошая анимация быстрая (100–400 мс), единообразная и никогда не заставляет ждать.
Начните с базового списка — состояния кнопок, блокировка при отправке, обратная связь корзины, ошибки в полях, индикаторы загрузки, — а декоративные эффекты добавляйте только там, где они действительно усиливают смысл. Анимируйте трансформации и прозрачность, учитывайте режим уменьшения движения и тестируйте на слабых устройствах. Тогда движение будет работать на удобство, а не против него.
Нужен сайт или интернет-магазин?
Обсудим задачу, подскажем подходящую платформу и оценим сроки и бюджет — бесплатно и без обязательств.
Обсудить проект
