Segundo o Google, “A observação do movimento [de um objeto] nos informa se é leve ou pesado, flexível ou rígido, pequeno ou grande em proporção a outros objetos. O movimento no mundo do design material não é apenas bonito, gera significado sobre as relações espaciais, funcionalidades e intencionalidade do sistema”. (1)
Animações são utilizadas em publicações interativas, aberturas de aplicativos, aberturas de páginas de filmes (exemplo), efeitos de rolagem com paralax, com uso de HTML 5. Orientam a navegação em uma interface e tornam o deslocamento mais agradável, enriquecendo a experiência de uso.
Atividades
■ As animações são relacionadas à funcionalidade e ao sentido geral do conteúdo, com fins deliberados. Seu uso gratuito ou irrefletido pode gerar soluções que pouco acrescentam à experiência de uso.
■ O excesso de animações e efeitos sonoros em uma mesma tela pode cansar e distrair demais os usuários. A adequação ao conceito e ao público orienta a tolerância do público a estes recursos.
■ Evitar, no conteúdo do site, inserir animações semelhantes a anúncios – o público não costuma prestar atenção em anúncios.
■ Sinalizar ao leitor quando a animação exigir longos tempos de download.
Uma barra que indique quanto tempo falta para o arquivo carregar ou um texto introdutório que distraia o usuário enquanto o arquivo está carregando são opções para atenuar o efeito da espera pelo download de arquivos muito grandes.
■ Evitar repetir as animações infinitamente, ainda mais em páginas com texto para leitura. A repetição muitas vezes não é necessária para transmitir a ideia.
■ Não animar elementos críticos da página, como logotipo, slogan ou o título principal.
■ Seja qual for o tempo que se considera ideal para a animação decorativa, procurar reduzi-lo. Nem sempre o tempo dos projetista corresponde ao tempo dos usuários.
■ Quando o tempo da animação inclui uma ação do usuário, deve adequar-se a essa ação. Mas qual o tempo ideal? Pessoas mais velhas tendem a levar mais tempo preenchendo formulários, lendo textos, pessoas mais jovens tendem a querer pular etapas para chegar ao final.
■ Quando as animações aparecem em telas iniciais de um site ou aplicativo, dar a opção para que seja pulada.
(Atualizado em 13.3.2015)
Referências
→ Five ways to animate responsibly, Rachel Nabors (User Interface Engineering, acesso em 3.4.2015)
1) Twelve principles of animation, video, Vimeo (acesso em 3.4.2015) – 12 princípios da animação, desenvolvidos por equipe da Walt Disney Studios
→ Google Material Design – Animation (acesso em 8.3.2015)
→ Livro: Animação e interatividade na web, de Christine Saucier. Market Books
Programas
Google Swiffy – ferramenta para conversão de arquivos em Flash em arquivos HTML (acesso em 14.3.2012)