Animações e transições

O uso estratégico de animações e transições pode tornar seu programa mais fácil de entender, mais suave, mais natural e de maior qualidade, e ser mais envolvente. Mas o uso gratuito de animações e transições pode tornar o seu programa perturbador e até mesmo irritante.

As animações dão a aparência de movimento ou mudança ao longo do tempo. Use a animação para dar feedback, visualizar o efeito de uma ação, mostrar a relação entre objetos, chamar a atenção para a mudança ou explicar uma tarefa visualmente.

O Microsoft Windows usa uma animação flash em segundo plano para fornecer comentários de que o objeto foi clicado.

Transições são animações usadas para manter os usuários orientados durante alterações de estado da interface do usuário (UI) e manipulações de objetos, e fazer com que essas alterações pareçam suaves em vez de confusas. Boas transições parecem naturais, muitas vezes dando a ilusão de que os usuários estão interagindo com objetos do mundo real.

Os gadgets da área de trabalho do Windows usam transições suaves entre seus estados concisos e detalhados.

Geralmente, as melhores animações e transições são usadas para se comunicar com os usuários não verbalmente e para tornar as alterações de estado mais naturais e menos percetíveis. Em contrapartida, os menos eficazes são gratuitos, na medida em que não comunicam nada nem chamam a atenção desnecessária. As animações são melhor usadas como uma forma secundária de comunicação. Deverão comunicar informações úteis mas não críticas e, para serem acessíveis, os utilizadores deverão poder determinar informações equivalentes através de outros meios.

Nota: Diretrizes relacionadas a de branding de software, de som e de acessibilidade são apresentadas em artigos separados.

Esta é a interface de usuário correta?

Para decidir, considere as seguintes questões.

Animações

Aplicam-se as seguintes condições?

• A animação comunica visualmente algo útil, como dar feedback, mostrar relações, causas e efeitos ou chamar a atenção para mudanças importantes.
• Ver a animação não é essencial. Informações equivalentes podem ser obtidas de outra forma. Os usuários podem não se beneficiar da animação se:
  • Eles desligaram as animações.
  • A sua atenção está noutro lugar.
  • São deficientes visuais.
  • A animação é obscurecida por outra janela.
  • A animação não é reproduzida devido ao desempenho insuficiente do sistema.
• A animação não afeta a produtividade do usuário. Quer:
  • Acontece rapidamente (200 milissegundos ou menos).
  • Não interfere com a interação ou pode ser interrompido.
  • O usuário tem que esperar de qualquer maneira.
• A animação não afeta o fluxo do usuário.
  • Ou está no centro da atenção do utilizador, ou chama a atenção para algo fora do centro da atenção que é importante ou útil na conclusão de uma tarefa.
  • É facilmente ignorante, não distrai ou irritante.
  • Não se torna cansativo. Os usuários ainda acham apropriado e agradável, mesmo depois de repetidas visualizações.

Em caso afirmativo, considere o uso de uma animação.

Transições

Um objeto ou cena está mudando de estado e todas as condições acima para usar animações, bem como qualquer uma das seguintes condições, se aplicam?

• A mudança de estado é conceitualmente desorientadora, confusa ou difícil de entender.
• A mudança de estado é visualmente chocante, carece de continuidade ou suavidade, ou pisca; ou parece não natural, não polido ou de má qualidade, especialmente se envolver uma área de tela grande.
• Usar uma transição faria com que a mudança de estado parecesse mais rápida.
• A mudança de estado merece especial atenção por parte dos utilizadores.

Em caso afirmativo, considere o uso de uma transição.

Conceitos de design

Animações e transições são uma maneira eficaz de comunicar informações visualmente que, de outra forma, exigiriam texto para explicar ou poderiam ser perdidas pelos usuários.

Incorreto:

Correto:

Usar uma animação comunica a mesma informação, mas de forma natural e discreta. O que prefere ver mil vezes?

Animações e transições não precisam exigir atenção para serem bem-sucedidas. Na verdade, eles são frequentemente usados para evitar chamar a atenção para a mecânica do programa que os usuários não precisam estar cientes. Muitas animações de sucesso são tão naturais que os usuários nem sequer estão cientes delas; em vez disso, os utilizadores apenas notariam a sua ausência. A frequência de ocorrência aumenta a necessidade de sutileza, portanto, salve efeitos que exijam atenção para eventos pouco frequentes que realmente merecem a atenção.

Uma transição do menu Iniciar que evita chamar a atenção.

Além de tornar seu programa mais fácil de entender e se sentir mais suave, animações e transições bem projetadas são uma ótima maneira de adicionar personalidade, caráter e estilo ao seu programa. Eles podem tornar a experiência do usuário mais imersiva e envolvente, dando-lhe uma sensação natural do mundo real.

O Windows 7 destaca os botões da barra de tarefas ao passar o mouse com base na posição atual do mouse e na cor do ícone do programa. Esta abordagem é visualmente atraente, mas subtil, transmitindo uma personalidade humilde.

No entanto, animações e transições são mais eficazes e bem-vindas quando servem a um propósito claro. Eles devem ser usados para melhorar a usabilidade, suavidade e fluxo, e a perceção de qualidade, sem prejudicar significativamente o desempenho.

Embora alguns tipos de animações sejam usados para chamar a atenção do usuário, certifique-se de que a atenção é bem merecida e digna de interromper a linha de pensamento do usuário. O olho humano é sensível ao movimento, especialmente ao movimento periférico. Pode ser difícil para os usuários se concentrarem quando há um botão da barra de tarefas piscando ou um ícone de área de notificação girando. Evite usar animações para interromper ou distrair os usuários, ou chamar a atenção para coisas que não merecem a atenção do usuário.

Incorreto:

Os programas não devem piscar o botão da barra de tarefas, a menos que os usuários devam fazer algo importante imediatamente. Neste caso, a única coisa que o usuário precisa fazer é ativar o programa.

Use animações e transições porque seu programa precisa delas, não apenas porque você pode. E para acessibilidade, não use animação como a única maneira de transmitir informações essenciais. Certifique-se de que os utilizadores podem obter informações equivalentes de uma forma diferente.

Atributos de boas animações e transições

Boas animações e transições atingem o equilíbrio certo entre estes atributos:

• São claramente propositais. Boas animações estão lá porque precisam ser, seja para comunicar informações, fazer uma interação parecer real, ou chamar a atenção para algo digno de nota. E animações propositais são precisas; Se uma animação mostra que uma tarefa está sendo feita, é porque a tarefa está de fato sendo feita.

Incorreto:

Neste exemplo, a animação mostra que uma bateria totalmente carregada está sendo carregada.

• Aparência suave e contínua. Boas animações removem suavemente costuras entre mudanças de estado de cena ou elemento, mostrando relacionamentos e fornecendo uma sensação de lugar e contexto. A continuidade ajuda os usuários a entender como chegaram onde estão e como voltar para onde vieram.

