microinteracciones: diseñando detalles para generar más engagement

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

Upload: sandra-vilchez

Post on 22-Jan-2018

1.292 views

Category:

Design


0 download

TRANSCRIPT

Page 1: Microinteracciones: Diseñando detalles para generar más engagement

1

Microinteracciones: Diseñando detalles para

generar más engagement

Noviembre 2015

BCN MAD SCL MDE BOG LIM MEX MIA SFO

Page 2: Microinteracciones: Diseñando detalles para generar más engagement

2

En nuestra vida diaria, interactuamos con productos y

sistemas todo el tiempo.

Page 3: Microinteracciones: Diseñando detalles para generar más engagement

3

En nuestra vida diaria, interactuamos con productos y

sistemas todo el tiempo.

Page 4: Microinteracciones: Diseñando detalles para generar más engagement

4

En nuestra vida diaria, interactuamos con productos y

sistemas todo el tiempo.

Page 5: Microinteracciones: Diseñando detalles para generar más engagement

5

Pero amamos a unos productos…

Page 6: Microinteracciones: Diseñando detalles para generar más engagement

6

Y a otros, simplemente los toleramos.

Page 7: Microinteracciones: Diseñando detalles para generar más engagement

7

Los usuarios son más exigentes y no

se conforman con poco, cada vez

demandan más y mejores experiencias

de las marcas

Page 8: Microinteracciones: Diseñando detalles para generar más engagement

8

Para poder satisfacerlos, nos hemos

decantado por darle solución a los

macroproblemas para que nos amen.

Page 9: Microinteracciones: Diseñando detalles para generar más engagement

9

Page 10: Microinteracciones: Diseñando detalles para generar más engagement

11

Pero al trabajar a una escala tan macro,

una parte importante del diseño a

menudo se pierde…

Page 11: Microinteracciones: Diseñando detalles para generar más engagement

12

Los detalles que deleitan

Page 12: Microinteracciones: Diseñando detalles para generar más engagement

13

Page 13: Microinteracciones: Diseñando detalles para generar más engagement

14

Los productos que amamos muestran

una atención al detalle:

Page 14: Microinteracciones: Diseñando detalles para generar más engagement

15

La hermosa curva, el clic satisfactorio, el modelo

mental comprensible

Page 15: Microinteracciones: Diseñando detalles para generar más engagement

16

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

Page 16: Microinteracciones: Diseñando detalles para generar más engagement

17

Estos son difíciles de lograr cuando se

trabaja en una gran escala.

Page 17: Microinteracciones: Diseñando detalles para generar más engagement

18

Apple es el rey del detalle. Por eso lo amamos y

odiamos todo lo que lleva la marca Microsoft

Page 18: Microinteracciones: Diseñando detalles para generar más engagement

19

Al enviar un email, compartir un archivo, agrandar una

foto, cerrar una pestaña o hacer un retweet.

Page 19: Microinteracciones: Diseñando detalles para generar más engagement

20

Al enviar un email, compartir un archivo, agrandar una

foto, cerrar una pestaña o hacer un retweet.

Page 20: Microinteracciones: Diseñando detalles para generar más engagement

21

Al enviar un email, compartir un archivo, agrandar una

foto, cerrar una pestaña o hacer un retweet.

Page 21: Microinteracciones: Diseñando detalles para generar más engagement

22

El contacto que tenemos con el software

es íntimo; un acercamiento que define

nuestra experiencia con el producto.

Page 22: Microinteracciones: Diseñando detalles para generar más engagement

23

Es aquí donde se da el real punto de

inflexión

Page 23: Microinteracciones: Diseñando detalles para generar más engagement

24

Lo que hace que lo amemoso lo odiemos.

Page 24: Microinteracciones: Diseñando detalles para generar más engagement

25

Lo que realmente determina el

engagement del usuario con la

marca… Su éxito.

Page 25: Microinteracciones: Diseñando detalles para generar más engagement

26

A esos mini momentos de verdad, es lo

que llamamos microinteracciones.

Page 26: Microinteracciones: Diseñando detalles para generar más engagement

27

¿QUÉ SON LAS

MICROINTERACCIONES?

Page 27: Microinteracciones: Diseñando detalles para generar más engagement

28

