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.

Sinalizar quando a animação exigir longos tempos de download
O exemplo abaixo indica a carregação de um arquivo de 5.000Kb e o status do processo (3%) em relação ao tamanho completo. Este tempo ocioso do usuário pode ser aproveitado com a publicação de informações ou de mensagens publicitárias.

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)