A visualização da janela da barra de tarefas do Windows 7 se transforma em continuidade à medida que o usuário se move de um programa para outro.

• São realistas. Boas animações simulam as propriedades físicas e o comportamento de um objeto no mundo real. Isso ajuda os usuários a prever e entender os resultados de suas interações. Você não precisa modelar o mundo real exatamente, mas se você usar animações realistas, você deve mantê-las consistentes com o mundo real. Os usuários nunca devem ser surpreendidos ou confundidos com os resultados, especialmente com animações usadas para manipulação direta.

Neste exemplo, a animação "sair do caminho" usada pela barra de tarefas do Windows 7 parece mais realista do que um ponto de inserção estático.

• São autênticos. Mesmo objetos que não são encontrados no mundo real podem parecer naturais por serem baseados no comportamento do mundo real de um objeto diferente, mas relacionado. Esta metáfora só funciona se a relação comunicar claramente o propósito e o comportamento pretendidos.

Neste exemplo, a animação "squeegee" da janela usada pelo Windows 7 parece autêntica porque é consistente com a forma como as janelas de vidro podem se comportar no mundo real.

• Use mapeamento natural. Os mapeamentos naturais são físicos ou culturais. Um mapeamento natural de base cultural, por exemplo, pode partir do fato de que, nas culturas ocidentais, as pessoas leem da esquerda para a direita. Consequentemente, para expressar uma sequência temporal de objetos, o objeto do meio é atual, os objetos à esquerda são do passado e os objetos à direita estão no futuro. Avançar no tempo é indicado pelo movimento da esquerda para a direita.

Neste exemplo, o controle do Windows Media Player tem um mapeamento natural porque a reprodução move a posição da esquerda para a direita.

• Ter personalidade. Animações bem escolhidas são ótimas maneiras de adicionar personalidade, personagem e estilo ao seu programa. Eles podem tornar a experiência do usuário mais imersiva e envolvente. Embora o tipo de animação determine o que comunica, a forma específica como a animação é realizada mostra a personalidade do programa. Boas animações projetam a personalidade certa para o seu programa, seja sério ou caprichoso, ou em algum lugar intermediário.

Neste exemplo, o uso de texto animado e perspetiva dinâmica pelo Zune ajuda a moldar sua personalidade.

• Olhe e sinta-se responsivo. Boas animações não prejudicam a produtividade do usuário, bloqueando os usuários de outras interações ou forçando os usuários a assistir. Por mais naturais e envolventes que sejam as animações do seu programa, ninguém quer esperar por elas exclusivamente. Boas animações também parecem responsivas sem serem chocantes por terem um início rápido com um pouso suave. As animações responsivas também se beneficiam ao comunicar seu propósito rapidamente. Os usuários não devem ter que assistir a uma animação por muito tempo apenas para descobrir o que ela está fazendo ou quando é feita. Para manipulação direta, animações responsivas são essenciais para manter uma sensação direta e envolvente do mundo real. Para parecer direto, os pontos de contato de um objeto devem permanecer sob o ponteiro suavemente durante toda a manipulação. Qualquer atraso, resposta instável ou perda de contato destrói a perceção de manipulação direta.

Neste exemplo, a transição de movimento panorâmico por toque parece responsiva mantendo o ponto de contato sob o dedo do usuário durante toda a manipulação.

• Atraia o nível certo de atenção. Boas animações costumam ser sutis e chamam apenas a atenção necessária para cumprir seu propósito. Como resultado, eles não são distraídos, irritantes, excessivamente complexos, excessivamente longos ou repetitivos. Eles não se tornam cansativos depois de repetidas visualizações.

Neste exemplo, a pesquisa do Windows chama temporariamente a atenção para palavras de pesquisa correspondentes e, em seguida, desaparece.

• Pareça especial apenas se for genuinamente especial. A frequência aumenta a necessidade de sutileza, então interações comuns precisam de animações simples que comuniquem uma ideia simples de uma maneira simples. Reserve animações especiais e complexas para experiências especiais e pouco frequentes.

Neste exemplo, o Windows usa uma animação que chama a atenção na inicialização para tornar a experiência especial, mas essa animação seria inadequada em outro lugar.

Você saberá que alcançou o equilíbrio certo quando a experiência geral seria prejudicada se qualquer um desses atributos fosse removido.

Criar um vocabulário de animação

Boas animações têm a ver com uma comunicação visual eficaz, e a consistência é crucial para a sua eficácia. Se você usar uma transição específica, como empurrar uma cena da direita para avançar para a próxima cena, essa deve ser a única transição usada para essa finalidade e essa transição não deve ser usada para qualquer outra finalidade. Atribuir significados diferentes à mesma animação prejudica a sua capacidade de comunicação. Ao atribuir animações e transições específicas a significados específicos, está a criar um vocabulário de animação.

Esse problema se aplica a animações e transições que têm significado, não a genéricas às quais os usuários provavelmente não atribuem significado ou aquelas cujo propósito é ser impercetível. Por exemplo, animações como fades e efeitos especiais como dissolves não têm significado particular, por isso podem ser usados livremente.

Um bom vocabulário atribui animações que modelam o mundo real, o comportamento físico de um objeto. Se você precisar atribuir uma animação a um objeto ou ação que não tenha uma contrapartida do mundo real, escolha uma animação que mostre como o objeto poderia se comportar se fosse real.

Embora o menu Iniciar não seja um objeto do mundo real, seu efeito de foco se acende como um objeto do mundo real quando ativado.

Cada animação de um vocabulário precisa ser claramente distinta. As animações devem ter comportamentos semelhantes apenas se suas ações associadas estiverem relacionadas de forma semelhante. Por exemplo, transições de movimento sugerem navegação, para que você possa usar transições de movimento de direções diferentes para indicar diferentes tipos de navegação.

Você saberá que suas animações e transições não estão se comunicando bem quando os usuários acharem os resultados confusos, surpreendentes ou inesperados. Geralmente, é melhor alcançar um único propósito bem do que vários propósitos não tão bem.

Idealmente, o seu vocabulário de animação deve ser abrangente em todas as áreas do seu programa que precisam deles. Se apenas algumas interações tiverem animações naturais, isso chamará a atenção para aquelas que não têm.

Para saber mais sobre o vocabulário de animação do Windows, consulte a seção Padrões de uso deste artigo.

Conceber a personalidade certa

Enquanto o tipo de animação determina o que comunica, a forma específica como a animação é realizada fala com a personalidade do programa e reforça a sua marca.

A personalidade do seu programa deve refletir a natureza de suas tarefas e a personalidade de seus usuários, para que não seja uma escolha arbitrária. Em vez disso, uma personalidade bem desenhada deve sentir-se autêntica; nunca tente forçá-lo. A personalidade deve fazer uma conexão emocional com o usuário. Alguns fatores a considerar:

