“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 de uma interface e podem tornar o deslocamento agradável, enriquecendo a experiência de uso.
As animações são relacionadas à funcionalidade e ao sentido geral do conteúdo, com fins deliberados. Seu uso gratuito ou irrefletido pode acrescentar pouco à experiência de uso.
O excesso de animações e efeitos sonoros em uma mesma tela pode cansar e distrair 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.
Uma barra que indique quanto tempo falta para o arquivo carregar ou um texto que informe o usuário enquanto o arquivo está carregando atenuam 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 nem sempre é 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 dos usuários.
■ Quando o tempo da animação inclui uma ação do usuário, deve adequar-se a essa ação. 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 de avançar para o final.
(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)