Resumo Rápido (TL;DR)
Microinterações são pequenos feedbacks que respondem às ações de uma pessoa no site. Mudanças de estado, mensagens e indicadores de processamento ajudam a esclarecer o que aconteceu, desde que sejam discretos, acessíveis e não atrapalhem a tarefa.
Uma interface precisa informar quando uma ação foi reconhecida, está sendo processada ou encontrou um problema. Sem esse retorno, a pessoa pode não saber se o toque funcionou, se deve aguardar ou se precisa corrigir algum campo. A solução não é animar tudo, mas escolher sinais que expliquem o estado da interface.
Microinterações não determinam conversão ou comportamento. Elas são uma parte da usabilidade e devem ser avaliadas junto com conteúdo, hierarquia, acessibilidade, desempenho e clareza da tarefa.
O que são microinterações?
Microinterações
São pequenos momentos de design interativo que respondem a uma ação ou mudança de estado, como alterar a aparência de um botão, indicar carregamento, confirmar o envio de um formulário ou informar um erro.
Como aplicar com cuidado
Confirmar a ação
Mostre uma mudança de estado quando a pessoa tocar em um botão, abrir um menu ou selecionar uma opção.
Informar o processamento
Use mensagens ou indicadores quando uma solicitação levar tempo, evitando que a pessoa envie o mesmo formulário repetidamente.
Explicar erros
Indique o campo que precisa de atenção, descreva o problema em linguagem simples e preserve os dados já preenchidos quando possível.
Respeitar acessibilidade
Não dependa apenas de cor ou movimento; mantenha foco visível, contraste adequado, mensagens compreensíveis e suporte à preferência por menos animação.
O feedback deve esclarecer a tarefa, não competir com ela. Uma mudança simples e compreensível costuma ser mais útil do que uma animação chamativa.
Estados que merecem atenção
| Situação | Pergunta de revisão | Possível solução |
|---|---|---|
| Clique ou toque | A interface indica que a ação foi reconhecida? | Alteração de estado, foco ou retorno textual perceptível |
| Carregamento | A pessoa sabe que a solicitação continua em andamento? | Indicador com mensagem e prevenção de envios repetidos |
| Sucesso | O resultado da ação ficou claro? | Confirmação objetiva e próximo passo compreensível |
| Erro | É possível identificar o que precisa ser corrigido? | Mensagem junto ao campo, com instrução específica |
| Animação | O movimento ajuda a orientação sem prejudicar leitura ou desempenho? | Transição breve, opcional e compatível com preferências de acessibilidade |
Teste microinterações em celular, teclado e leitor de tela quando aplicável. Para revisar a usabilidade de uma interface, conheça as soluções ou descreva o contexto pela página de contato.