• Tarefas: Sério ou divertido; opcional ou obrigatório.
• Consequências: Grave ou menor.
• Custo: Grátis ou comprado; se comprado, preço moderado ou caro.
• Foco no usuário: Grupo relativamente restrito de usuários-alvo, ou público geral amplo.
• Ambiente do usuário: profissional, casual ou doméstico.
• Idade do usuário: Mais jovens ou mais velhos.
• Frequência de uso: Frequente ou pouco frequente.

A combinação desses fatores ajuda a determinar uma personalidade apropriada para o seu programa. Aqui estão algumas combinações adequadas para tipos comuns de programas:

Aplicações de produtividade

Naturalmente, as aplicações de produtividade devem concentrar-se na produtividade. Embora algumas experiências especiais possam se destacar, a maioria das outras animações deve ter estas características:

• Pequeno
• Natural, realista
• Subtil, subjugado
• Rápido e eficiente
• Descontraído

Utilitários

Os utilitários são normalmente usados brevemente, de modo que seu uso de animação pode ser mais agressivo:

• Realista, ilustrativo, autoexplicativo
• Cofre
• Envolvente

Entretenimento, jogos

Como o objetivo desses programas é envolver e encantar os usuários, as animações e transições podem ser muito mais agressivas por terem estas características:

• Grande (possivelmente tornando-se parte integrante da experiência)
• Artificial, surreal
• Impactante, vibrante
• Emocional, brincalhão, caprichoso
• Energético

Fazer uma conexão emocional é tão importante para programas de entretenimento que é aceitável dobrar algumas regras se isso ajudar a fazer com que os usuários se apaixonem pelo programa. Por exemplo, é aceitável se uma animação ou transição se tornar cansativa após a centésima vez, se a maioria dos usuários provavelmente não usar o programa com frequência.

Geralmente, animações e transições pequenas, naturais, moderadas, eficientes, mas descontraídas são a aposta mais segura. Transições com essas características normalmente tomam o caminho mais curto do início ao fim, começam rapidamente, terminam suavemente e não ultrapassam. Além disso, transições bem projetadas são projetadas para funcionar bem em toda a gama de distâncias em que serão usadas.

Desempenho de animação

Ao projetar animações, certifique-se de que elas não afetem a capacidade dos usuários de usar seu programa de forma eficiente. Geralmente, faça com que suas animações sejam lentas o suficiente para cumprir seu propósito, mas rápidas o suficiente para que elas não interfiram na capacidade de resposta, exijam muita atenção ou se tornem cansativas.

Incorreto:

Embora essa animação de virar página tenha uma sensação envolvente do mundo real, ela diminui a produtividade dos usuários ao demorar mais para virar páginas.

Transições breves (200 milissegundos ou menos) são um caso especial (especialmente quando muitas vezes funcionam com atraso) porque os usuários estarão cientes de que precisam esperar uma fração de segundo por eles. Os usuários estão dispostos a esperar por tais animações se:

• A espera percebida é extremamente breve (200 milissegundos ou menos).
• A transição faz com que a interação pareça mais suave e natural.
• A transição faz com que a interação pareça mais responsiva.
• Qualquer atraso ajuda a manter o usuário no controle da interação.

Os usuários aceitarão um breve atraso para a animação de reordenação do botão da barra de tarefas porque é muito breve e torna a interação mais natural.

Há três maneiras pelas quais as animações podem afetar negativamente o desempenho: velocidade, capacidade de resposta e perceção.

Para velocidade, algumas animações são facetas visuais sobre tarefas que consomem muita CPU, então a última coisa que você deve fazer é tornar essas tarefas mais lentas com animações com uso intensivo de CPU. As animações mais intensivas em CPU ("animações pesadas") tendem a:

• Envolva muitos elementos que se movem de forma independente.
• Jogue por uma longa duração ou distância.
• Envolva uma grande quantidade de espaço na tela.
• São matematicamente intensivos.

Animações com menor impacto no desempenho:

• Envolva um único objeto.
• Jogue por uma curta duração ou distância.
• Envolva uma pequena quantidade de espaço na tela.
• Não são matematicamente intensivos.

Para garantir um bom desempenho, animações pesadas devem ser usadas apenas para tarefas que não exigem muita CPU, enquanto animações leves podem ser usadas em qualquer lugar.

Para a capacidade de resposta, a maioria das animações e transições deve ser projetada para que os usuários possam interagir enquanto a animação está em execução. A menos que uma animação faça parte de um processo, torne-a independente da interação principal do usuário e permita que os usuários a interrompam.

Uma animação pode não afetar negativamente o desempenho de uma tarefa na realidade, mas os usuários podem ter a perceção de que isso acontece. Por exemplo, não use uma animação que pareça pesada para uma tarefa lenta e com uso intensivo de CPU, mesmo que não prejudique o desempenho, porque os usuários podem concluir que a animação é a razão pela qual a tarefa é lenta. Se algo parecer lento, parecerá lento, por isso é melhor usar animações que pareçam simples, leves e rápidas. O uso de animações com inícios rápidos para tarefas com uso intensivo de CPU ajuda.

Arriscado:

Embora a animação na caixa de diálogo de cópia de arquivo do Windows não prejudique o desempenho da cópia de arquivo, ela corre o risco de fazer com que os usuários pensem que sim.

Também arriscado:

Neste exemplo, a animação de progresso de aparência lenta na barra de endereços do Windows Explorer faz com que algumas tarefas pareçam dolorosamente lentas.

Animações e transições não têm valor se sua qualidade for tão ruim que tornem a experiência menos suave e menos envolvente. Para manter sua qualidade, as animações devem ser projetadas para degradar-se graciosamente sempre que recursos suficientes do sistema não estiverem disponíveis. As animações podem degradar-se por terem variações que requerem menos recursos (como comprimentos mais curtos ou taxas de fotogramas mais baixas) ou até mesmo não serem executadas. Independentemente dos recursos disponíveis, certifique-se de que as animações têm alta qualidade e se parecem com animações em vez de bugs de software.

Finalmente, se os usuários acreditam que as animações e transições do seu programa prejudicam sua produtividade, há uma boa chance de que alguns usuários queiram desativá-los. Para suportar essa capacidade, respeite a opção de Desativar todas as animações desnecessárias encontradas na Central de Facilidade de Acesso do Windows.

Atrair o nível certo de atenção

Embora apenas alguns tipos de animações e transições sejam projetados especificamente para atrair a atenção do usuário, eles devem ser projetados para atrair o nível certo de atenção para cumprir bem seu propósito. Quais são as diferentes maneiras de atrair a atenção e como escolher a correta?

Efeitos de animação

Diferentes efeitos de animação atraem diferentes níveis de atenção. A lista a seguir resume os métodos mais comuns, começando com os que mais chamam a atenção:

