Microinterações

Pequenos detalhes de feedback, como animação, toggle e confirmação, que fazem a interface parecer viva.

Hard

O que é

Microinterações são os elementos pequenos e contidos da interface que cumprem um propósito só, que é dar feedback, confirmar uma ação ou guiar a pessoa numa tarefa. Pense na animação de um botão pressionado, no indicador de digitação ou no aviso de que a configuração foi salva.

Parecem detalhe, mas moldam a percepção de resposta do produto. Sem elas, a interface parece estática e a pessoa fica na dúvida se o clique funcionou, e, com um destaque ou animação sutil, ela ganha confiança e clareza sobre o que acabou de acontecer.

Duas regras seguram a coisa. Acessibilidade, porque não dá pra depender só de cor, então vale combinar sinal visual, sonoro e às vezes tátil. E equilíbrio, já que microinteração demais distrai e de menos deixa o produto frio. O bom é proposital, rápido e consistente com o resto.

Em uma frase

Falta uma microinteração nesse botão, a galera clica duas vezes porque não sabe se salvou.

A pergunta que ele responde

Como eu mostro pra pessoa que o clique funcionou sem ela ficar na dúvida?

Quando usar

Use em qualquer ponto onde a pessoa age e precisa de confirmação de que o sistema recebeu e respondeu.

Como não usar

O cuidado é não espalhar animação por toda parte só pra parecer charmoso, porque aí ela atrapalha a tarefa em vez de ajudar.

Na prática

Pense num botão de salvar que mostra um check rápido depois do clique. Com esse pequeno sinal, a pessoa para de clicar de novo achando que nada aconteceu.

Não confunda com

Vale separar microinteração de motion. A microinteração é o detalhe funcional de feedback de uma ação específica, enquanto o motion é o uso amplo de movimento e transição na interface. Pode pensar assim: a microinteração é um caso particular dentro do motion.

D

Em inglês

Microinteractions

Pronúncia

n/a

Também chamado de

microinteração

Origem

n/a

Fonte

Saiba mais

Dan Saffer, Microinteractions: Designing with Details