Animações e transições

Observação

Este guia de design foi criado para o Windows 7 e não foi atualizado para versões mais recentes do Windows. Grande parte das diretrizes ainda se aplica em princípio, mas a apresentação e os exemplos não refletem nossas diretrizes de design atuais.

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

As animações dão a aparência do movimento ou da alteração ao longo do tempo. Use animação para fornecer comentários, visualizar o efeito de uma ação, mostrar a relação entre objetos, chamar a atenção para a alteração 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.

As transições são animações usadas para manter os usuários orientados durante as alterações de estado da interface do usuário (interface do usuário) e manipulações de objeto e fazer com que essas alterações se sintam suaves em vez de jarring. 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 de detalhes.

Geralmente, as melhores animações e transições são usadas para se comunicar com usuários não verbalmente e para tornar as alterações de estado mais naturais e menos perceptíveis. Por outro lado, os menos eficazes são gratuitos, pois não comunicam nada ou chamam atenção desnecessária. As animações são melhor usadas como uma forma secundária de comunicação. Eles devem comunicar informações úteis, mas não críticas e, para serem acessíveis, os usuários devem ser capazes de determinar informações equivalentes por meio de outros meios.

Nota: As diretrizes relacionadas à identidade visual, ao som e à acessibilidade do software são apresentadas em artigos separados.

Essa é a interface do usuário certa?

Para decidir, considere as perguntas a seguir.

Animações

As condições a seguir se aplicam?

• A animação comunica visualmente algo útil, como fornecer comentários, 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 maneira. Os usuários podem não se beneficiar da animação se:
  • Eles desativaram as animações.
  • A atenção deles está em outro lugar.
  • Eles 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. Ou:
  • Isso acontece rapidamente (200 milissegundos ou menos).
  • Ele não interfere na 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.
  • Ele está no centro das atenções do usuário ou chama a atenção para algo fora do centro das atenções que é importante ou útil na conclusão de uma tarefa.
  • É facilmente ignorável, não distraindo ou irritante.
  • Não se torna cansativo. Os usuários ainda acham apropriado e agradável mesmo após a exibição repetida.

Nesse caso, considere usar uma animação.

Transições

Um objeto ou uma cena está alterando o estado e faz todas as condições acima para usar animações, bem como qualquer uma das condições a seguir se aplica?

• A mudança de estado é conceitualmente desorientadora, confusa ou difícil de entender.
• A alteração de estado é visualmente chocante, não tem 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 alteração de estado aparecesse mais rapidamente.
• A alteração de estado é digna de atenção especial do usuário.

Nesse caso, considere usar 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 que o texto explicasse ou pudesse ser perdido pelos usuários.

Incorreto:

Correto:

O uso de uma animação comunica as mesmas informações, mas de maneira natural e discreta. Qual você prefere ver mil vezes?

Animações e transições não precisam exigir atenção para serem bem-sucedidas. Na verdade, eles geralmente são 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 bem-sucedidas são tão naturais que os usuários nem sequer estão cientes delas; em vez disso, os usuários apenas notariam sua ausência. A frequência de ocorrência aumenta a necessidade de sutileza, portanto, salve efeitos que exigem atenção para eventos pouco frequentes que realmente merecem a atenção.

Uma transição de 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 realça os botões da barra de tarefas ao focalizar com base na posição atual do mouse e na cor do ícone do programa. Essa abordagem é visualmente atraente, mas sutil, transmitindo uma personalidade humilde.

No entanto, animações e transições são mais eficazes e bem-vindas quando servem a uma finalidade clara. Eles devem ser usados para melhorar a usabilidade, a suavidade e o fluxo e a percepção da 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 seja merecida e digna de interromper o treinamento 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 de 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 chame a atenção para coisas que não justifiquem 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 precisem fazer algo importante imediatamente. Nesse 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 a animação como a única maneira de transmitir informações essenciais. Verifique se os usuários podem obter informações equivalentes de uma maneira 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 notável. E animações propositais são precisas; se uma animação mostrar 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.

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

