O que são Micro-interações? Por que, quando e como usá-las para melhorar a experiência do usuário?

Micro-interações são eventos que têm o objetivo de encantar os usuários dos mais diversos dispositivos e aplicativos, criando momentos envolventes, acolhedores e de praticidade ao acessarem plataformas e interfaces. Micro-interações conquistam o usuário por proporcionar para eles uma EXPERIÊNCIA.

Veja o exemplo abaixo:

 

(Polegares para cima – Facebook Messenger)

Esta animação é um bom exemplo de micro-interação, pois, cumpre três importantes funções:
1 Comunicar status e fornecer feedback
2 Melhorar o sentido de manipulação direta
3 Ajudar as pessoas a ver os resultados de suas ações.

Estrutura das Micro-interações:

As micro-interações podem ser divididas em quatro partes:
Gatilhos ¬— Ativam uma micro-interação. Os gatilhos podem ser iniciados pelo usuário ou pelo sistema.
Em um gatilho iniciado pelo usuário, o mesmo precisa iniciar uma ação.
Em um gatilho iniciado pelo sistema, o software detecta que certas qualificações estão sendo atendidas para então iniciar uma ação.
Regras — Determinam o que acontece quando uma micro-interação é acionada.
Feedback — Permite que as pessoas saibam o que está acontecendo. Qualquer coisa que um usuário veja, ouça ou sinta enquanto uma micro-interação está acontecendo é um feedback.
Loops e Modes — Determinam as meta-regras da micro-interação. O que acontece com uma micro-interação quando as condições mudam? (Todos os cenários possíveis devem ser pensados).

Movimentos são Emoções! Qual é a importância disso?
Se micro-interações são apenas pequenos elementos de design, por que se preocupar tanto com eles?

Infelizmente, muitos motions designers ainda fazem essa pergunta. Ignorar micro-interações pode lhe custar muitos clientes. Atenção aos detalhes é o que difere basicamente um projeto excepcional de um projeto comum.
Eis o porquê de se dedicar às micro-interações:
• Elas melhoram MUITO a compreensão de um projeto
• Elas facilitam a interação dos usuários com seu aplicativo, website, interface de usuário.
• Elas fornecem feedback instantâneo e relevante sobre uma ação concluída por/para um usuário
• Elas dão dicas e instruções para seus usuários
• Elas comunicam informações sobre determinados elementos, como sendo interativos ou não
• Elas tornam a experiência do usuário muito mais gratificante
• Elas incentivam compartilhamentos, interações positivas e comentários sobre o seu conteúdo pelo seu público
• Elas direcionam a atenção dos usuários
• Por último e não menos importante, micro-interações trazem para o seu site ou aplicativo, maior conectividade EMOCIONAL com o usuário.

Micro-interações bem projetadas são um sinal claro de um cuidado especial com relação ao usuário. É por isso que eles valorizam muito.
Um usuário sabe o que fazer se a ação foi ou não corretamente executada e aprovada pelo sistema — um aplicativo ou site que fornece um feedback visual imediato, ensina o usuário a trabalhar com o sistema de forma prática e eficiente.

Quando as micro-interações são feitas corretamente, elas podem causar sentimentos positivos sobre sua marca e influenciar as ações dos usuários, muitas vezes sem que as pessoas percebam o motivo. Se você gosta ou não de um aspecto de um produto, você tem uma predisposição positiva ou negativa em relação a ele. Este assim chamado Efeito Hallo, pode jogar a favor e contra você. Em mãos sábias, esse conhecimento pode ajudar a melhorar o feedback de um usuário em seus projetos. Ao prestar a devida atenção aos detalhes, é possível deixar seus usuários satisfeitos com sua marca e tudo o que ela oferece.

Quando usar micro-interações?
Embora sejam detalhes pequenos, as micro-interações são o motor fundamental que move uma boa experiência de usuário.
Abaixo temos sete exemplos principais de micro-interações, quando usá-las e seu impacto na experiência dos usuários:
Swipe — A ação Swipe elimina o toque e é muito mais interativa e suave. Isso ajuda o usuário a alternar rapidamente entre as guias e obter mais informações sobre o conteúdo que está acessando. O swiping é um gesto muito comum e guia os usuários inconscientemente, sem fazê-los pensar; o que é um princípio fundamental de UX Design “Não faça seus usuários pensarem”. Além disso, é muito divertido e viciante.

Entrada de dados
Todos nós sabemos as frustrações de configurar senha ou criar uma conta. Essa ação pode facilmente criar arrepios. Embora as sugestões proativas sobre a força e o uso da senha facilitem o avanço do usuário, algumas ações interativas no momento da entrada de dados também mantêm os usuários envolvidos com o processo e ajudam a atingir a meta.

