Микро- анимации.

Что такое микроанимация

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

Длительность таких движений измеряется долями секунды, и осознанно их обычно не замечают. Заметно другое - ощущение: интерфейс либо откликается, либо кажется мёртвым.

Хороший пример из мира носимых устройств: в гарнитурах дополненной реальности объект, на который направлен взгляд, едва заметно пульсирует. Ни вспышек, ни звука - просто подтверждение: «я вижу, что ты на меня смотришь». Это и есть суть приёма.

Разберём, зачем движение нужно интерфейсу, где оно работает, где мешает и по каким правилам его делать.

Зачем это интерфейсу

Движение решает четыре практические задачи, а не украшает экран.

Подтверждает действие. Человек нажал - интерфейс отреагировал. Без отклика возникает сомнение: сработало или нет, и появляется второе нажатие.

Показывает связь. Карточка, разворачивающаяся в полноэкранный вид, объясняет, откуда взялся новый экран. Резкая подмена содержимого такого объяснения не даёт, и человеку приходится заново искать глазами, где он находится.

Направляет внимание. Движение притягивает взгляд сильнее цвета и размера. Этим можно подсветить появившуюся ошибку или новый элемент.

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

Из всех четырёх чаще всего забывают первую. Форма без отклика на отправку - распространённая причина повторных заявок и раздражения. Другие типичные потери на пути к заявке разобраны в отдельном материале.

Как это выглядит в российских сервисах

Приём давно не экзотика. В сервисах продажи билетов дата в календаре при наведении не просто подсвечивается, а слегка отскакивает - появляется физическое ощущение выбора.

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

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

Общее у всех примеров одно: движение привязано к смыслу. Оно не добавлено «чтобы было современно», а объясняет, что происходит.

Правила, по которым это делается

• Коротко. Обратная связь на действие - доли секунды. Движение, которое успеваешь осознанно рассмотреть, уже мешает.
• Одно движение на одно действие. Если при нажатии кнопка меняет цвет, размер, тень и подпрыгивает, внимание рассеивается.
• С понятной физикой. Разгон и торможение делают движение естественным. Равномерное перемещение выглядит механическим.
• Одинаково по всему продукту. Разные скорости и характеры движения на соседних экранах создают ощущение, что продукт собран из кусков.
• Не блокируя. Человек должен иметь возможность действовать дальше, не дожидаясь окончания анимации.
• С уважением к настройкам. В системах есть режим уменьшенного движения для тех, кому анимация доставляет дискомфорт. Его нужно учитывать.

Последний пункт часто пропускают, а он относится к доступности: для части людей избыточное движение на экране вызывает физическое недомогание.

Когда движение мешает

Есть ситуации, где анимации делают интерфейс хуже.

Первая - задача, которую человек выполняет много раз подряд. Оформление заказа, заполнение таблицы, работа в административной панели: то, что при первом знакомстве выглядит приятно, на сотом повторении превращается в задержку.

Вторая - слабые устройства и медленная связь. Анимация, которая подтормаживает, производит впечатление худшее, чем её отсутствие. Требования к скорости на мобильных разобраны в материале про мобильную оптимизацию.

Третья - попытка прикрыть движением проблему. Красивая анимация загрузки не компенсирует медленный ответ сервера: человек всё равно ждёт, просто теперь с развлечением.

Четвёртая - декоративное движение без функции. Элементы, которые двигаются просто так, отвлекают от того, ради чего человек пришёл.

С чего начать на своём сайте

Внедрять движение по всему продукту сразу не нужно. Разумный порядок - от мест, где отклик критичен.

1. Кнопки и ссылки: состояние при наведении и при нажатии. Это минимум, без которого интерфейс кажется неживым.
2. Формы: подсветка активного поля, плавное появление подсказки об ошибке, понятное состояние кнопки после отправки.
3. Загрузка: вместо пустого экрана - очертания будущего содержимого.
4. Переходы между разделами: связь между тем, на что нажали, и тем, что открылось.
5. Появление новых элементов: добавленный товар в корзине, новое сообщение, свежий результат поиска.

После каждого шага стоит проверять результат на телефоне и на медленном соединении, а не только на рабочем компьютере. Что ещё влияет на удобство и как это заметить, разобрано в материале про юзабилити, а почему удобство напрямую связано с продажами - в статье про UX/UI-дизайн.

Почему это стоит внимания

Микроанимации не бросаются в глаза - в этом их смысл. Но именно они стоят за фразой «не знаю почему, но этим продуктом приятно пользоваться».

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

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