A visualização da janela da barra de tarefas do Windows 7 muda para continuidade à medida que o usuário passa 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 exatamente o mundo real, 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. Até mesmo objetos que não são encontrados no mundo real podem parecer naturais com base no comportamento real de um objeto diferente, mas relacionado. Essa metáfora só funcionará se a relação comunicar claramente a finalidade 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 o mapeamento natural. Os mapeamentos naturais são físicos ou culturais. Um mapeamento natural baseado culturalmente, por exemplo, pode começar pelo fato de que, nas culturas ocidentais, as pessoas leem da esquerda para a direita. Consequentemente, para expressar uma sequência de tempo de objetos, o objeto do meio é atual, os objetos à esquerda são do passado e os objetos à direita estão no futuro. Daqui para frente, é indicado pelo movimento da esquerda para a direita.

Neste exemplo, o controle Reprodutor Multimídia do Windows 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, caractere 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 ela se comunica, a maneira específica pela qual a animação é executada mostra a personalidade do programa. Boas animações projetam a personalidade certa para seu programa, seja sério ou caprichoso, ou em algum lugar no meio.

Neste exemplo, o uso de texto animado e perspectiva dinâmica por 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 watch. Não importa o quão naturais e envolventes sejam as animações do seu programa, ninguém quer esperar por elas exclusivamente. Boas animações também parecem responsivas sem ser chocantes por terem um início rápido com um pouso suave. Animações responsivas também se beneficiam de comunicar sua finalidade rapidamente. Os usuários não devem precisar watch uma animação por muito tempo apenas para descobrir o que ela está fazendo ou quando ela é feita. Para manipulação direta, animações responsivas são essenciais para manter uma sensação direta e envolvente do mundo real. Para se sentir direto, os pontos de contato de um objeto devem permanecer sob o ponteiro sem problemas durante toda a manipulação. Qualquer retardo, resposta agitada ou perda de contato destrói a percepçã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 geralmente são sutis e chamam apenas a atenção necessária para cumprir seu propósito. Como resultado, eles não são distrativos, 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.

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

Neste exemplo, o Windows usa uma animação que recebe atenção na inicialização para fazer com que a experiência se sinta especial, mas tal animação seria inadequada em outro lugar.

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

Criando um vocabulário de animação

Boas animações são sobre comunicação visual eficaz, e a consistência é crucial para sua eficácia. Se você usar uma transição específica, como efetuar push de uma cena do direito 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 nenhuma outra finalidade. Atribuir significados diferentes à mesma animação prejudica sua capacidade de comunicação. Ao atribuir animações e transições específicas a significados específicos, você está criando um vocabulário de animação.

Esse problema se aplica a animações e transições que têm significado, não a genéricos aos quais os usuários provavelmente não atribuem significado ou àqueles cuja finalidade seja despercebida. Por exemplo, animações como fades e efeitos especiais, como dissolvências, não têm nenhum significado específico, para que possam ser usadas livremente.

Um bom vocabulário atribui animações que modelam o mundo real de um objeto, o comportamento físico. Se você precisar atribuir uma animação a um objeto ou ação que não tenha um equivalente 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 ilumina como um objeto do mundo real pode ser quando ativado.

Cada animação em um vocabulário precisa ser claramente distinta. As animações devem ter comportamentos semelhantes somente se suas ações associadas estiverem relacionadas da mesma forma. Por exemplo, as 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 acham os resultados confusos, surpreendentes ou inesperados. Em geral, é melhor alcançar um único propósito bem do que vários propósitos não tão bem.

Idealmente, seu vocabulário de animação deve ser abrangente em todas as áreas do programa que precisam deles. Se apenas algumas interações tiverem animações naturais, isso chamará a atenção para aqueles 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.

Projetando a personalidade certa

Embora o tipo de animação determine o que se comunica, a maneira específica pela qual a animação é executada fala da personalidade do programa e reforça sua marca.

A personalidade do programa deve refletir a natureza de suas tarefas e a personalidade de seus usuários, portanto, não é uma escolha arbitrária. Em vez disso, uma personalidade bem projetada deve parecer autêntica; nunca tente forçá-lo. A personalidade deve fazer uma conexão emocional com o usuário. Alguns fatores a serem considerados:

