Animações e Microinterações no Menu: Encanto ou Distração?

Dono de um café com 18 mesas em Galata, Istambul, pergunta: "Se eu adicionar animações ao menu, os clientes ficam mais tempo?" A resposta está em milissegundos. UX Movement 2023 é claro: 200-300ms parece fluido, acima de 500ms é arrastado. Após introduzir fade-in por scroll, o tempo na página subiu 19% e o abandono caiu 12%.

Durações Ótimas e Curvas de Easing

A duração segue a percepção humana. Abaixo de 100ms não é notado; 200-300ms parece natural; 500ms+ é lento. Para easing, cubic-bezier(0.4, 0, 0.2, 1) — padrão Material — produz movimento natural.

Um stagger de 60ms ao carregar dá toque premium, mas além de 8 cartões fica excessivo. No mobile, 200ms é ideal — durações maiores conflitam com toque.

O Que Funciona e O Que Não

Funciona: aba de categoria com sublinhado deslizante (250ms), botão "adicionar ao carrinho" com scale 1,05x mais ícone de check, pulsação do coração ao favoritar, fade-in no scroll.

• Hover scale 1,02x — sensação tátil
• Bounce do badge do carrinho — chama atenção
• Skeleton loader — antecipa conteúdo

Excessos e Acessibilidade

Excesso de animação é problema de acessibilidade. Respeite prefers-reduced-motion — exigência WCAG 2.1.

Parallax, vídeo autoplay e ícones em giro infinito são distração. O café de Galata parou um badge pulsante após 2 segundos — CTR +23%.

FAQ

Duração ideal? 200-300ms em microinterações, no máximo 400ms em transições.

Quais animações prejudicam? width/height via JS causa reflow; transform e opacity CSS são aceleradas por GPU.

Desativar para idosos? Só via prefers-reduced-motion, não automaticamente.

Achou útil? Compartilhe.