• Piscando rapidamente. Exige atenção imediata. Pode quebrar a concentração dos usuários, não importa onde o piscar está ocorrendo.
• Piscar moderadamente. Mesmo, mas exige menos atenção com menor frequência.
• Bouncing. Percetível na visão periférica e relativamente exigente na natureza. É provável que os utilizadores se apercebam, mas só podem continuar a concentrar-se noutro local se a duração for curta.
• Moção. Percetível na visão periférica, mas não exigente. No entanto, movimentos complexos ou 3D atraem mais atenção do que movimentos simples ou 2D. É provável que os utilizadores se apercebam, mas podem continuar a concentrar-se noutro local.
• Pulsação moderada. Percetível, mas não distrai na visão periférica. Os utilizadores podem continuar a concentrar-se noutro local. Pode pulsar brilho, cores e tamanhos.
• Pulsação/brilho lento. Percetível, mas sutil. Atrai mais atenção do que um efeito estático, mas os usuários podem não notar a animação, a menos que já estejam procurando.
• Desvanecer-se. Ainda menos percetível. Atrai mais atenção do que um efeito estático, mas os usuários podem não notar a animação, a menos que já estejam procurando.
• Realce estático/brilho. Percetível se os usuários optarem por olhar, mas não exige atenção se estiver em outro lugar.
• Ambiente/natural. Propositadamente não percetível por ter uma aparência natural do mundo real.

Para determinar a abordagem certa para seu programa ou recurso, considere como esses fatores se relacionam com os cenários do seu recurso.

Por exemplo, suponha que você está projetando um programa de mensagens instantâneas e alguém acabou de enviar uma mensagem ao usuário. Este cenário requer a atenção do usuário, deve ser percetível em qualquer lugar, e geralmente o usuário vai querer responder rapidamente. Este cenário sugere que uma animação intermitente moderada seria uma boa escolha. Por outro lado, suponha que você queira informar aos usuários que um trabalho de impressão foi concluído. Os usuários devem ser capazes de continuar a se concentrar e trabalhar produtivamente em outro lugar, e é aceitável se os usuários não perceberem. Este cenário sugere que pulsar ou brilhar moderadamente a lentamente seria uma boa escolha.

Duração

A duração apropriada para uma animação de atenção depende do cenário e do tipo específico de animação usado. Quanto mais atenção um efeito de animação exigir, menor deve ser a duração. Enquanto efeitos muito sutis que exigem pouca atenção (como pulsação lenta) podem ser jogados indefinidamente, efeitos que exigem atenção só devem ser jogados entre 1 e 3 segundos. Qualquer coisa mais longa corre o risco de tornar a animação avassaladora e irritante.

No Windows 7, a barra de tarefas pisca para chamar a atenção por apenas um segundo. Mais tempo seria chato.

Efeito decaimento

Você deve projetar animações que chamem a atenção com base na suposição de que, se os usuários não responderem imediatamente, é porque estão ocupados fazendo outra coisa e não querem ser interrompidos. Assim, o seu objetivo deve ser atrair a atenção sem exigi-la.

Para obter o equilíbrio certo de atrair a atenção sem exigi-la, decaia a intensidade de um efeito ao longo do tempo. Por exemplo, para atrair a atenção, você pode tornar o efeito inicialmente forte, mas depois retardar o efeito rapidamente. Ao fazer isso, o poder de atração é principalmente determinado pelo efeito inicial, mas a impressão geral do usuário é determinada principalmente pelo seu acabamento.

No Windows 7, o efeito de flash da barra de tarefas diminui no final.

E o PowerPoint?

As transições do Microsoft PowerPoint muitas vezes violam deliberadamente essas diretrizes porque são projetadas para chamar a atenção para transições de slide e exigem que os usuários esperem por elas. Além disso, eles não têm nenhum significado particular, então não comunicam nada além do fato de que um slide está mudando.

As transições no estilo PowerPoint, quando usadas corretamente, têm estas finalidades:

• Eles dividem apresentações longas em pedaços menores, forçando o apresentador a fazer uma pausa.
• Eles chamam a atenção do público para mudanças na apresentação, ajudando as pessoas a se reconcentrarem se suas mentes se perguntaram.
• Eles dão à apresentação um ritmo para que ela não pareça monótona ou avassaladora.
• O seu estilo reflete a personalidade do apresentador ou do material.

Embora esses sejam objetivos importantes para uma apresentação, tais transições chamariam atenção desnecessária na interface do usuário da maioria dos tipos de programas e se tornariam cansativas rapidamente.

Conclusão: Não use transições no estilo PowerPoint como modelo para seu programa.

Se você fizer apenas seis coisas...

1. Use animações e transições para tornar seu programa mais fácil de entender e se sentir mais suave e envolvente. Devem ter um propósito claro. Não use animações só porque pode, ou para chamar a atenção desnecessária para o seu programa.
2. Defina um vocabulário de animação e use-o de forma consistente durante todo o seu programa. Use o vocabulário de animação do Windows 7 quando apropriado.
3. Use as características das suas animações para dar personalidade ao seu programa e reforçar a sua marca.
4. Torne a maioria das animações simples, breves e sutis. Lembre-se de que as animações não precisam exigir atenção para serem bem-sucedidas. Se uma animação for apropriada e natural, os utilizadores apenas notarão a sua ausência.
5. Torne as suas animações rápidas e responsivas e dê-lhes uma sensação leve. Não importa o quão envolventes sejam suas animações, ninguém vai querer sentir que está esperando por elas. Projete animações mais pesadas para ter degradação graciosa.
6. Design para o longo prazo. Se uma animação for irritante, perturbadora ou cansativa, redesenhe-a ou remova-a.

Padrões de utilização

As animações têm vários padrões de uso:

