3 minutos de leitura
Autor(a)
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
No nosso dia a dia realizamos tarefas como aumentar o volume do rádio, trocar o canal da TV, abrir um torneira e fechar a porta. Todas essas pequenas tarefas são o que chamamos de micro interações ou, mais comumente, micro-interactions. Pensando da mesma forma no mundo web, um usuário que visita um e-commerce adiciona o produto em um carrinho, navega por um carousel de fotos do produto, clica em botões, e por aí vai - essas são as micro-interactions dentro da web.
Assim que você identificar as micro-interações dentro do seu produto, o próximo passo é criar um "feedback" (que é uma das 10 heurísticas de Nielsen) mais "próximo do mundo real" (outra heurística de Nielsen). Dessa forma, sem criar uma nova funcionalidade, você torna o seu produto mais divertido que o do seu concorrente. :-)
Design e UX: saiba mais sobre essa relação
Ler mais
Easing em animações: entenda os conceitos
Ler mais
Por que UX? Sobre a minha transição do design de interface para o design de usabilidade
Ler mais
Vamos dar uma olhada em alguns exemplos de micro interações:
Outra referência que eu gosto bastante de usar como exemplo é a animação criada pelo Smart Design:
Micro interações parecem ser um negócio legal, mas não é tão simples colocá-las na prática. Exatamente por este motivo, Dan Saffer, o cara que criou o termo, também criou um fluxo pra facilitar o desenvolvimento das nossas micro interações:
Vamos entender essa proposta do Dan Saffer.
Trigger, como o usuário dá o start na micro-interaction. Pode ser um mouse over, um click, um toque na tela do celular, e por aí vai.
Rules, esse é o momento de levantar todas as regras relacionadas à micro interação. Por exemplo, dentro do jogo ou plataforma de ensino de muitos idiomas Duolingo, você não pode errar a frase que está realizando a tradução.
Feedback. Com todas as rules que você levantou, esse é o momento de definir como o feedback será representado pro usuário quando ele acionar uma das rules. Por exemplo, quando o usuário preencher a tradução errada e em seguida clicar no botão (trigger) verificar a plataforma tem que mostrar pro usuário qual foi a palavra que ele errou:
Vale a pena lembrar que o som de erro também é um feedback!
Loops são utilizados pra definir por quanto tempo a micro-interaction vai acontecer ou se ela se repete com alguma interação do usuário ou conjunto de regras.
Modes são modos diferentes da mesma micro-interaction que podem ser disparados por uma variação da interação do usuário. Por exemplo, dentro do Duolingo pra você conseguir fazer um módulo 2 é necessário fazer o módulo 1. Mas há um exercício que permite que você pule vários módulos, com base no seu conhecimento.
Com as micro-interactions estamos melhorando a experiência do usuário no Alura, na Casa do Código e no site da Caelum. E você, faz alguma coisa diferente pra criar as micro interações do produto que você está trabalhando, ou tem qualquer outra dica que possa melhorar a experiência do usuário?
Avalie este artigo