Microinterações: 15 exemplos e como projetá-los
Microinterações explicadas: uma definição, as quatro partes de Dan Saffer, 15 exemplos reais agrupados por tipo, regras de design e como construí-las em CSS, Framer Motion, GSAP ou ExodeUI.
Ponto principal
Uma microinteração é um momento pequeno e contido em uma interface que faz uma coisa: curtir uma postagem, alternar uma configuração, confirmar um formulário ou completar um gesto. O termo e sua anatomia vêm de Dan Saffer, que define quatro partes. Um gatilho o inicia, as regras decidem o que acontece, o feedback mostra o resultado e os loops ou modos governam o que ele faz ao longo do tempo. Boas microinterações são curtas, respondem à entrada do próprio usuário e permanecem interrompíveis.
O que é uma microinteração?
Uma microinteração é a menor interação completa em um produto: uma única tarefa com começo, mudança e fim. Não é um fluxo completo. Curtir uma postagem é uma microinteração; escrever e publicar um comentário é um fluxo. A ideia e sua estrutura vêm do livro Microinteractions de Dan Saffer, que divide cada uma em quatro partes.
As quatro partes de uma microinteração
A estrutura de Dan Saffer divide uma microinteração em quatro componentes. Nomeá-los é útil porque a maioria dos bugs e movimentos ruins residem em um dos quatro, não no todo.
Acionar
O evento que o inicia. Iniciado pelo usuário (tocar, passar o mouse, manter pressionado, arrastar) ou iniciado pelo sistema (um download sendo concluído, um erro de rede chegando). Crédito: Dan Saffer.
Regras
O que acontece quando começa: estados válidos, restrições como limites de arrasto ou valores mínimos e máximos e a sequência de eventos. Crédito: Dan Saffer.
Opinião
Como o produto informa ao usuário o que aconteceu: a liquidação da primavera, a mudança de cor, a transformação do ícone, a atualização do texto. É aqui que vive a maior parte do motion design. Crédito: Dan Saffer.
Loops e modos
O que a interação faz ao longo do tempo e como os modos a alteram. A mesma alternância pode se comportar de maneira diferente no modo escuro ou em um layout compacto sem alterar sua lógica. Crédito: Dan Saffer.
Por que as microinterações são importantes
Uma microinteração é como uma interface responde ao usuário sem um parágrafo de texto. Confirma que uma ação foi recebida, mostra que algo ainda está funcionando ou explica o que acabou de mudar. Quando eles desaparecem, o mesmo produto parece mais pesado: os usuários tocam duas vezes porque nada lhes disse que o primeiro toque foi feito ou esperam em uma tela que não dá nenhum sinal de progresso. Os bons são mais sentidos do que notados, e esse é o ponto.
15 exemplos de microinteração
Eles são agrupados pelo que comunicam. Onde ExodeUI envia um exemplo correspondente, o nome é fornecido para que você possa abri-lo e editá-lo.
Botões e alternadores (pressione e estado)
1. Pressionar o botão: dimensionar para cerca de 0,92 ao apontar para baixo e retornar ao liberar (exemplo ExodeUI: Jelly Button). 2. Chave de alternância: tradução baseada em primavera com uma mudança de cor no commit (Gooey Toggle). 3. Mode switch: um controle segmentado que desliza seu indicador e transforma o rótulo ativo (Motion Switch).
Feedback do formulário (validação e envio)
4. Tremulação de entrada inválida: um pequeno empurrão horizontal que diz "verifique este campo" sem uma caixa de diálogo (Wiggle Text Input). 5. Envio em andamento: o botão se torna o indicador de progresso, para que o usuário nunca perca o lugar (Botão Enviar Animado). 6. Confirmação de sucesso: uma pequena explosão comemorativa no botão quando a ação ocorre (Botão de lançamento de foguete).
Carregando e progresso
7. Progresso circular: anel que preenche até o valor real e assenta com uma mola (Medidor Radial). 8. Medidor de nível ou atividade: uma barra que reage ao vivo aos dados recebidos, como nível de áudio (Onda Sonora).
Navegação
9. Alternar menu: um ícone que se transforma entre dois estados e revela o menu no lugar (Morph Nav). 10. Ampliação da doca: os itens próximos ao cursor sobem e crescem, depois se acomodam (Doca Magnética). 11. Seleção de guias: um indicador que desliza entre as guias em vez de piscar (Liquid Tab Bar).
Estados vazios e de sucesso
12. Estado vazio: uma pequena ilustração que é animada uma vez para suavizar uma tela em branco. 13. Revelação de recompensa: um presente ou crachá que abre com antecipação quando um marco é alcançado (Caixa de Presente Surpresa).
Puxar para atualizar
14. Puxar para atualizar: rolagem elástica que rastreia o arrasto, depois volta e se estabiliza ao soltar. O feedback é o alongamento, não um spinner.
Feedback de estilo tátil
15. Pulso de confirmação: uma breve escala e brilho no elemento que reflete o toque tátil no celular, para que a mesma ação seja sentida em um dispositivo sem motor de vibração.
Regras de design que os mantêm bons
Algumas regras separam uma microinteração que ajuda daquela que incomoda.
- Seja breve: o mais completo em aproximadamente 200-400ms; movimento mais longo em um elemento pequeno parece lento
- Comece no mesmo quadro da entrada; um início atrasado quebra o senso de causa e efeito
- Mantenha-o interrompível: se o usuário reverter a ação no meio do movimento, redirecione com velocidade em vez de reiniciar do zero
- Respeito prefere movimento reduzido: fornece um substituto estático ou cross-fade que ainda comunica a mudança
- Dê uma tarefa: se a interação precisar de mais de uma decisão, é um fluxo
Como construir microinterações
A ferramenta certa depende de quantas plataformas a mesma interação deve ser executada.
Somente CSS
Bom para casos simples e independentes: elevações de foco, anéis de foco e alternâncias acionadas por :checked ou uma mudança de classe. Transições e @keyframes são suficientes e não há nada para enviar além da folha de estilo.
Framer Motion ou GSAP (web)
Bom quando o movimento precisa de molas, gestos ou orquestração e só precisa rodar na web. Ambos fornecem molas interrompíveis e podem ser acionados pelo estado React.
ExodeUI (web, iOS e Android a partir de um arquivo)
Use isto quando a mesma interação tiver que se comportar de forma idêntica em um aplicativo React, um aplicativo SwiftUI e Flutter. Você o cria uma vez em um arquivo .exode e o tempo de execução o reproduz em cada plataforma, portanto, não há reescrita por plataforma.
Trecho de implementação em produção
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function SendButton() {
return (
<ExodeUICanvas
src="/send_button.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}Princípios-chave para lembrar
- Uma microinteração é uma pequena tarefa com um gatilho, regras, feedback e loops ou modos, as quatro partes nomeadas por Dan Saffer
- A maioria dos bons é concluída em cerca de 200-400 ms, começa no mesmo quadro da entrada e permanece interrompível
- O feedback é o que faz o trabalho: confirma a ação e explica o que mudou, muitas vezes sem qualquer texto
- Sempre forneça um substituto preferencial de movimento reduzido que carregue as mesmas informações sem movimento