Como funcionam as microinterações?

Por Yasmim Fonseca|
Atualizado: Jun 2021 |
Publicado: Jan 2018

Tendências atuais em design e nossa experiência aqui na dti vem apenas confirmar quão importante é ter uma mentalidade centrada no usuário. As microinterações são um ótimo exemplo de como pequenas mudanças podem tornar uma interface mais humanizada e amigável.

Nesse tipo de projeto, começamos definindo qual a real necessidade desse usuário e então propomos uma solução para que ele cumpra uma tarefa com eficiência e eficácia. Mas, não são apenas funcionalidades que conquistam um cliente. São os detalhes que tornam uma experiência memorável e fazem um produto se destacar de seus concorrentes.

Mas o que são microinterações, afinal?

Como o próprio nome sugere, microinterações são pequenos momentos que ajudam o usuário a concluir uma tarefa ou receber feedback do sistema. Animações em uma interface gráfica. Como quando damos like em uma postagem, são bons exemplos desses momentos pontuais de interação.

like

Quer ver mais conteúdos como esse?

Em resumo, os principais objetivos das microinterações são:

  • Comunicar o resultado de uma ação (feedback);
  • Realizar uma tarefa específica;
  • Aperfeiçoar a noção de manipulação direta;
  • Ajudar usuários a visualizar suas ações e evitar erros;

Microinterações funcionam tão bem pois garantem que o usuário se sinta no controle da interface. Perceba as consequências de suas ações e aprenda facilmente como navegar por um novo produto, tudo isso de uma forma visualmente interessante.

pulldown

A VirginAmerica, uma companhia aérea americana, recentemente lançou um novo website que explora de forma fantástica o conceito de microinterações.

Todos sabemos quão penosa pode ser a tarefa de fazer uma reserva e preencher formulários que parecem não ter fim. Mas será que essa tarefa não pode ser divertida? Com o propósito de solucionar essa questão, o estúdio Work&Co propôs para a VirginAmerica um design clean e divertido. Ele foi pontuado por microinterações que tornam a experiência amigável e receptiva.

virgin-form

No exemplo acima, podemos ver como o formulário de cadastro interage com o usuário! As mensagens de “Hey there” e “Nice Name” que aparecem após preenchidos os campos de nome, humanizam a interface e criam uma sensação de boas vindas.

virgin

Outro exemplo legal, é como o novo site da Virgin utiliza gifs para mostrar ao usuário, de uma forma lúdica, quais as funcionalidades disponíveis ou o que fazer em seguida.

Todas as interações acontecem de forma muito natural, sem distrair o usuário da sua tarefa principal: reservar um voo.

Importante

Com um pouco de pesquisa pela internet, encontramos diversos exemplos inspiradores de como comunicar ao usuário o status do sistema e o resultado de suas ações. Entretanto, mais importante do que entender o que é ou como criar uma microinteração, é ter em mente que ela deve cumprir um papel dentro da interface.

Talvez uma animação seja muito legal da primeira vez, mas depois da 20ª vez, se torne irritante. Atenção aos detalhes é essencial para criarmos uma experiência memorável. E só alcançamos isso, se nos colocamos no lugar do usuário!

Por: Yasmin Fonseca

Quer saber mais?