Utilização	Descrição
Hover feedback para mostrar onde está o ponto de interação.	Indica que o ponto de interação está ativo. O foco também pode ser mostrado através de um efeito estático. Vocabulário do Windows: Exibe o efeito de focalização (retângulo delimitador, realce, ampliação) com um efeito de fade in/fade out para suavidade. No leitor de multimédia digital Zune, as capas dos álbuns realçam e adicionam controlos de reprodução ao pairar.
Clique de comentários para mostrar que um objeto clicável é responsivo e recebeu um clique.	Indica que um objeto foi clicado. Vocabulário do Windows: Fundo do objeto Flash no evento Click Down. Para mostrar o contato por toque, use um efeito cascata. O toque exibe uma animação em cascata para que o usuário saiba que a interação foi reconhecida.
Feedback da seleção para mostrar que um objeto está selecionado.	Indica que um objeto está selecionado. A seleção também pode ser mostrada através de um efeito estático. Vocabulário do Windows: Desenhe o retângulo de seleção com um efeito de fade in/fade out para suavidade. No Zune, as capas dos álbuns piscam ao clicar e, em seguida, obtêm um retângulo de seleção na seleção.
Feedback de progresso para mostrar que uma tarefa está sendo executada.	O feedback de progresso indica que uma tarefa está progredindo, geralmente com indicadores de atividade, barras de progresso ou animações que ilustram a tarefa. O feedback de progresso determinado mostra aproximadamente quanto da tarefa foi feito e quanto resta, enquanto o progresso indeterminado indica apenas que a tarefa está sendo feita. Vocabulário do Windows: indicadores de atividade giratória, barras de progresso, planos de fundo de progresso, animações de ilustração. Neste exemplo, o Windows Live Messenger exibe comentários de progresso indeterminado durante a entrada.
Atrator para mostrar que algo precisa da atenção do usuário.	Atraia o nível certo de atenção quando objetos significativos são criados ou precisam de atenção (muitas vezes devido a mudanças), ou eventos importantes ou urgentes acontecem. Veja atraindo o nível certo de atenção para técnicas de design. Vocabulário do Windows: piscando, em movimento, pulsando, brilhando, brilhando. A barra de ferramentas do Windows Live é animada na primeira aparição para tornar óbvio onde está.
Relacionamento para mostrar a relação entre objetos ou causalidade em efeitos.	Mostre relacionamentos, especialmente quando o relacionamento pode não ser compreendido ou esperado, de uma forma que não distraia ou confunda. Vocabulário do Windows: Transformação, transporte, mudança física, como virar, crescer a partir de uma fonte pontual, encolher para um destino pontual. Neste exemplo, a animação mostra a relação entre a configuração gama e seu efeito na exibição.
Ilustração/Pré-visualização para explicar visualmente um conceito, uma tarefa ou o efeito de um comando.	Uma animação ou vídeo que explica um conceito ou como algo funciona visualmente, seja para complementar ou substituir uma explicação textual. Isso permite que os usuários executem tarefas ou escolham comandos de forma eficiente e confiante. Neste exemplo, os comandos "mostrar-me" do Painel de Entrada do Tablet PC usam ilustrações para mostrar como corrigir, excluir, dividir e juntar.

As transições têm vários padrões de uso:

Utilização	Descrição
Objeto crescer/encolher/aparecer para alterar o tamanho ou o estado de um objeto sem problemas.	O objeto muda entre estados, possivelmente durante a movimentação. A transição mantém os usuários orientados durante as alterações. Vocabulário do Windows: Transformar, alterar tamanho, objetos deslizar para dentro ou para fora. Neste exemplo, o gadget Meteorologia se transforma de seu estado conciso para exibir sua caixa de diálogo Opções.
Conteúdo mostrar/ocultar/alterar para mostrar, ocultar ou alterar o conteúdo sem problemas, normalmente para divulgação progressiva.	O interior da janela é remodelado para exibir mais, menos ou conteúdo diferente. A transição mantém os usuários orientados durante as alterações. Vocabulário do Windows: Painel desliza para dentro ou para fora. As janelas do submenu aparecem e desvanecem. conteúdo diferente desaparece ou rola. A Calculadora do Windows tem uma transição suave entre os modos de visualização.
Controle ou acessibilidade mostrar/ocultar para mostrar ou ocultar suavemente os controles ou suas possibilidades ao pairar ou mover o mouse, a fim de simplificar a aparência visual normal.	Exibir controles quando os usuários estiverem passando o ponteiro sobre uma área de comando ou exibir recursos quando os usuários estiverem passando o mouse sobre um controle. Passar o mouse sobre essas áreas indica que o usuário pretende interagir. Os preços podem se esconder se o ponteiro ficar parado. Neste exemplo, os controles do Windows Media Player aparecem ao passar o mouse quando estão no modo de tela cheia.
Transições de cena para fazer uma transição de cena suave e perfeita, a fim de evitar a atenção.	Mudanças abruptas de cena podem ser chocantes, especialmente para áreas de tela grande, portanto, use transições de cena para criar suavidade e continuidade, e para fornecer contexto. As transições de cena são projetadas para serem naturais e discretas, para evitar chamar a atenção para o processo de transição em si. Vocabulário do Windows: Fade In/out; desvanecimento cruzado; deslizar para dentro/esquerda, para fora/direita, para cima, para baixo; empurra e cobre. Neste exemplo, o papel de parede da área de trabalho do Windows desvanece suavemente entre as imagens para fazer com que a transição pareça suave e controlada.
Transições de cena especiais para chamar a atenção para uma mudança de cena para torná-la especial ou redirecionar a atenção do usuário.	Enquanto a maioria das transições de cena não deve chamar a atenção para o processo de transição, algumas são projetadas para quebrar o fluxo e chamar a atenção, a fim de enfatizar que algo diferente está prestes a acontecer. Para chamar a atenção, transições de cena especiais são projetadas para não serem naturais e terem alto impacto visual. Neste exemplo, o PowerPoint usa transições que chamam a atenção para atrair o público para a mudança.
Manipulações diretas para mostrar o efeito de manipulações diretas (como mover, deslocar/deslocar, girar e ampliar).	A transição mostra o efeito da manipulação em tempo real. O efeito deve parecer suave, contínuo e consistente com o mundo real. Mover e girar pode não ser contínuo em alguns lugares para indicar restrições ou prováveis escolhas preferidas. O zoom torna o conteúdo maior ou menor, possivelmente alterando o nível de detalhe de acordo. Neste exemplo, a Lupa amplia suavemente entre os níveis.
Manipulações diretas incorretas para indicar que uma manipulação direta (como mover, rolar/deslocar) foi tentada, mas não pôde ser feita.	A transição mostra a manipulação que está sendo tentada, mas volta ao estado original. Muitas vezes, o efeito parece que a manipulação não pode ser realizada devido a alguma restrição física do mundo real. Essas animações são usadas em vez de mensagens de erro baseadas em texto, o que interromperia a sensação do mundo real da manipulação. Vocabulário do Windows: Bounce Neste exemplo, o documento é devolvido para mostrar que o usuário chegou ao fim.
Classificar, filtrar, reordenar transições para indicar que a apresentação ou o conteúdo de uma coleção de itens foi alterado.	A transição mostra (ou, para mudanças complexas, sugere) o efeito da mudança. removidos Neste exemplo, a Pesquisa Visual do Bing usa uma transição de filtro. Neste exemplo, o Windows Media Center utiliza uma transição de reordenação como uma experiência especial enquanto uma música está a ser reproduzida.
Transições de desempenho para fazer com que uma ação pareça acontecer mais rapidamente.	Embora qualquer transição tenha o potencial de fazer com que uma ação pareça acontecer mais rapidamente, o principal objetivo dessas transições é melhorar a perceção de desempenho e capacidade de resposta. Uma boa técnica é mostrar a tarefa que está sendo executada em etapas deliberadas. Por outro lado, atrasar a ação, renderizar os resultados de forma aleatória ou usar um indicador de atividade será lento. Vocabulário do Windows: Execute a ação em etapas, com transições suaves entre os estágios. Neste exemplo, uma Lista de Atalhos da barra de tarefas exibe imediatamente os itens padrão e, em seguida, desliza para fora para exibir os destinos assim que a lista estiver pronta. Isso disfarça o tempo necessário para construir a lista. Por outro lado, atrasar a exibição inicial pareceria não responder e exibir uma lista incompleta ou feedback de progresso seria muito mais lento.
Experiências especiais para envolver e encantar os usuários durante experiências pouco frequentes, especiais que são importantes para o seu programa e têm toda a atenção do usuário.	Embora qualquer transição tenha o potencial de ser uma experiência especial, essas transições são melhor reservadas para experiências pouco frequentes que são verdadeiramente especiais para o seu programa. Transições personalizadas são usadas para dar uma sensação especial. Branding e personalidade são muitas vezes elementos de design importantes. Ao contrário de outros padrões, experiências especiais podem exigir atenção, ser pesadas e exigir que os usuários esperem um momento. Consequentemente, essas transições se desgastam rapidamente se usadas em excesso, porque a experiência não é mais especial. Neste exemplo, o Windows Media Center exibe uma animação durante o carregamento para envolver imediatamente os usuários.