• Tarefas: Sério ou divertido; opcional ou obrigatório.
• Consequências: Sério ou menor.
• Custo: Gratuito ou comprado; se comprado, com preço moderado ou caro.
• Foco do usuário: Grupo relativamente estreito de usuários de destino ou público geral amplo.
• Ambiente do usuário: Profissional, casual ou em casa.
• Idade do usuário: Mais jovem ou mais velho.
• Frequência de uso: Frequente ou pouco frequente.

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

Aplicativos de produtividade

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

• Small
• Natural, realista
• Sutil, subjugado
• Rápido, eficiente
• Reduzido

Utilitários

Os utilitários normalmente são usados brevemente, portanto, o uso da animação pode ser mais agressivo:

• Realista, ilustrativo, autoexplicativo
• Safe
• Envolver

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 essas características:

• Grande (possivelmente se tornando 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, será aceitável se uma animação ou transição se tornar cansativa após o centésimo tempo se a maioria dos usuários não usar o programa com frequência.

Em geral, animações e transições que são pequenas, naturais, subjugadas, eficientes, mas relaxadas 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 superam. 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 criar animações, certifique-se de que elas não afetem a capacidade dos usuários de usar seu programa com eficiência. Em geral, deixe suas animações lentas o suficiente para cumprir seu propósito, mas rápido 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 transformação de página tenha uma sensação envolvente e real, ela diminui a produtividade dos usuários, demorando mais para virar páginas.

Transições breves (200 milissegundos ou menos) são um caso especial (especialmente quando geralmente funcionam com um 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 essas 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 ela é 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 percepção.

Para velocidade, algumas animações são verniz visual em tarefas com uso intensivo de CPU, portanto, a última coisa que você deve fazer é tornar essas tarefas mais lentas com animações com uso intensivo de CPU. As animações com uso intensivo de 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 menos 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 são intensivas em CPU, enquanto animações leves podem ser usadas em qualquer lugar.

Para 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 percepção de que ela afeta. 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, pois os usuários podem concluir que a animação é o motivo pelo qual a tarefa está lenta. Se algo parecer lento, ele se sentirá lento, portanto, é melhor usar animações que se sintam simples, leves e rápidas. O uso de animações com início rápido 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 terão valor se sua qualidade for tão ruim que tornam a experiência menos suave e menos envolvente. Para manter sua qualidade, as animações devem ser projetadas para degradar normalmente sempre que recursos suficientes do sistema não estiverem disponíveis. As animações podem ser degradadas com variações que exigem menos recursos (como comprimentos mais curtos ou taxas de quadros mais baixas) ou até mesmo não em execução. Independentemente dos recursos disponíveis, verifique se as animações têm alta qualidade e se parecem com animações em vez de bugs de software.

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

Atraindo o nível certo de atenção

Embora apenas alguns tipos de animações e transições sejam especificamente projetados para atrair a atenção do usuário, eles devem ser projetados para atrair o nível certo de atenção para atender bem à sua finalidade. Quais são as diferentes maneiras de chamar a atenção e como escolher a certa?

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 mais importantes:

• Flash rápido. Exige atenção imediata. Pode interromper a concentração dos usuários, independentemente de onde o flash está ocorrendo.
• Piscar moderadamente. O mesmo, mas exige menos atenção com menor frequência.
• Saltando. Perceptível na visão periférica e relativamente exigente por natureza. É provável que os usuários observem, mas podem continuar a se concentrar em outro lugar somente se a duração for curta.
• Movimento. Perceptí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 usuários observem, mas podem continuar a se concentrar em outro lugar.
• Pulsação moderada. Perceptível, mas não distraindo na visão periférica. Os usuários podem continuar a se concentrar em outro lugar. Pode pulsar brilho, cores e tamanhos.
• Pulsação lenta/brilho. Perceptí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.
• Desaparecer. Ainda menos perceptí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/brilho estático. Perceptível se os usuários optarem por procurar, mas não exigir atenção se estiver em outro lugar.
• Ambiente/natural. Propositalmente não perceptí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ê esteja projetando um programa de mensagens instantâneas e alguém acabou de enviar uma mensagem ao usuário. Esse cenário requer a atenção do usuário, deve ser perceptível em qualquer lugar e, geralmente, o usuário desejará responder rapidamente. Esse cenário sugere que uma animação intermitente moderada seria uma boa opção. 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 de forma produtiva em outro lugar, e é aceitável se os usuários não observarem. Este cenário sugere que pulsação moderada a lenta ou brilhante seria uma boa escolha.

Duration

A duração apropriada para uma animação de obtençã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 será a duração. Embora efeitos muito sutis que exigem pouca atenção (como pulsação lenta) possam ser reproduzidos indefinidamente, os efeitos que exigem atenção só devem ser reproduzidos entre 1 e 3 segundos. Qualquer coisa mais corre o risco de tornar a animação esmagadora e irritante.

No Windows 7, a barra de tarefas pisca para atenção por apenas um segundo. Por mais tempo seria irritante.

Decaimento do efeito

Você deve criar animações que recebem atenção com base na suposição de que, se os usuários não responderem imediatamente, é porque eles estão ocupados fazendo outra coisa e não querem ser interrompidos. Portanto, seu objetivo deve ser atrair a atenção sem exigir isso.

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

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

E o PowerPoint?

As transições do Microsoft PowerPoint geralmente violam deliberadamente essas diretrizes porque elas foram projetadas para chamar a atenção para transições de slides e exigir que os usuários aguardem por elas. Além disso, eles não têm nenhum significado específico, portanto, não comunicam nada além do fato de que um slide está mudando.

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

• Eles dividem longas apresentações em partes menores forçando o apresentador a pausar.
• Eles chamam a atenção do público para as mudanças na apresentação, ajudando as pessoas a se concentrarem novamente se suas mentes se perguntaram.
• Eles dão à apresentação um ritmo para que não se sinta monótono ou esmagador.
• Seu estilo reflete a personalidade do apresentador ou do material.

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

Ponto-chave: Não use transições no estilo do PowerPoint como um 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. Eles devem ter uma finalidade clara. Não use animações apenas porque você pode ou para chamar a atenção desnecessária para seu programa.
2. Defina um vocabulário de animação e use-o consistentemente em todo o programa. Use o vocabulário de animação do Windows 7 quando apropriado.
3. Use as características de suas animações para dar personalidade ao programa e reforçar sua marca.
4. Torne a maioria das animações simples, breve e sutil. 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 usuários observarão apenas sua ausência.
5. Torne suas animações rápidas e responsivas e dê a elas 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. Crie animações mais pesadas para ter degradação normal.
6. Projetar para o longo prazo. Se uma animação for irritante, distrativa ou cansativa, reprojete-a ou remova-a.

Padrões de uso

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

Uso	Descrição
Comentários de foco 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 por meio de um efeito estático. vocabulário do Windows: exibir efeito de foco (retângulo delimitador, realce, ampliação) com um efeito fade in/fade out para suavidade. No player de mídia digital zune, as capas dos álbuns realçam e adicionam controles de reprodução ao passar o mouse.
Clique em comentários para mostrar que um objeto clicável é responsivo e recebeu um clique.	Indica que um objeto foi clicado. vocabulário do Windows: tela de fundo do objeto flash no evento click down. para mostrar contato por toque, use um efeito de ondulação. O touch exibe uma animação de ondulação para que o usuário saiba que a interação foi reconhecida.
Comentários de seleção para mostrar que um objeto está selecionado.	Indica que um objeto está selecionado. A seleção também pode ser mostrada por meio de um efeito estático. vocabulário do Windows: desenhar retângulo de seleção com um efeito fade in/fade out para suavidade. Em Zune, as capas do álbum piscam no clique e, em seguida, recebem um retângulo de seleção na seleção.
Comentários de progresso para mostrar que uma tarefa está sendo executada.	Os comentários de progresso indicam que uma tarefa está progredindo, normalmente com indicadores de atividade, barras de progresso ou animações que ilustram a tarefa. os comentários de progresso determinantes mostram aproximadamente quanto da tarefa foi feita e quanto permanece, enquanto o progresso indeterminado indica apenas que a tarefa está sendo feita. vocabulário do Windows: indicadores de atividade de rotação, barras de progresso, planos de fundo de progresso, animações de ilustração. Neste exemplo, Windows Live Messenger exibe comentários de progresso indeterminados 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 alterações) ou eventos importantes ou urgentes acontecem. consulte atraindo o nível certo de atenção para técnicas de design. vocabulário das janelas: piscando, movendo, pulsando, brilhando, brilhando. A barra de ferramentas do Windows Live anima na primeira aparição para torná-la óbvia onde ela está.
Relação para mostrar a relação entre objetos ou causalidade em efeitos.	Mostre relacionamentos, especialmente quando a relação pode não ser compreendida ou esperada, de uma forma que não distraia ou confunda. vocabulário das janelas: transformando, transporte, mudança física, como inverter, crescer de uma fonte de ponto, reduzindo para um destino de ponto. Neste exemplo, a animação mostra a relação entre a configuração gama e seu efeito na exibição.
Ilustração/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 com eficiência e confiança. Neste exemplo, os comandos Painel de Entrada do Tablet PC "show me" usam ilustrações para mostrar como corrigir, excluir, dividir e ingressar.

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

Uso	Descrição
Crescimento/redução/exibição de objeto para alterar o tamanho ou o estado de um objeto sem problemas.	Alterações de objeto 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, slides de objeto dentro ou fora. Neste exemplo, o Weather Gadget muda de seu estado conciso para exibir sua caixa de diálogo Opções.
Mostrar/ocultar/alterar conteúdo para mostrar, ocultar ou alterar conteúdo sem problemas, normalmente para divulgação progressiva.	O interior da janela remodela 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. janelas submenus esmaecem dentro e fora. conteúdo diferente desaparece ou rola dentro. A Calculadora do Windows tem uma transição suave entre os modos de exibição.
Controle ou exibição/ocultação de acessibilidade para mostrar ou ocultar suavemente os controles ou suas funcionalidades em focalizar ou mover o mouse, a fim de simplificar a aparência visual normal.	Exibe controles quando os usuários estão passando o ponteiro sobre uma área de comando ou exibem acessibilidades quando os usuários estão passando o mouse sobre um controle. passar o mouse sobre essas áreas indica que o usuário pretende interagir. as acessibilidades poderão ser ocultas se o ponteiro se tornar estacionário. Neste exemplo, os controles Reprodutor Multimídia do Windows desaparecem ao passar o mouse quando estiverem no modo de tela inteira.
Transições de cena para tornar uma transição de cena suave e perfeita para evitar a atenção.	Alterações 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 de baixo nível, para evitar chamar a atenção para o processo de transição em si. vocabulário do Windows: esmaeçar/desaparecer; esmaecimento cruzado; deslizando para dentro/esquerda, para fora/para a direita, para cima, para baixo; efetua pushes e coberturas. Neste exemplo, o papel de parede da área de trabalho do Windows esmaece suavemente entre as imagens para fazer com que a transição se sinta suave e controlada.
Transições de cena especiais para chamar a atenção para uma alteração de cena para torná-la especial ou reconcentrar a atenção do usuário.	Embora a maioria das transições de cena não deva chamar a atenção para o processo de transição, algumas são projetadas para quebrar o fluxo e chamar a atenção para enfatizar que algo diferente está prestes a acontecer. para chamar a atenção, as transições especiais de cena são projetadas para não serem naturais e têm alto impacto visual. Neste exemplo, o PowerPoint usa transições de obtenção de atenção para atrair o público para a alteração.
Manipulações diretas para mostrar o efeito de manipulações diretas (como movimentação, rolagem/painel, rotação e zoom).	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 locais para indicar restrições ou opções preferenciais prováveis. O zoom torna o conteúdo maior ou menor, possivelmente alterando o nível de detalhes adequadamente. Neste exemplo, a Lupa amplia suavemente entre os níveis.
Manipulações diretas incorretas para indicar que uma manipulação direta (como movimentação, rolagem/painel) foi tentada, mas não pôde ser feita.	A transição mostra a manipulação que está sendo tentada, mas reverte para o estado original. muitas vezes, o efeito parece que a manipulação não pode ser executada 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 real da manipulação. vocabulário do Windows: salto Neste exemplo, o documento salta para mostrar que o usuário chegou ao final.
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 alterações complexas, sugere) o efeito da alteração. neste exemplo, a pesquisa visual do bing usa uma transição de filtro. Neste exemplo, o Windows Media Center usa uma transição de reordenação como uma experiência especial enquanto uma música está sendo 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, a principal finalidade dessas transições é melhorar a percepçã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 maneira aleatória ou usar um indicador de atividade parecerá lento. vocabulário do Windows: execute ação em estágios, com transições suaves entre os estágios. Neste exemplo, uma lista de saltos da barra de tarefas exibe imediatamente os itens padrão e, em seguida, desliza para fora para exibir os destinos quando a lista estiver pronta. Isso disfarça o tempo necessário para compilar a lista. Por outro lado, atrasar a exibição inicial seria uma resposta, e exibir uma lista incompleta ou comentários de progresso seria muito mais lento.
Experiências especiais para envolver e encantar os usuários durante experiências raras e 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 realmente especiais para o seu programa. transições personalizadas são usadas para dar uma sensação especial. identidade visual e personalidade geralmente são 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 aguardem um momento. consequentemente, essas transições se desgastam rapidamente se forem superutilizados porque a experiência não é mais especial. Neste exemplo, o Windows Media Center exibe uma animação enquanto carrega para envolver imediatamente os usuários.

