Motion design

O uso estratégico de animação e transição pra comunicar estado, guiar atenção e dar feedback.

Hard

O que é

Motion design é o uso estratégico de animação, transição e mudança no tempo dentro da interface. Ele serve pra comunicar o estado do sistema, guiar atenção, dar feedback, reduzir carga mental e criar uma experiência que parece responsiva e viva.

O ganho de usabilidade vem das relações espaciais, porque, quando um menu desliza da esquerda, a pessoa entende que ele veio de algum lugar e sabe pra onde volta. Isso faz a interface parecer lógica, em vez de mágica.

Motion bem feito também reduz o tempo de espera percebido e ajuda no onboarding, porque mostra a função em vez de só descrever. E a acessibilidade entra de novo, já que oferecer alternativa pra quem prefere movimento reduzido faz parte do trabalho.

Em uma frase

Falta um motion design de verdade aqui, cada transição tem curva e duração diferente, parece mecânico.

A pergunta que ele responde

Como eu crio um sistema de movimento consistente pra interface inteira em vez de animar tela a tela?

Quando usar

Use ao definir como a interface se move: transição, feedback, onboarding e estados de carregamento.

Como não usar

O cuidado é não animar por enfeite, sem sistema, deixando cada tela com um movimento diferente e pesado.

Na prática

Pense num time que define curvas e durações consistentes pra todas as transições. Com isso, o produto passa a parecer polido, em vez de mecânico.

Não confunda com

Vale separar motion design de microinteração. O motion design é a disciplina e o sistema de movimento da interface, a visão do todo, enquanto a microinteração é um detalhe pontual de feedback dentro dela. Um cuida do conjunto, o outro de um momento específico.

Design

Em inglês

Motion Design

Pronúncia

mô-chan di-záin

Também chamado de

design de movimento

Origem

n/a

Fonte

Saiba mais

Val Head, Designing Interface Animation