Микровзаимодействия: Когда Помогают, Когда Мешают
Кнопка, слегка увеличивающаяся, или карточка, плавно въезжающая, заслуживает места; движение в каждом углу страницы нет. Где провести границу.
Команда rabbitclipПубликация: 4 мин чтения
Коротко
Микровзаимодействие — это небольшой отклик, который страница даёт на действие посетителя: клик, наведение, прокрутку. Кнопка, слегка увеличивающаяся, короткий сигнал об успешной отправке формы, меню, плавно открывающееся. Оно заслуживает своего места в тот момент, когда несёт информацию: это было нажато, это прошло успешно, это сейчас открыто.
То же самое движение, добавленное лишь ради украшения без всякой информации, превращается в шум. Каждая карточка, вращаясь появляющаяся на странице, каждый заголовок, печатающий сам себя буква за буквой, заставляет посетителя ждать, а не развлекает его; такие секунды задержки накапливаются и делают страницу медленной на ощупь независимо от её реального времени загрузки.
Ниже три темы: какое движение заслуживает своего места, где проходит граница и как уважать настройку сниженного движения.
Какое движение несёт информацию
Функциональное микровзаимодействие отвечает на вопрос, который задаёт посетитель: сработало ли то, на что я нажал, правильно ли я отправил форму, открыто это меню или закрыто. Короткий индикатор загрузки, появляющийся при нажатии кнопки отправки формы заказа, говорит посетителю, что действие выполняется; без него посетитель может нажать во второй раз, что способно вызвать реальную проблему вроде дублирующей отправки.
Маленькая зелёная галочка, появляющаяся, когда поле формы вступления в спортивный клуб заполнено правильно, относится к той же категории; она показывает посетителю, что он движется в верном направлении, и снижает желание вернуться и всё перепроверить перед завершением.
Где проходит граница
Движение переходит границу, как только длится дольше нескольких секунд, как только в каждом углу страницы играет своя анимация или как только оно отвлекает внимание от реального содержания. Каждый визуальный элемент, скользящий с разной стороны на странице игровой студии, может впечатлить в первый раз, но при повторном визите ощущается как медлительность.
Практическое правило: движение должно заканчиваться прежде, чем начнётся чтение контента. Если элемент всё ещё скользит или мерцает, когда посетитель уже начал читать фразу, длительность нужно сократить или полностью убрать движение.
Уважение к настройке сниженного движения
Некоторые посетители держат включённой настройку «уменьшить движение» на уровне операционной системы; это обычно настройка доступности для людей, испытывающих головокружение или тошноту, вызванные движением. Браузер передаёт эту настройку сайту через сигнал prefers-reduced-motion (MDN Web Docs, prefers-reduced-motion); сайт может считывать этот сигнал и отключать крупные анимации скольжения и вращения, оставляя только действительно функциональные переходы, например смену цвета.
Стандарт WCAG также рекомендует, чтобы движение, вызванное взаимодействием, можно было отключить; это относится к требованиям доступности, а не к предпочтениям дизайна (W3C WCAG 2.1, Animation from Interactions). Если пропустить эту настройку на странице приложения, посетитель, чувствительный к движению, может вовсе не суметь пользоваться страницей.
Как это проверять на практике
Перед запуском сайт стоит просмотреть и в обычном режиме, и в режиме сниженного движения, убедившись в обоих случаях, что ключевые функции — отправка формы, открытие меню, переход между страницами — продолжают работать без сбоев.
- Включить «уменьшить движение» на уровне системы и заново протестировать сайт
- Спрашивать по каждому движению отдельно, несёт ли оно вообще какую-то информацию
- Держать длительность движения меньше секунды, убирать повторяющиеся циклы
- Убедиться, что анимации появления заканчиваются до того, как начнётся чтение контента
Движение может быть и решением о бренде
Для некоторых брендов сдержанное движение — часть идентичности; сайт креативного агентства или игровой студии может нести более игривый язык движения, чем большинство. Для компании по управлению объектами или юридической фирмы та же интенсивность движения может работать против серьёзности, к которой стремится бренд. Правильное количество зависит от отрасли и тона, которого ожидает посетитель.
Состояния загрузки: скелетоны или спиннеры
То, что показывается на экране во время загрузки контента, само по себе решение из области микровзаимодействий. Спиннер говорит только «подождите»; скелетон-экран показывает бледный контур того, как будет выглядеть контент, давая посетителю лучшее представление о том, чего он ждёт.
Бледно-серые блоки в форме карточек, появляющиеся во время загрузки списка товаров, создают меньше ощущения ожидания, чем пустой экран или один спиннер; разница заметнее всего, когда загрузка занимает больше секунды.
Когда использовать звук и вибрацию как обратную связь
Лёгкая вибрация на мобильном устройстве может подтвердить завершение действия даже яснее, чем визуальное движение; но при чрезмерном использовании та же обратная связь становится раздражающей. Лучше всего она работает, если оставлена для действительно важных моментов, а не срабатывает при каждом касании.
Звуковая обратная связь — более редкий и рискованный выбор для сайта; неожиданный звук может напугать посетителя, особенно в тихой обстановке. Если звук всё же добавляется, ему обязательно нужен понятный способ отключения.
На странице приложения показать настоящую вибрацию или звуковую обратную связь продукта в видео обычно безопаснее и эффективнее, чем добавлять тот же эффект на самом сайте.
Движение помогает, когда несёт информацию, и утомляет, когда накапливается как украшение. rabbitclip ограничивает движение его функцией в каждом проекте и по умолчанию поддерживает настройку сниженного движения; то, как текущий сайт использует движение, можно разобрать вместе.
Частые вопросы
Что такое prefers-reduced-motion?
Настройка, которую посетитель включает на уровне операционной системы; браузер передаёт её сайту, который может соответственно сократить крупные движения.
Нужно ли убирать всю анимацию в режиме сниженного движения?
Нет, только крупную — скольжение, вращение, зум; мелкие переходы вроде смены цвета могут оставаться.
Проблема ли анимация появления при загрузке страницы?
Нет, если она заканчивается до начала чтения контента; через несколько секунд она начинает делать страницу медленной на ощупь.
Зависит ли правильное количество движения от отрасли?
Да, игривый язык движения хорошо подходит креативному агентству, но при той же интенсивности может работать против тона юридической фирмы.
Нужно ли использовать скелетон-экран при каждой загрузке?
Нет, при очень коротких загрузках (менее полсекунды) он почти бесполезен; реальная польза проявляется, когда загрузка занимает больше секунды.