Diretrizes

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 cena e objeto, navegação, interação básica (focalização, seleção, clique), manipulação e interação de objetos (movimentação, remoção, redimensionamento, rolagem, movimento panorâmico, zoom, rotação, filtragem) e chamar a atenção. Um significado consistente é crucial para uma comunicação eficaz.

• Sempre que for prático, 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 programa precisar ser diferente, use os mesmos tipos de animação básicos que o Windows, mas dê a eles a personalidade certa para seu programa.

• Não atribua significados específicos a animações genéricas e transições em um vocabulário de animação. Transições genéricas como fades e efeitos especiais, como dissolvidos, não têm nenhum significado específico (além de aparecer ou desaparecer), para que possam ser usadas livremente.

  Incorreto:

  

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

• Torne as entradas de vocabulário claramente distintas. As 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, o zoom nunca deve ser confundido com a rotação).

• Mantenha os efeitos reais 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, confusos ou enganados pelos resultados. E para consistência, não misture metáforas.

• Forneça 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 a finalidade de uma animação. É possível tornar uma animação muito pequena, muito breve (menos de 50 milissegundos) ou tão sutil que os usuários não são capazes de compreender sua finalidade. Nesses casos, reprojete para deixar o significado claro ou remova.

  Incorreto:

  

  Neste exemplo, o efeito é tão pequeno e sutil que poucos usuários podem compreender sua finalidade. Melhor reprojetar ou remover.

