Animação
Princípios da animação
Direto ao ponto
As animações devem ter um objetivo específico. Elas são utilizadas para deixar as interações mais claras ao usuário, minimizando o esforço cognitivo e tornando a experiência mais fluida.
Como fazemos isso?
- Tendo bem claro qual o propósito da animação e entendendo se realmente é necessário utilizá-la.
- Utilizando animações com o objetivo de melhorar a experiência do usuário no sistema.
Ao projetar uma interface, reflita:
- Essa animação é realmente necessária à interface ou ela tem apenas caráter estético, sem valor percebíbel à experiência do usuário?
- Essa animação está de alguma maneira facilitando o entendimento do usuário sobre o recurso utilizado?
- Se essa animação fosse removida, o recurso ficaria mais difícil de entender/utilizar?
Discreta
Boas animações passam despercebidas. Se uma animação estiver chamando muito a atenção, deixe-a mais discreta. A sutileza garante que o usuário não seja distraído e permita uma experiência de movimento coesa em todos os componentes.
Como fazemos isso?
- Focando em transições simples e naturais, garantindo que passem a ideia de seriedade e credibilidade.
- Não animando recursos em excesso ou com mais de um tipo de transição no mesmo elemento.
Ao projetar uma interface, reflita:
- Posso simplificar essa animação de alguma maneira e manter o sentido dela?
- A animação possui um início e um fim bem claros?
- Durante todo o tempo da animação ela se mantém consistente?
Familiar
As animações devem refletir os movimentos que encontramos no mundo físico, por exemplo a gravidade. Imitar o comportamento esperado dos objetos existentes no mundo físico cria repetição e consistência, o que permite aos usuários antecipar o que vem depois. Fornecer feedback de movimento pode ajudar a orientar o fluxo de trabalho do usuário, criando um caminho claro para seu objetivo final.
Como fazemos isso?
- Utilizando animações que simulem o comportamento de objetos no mundo real.
Ao projetar uma interface, reflita:
- Este componente está fugindo da lógica da física do mundo real
- O esforço para executar essa animação no mundo real é muito alto?
Animações divertidas e animações funcionais
Uma distinção importante que devemos fazer das animações é a de animações divertidas e animações funcionais. Animações divertidas são destinadas a chamar a atenção e existem meramente para entreter o usuário. Já as animações funcionais são sutis e normalmente “invisíveis” aos usuários, ou seja, passam despercebidas embora cumpram seu propósito de tornar as interações mais naturais.
- Animações divertidas servem para demonstrar grandes feitos e acontecimentos para os usuários e devem ser utilizadas com muito critério.
- Animações funcionais são as mais utilizadas e sempre possuem os mesmos comportamentos, elas devem ser discretas e permitir que sejam absorvidas pelos usuários inconscientemente.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.