Segundo o Google, “a percepção da forma tangível de um objeto nos ajuda a ver como deve ser manipulado. A observação de seu movimento 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 ada vez mais são utilizadas em revistas interativas, aberturas de aplicativos, aberturas de páginas de filmes (exemplo), efeitos de rolagem com paralax, com uso de HTML 5 substituindo o Flash. Podem orientar a navegação em uma interface e tornar o deslocamento mais agradável, enriquecendo a experiência de uso.

Atividades relacionadas

Relacionar as animações à funcionalidade e ao sentido geral do conteúdo, aplicando-as com fins deliberados.  O uso gratuito ou irrefletido pode resultar em soluções que pouco acrescentam à experiência de uso.

Evitar o excesso de animações e efeitos sonoros em uma mesma tela, que pode cansar e distrair demais os usuários. A adequação ao conceito e ao público-alvo deve orientar o grau de 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, para não distrair os leitores. A repetição algumas vezes apenas é suficiente para transmitir a ideia. No caso de animações longas, deve-se evitar a repetição.

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: o tempo de usufruto de uma solução pode ser muito longo para quem vê e está com pressa para ir para outra tela.

 Quando o tempo da animação inclui uma ação do usuário, deve se adequar a essa ação. Mas como calcular o tempo ideal? Pessoas mais velhas tendem a levar mais tempo preenchendo formulários, lendo textos, já pessoas mais jovens tendem a querer pular etapas para chegar logo ao final.

Quando as animações aparecem em splash pages ou páginas iniciais do site, dar a opção ao usuário para que decidam se deseja vê-las ou não. Em jogos de uso regular, por exemplo, deve prover um botão que pule uma animação de abertura.

Publicar arquivos de programas como o Flash em versões atrasadas em relação à última, para garantir o acesso de usuários com plug-ins desatualizadas.

Localizar animações de maior duração (e arquivos mais pesados) em níveis mais profundos do site.

(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)