Padrões

Comentários de foco

• Para parecer responsivo, esforce-se para reproduzir a animação dentro de 50 milissegundos de entrar ou deixar o estado de foco.
• Para parecer rápido, torne a duração das animações de foco inferior a 50 milissegundos.
• Use um efeito fade in/fade out de hover. Isso torna os efeitos de foco claramente distintos dos comentários de clique e seleção.

Clique em comentários

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

Comentários de seleção

• Para parecer responsivo, esforce-se para reproduzir a animação dentro de 50 milissegundos de 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 retângulo de seleção de fade in/fade out. Isso torna a seleção claramente distinta do foco e clique em comentários.

Comentários 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 levar mais de cinco segundos. Para obter mais diretrizes, consulte Barras de Progresso.
• Use animações de comentários de progresso que ajudam os usuários a visualizar o efeito de tarefas de execução prolongada. Evite animações de comentários de progresso desnecessários se uma animação não comunicar nada útil, use uma barra de progresso.
• Tenha 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 adequadamente.

Atratores

• Use atraidores com restrição. A menos que as informações sejam urgentes, críticas ou provavelmente afetem o comportamento imediato do usuário, geralmente é melhor alterar o estado de forma discreta e permitir que os usuários descubram a alteração por conta própria. Resolva distrações, não detectabilidade.

  

  Neste exemplo, o ícone da área de notificação de 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. Animações de atração devem chamar atenção suficiente para si mesmas para cumprir seu propósito, mas não mais. Se o usuário precisar agir imediatamente, escolha um efeito que exija atenção, independentemente de onde o usuário esteja procurando. Para outras situações, consulte a seção Atraindo o nível certo de atenção para obter a combinação certa de atenção, observabilidade 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 nem 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 dificultam que os usuários se concentrem em qualquer outra coisa.