Orientações

Comunicação eficaz

• Defina e use um vocabulário de animação para garantir que suas animações e transições tenham um significado consistente e use-o consistentemente em todo o programa. A maioria dos vocabulários deve incluir entradas para aparência e desaparecimento de cenas e objetos, navegação, interação básica (pairar, selecionar, clicar), manipulação e interação de objetos (mover, soltar, redimensionar, rolar, deslocar, ampliar, girar, filtrar) e atrair a atenção. Um significado consistente é crucial para uma comunicação eficaz.

• Sempre que possível, use o vocabulário de animação do Windows. Embora seu programa possa ter um público diferente e necessidades diferentes, muitas vezes os benefícios da consistência e familiaridade superam os benefícios de ser diferente. Se o vocabulário do seu programa deve ser diferente, use os mesmos tipos básicos de animação do Windows, mas dê-lhes a personalidade certa para o seu programa.

• Não atribua significados específicos a animações e transições genéricas em um vocabulário de animação. Transições genéricas como fades e efeitos especiais como dissolves não têm significado particular (além de aparecer ou desaparecer), por isso podem ser usados livremente.

  Incorreto:

  

  Neste exemplo, um cross-fade é usado incorretamente para navegar até o próximo item. Como os desvanecimentos cruzados não têm um significado específico, essa transição não fornece contexto.

• Faça com que as entradas de vocabulário sejam claramente distintas. Ações relacionadas podem ter efeitos semelhantes (por exemplo, ampliar e reduzir deve ter transições inversas), mas ações não relacionadas devem ter efeitos claramente distintos (por exemplo, ampliar nunca deve ser confundido com rotação).

• Mantenha os efeitos do mundo real realistas e consistentes. Se você usar animações e transições realistas, mantenha a experiência consistente com o mundo real. Os usuários nunca devem ser surpreendidos, confundidos ou enganados pelos resultados. E, por uma questão de coerência, não misture metáforas.

• Dê animações inversas a ações inversas. Isso atende às expectativas do usuário e simplifica o vocabulário. Por exemplo, se um painel aparecer deslizando para dentro, remova-o deslizando para fora não com algum outro efeito.

• Torne as animações compreensíveis. Os usuários devem ser capazes de entender rapidamente o propósito de uma animação. É possível fazer uma animação muito pequena, muito breve (menos de 50 milissegundos) ou tão sutil que os usuários não conseguem compreender seu propósito. Nesses casos, redesenhe para deixar o significado claro ou remova.

  Incorreto:

  

  Neste exemplo, o efeito é tão pequeno e sutil que poucos usuários conseguem compreender seu propósito. Melhor redesenhar ou remover.

Padrões

Hover feedback

• Para parecer responsivo, esforce-se para reproduzir a animação dentro de 50 milissegundos após entrar ou sair do estado de focalização.
• Para parecer rápido, faça com que a duração das animações de foco seja inferior a 50 milissegundos.
• Use um efeito de fade in/fade out de pairar. Isso torna os efeitos de focalização claramente distintos do feedback de clique e seleção.

Clique de comentários

• Para parecer responsivo, esforce-se para reproduzir a animação dentro de 50 milissegundos do evento click down. Os eventos de clique não precisam de feedback de cliques.
• Para parecer rápido, faça com que a duração das animações de clique seja inferior a 50 milissegundos.
• Use um efeito de piscar ou piscar em segundo plano. Isso torna os efeitos de clique claramente distintos do foco e do feedback de seleção. Como clicar requer focalização, faça do feedback do clique uma adição suave ao feedback do foco.

Feedback da seleção

• Para parecer responsivo, esforce-se para reproduzir a animação dentro de 50 milissegundos após a seleção ou desseleção.
• Para parecer rápido, torne a duração das animações de seleção inferior a 50 milissegundos.
• Use um efeito de retângulo de seleção de fade in/fade out. Isso torna a seleção claramente distinta do feedback de foco e clique.

Feedback de progresso

• Use um indicador de atividade quando uma ação não puder ser executada em um segundo. Isso indica que o comando foi recebido.
• Use uma barra de progresso quando uma tarefa demorar mais de cinco segundos. Para obter mais diretrizes, consulte Barras de progresso.
• Use animações de feedback de progresso que ajudam os usuários a visualizar o efeito de tarefas de longa execução. Evite animações de feedback de progresso desnecessárias Se uma animação não comunicar nada útil, use uma barra de progresso.
• Ter estados de conclusão e falha claramente identificáveis. Os usuários devem ser capazes de determinar esses estados finais rapidamente.
• Pare de mostrar o progresso quando a tarefa subjacente não estiver progredindo. Os usuários precisam ser capazes de determinar se o progresso não está sendo feito e reagir de acordo.

Atratores

• Use atratores com contenção. A menos que as informações sejam urgentes, críticas ou suscetíveis de afetar o comportamento imediato do usuário, geralmente é melhor alterar o estado discretamente e permitir que os usuários descubram a alteração por conta própria. Resolva distrações, não detetabilidade.

  

  Neste exemplo, o ícone da área de notificação da rede sem fio usa uma animação para problemas críticos, mas permite que os usuários descubram sinais fracos por conta própria.

• Escolha uma animação que chame o nível certo de atenção. As animações atratores devem chamar atenção suficiente para si mesmas para cumprir seu propósito, mas não mais. Se o usuário deve agir imediatamente, escolha um efeito que exija atenção, não importa para onde o usuário esteja olhando. Para outras situações, consulte a seção Atrair o nível certo de atenção para obter a combinação certa de atenção, visibilidade e urgência.

  Incorreto:

  

  Os Assistentes do Microsoft Office atraíram atenção desnecessária para si mesmos.

• Se o usuário não responder, não repita a animação ou use animações contínuas. Em vez disso, suponha que o usuário optou por não agir agora, mas pode agir mais tarde. Animações contínuas tornam difícil para os usuários se concentrarem em qualquer outra coisa.

Animações de relacionamento

