O documento discute o conceito de microinterações e sua importância no design de experiência do usuário. Em três frases ou menos, o documento define microinterações como pequenos detalhes de interação que fornecem feedback ao usuário e mantêm sua atenção no produto, explora os componentes-chave de uma microinteração (gatilho, regras, feedback e loops/modos) e enfatiza que os detalhes nas microinterações são o que diferenciam produtos amados daqueles apenas tolerados.

1. microinterações
Os detalhes que importam

2. Olá!
Eu sou Michele Valongo
User Experience Designer, nerd, apaixonada por culinária,
jardinagem, organização e um pouco cartunista...
E você me encontra aqui:
@michelevalongo

3. O que é microinteração?

4. “Features are what draw people to your
product; details are what keep them
there. Microinteractions are those details.
Details are a delivery system for
emotions. They are the “feel” part of
“look and feel.”
Dan Saffer

5. Por que do tema?

6. Us, Wireframes por Michele Valongo

7. Não confunda
Microinterações com
Funcionalidades

8. ✖ Varios casos de uso
✖ Consome tempo
✖ Estimula a cognição
✖ Complexa
Microinteração
✖ Um caso de uso
✖ Breve
✖ Não exige esforço
✖ Simples
Funcionalidade

9. Player - Funcionalidade
Por Veronika Bass

10. Controle de volume - Microinteração
Por Nick Buturishvili

11. Exemplos físicos
Por Infographic Paradise

12. Elas são boas para...

13. Então use para:
✖ Prevenir erro
✖ Fornecer feedback e manter o usuário
informado;
✖ Tornar recurso mais utilizável ou
envolvente;
✖ Reduzir a complexidade de um
sistema para melhorar a experiência;

14. Por Smart Design

15. A ESTRUTURA

16. Partes que compõem a interação
Trigger Rules Feedback
Loops
&
Mode

17. Trigger
A microinteração começa com um gatilho
Por Gal Shir

18. Rules
Determina o fluxo, definindo regras para o que pode
e o que não pode acontecer na sequência de eventos
Por Chris Gannon

19. Feedback
É a forma como o usuário entende a interação
realizada
Por Chris Gannon

20. LOOPS & MODES
Determinam se haverá um prolongamento da
interação, uma mudança ou repetição.
Por Chris Gannon

21. Juntando tudo...

22. Por Volodymyr Kurbatov

23. Por Chris Zachary

24. Mas para valer a pena...

25. Então que seja:
✖ Eficiente
✖ Ser divertida
✖ Ter estilo
✖ Ser objetiva

26. Ok, segura essa empolgação!

27. Restrinção
Procure gordura para aparar.
Por Eddie Lobanovskiy

28. Narrativa
Mantenha a narrativa apertada e limpa

29. Movimento Único
Certifique-se de que suas microinterações ocorrem como um
movimento unificado.
Por Chris Gannon

30. A animação não te salvará
Certifique-se de seu design faz sentido antes de tentar
animá-lo.
Por Tony Babel

31. Detalhes são oportunidades
Ser implacável em sua atenção aos detalhes.
Por Daryl Ginn

32. “The difference between a product you
love and one you tolerate are often the
microinteractions you have with it.”
Dan Saffer

33. Obrigada!
Perguntas?
Você me encontra aqui:
@michelevalongo
michele.valongo@oi.net.br

34. Créditos
Agradecimentos à:
✖ Dan Saffer
✖ Us, Wireframes
✖ Exemplos: Smart Design, Veronika Bass, Nick
Buturishvili, Eddie Lobanovskiy, Chris Gannon,
Gal Shir, Infographic Paradise, Tony Babel, Daryl
Ginn,
✖ Presentation template by SlidesCarnival
✖ Photographs by Unsplash