Animações de relação

• Use animações de relação para mostrar de onde vieram os objetos ou para onde eles foram.
• As animações de relação devem iniciar 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 notarem, o que eles notarão é a distração.

Ilustrações/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 programa e reduzir a necessidade de avaliação e erro.
• Use ilustrações e visualizações que tenham uma interpretação clara. Eles têm pouco valor se confusos.
• Reproduza apenas uma ilustração de cada vez para evitar sobrecarregar os usuários. Se várias ilustrações simultâneas forem possíveis, use o mouse ou um botão reproduzir para permitir que os usuários indiquem seu interesse.
• Reproduza uma ilustração automaticamente se for a finalidade main da janela ou da página. Caso contrário, se for opcional, permita que os usuários reproduzam quando estiverem prontos.
• Reproduzir animações na velocidade ideal: não tão rápidos que são difíceis de entender, mas não tão lentas que são tediosas em watch.

Crescimento/redução de objeto

• Não recortar 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 é recortado durante um redimensionamento.

Mostrar/ocultar/alterar conteúdo

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

Controle ou exibição/ocultação de acessibilidade

• Exiba controles importantes quando o usuário posicionar o ponteiro em qualquer lugar dentro da janela ou painel ou, se estiver em tela inteira, em movimento do mouse. Os usuários não devem ter que procurar por esses controles, portanto, 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 recursos de controle quando o usuário posicionar o ponteiro sobre ou perto dos comandos. Para facilitar a descoberta, torne o local óbvio e o destino grande.

  

  Neste exemplo, Windows Live Messenger exibe um comando secundário quando o ponteiro está próximo ao canto superior direito.

