Animacao

Movimento com proposito na interface, pra mostrar o que mudou e pra onde olhar.

Hard

O que é

Animacao em interface e usar movimento de proposito, seja pra confirmar uma acao, guiar a atencao ou explicar uma transicao. Quando e bem feita, ela liga o que a pessoa fez ao que aconteceu na tela. Um botao que reage ao toque, por exemplo, diz sem nenhum texto que o clique foi registrado.

O valor por tras disso e reduzir a incerteza. Um card que desliza pra fora confirma que ele sumiu, e uma transicao entre telas mantem o contexto pra a pessoa nao se perder. No onboarding, mostrar um passo em movimento costuma ensinar mais rapido que um paragrafo inteiro.

Ainda assim, tem dois cuidados que nao da pra pular. Um e o desempenho, ja que animacao demais trava aparelho fraco. O outro e a acessibilidade, porque vale oferecer um modo de movimento reduzido pra quem passa mal com isso. No fim, o movimento existe pra servir a tarefa, e nao pra enfeitar.

Em uma frase

Essa animação aqui está só enfeitando; vamos deixar só o feedback que mostra que a ação deu certo.

A pergunta que ele responde

Quando o movimento na tela ajuda a pessoa e quando ele só atrapalha?

Quando usar

Ajuda pra dar feedback de uma acao, manter o contexto numa transicao ou ensinar um passo no onboarding.

Como não usar

O cuidado e nao encher a tela de movimento que distrai, pesa no aparelho e ainda ignora quem precisa de movimento reduzido.

Na prática

Pense no momento em que voce salva algo e um check curto aparece e some. Sem ler nenhuma mensagem, a pessoa ja entende que deu certo.

Não confunda com

Vale separar animacao de enfeite. A animacao com proposito comunica estado e direcao, enquanto o enfeite so chama atencao pra si mesmo e acaba atrapalhando.

D

Em inglês

Animation

Pronúncia

n/a

Também chamado de

animacao, motion, microinteracao animada

Origem

n/a

Fonte

Saiba mais

Val Head, Designing Interface Animation