Enriquecendo seus sistemas com Microinteractions

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 microinterações ou, mais comumente, microinteractions. 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 microinteractions dentro da web.

Assim que você identificar as microinteraçõ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. 🙂

Vamos dar uma olhada em alguns exemplos de microinterações:

artisan4

plus_button

xninstantwf_checklist_sketch_02

Outra referência que eu gosto bastante de usar como exemplo é a animação criada pelo Smart Design:

Smart Thinking: Microinteractions Animation from Smart Design on Vimeo.

Microinteractions são focadas em melhorar a experiência do usuário sem a necessidade de criar uma nova funcionalidade para o produto.

Microinteraçõ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 microinterações:

diagram

Vamos entender essa proposta do Dan Saffer.

Trigger, como o usuário dá o start na microinteraction. 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 à microinteraçã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.

Tradução de texto dentro do Duolingo

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:

Mostrando erro pro usuário

Vale a pena lembrar que o som de erro também é um feedback!

Loops são utilizados pra definir por quanto tempo a microinteraction 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 microinteraction 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.

Exemplo de mode

Com as microinteractions 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 microinterações do produto que você está trabalhando, ou tem qualquer outra dica que possa melhorar a experiência do usuário?

Tags:

12 Comentários

  1. Renato M. 19/01/2016 at 15:11 #

    Não entendi noq isso muda a forma que fazemos hoje ?
    Tudo não é nessa mesma base, ação, regras, resultado, etc ?
    Desculpa, mas não notei diferença para a forma que programamos hoje.

  2. Lucas 19/01/2016 at 21:55 #

    Parabéns pelo post, Marco

  3. Marco Bruno 20/01/2016 at 01:15 #

    Obrigado Lucas.

  4. Juliane Albuquerque 20/01/2016 at 09:48 #

    Olá Marco, curti muito seu post, parabéns!
    Amo muito de microinterações e de criar microinterações. Concordo com você na questão de que elas deixam o produto mais divertido e sem dúvida deixa o usuário mais feliz e com vontade de voltar a usar seu produto. Mas acho que é necessário ter um certo cuidado ao implementa-las pois uma microinteração mal feita é o suficiente pra deixar o usuário bem irritado. Curti muito esse post 🙂

  5. Marco Bruno 20/01/2016 at 16:03 #

    Obrigado pelo feedback, Juliane.
    Por favor, continue acompanhando o blog que o Natan Souza e eu estamos focados em gerar conteúdo sobre UX e Front end nesse ano. 🙂

  6. Marco Bruno 22/01/2016 at 01:11 #

    Microinteraction é um técnica pra melhorar a experiência do usuário (UX).
    É um bom caminho utilizamos algumas ideias de desenvolvimento pra área de UX

  7. Brendo 29/01/2016 at 11:39 #

    Ola amigo, gostei do post, eu posso usar essas funções em um aplicativo?

  8. Marco Bruno 31/01/2016 at 17:04 #

    Que bom que gostou Brendo.
    Pode utilizar em aplicativos. Nos exemplos do post eu falo do Duolingo, ele é um aplicativo pra aprender novos idiomas que desenvolve muito bem suas microinteractions.

  9. Vinicius Silva 03/02/2016 at 17:29 #

    Excelente!!! Associado com o Post das heurísticas de Nielsen, já melhorei muito minha percepção do que fazer para melhorar minhas ideias… Por acaso, tem mais exemplos em sites?

  10. Marco Bruno 03/02/2016 at 18:11 #

    Tem bastante sites utilizando microinteractions, mas é um pouco complicado eu passar esse links aqui. Aí a sua pergunta me motivou a adicionar mais referencias no board que eu criei de microinteractions no pinterrest. Dá uma olhada no board pra ver se ajuda:
    https://br.pinterest.com/marcobrunobr

  11. Henrique 16/03/2016 at 09:58 #

    Nome bonito para uma coisa que é mais velha que andar para frente 🙂

  12. Marco Bruno 16/03/2016 at 20:04 #

    É verdade isso acontece bastante Henrique. Pessoas criam termos pra coisas que já existiam antes.
    Desculpe pela minha ignorância. Mas eu não conheço outra maneira de chamar microinteractions. Você pode me falar quem mais falou ou escreveu sobre o assunto além do Dan Saffer? Acho importante estudar mais sobre o assunto ou colocar referências pra outros autores sobre o tema, mesmo que utilizem outro termo pra falar do mesmo assunto. 🙂

    Desculpe mesmo se você se sentiu mal ou ofendido pelo termo criado por Dan Saffer. Mas eu achei o assunto bem interessante além dele ter criado uma ferramenta pra análise e criação de microinterections.

Deixe uma resposta