• Use animações de relacionamento para mostrar de onde os objetos vieram ou para onde foram.
• As animações de relacionamento devem começar ou terminar com o objeto selecionado. Não mostre relações entre objetos com os quais o usuário não está interagindo no momento. Se os usuários perceberem, o que eles notarão é a distração.

Ilustrações/pré-visualizações

• Use visualizações para mostrar o efeito de um comando sem que os usuários precisem executá-lo primeiro. Usando visualizações úteis, você pode melhorar a eficiência e a facilidade de aprendizado do seu programa e reduzir a necessidade de tentativa e erro.
• Use ilustrações e visualizações que tenham uma interpretação clara. Têm pouco valor se forem confusos.
• Reproduza apenas uma ilustração de cada vez para evitar sobrecarregar os utilizadores. Se várias ilustrações simultâneas forem possíveis, use o mouse ou um botão de reprodução para permitir que os usuários indiquem seu interesse.
• Reproduza uma ilustração automaticamente se for o objetivo principal da janela ou página. Caso contrário, se for opcional, permita que os usuários o reproduzam quando estiverem prontos.
• Reproduza animações na velocidade ideal: não tão rápido que são difíceis de entender, mas não tão lentos que são tediosos de assistir.

de crescimento/encolhimento de objetos

• Não corte conteúdo durante um redimensionamento. Expanda contêineres antes de adicionar conteúdo. Remova o conteúdo antes de reduzir os contêineres.

  Incorreto:

  

  Neste exemplo, o conteúdo é cortado durante um redimensionamento.

Conteúdo mostrar/ocultar/alterar

• Exiba informações importantes estaticamente. Os usuários não devem ter que acessar informações importantes por meio de divulgação progressiva.

Controle ou acessibilidade mostrar/ocultar

• Exiba controles importantes quando o usuário posicionar o ponteiro em qualquer lugar dentro da janela ou painel ou, se estiver em tela cheia, ao mover o mouse. Os usuários não devem ter que caçar esses controles, então torne sua descoberta certa.

  

  Neste exemplo, o Windows Media Center exibe seus controles sempre que o ponteiro está sobre a janela.

• Exiba controles secundários ou permissões de controle quando o usuário posiciona o ponteiro sobre ou perto dos comandos. Para facilitar a descoberta, torne a localização óbvia e o alvo grande.

  

  Neste exemplo, o Windows Live Messenger exibe um comando secundário quando o ponteiro está perto do canto superior direito.

Transições de cena

• Faça transições de cena físicas consistentes com o mapeamento natural. As pessoas leem da esquerda para a direita nas culturas ocidentais, e os diagramas hierárquicos fluem de cima para baixo. Consequentemente, avançar no tempo é indicado pelo movimento da esquerda para a direita. As seguintes transições de cena física têm mapeamento natural:

  Transição	Significado
  Da esquerda	Voltar no fluxo de tarefas
  Da direita	Avançar no fluxo de tarefas
  Do topo	Mover para cima a hierarquia de tarefas
  De baixo para baixo	Mover hierarquia de tarefas para baixo

• Se o seu programa reproduzir som, projete transições de cena e transições de áudio juntas. Por exemplo, se uma cena desaparece gradualmente, qualquer som também deve desaparecer gradualmente. Não arruine transições visuais perfeitas por ter transições de som abruptas. Para obter mais diretrizes sólidas, consulte Sound.

Manipulações diretas

• Ao usar gestos físicos na interação (como arremessar), projete a animação para parecer uma resposta natural ao gesto. Vincule a causa da interação com o efeito de transição. Dê à animação características físicas do mundo real, como aceleração, desaceleração, momento, resistência, peso, salto e rotação.
• Para manter uma sensação direta, mantenha os pontos de contato de um objeto sob o ponteiro suavemente durante toda a interação. Qualquer atraso, resposta instável ou perda de contato destrói a perceção de manipulação direta. Os objetos nunca devem desaparecer enquanto são manipulados.

Classificar, filtrar ou reordenar transições

• Para alterações simples, mostre toda a transição. Os usuários poderão acompanhar toda a transição facilmente. Mudanças simples envolvem quatro itens ou menos.
• Para mudanças complexas, enfatize o fim do movimento à medida que ele diminui a velocidade e deixe o olho preencher o resto. Isso faz com que o movimento pareça muito mais responsivo e ordenado.

Transições de desempenho

• Considere realizar transições lentas em dois ou três estágios para fazê-las parecer mais rápidas e imediatamente interativas. Utilize a seguinte ordem de composição quando apropriado:
  • Quadro externo
  • Contexto geral
  • Conteúdo inicial (utilizando uma representação temporária, se necessário)
  • Controles primários (para que os usuários possam interagir imediatamente)
  • Controles secundários e quaisquer elementos restantes da interface do usuário
  • Conteúdo final (se uma representação temporária foi usada) Use transições como fades e slides para fazer com que a composição pareça suave, ordenada e refinada.

Ao rolar no modo de exibição "Olho de pássaro", os mapas do Bing exibem um plano de fundo de grade temporário. Isso permite que os usuários continuem a rolar imediatamente, bem antes do conteúdo final ser renderizado.

Animações de experiência especial

• Reconsidere as telas iniciais animadas (bem como as telas iniciais estáticas). Muitas vezes, as telas iniciais apenas chamam a atenção para o tempo que um programa leva para carregar, e elas desgastam suas boas-vindas rapidamente. Embora as telas iniciais sejam aceitáveis se forem exibidas apenas quando a interação do usuário não for possível, sempre que possível, uma alternativa melhor é projetar seu programa para que os usuários possam interagir com ele imediatamente, mesmo enquanto ele ainda está carregando.
• Forneça um comando Ignorar introdução se uma tela inicial animada demorar mais de três segundos. Clicar em qualquer lugar na tela inicial também deve descartá-lo. Como alternativa, use uma versão curta da animação após um período inicial.

Desempenho

• Não faça com que os usuários esperem pelas animações e transições do seu programa. Use breves animações e transições (menos de 200 milissegundos) sempre que possível. Use animações mais rápidas (100 milissegundos) para operações mais frequentes. Crie animações mais longas (mais de um segundo, geralmente o feedback de progresso, ilustração e padrões de experiência especiais) para que os usuários possam continuar a trabalhar enquanto estão em execução.

• Crie animações de longa duração para deixar claro para os usuários que eles podem interagir enquanto a animação está em execução. Os utilizadores não tentarão continuar a trabalhar se as pistas visuais sugerirem que não conseguem.

  

  Neste exemplo do Windows Internet Explorer, a barra de progresso discreta na barra de status sugere que os usuários não precisam esperar pela conclusão antes de poderem interagir.

• Use animações leves para tarefas com uso intensivo de CPU. Isso dá total poder de processamento à tarefa. Além disso, os usuários não perceberão que a animação leve é a razão pela qual a tarefa é intensiva em CPU.