Las microinteracciones están

contenidas en momentos que giran

alrededor de un solo caso de uso de una

tarea principal.

Page 28: Microinteracciones: Diseñando detalles para generar más engagement

29

• Son simples

• Son generalmente breves

• No requieren demasiado esfuerzo

Page 29: Microinteracciones: Diseñando detalles para generar más engagement

30

Crear un evento de calendario, añadir una búsqueda de contactos

o hacer un comentario son interacciones fáciles de realizar

Page 30: Microinteracciones: Diseñando detalles para generar más engagement

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

Page 31: Microinteracciones: Diseñando detalles para generar más engagement

32

¿Pero por qué es tan importante

enfocarnos en ellas?

Page 32: Microinteracciones: Diseñando detalles para generar más engagement

33

Las microinteracciones evocan

emociones y la emoción forma parte del

50 % de la experiencia.

Page 33: Microinteracciones: Diseñando detalles para generar más engagement

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.

Page 34: Microinteracciones: Diseñando detalles para generar más engagement

35

Más del 95 % del pensamiento humano

es empujado por influencias

inconscientes, cosas que ni siquiera

consideramos pueden generar una

respuesta emocional.

Page 35: Microinteracciones: Diseñando detalles para generar más engagement

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

Page 36: Microinteracciones: Diseñando detalles para generar más engagement

37

Si tu mayor preocupación pasa por la

experiencia del usuario, entonces debes

preocuparte por las

microinteracciones.

Page 37: Microinteracciones: Diseñando detalles para generar más engagement

38

Y convertirlas en momentos reflexivos

de deleite.

Page 38: Microinteracciones: Diseñando detalles para generar más engagement

39

El famoso diseñador Charles Eames dice a menudo,

"Los detalles no son los detalles. Ellos son el diseño.”

Page 39: Microinteracciones: Diseñando detalles para generar más engagement

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.

Page 40: Microinteracciones: Diseñando detalles para generar más engagement

41

El Iphone no sería lo que es si Apple no tuviera sumo

cuidado en trabajar sus interacciones

Page 41: Microinteracciones: Diseñando detalles para generar más engagement

42

ESTRUCTURA DE LAS

MICROINTERACCIONES

Page 42: Microinteracciones: Diseñando detalles para generar más engagement

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

Page 43: Microinteracciones: Diseñando detalles para generar más engagement

44

DISPARADOR

Page 44: Microinteracciones: Diseñando detalles para generar más engagement

45

REGLAS

Page 45: Microinteracciones: Diseñando detalles para generar más engagement

46

RETROALIMENT

ACIÓN

Page 46: Microinteracciones: Diseñando detalles para generar más engagement

47

LOOPS&MODES

Page 47: Microinteracciones: Diseñando detalles para generar más engagement

48

¿CÓMO TRABAJAR BUENAS

INTERACCIONES?

Page 48: Microinteracciones: Diseñando detalles para generar más engagement

49

¿Entonces cómo podemos refinar los

detalles para hacer que un producto sea

exitoso y genere una excelente UX?

Page 49: Microinteracciones: Diseñando detalles para generar más engagement

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

Page 50: Microinteracciones: Diseñando detalles para generar más engagement

51

Visualmente pulido

Page 51: Microinteracciones: Diseñando detalles para generar más engagement

52

Atención a los microcopys

Page 52: Microinteracciones: Diseñando detalles para generar más engagement

53

Transiciones con un propósito concreto

Page 53: Microinteracciones: Diseñando detalles para generar más engagement

54

Inspirándonse en la vida real

Page 54: Microinteracciones: Diseñando detalles para generar más engagement

55

Con una pizca de humor

Page 55: Microinteracciones: Diseñando detalles para generar más engagement

56

Algún regalito de por medio

Page 56: Microinteracciones: Diseñando detalles para generar más engagement

57

Algún regalito de por medio

Page 57: Microinteracciones: Diseñando detalles para generar más engagement

58

Y ahora, ¿A dedicarle más tiempo a

trabajar esos grandes pequeños

detallitos?

Page 58: Microinteracciones: Diseñando detalles para generar más engagement

59

¿PREGUNTAS?

Page 59: Microinteracciones: Diseñando detalles para generar más engagement

60