Animações
A animação simplesmente habilita e melhora as micro-interações. Eles personificam um bom design; sua presença pode não ser notada, mas a ausência afeta todo mundo. Ela age como uma cola que ajuda os projetistas a tornar o processo mais simples, interessante e viciante. Porém, tenha muito cuidado, pois, eles devem envolver os usuários e não os distrair ou frustrá-los; atrasar o processamento ou introduzir novo estilo no site pode causar confusão.

Status do sistema
É essencial manter o usuário informado sobre o status atual em um site ou aplicativo. Se eles não forem informados, são grandes as chances de que fiquem irritados e fechem o site ou aplicativo. As micro-interações permitem saber exatamente o que está acontecendo, quanto tempo o processo levará para ser concluído etc. Mesmo as mensagens de falha podem ser bem-humoradas, contudo, eficazes para manter a confiança do usuário.

Torne os vídeos mais interessantes
Todo mundo está constantemente buscando informações, todos nós. Tutoriais com a ajuda de micro-interação, orientam os usuários sobre o trabalho de um aplicativo, simplificando e destacando os recursos básicos e controles importantes para facilitar a compreensão.

O “Call to Action”
Micro-interações essencialmente incentivam o usuário a interagir com um aplicativo ou site. O recurso “Call to Action” incute um sentimento de realização e também um fator de empatia no comportamento do usuário, e a melhor maneira de fazer com que ele se relacione com o CTA é torná-lo interessante e atrativo, quase magnético.

Botões animados
Eles desempenham o papel de gerenciadores de informações, permitindo que o usuário conheça o caminho pelo seu aplicativo ou site. Precisamos prestar atenção à cor, forma, efeitos especiais, animações, posicionamento e textura para tornar a experiência de usuário perfeita.

Nós, humanos, somos programados para buscar gratificação instantânea.
É uma tendência comum ignorar as micro-interações em um cenário mais amplo das coisas, mas elas são muito importantes para cativar seus usuários e deixá-los imersos em seus sistemas. Tudo está nos detalhes — como se diz popularmente. Pequenas experiências e recursos de design, como alternar entre telas, ou realçar um recurso, ou exibir uma nova notificação, podem fazer uma grande diferença no aprimoramento da experiência dos usuários.

Como projetar micro-interações?
Fazer micro-interações é excitante para os designers, porque é possível experimentar novas soluções de design e procurar formas alternativas de surpreender os usuários. Mas para fazer isso você deve ter em mente algumas coisas:

Coloque-se no lugar dos usuários e use tudo o que você tem para descobrir como eles interagem com seu aplicativo ou site.
Crie animações funcionais. Animações que têm não apenas uma estética elaborada, mas que são capazes de melhorar a experiência do usuário.
Divirta-se e entretenha seus usuários. O motivo para o usuário continuar usando um aplicativo, é a sensação despertada nele durante a interação. Se o usuário aproveita a experiência e acha isso agradável, ele retorna.
Não exagere! Exagerar nas animações pode ter efeito contrário ao esperado nos usuários. Pode ficar chato, cansativo e confuso, afastando seu público do seu site ou aplicativo.
Use uma linguagem humana e não técnica. Uma simulação divertida de uma reação humana aplicada ao seu sistema, pode fazer o usuário esquecer por um momento a frustração de uma página em branco ou algum tipo de erro dentro de um app.

Ferramentas para projetar micro-interações
Então, com que tipos de ferramentas de prototipagem os UX Designers têm que se familiarizar para construir micro-interações?
Existem muitas ferramentas por aí, mas nem todo mundo sabe o que funciona melhor para tarefas específicas de micro-interação. Mas não se preocupe, aqui estão algumas recomendações para você:

Se você estiver familiarizado com códigos:

• Celular: XCode, estúdio Android
• Celular ou Web: Framer
• Web: Animação CSS

Se você deseja projetar uma interação entre um push de tela e um módulo:
• Invision e Marvel.

Se você quiser criar interações mais detalhadas:
• Princípio, Adobe CC, Origami Studio e ProtoPie.

Se você deseja criar interações detalhadas + animação:
• Adobe After Effects.

Para garantir que suas micro-interações terão sucesso, certifique-se de que sua equipe possua as características mencionadas acima e se envolva bem com o processo UX.
Estude profundamente, faça cursos como UX MOTION DESIGN e tenha atenção minuciosa aos detalhes.

TUDO PODE ESTAR NOS MÍNIMOS DETALHES!

Boa sorte com sua jornada pelas micro-interações em busca da experiência de usuário perfeita!