Анимации и Микровзаимодействия в Меню: Удовольствие или Помеха?

Владелец кафе на 18 столиков в Галате, Стамбул, спрашивает: "Если я добавлю анимации в меню, гости задержатся?" Ответ — в миллисекундах. Исследование UX Movement 2023 однозначно: 200-300мс ощущаются плавно, более 500мс — медленно. После внедрения fade-in анимаций при скролле, время на странице выросло на 19%, а отказы упали на 12%.

Оптимальные Длительности и Easing

Длительность связана с восприятием. Менее 100мс не замечается; 200-300мс — естественно; 500мс+ — тяжело. Для easing подходит cubic-bezier(0.4, 0, 0.2, 1) — стандарт Material.

Stagger в 60мс при загрузке создаёт ощущение премиум, но больше 8 карточек уже излишне. На мобильных 200мс идеал — выше конфликтует с касанием.

Что Работает и Что Нет

Работает: подчёркивание категории со скольжением (250мс), кнопка "в корзину" со scale 1,05x и галочкой, пульсация сердечка при добавлении в избранное, fade-in при скролле.

• Hover scale 1,02x — тактильное ощущение
• Bounce badge корзины — привлекает внимание
• Skeleton loader — задаёт ожидание контента

Перебор и Доступность

Избыток анимаций — проблема доступности. Поддерживайте prefers-reduced-motion — требование WCAG 2.1.

Parallax, autoplay видео, бесконечно крутящиеся иконки — явная помеха. Кафе в Галате остановило пульсирующий бейдж через 2 секунды — CTR +23%.

FAQ

Идеальная длительность? 200-300мс для микро, максимум 400мс для переходов.

Что замедляет производительность? width/height через JS вызывают reflow; transform и opacity CSS — на GPU.

Отключать для пожилых? Только через prefers-reduced-motion, не автоматически.

Было полезно? Поделитесь.