Motion

O uso de movimento, animação e transição pra guiar atenção e comunicar mudança na interface.

Hard

O que é

Motion é o uso de movimento e animação no design digital pra dar feedback, explicar mudança e tornar a interação mais clara. Ele inclui transição, animação, microinteração e efeito visual, ou seja, tudo que tira o layout do estático.

Pra usabilidade, o motion conecta causa e efeito, porque abrir um menu sem transição pode desorientar, enquanto uma animação suave faz a pessoa entender de onde aquele conteúdo veio. Isso reduz carga mental, já que liga a ação ao resultado.

Dois cuidados pesam aqui. Acessibilidade, porque é preciso respeitar a preferência de movimento reduzido de quem sente desconforto. E desempenho, já que animação mal feita trava o produto. O bom motion complementa a tarefa, em vez de dominar a tela.

Em uma frase

Um motion suave nessa transição ajuda a pessoa a entender de onde o painel veio e pra onde volta.

A pergunta que ele responde

Como eu uso movimento pra a pessoa entender a mudança em vez de só enfeitar a tela?

Quando usar

Use pra dar feedback, explicar mudança de estado e orientar a pessoa por um fluxo.

Como não usar

O cuidado é não encher de animação chamativa que distrai, atrasa e ainda ignora quem pediu movimento reduzido.

Na prática

Pense num painel lateral que abre com transição suave. A pessoa entende que ele veio da borda e já sabe pra onde ele volta quando fechar.

Não confunda com

Vale separar motion de microinteração. O motion é o uso amplo de movimento na interface, o tema maior, enquanto a microinteração é um detalhe pontual de feedback. Por isso dá pra dizer que a microinteração é um caso particular dentro do motion.

D

Em inglês

Motion

Pronúncia

mô-chan

Também chamado de

movimento, animação de interface

Origem

n/a

Fonte

Saiba mais

Material Design, Google, seção sobre motion e princípios de animação na interface