• Não exiba um indicador de atividade durante uma animação ou transição. Fazê-lo destrói o efeito. Projete animações e transições para que elas possam começar imediatamente.

• Projete animações para degradar graciosamente sempre que houver recursos insuficientes do sistema. As animações podem degradar-se por terem variações que requerem menos recursos (como comprimentos mais curtos ou taxas de fotogramas mais baixas) ou até mesmo não serem executadas. Independentemente dos recursos disponíveis, certifique-se de que as animações têm alta qualidade e se parecem com animações em vez de bugs de software.

  Incorreto:

  

  Neste exemplo, a transição de restauração de janela é usada mesmo que não haja recursos suficientes do sistema para jogá-la bem. Consequentemente, o quadro congelado parece ser um bug. Se os recursos não estiverem disponíveis, é melhor apenas exibir a janela sem uma transição.

Características da animação

Animações e transições bem projetadas geralmente têm estas características:

• Curta duração. A maioria das animações deve ter entre 100 e 300 milissegundos, de preferência 1/6 segundo (167 milissegundos) ou 1/4 segundo (250 milissegundos). (Experiências especiais e feedback de progresso podem ser mais longos.) Use tempos de animação mais rápidos para operações mais frequentes. Geralmente, animações mais longas levam mais tempo para serem concluídas, levam mais tempo para entender e parecem lentas.

• Capacidade de resposta. As animações devem começar dentro de 50 milissegundos após o evento de iniciação ou a ação do usuário. Tempos de arranque mais longos não respondem.

• Aceleração/desaceleração. Para parecer natural, a maioria dos efeitos de animação precisa acelerar ao iniciar e desacelerar ao parar. Para parecer responsivo, crie animações para ter inícios rápidos. Para parecer controlado, projete animações para ter pousos suaves no final. Embora isso se aplique a efeitos de movimento, também se aplica a qualquer efeito que sugira movimento, como zooms e até desvanecimentos.

  

  A maioria das animações deve ter inícios rápidos e finais suaves para ter uma sensação responsiva, mas controlada.

• Moção. As animações que retratam o movimento, em particular, precisam acelerar e desacelerar, portanto, não use movimento linear, a menos que a duração da animação seja muito curta. Os movimentos devem percorrer o caminho do início ao fim, sem exageros. O caminho de movimento completo nem sempre é necessário. Quando apropriado, enfatize o final do movimento à medida que ele diminui a velocidade e deixe o olho preencher o resto. Isso faz com que o movimento pareça muito mais responsivo e ordenado. Ao animar o movimento de vários objetos simultaneamente, dê-lhes caminhos ligeiramente diferentes com tempos ligeiramente diferentes para se sentirem mais naturais.

• Taxa de quadros. A maioria das animações deve usar uma taxa de quadros de 20 quadros por segundo. Se a animação é para uma experiência especial ou está relacionada com o objetivo principal do programa, considere usar uma taxa maior de 24 30 quadros por segundo para melhorar a suavidade e realismo.

• Escala. Projete animações para funcionar bem em toda a gama de uso pretendido. Por exemplo, as transições de página devem ser projetadas para funcionar para todos os tamanhos de página.

• Personalidade. Projete animações para parecer natural, moderada e eficiente em vez de artificial, caprichosa ou lenta.

Texto animado

• Embora você possa exibir texto usando uma transição, não animar texto continuamente. O texto animado é muitas vezes distrativo e mais difícil de ler do que o texto estático. Exceções:
  • Você pode animar texto em situações em que ele é tradicionalmente animado e fornece uma alternativa acessível.
  • Você pode animar o texto se o objetivo do texto for principalmente decorativo.

Neste exemplo, o Zune anima texto, mas sua finalidade é principalmente decorativa. Não há problema se os usuários não lerem atentamente o texto.

Reduzir o consumo de energia

• Projete suas animações para reduzir o consumo de energia. Quando projetadas corretamente, as animações não devem aumentar significativamente o consumo de energia. Para reduzir o consumo de energia:
  • Pare de animar quando o ecrã estiver desligado. O visor pode estar desligado para poupar energia.
  • Não use animações de longa duração que não sejam iniciadas pelo usuário. As animações que usam temporizadores periódicos de alta resolução reduzem a eficiência do gerenciamento de energia do processador. Além disso, certifique-se de desativar todos os temporizadores periódicos de alta resolução quando as animações estiverem concluídas.
  • Suspenda todas as animações quando o sistema ficar ocioso. O período de inatividade do usuário para ficar ocioso é determinado pelas Opções de Energia no Painel de Controle.

Acessibilidade

• Não use animação como a única maneira de transmitir informações essenciais. As animações devem comunicar informações úteis, mas não críticas, porque não são acessíveis a usuários com deficiência visual.

• Certificar-se de que estão disponíveis informações equivalentes através de outros meios, tais como:

  • Por inspeção. Os usuários podem determinar informações equivalentes olhando para a tela ou objetos envolvidos na animação.
  • Por simples interação. Os usuários podem determinar informações equivalentes pairando, clicando ou clicando duas vezes.

  

  A home page do Bing tem uma animação inicial que revela vários pontos de acesso. Os usuários também podem exibir os pontos de acesso movendo o cursor perto deles.

  Note que "informação equivalente" não significa informação idêntica. As informações podem ter um formato diferente ou exigir uma dedução simples.

• Quando apropriado, defina o foco de entrada no objeto alterado durante uma transição. Isso permite que as tecnologias assistivas detetem onde a mudança aconteceu. Mas não altere o foco de entrada quando o usuário estiver usando o teclado.

• Não use animações ou transições que piscam ou redimensionam objetos rapidamente. Flashes e mudanças rápidas na tela podem causar problemas para pessoas com problemas convulsivos e outros distúrbios neurológicos.

• Permita que os usuários desativem as animações e transições do seu programa. Para suportar essa capacidade, respeite a opção Desativar todas as animações desnecessárias na Central de Facilidade de Acesso no Windows.

  Desenvolvedores: Você pode determinar se as animações estão habilitadas usando a API SystemParametersInfo.

• Tarefas de design assumindo que os usuários desativarão as animações do programa. Certifique-se de que isso não interrompa significativamente o fluxo de tarefas.

Para obter mais diretrizes de acessibilidade, consulte de acessibilidade .

Documentação

• Evite referir-se a animações sempre que possível. Em vez disso, consulte o objeto que está sendo animado e, se necessário, o tipo de animação.
• Não se refira a transições, exceto na documentação técnica. Em vez disso, consulte o objeto em seu estado final ou inicial.
• Se o usuário iniciar explicitamente uma animação, use o verbo play; caso contrário, use o verbo usar para documentação técnica.

Exemplos:

• Você saberá que um item precisa de sua atenção quando seu ícone começar a saltar.
• Primeiro, selecione as fotos que você gostaria de imprimir (observe que as fotos são ampliadas após a seleção).
• Use uma transição de fade cruzado para alterar o estado de um objeto perfeitamente.