Las microinteracciones ayudan a generar grandes y memorables experiencias en el usuario, sin embargo cuando diseñamos productos digitales, es en lo que menos reparamos. Aquí hablamos de que son, su importancia y como diseñarlas de la mejor manera

1. 1
Microinteracciones: Diseñando detalles para
generar más engagement
Noviembre 2015
BCN MAD SCL MDE BOG LIM MEX MIA SFO

2. 2
En nuestra vida diaria, interactuamos con productos y
sistemas todo el tiempo.

3. 3
En nuestra vida diaria, interactuamos con productos y
sistemas todo el tiempo.

4. 4
En nuestra vida diaria, interactuamos con productos y
sistemas todo el tiempo.

5. 5
Pero amamos a unos productos…

6. 6
Y a otros, simplemente los toleramos.

7. 7
Los usuarios son más exigentes y no
se conforman con poco, cada vez
demandan más y mejores experiencias
de las marcas

8. 8
Para poder satisfacerlos, nos hemos
decantado por darle solución a los
macroproblemas para que nos amen.

9. 9

10. 11
Pero al trabajar a una escala tan macro,
una parte importante del diseño a
menudo se pierde…

11. 12
Los detalles que deleitan

12. 13

13. 14
Los productos que amamos muestran
una atención al detalle:

14. 15
La hermosa curva, el clic satisfactorio, el modelo
mental comprensible

15. 16
O un pedazo de retroalimentación que te hace sonreír

16. 17
Estos son difíciles de lograr cuando se
trabaja en una gran escala.

17. 18
Apple es el rey del detalle. Por eso lo amamos y
odiamos todo lo que lleva la marca Microsoft

18. 19
Al enviar un email, compartir un archivo, agrandar una
foto, cerrar una pestaña o hacer un retweet.

19. 20
Al enviar un email, compartir un archivo, agrandar una
foto, cerrar una pestaña o hacer un retweet.

20. 21
Al enviar un email, compartir un archivo, agrandar una
foto, cerrar una pestaña o hacer un retweet.

21. 22
El contacto que tenemos con el software
es íntimo; un acercamiento que define
nuestra experiencia con el producto.

22. 23
Es aquí donde se da el real punto de
inflexión

23. 24
Lo que hace que lo amemos
o lo odiemos.

24. 25
Lo que realmente determina el
engagement del usuario con la
marca… Su éxito.

25. 26
A esos mini momentos de verdad, es lo
que llamamos microinteracciones.

26. 27
¿QUÉ SON LAS
MICROINTERACCIONES?

27. 28
Las microinteracciones están
contenidas en momentos que giran
alrededor de un solo caso de uso de una
tarea principal.

28. 29
• Son simples
• Son generalmente breves
• No requieren demasiado esfuerzo

29. 30
Crear un evento de calendario, añadir una búsqueda de contactos
o hacer un comentario son interacciones fáciles de realizar

30. 31
Al hacer UX, son estas interacciones
simples y pequeñas las que solemos
pasar por alto o dejamos para el último
momento, haciéndolos aburridos

31. 32
¿Pero por qué es tan importante
enfocarnos en ellas?

32. 33
Las microinteracciones evocan
emociones y la emoción forma parte del
50 % de la experiencia.

33. 34
Se puede llegar a tomar 12
experiencias positivas, para
compensar una experiencia negativa
que haya tenido un cliente… si es que
nos da la oportunidad de brindársela.

34. 35
Más del 95 % del pensamiento humano
es empujado por influencias
inconscientes, cosas que ni siquiera
consideramos pueden generar una
respuesta emocional.

35. 36
20000 momentos en un día son
los que nuestro cerebro evalúa y graba
como experiencias.
Daniel Kahneman,
premio nobel de economía 2012

36. 37
Si tu mayor preocupación pasa por la
experiencia del usuario, entonces debes
preocuparte por las
microinteracciones.

37. 38
Y convertirlas en momentos reflexivos
de deleite.

38. 39
El famoso diseñador Charles Eames dice a menudo,
"Los detalles no son los detalles. Ellos son el diseño.”

39. 40
Los detalles necesita ser increíblemente
sencillos y muy intuitivos. Obsesionarse
con estos detalles de diseño hacen toda
la diferencia en la experiencia del
usuario.

40. 41
El Iphone no sería lo que es si Apple no tuviera sumo
cuidado en trabajar sus interacciones

41. 42
ESTRUCTURA DE LAS
MICROINTERACCIONES

42. 43
DISPARADOR REGLAS RETROALIMENT
ACIÓN
LOOPS&MODES
Es el detonante que
inicia una
microinteracción
Definen lo que se
puede hacer y lo que
no
Nos permite saber lo
que está pasando
Determina la acción y
la duración de la
microinteracción

43. 44
DISPARADOR

44. 45
REGLAS

45. 46
RETROALIMENT
ACIÓN

46. 47
LOOPS&MODES

47. 48
¿CÓMO TRABAJAR BUENAS
INTERACCIONES?

48. 49
¿Entonces cómo podemos refinar los
detalles para hacer que un producto sea
exitoso y genere una excelente UX?

49. 50
Adaptar nuestro diseño a cada
usuario de distinto tipo.
Reducir complicaciones que
reduzcan su entendimiento.
Tratar cada funcionalidad
como un conjunto de
microinteracciones
vinculadas.
1 2 3

50. 51
Visualmente pulido

51. 52
Atención a los microcopys

52. 53
Transiciones con un propósito concreto

53. 54
Inspirándonse en la vida real

54. 55
Con una pizca de humor

55. 56
Algún regalito de por medio

56. 57
Algún regalito de por medio

57. 58
Y ahora, ¿A dedicarle más tiempo a
trabajar esos grandes pequeños
detallitos?

58. 59
¿PREGUNTAS?

59. 60