Transições de cena

• Torne as transições de cena física consistentes com o mapeamento natural. Pessoas leitura da esquerda para a direita em culturas ocidentais e diagramas hierárquicos fluem de cima para baixo. Consequentemente, daqui para frente 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 ao fluxo de tarefas
  Da direita	Avançar no fluxo de tarefas
  Na parte superior	Mover para cima a hierarquia de tarefas
  Da parte inferior	Mover a hierarquia de tarefas para baixo

• Se o programa reproduzir som, a cena de design fará transições e transições de áudio juntas. Por exemplo, se uma cena desaparecer gradualmente, qualquer som também deverá desaparecer gradualmente. Não arruine transições visuais perfeitas com transições sonoras abruptas. Para obter mais diretrizes de som, consulte Som.

Manipulações diretas

• Ao usar gestos físicos na interação (como jogar), projete a animação para parecer uma resposta natural ao gesto. Vincule a causa de interação com o efeito de transição. Dê à animação características físicas do mundo real, como aceleração, desaceleração, impulso, 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 retardo, resposta agitada ou perda de contato destrói a percepçã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. Alterações simples envolvem quatro itens ou menos.
• Para alterações complexas, enfatize o fim do movimento à medida que ele desacelera e deixe o olho preencher o resto. Fazer isso faz com que o movimento pareça muito mais responsivo e ordenado.

Transições de desempenho

