Você já ouviu falar em microinterações? Eles visam guiar o usuário pelo site, oferecendo a ele a melhor experiência de usuário. E você, já pensou em montar microinterações no seu site? Qual é o ponto deste tipo de funcionalidade? Concentre-se em micro-interações.
As microinterações desempenham um papel vital em suas interfaces de usuário . Este termo refere-se a eventos com uma finalidade específica, como comunicar o status, fornecer feedback ou ajudar os usuários a ver os resultados de uma ação.
As microinterações contribuem para uma boa experiência do usuário , que é mais envolvente, calorosa e humana. Neste artigo, oferecemos uma melhor compreensão do design de interação e microinterações , seus interesses e como implementá-los.
O que é uma microinteração?
Segundo Dan Saffer, criador do termo e agora Designer de Produto no Twitter, a definição de microinteração é a seguinte:
“pequenos momentos durante os quais o usuário e a interface interagem. “.
Uma micro-interação não deve ser confundida com design de interação , mas as práticas são bastante próximas. Uma microinteração se encaixa no design da interface e possui 4 características principais:
- Um gatilho como um hover, um clique, uma rolagem ou até mesmo uma exibição de página que gera uma ação;
- Regras que definem o que acontece como zoom, sombra ou aparência;
- Feedback , informando o usuário sobre o que está acontecendo ou onde ele está em um processo;
- Loops e modos como uma repetição, um sistema similar ou o cancelamento de uma ação.
Por que as microinterações são importantes?
As microinterações influenciam o comportamento do usuário . São pequenos detalhes quase invisíveis que podem fazer a diferença. Micro – interações criam satisfação e emoção. Eles simplificam a navegação , incentivam ações quando acompanhadas de call-to-action (CTA) claras e recompensam o usuário. Eles também fazem parte da identidade de uma marca .
As microinterações são particularmente importantes em dispositivos móveis e especialmente ao usar aplicativos móveis . Assim, você pode antecipar na hora de escolher a tecnologia para criar seu possível aplicativo móvel . Eles garantem uma jornada de usuário fluida e intuitiva , sem frustrações. Eles otimizam o funil de compra e melhoram a conversão. Existe hoje uma grande volatilidade de aplicativos em smartphones. Muitos aplicativos móveis são desinstalados no primeiro uso. Micro – interações podem ser um divisor de águas.
Tenha cuidado, no entanto, para não sobrecarregar sua interface com microinterações supérfluas . “Muitas microinterações matam microinterações”, com risco de efeito “árvore de Natal”. Eles também podem afetar a acessibilidade da interface , voltaremos a isso um pouco mais tarde.
Alguns exemplos de microinterações
Os exemplos mais conhecidos são, sem dúvida, as microinterações visíveis nas redes sociais, como os polegares para cima do Facebook Messenger ou similares que crescem de acordo com o tempo gasto pressionando o ícone:
Ou qualquer outro ícone para curtir postagens em redes sociais, como no Twitter:
Estamos falando aqui de microinteração emocional : oferece feedback imediato e gratificação ao internauta que pode sentir alegria e satisfação por ter curtido um conteúdo.
Aqui estão alguns outros exemplos de micro-interações bem pensadas oferecidas pelo designmodo :
- Após o clique em um botão “enviar” , a indicação de que o processo está em andamento e que foi bem-sucedido:
- Após a escolha de uma proposta, o aparecimento de um fundo colorido e a transformação da cruz em um “+” para indicar ao usuário a próxima ação a realizar:
- Durante o pagamento, a possibilidade de visualizar, escolher e modificar facilmente um cartão bancário pré-cadastrado. Aqui o usuário visualiza os diferentes cartões de crédito pré-cadastrados e o cartão selecionado:
Nestes três últimos casos, falamos de micro-interação pedagógica : essas micro-interações visam tornar a ação possível e alcançável compreendida.
Como implementar microinterações em uma abordagem de design
A implementação de micro-interações em uma abordagem de design passa por duas etapas principais: prototipagem e design de interações .
Primeiro passo: prototipagem
Antes de tudo, aconselhamos que você comece identificando os principais elementos de interação de sua interface do tipo adesivo (elementos que permanecem no local, como um menu fixo, por exemplo), efeitos de paralaxe (movimento de imagens em diferentes camadas), efeitos de rolagem, etc. O desafio é ter uma interface que seja visualmente atraente e eficaz. Para construir seu protótipo, coloque-se no lugar do usuário e considere suas aspirações e necessidades .
Quer otimizar sua experiência do usuário (UX)? Aprofunde suas habilidades com nosso dossiê dedicado a métodos e práticas de UX!
Segundo passo: o design das interações
Em segundo lugar, além de projetar o design, o designer de interface do usuário imagina as interações. Em particular, determina as microinterações principais , no próprio coração do produto, e as microinterações secundárias . Se você não tem inspiração para o design de UI/UX , especialmente para criar micro-interações , existem muitos recursos como as bibliotecas CodePen , Codrops e Dribbble. As comunidades de UI/UX fornecem muitos exemplos com XD ou Sketch.
Cuidado para não fazer uma microinteração durar: além de 400 milissegundos, mudamos para lógica de animação pura, e o usuário pode ter a impressão de perder seu tempo. Para garantir uma boa compreensão dessas microinterações, não hesite em realizar testes de usuário !
Microinterações e acessibilidade
Embora as microinterações ajudem a tornar as interfaces mais dinâmicas, às vezes elas podem prejudicar a acessibilidade. De fato, para certas categorias de usuários, as microinterações e o design de movimento podem tornar uma interface mais difícil de entender. Eles devem, portanto, poder ser desativados. Como tal, sua interface deve ser utilizável sem microinterações ou, em outras palavras, as microinterações não devem ser o único meio de transmitir uma informação ou uma ação .
Além disso, para melhor acessibilidade, recomenda-se favorecer microinterações simples , sem sobrecarga visual . Isso também contribuirá para a estética da sua interface!
Considere configurar testes A/B para validar a eficácia de suas microinterações . Esses testes permitem então descobrir qual microinteração é mais favorecida pelos usuários de acordo com duas possibilidades. Eles podem ser aplicados a CTAs com uma microinteração .
Assim, são esses detalhes que tornam a experiência do usuário mais fluida e agradável . Um bom design de interação depende de microinterações em todas as etapas da jornada do usuário. Sua implementação exige criatividade e habilidade técnica , o que exige uma troca constante entre o integrador e a direção artística. Isso ilustra mais uma vez a importância do espírito de equipe, trocas e habilidades mistas para um sistema digital de sucesso.