• Considere executar transições lentas em dois ou três estágios para fazê-las parecer mais rápidas e interativas imediatamente. Use a seguinte ordem de composição quando apropriado:
  • Quadro externo
  • Tela de fundo
  • Conteúdo inicial (usando 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 uma tela de fundo de grade temporária. Isso permite que os usuários continuem rolando imediatamente, bem antes que o conteúdo final seja renderizado.

Animações de experiência especial

• Reconsidere telas splash animadas (bem como telas inicial estáticas). Muitas vezes, as telas de respingo apenas chamam a atenção para quanto tempo um programa leva para carregar, e eles desgastam suas boas-vindas rapidamente. Embora as telas iniciais sejam aceitáveis se elas forem exibidas somente quando a interação do usuário não for possível, sempre que prática uma alternativa melhor for projetar seu programa para que os usuários possam interagir com ele imediatamente, mesmo enquanto ele ainda estiver carregando.
• Forneça um comando Ignorar Introdução se uma tela inicial animada levar mais de três segundos. Clicar em qualquer lugar na tela inicial também deve ignorá-la. 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 programa. Use animações e transições breves (menos de 200 milissegundos) sempre que for prático. Use animações mais rápidas (100 milissegundos) para operações mais frequentes. Crie animações mais longas (mais de um segundo geralmente os comentários de progresso, ilustração e padrões de experiência especiais) para que os usuários possam continuar a trabalhar enquanto estiverem em execução.

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

  

  Neste exemplo do Windows Internet Explorer, a barra de progresso de teclas baixas na barra de status sugere que os usuários não precisam aguardar a 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 é o motivo pelo qual a tarefa é intensiva em CPU.

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

• Projete animações para degradar normalmente sempre que houver recursos insuficientes do sistema. As animações podem ser degradadas com variações que exigem menos recursos (como comprimentos mais curtos ou taxas de quadros mais baixas) ou até mesmo não em execução. Independentemente dos recursos disponíveis, verifique se 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 reproduzi-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 de animação

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

• Duração breve. A maioria das animações deve estar entre 100 e 300 milissegundos, preferencialmente 1/6 segundo (167 milissegundos) ou 1/4 segundo (250 milissegundos). (Experiências especiais e comentários 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 se sentem lentas.

• Capacidade de resposta. As animações devem começar dentro de 50 milissegundos do evento inicial ou da ação do usuário. Tempos de início mais longos parecem não responder.

• 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, ele também se aplica a qualquer efeito que sugira movimento, como zooms e até mesmo fades.

  

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

• Movimento. 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 seguir o caminho dos shorts do início ao fim, sem solução excessiva. O caminho de movimento completo nem sempre é necessário. Quando apropriado, enfatize o fim do movimento à medida que ele desacelera e deixe o olho preencher o resto. Fazer isso faz com que o movimento pareça muito mais responsivo e ordenado. Ao animar o movimento de vários objetos simultaneamente, dê a eles caminhos ligeiramente diferentes com intervalos 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 for para uma experiência especial ou estiver relacionada à finalidade main do programa, considere usar uma taxa mais alta de 24 30 quadros por segundo para melhorar a suavidade e o realismo.

• Dimensão. 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 se sentir natural, subjugado e eficiente em vez de artificial, caprichoso ou lento.

Texto animado

• Embora você possa exibir texto usando uma transição, não anime continuamente o texto. O texto animado geralmente distrai e é mais difícil de ler do que o texto estático. Exceções:
  • Você pode animar o texto em situações em que ele é tradicionalmente animado e fornecer uma alternativa acessível.
  • Você poderá animar o texto se a finalidade do texto for principalmente decorativa.

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

Reduzindo 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 a exibição estiver desativada. A exibição pode estar desativada com a finalidade de economizar energia.
  • Não use animações de execução longa que não sejam iniciadas pelo usuário. Animações que usam temporizadores periódicos de alta resolução reduzem a eficiência do gerenciamento de energia do processador. Além disso, desabilite os temporizadores periódicos de alta resolução quando as animações forem concluídas.
  • Suspender todas as animações quando o sistema ficar ocioso. O período de inatividade do usuário a ficar ocioso é determinado pelas Opções de Energia no Painel de Controle.

Acessibilidade

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

• Verifique se as informações equivalentes estão disponíveis por outros meios, como:

  • Por inspeção. Os usuários podem determinar informações equivalentes examinando a tela ou os objetos envolvidos na animação.
  • Por interação simples. Os usuários podem determinar informações equivalentes passando o mouse, 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.

  Observe que "informações equivalentes" não significam informações idênticas. As informações podem estar em um formato diferente ou exigir dedução simples.

• Quando apropriado, defina o foco de entrada no objeto alterado durante uma transição. Isso permite que as tecnologias adaptativas detectem onde a alteração 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. Alterações relâmpagos e rápidas na tela podem causar problemas para pessoas com deficiências convulsivas e outros distúrbios neurológicos.

• Permitir que os usuários desativem as animações e transições do programa. Para dar suporte a 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 supondo que os usuários desativem 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 Acessibilidade.

Documentação

• Evite fazer referência 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 faça referência 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 para documentação técnica.

Exemplos:

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