El documento habla sobre los principios básicos del diseño de interacción e interfaces. Explica conceptos como user experience, user interface e interaction design. Luego discute sobre diferentes tipos de interfaces como CLI, GUI, etc. y los principios del diseño de interfaces como la abstracción y el control. Finalmente, analiza el caso "BurgerIcon" y ofrece recomendaciones para mejorar la interacción usuario-interfaz basadas en principios como la consistencia, la invitación a interactuar y la facilidad de aprendizaje.
4. User Experience
Como piensan y sienten los usuarios
User Interface
Aquellos elementos con los que interactuará el usuario
Hablamos de…
5. User Experience
Como piensan y sienten los usuarios
User Interface
Aquellos elementos con los que interactuará el usuario
Interaction Design
Como interactuan los usuarios y la interfaz
Hablamos de…
12. Interfaces
Principios del diseño de interfaces
Hablamos de…
http://www.fastcodesign.com/3053406/how-apple-is-giving-design-a-bad-name
13. Interfaces
Principios del diseño de interfaces
caso Apple
Hablamos de…
http://www.fastcodesign.com/3053406/how-apple-is-giving-design-a-bad-name
14. Interfaces
Principios del diseño de interfaces
caso Apple
BurgerIcon
Hablamos de…
http://www.fastcodesign.com/3053406/how-apple-is-giving-design-a-bad-name
15. Interfaces
Principios del diseño de interfaces
caso Apple
BurgerIcon
Aprendizaje
Hablamos de…
http://www.fastcodesign.com/3053406/how-apple-is-giving-design-a-bad-name
30. Caso “BurgerIcon”
¿La cosa va de comida?
Ventajas
• Implementación rapidísima
• Los usuarios han aprendido a reconocer.
• departamentos de marketing y/o diseño conocen y
que comprarán sin rechistar.
31. Caso “BurgerIcon”
¿La cosa va de comida?
Ventajas
• Implementación rapidísima
• Los usuarios han aprendido a reconocer.
• departamentos de marketing y/o diseño conocen y
que comprarán sin rechistar.
Inconvenientes
• Hay usuarios que siguen sin identificarlo
• Lo que está fuera de la vista está fuera de la mente
• Otro click
• ¿JavaScript?
• Mal uso del mismo recurso
• Patrones de navegación entre plataformas
• No es llamativo
39. Caso “BurgerIcon”
Creo que puedo convencer a mi jefe… ¿Qué puedo hacer?
SAL A LA CALLE
TEST DE GUERRILLA
40. Caso “BurgerIcon”
Creo que puedo convencer a mi jefe… ¿Qué puedo hacer?
SAL A LA CALLE
TEST DE GUERRILLA
DEMUESTRA QUE HAY SOLUCIONES MEJORES
• Icon Pizza (pestañas superiores)
41. Caso “BurgerIcon”
Creo que puedo convencer a mi jefe… ¿Qué puedo hacer?
SAL A LA CALLE
TEST DE GUERRILLA
• “ContentFirst”
DEMUESTRA QUE HAY SOLUCIONES MEJORES
• Icon Pizza (pestañas superiores)
47. Caso “BurgerIcon”
si has luchado pero sigue sin querer cambiar…
• Sigue intentándolo…
• Haz que tu icono realmente resalte
• No pongas CTA principales
• Evita utilizar JavaScript
• Revisa las opciones de menú
• Revisa tu IA
62. Principio 1: Los usuarios quieren consistencia
Todos los mecanismos que se utilizan son siempre usados de la misma
manera, sea cual sea el momento en el que se haga
63. Principio 1: Los usuarios quieren consistencia
Todos los mecanismos que se utilizan son siempre usados de la misma
manera, sea cual sea el momento en el que se haga
“Al ser consistente en diseño, se crean unas
expectativas y si se cumplen es cuando se sienten en
control”
65. Principio 1: Los usuarios quieren consistencia
No debes ser diferente simplemente por ser diferente, ser diferente tiene
que ofrecer algo mejor
El problema de la consistencia
66. 1
Sigue las guías de estilo
Principio 1: Los usuarios quieren consistencia
67. 2
Look & Feel común
Principio 1: Los usuarios quieren consistencia
68. 3
No cambies algo si funciona, simplemente añade
(si hace falta)
Principio 1: Los usuarios quieren consistencia
71. Principio 2: Tu diseño debe invitar a interactuar
La señal o indicio de que un objeto se pueden utilizar para llevar a cabo una acción
particular
J. J. Gibson
72. Principio 2: Tu diseño debe invitar a interactuar
La señal o indicio de que un objeto se pueden utilizar para llevar a cabo una acción
particular
J. J. Gibson
73. Principio 2: Tu diseño debe invitar a interactuar
La señal o indicio de que un objeto se pueden utilizar para llevar a cabo una acción
particular
J. J. Gibson
74. Principio 2: Tu diseño debe invitar a interactuar
La señal o indicio de que un objeto se pueden utilizar para llevar a cabo una acción
particular
J. J. Gibson
75. Principio 2: Tu diseño debe invitar a interactuar
Objetos físicos
Peso FormaTamaño
76. Principio 2: Tu diseño debe invitar a interactuar
Web, Mobile, wearable…
Diseño visual
77. Principio 2: Tu diseño debe invitar a interactuar
Web, Mobile, wearable…
Diseño visual
La capacidad de un objeto para invitarnos a utilizarlo. "Affordance percibida" es un
elemento de interacción que habla por sí mismo para darnos una idea de la acción que
genera
Norman
78. Principio 2: Tu diseño debe invitar a interactuar
Existen diferentes tipos de “affordance”
79. Principio 2: Tu diseño debe invitar a interactuar
1 - Explicit affordance
A partir del lenguaje o forma
del objeto
80. Principio 2: Tu diseño debe invitar a interactuar
1 - Explicit affordance
A partir del lenguaje o forma
del objeto
81. Principio 2: Tu diseño debe invitar a interactuar
1 - Explicit affordance
A partir del lenguaje o forma
del objeto
82. Principio 2: Tu diseño debe invitar a interactuar
1 - Explicit affordance
A partir del lenguaje o forma
del objeto
• Nuevos usuarios
• Producto “novedoso”
¿Cuando?
83. Principio 2: Tu diseño debe invitar a interactuar
1 - Explicit affordance
A partir del lenguaje o forma
del objeto
• Nuevos usuarios
• Producto “novedoso”
¿Cuando?
¿Contra?
Repetitivo para algunos
usuarios
84. Principio 2: Tu diseño debe invitar a interactuar
2 - Pattern affordance
Es un sistema ya establecido
(patrón)
85. Principio 2: Tu diseño debe invitar a interactuar
2 - Pattern affordance
Es un sistema ya establecido
(patrón)
86. Principio 2: Tu diseño debe invitar a interactuar
2 - Pattern affordance
Es un sistema ya establecido
(patrón)
¿Cuando?
• Depende mucho de quién
lo utiliza
87. Principio 2: Tu diseño debe invitar a interactuar
2 - Pattern affordance
Es un sistema ya establecido
(patrón)
¿Cuando?
• Depende mucho de quién
lo utiliza
¿Contra?
Se basa en algo que ya debe
conocer.
88. Principio 2: Tu diseño debe invitar a interactuar
3 - Hidden affordance
89. Principio 2: Tu diseño debe invitar a interactuar
3 - Hidden affordance
90. Principio 2: Tu diseño debe invitar a interactuar
3 - Hidden affordance
91. Principio 2: Tu diseño debe invitar a interactuar
3 - Hidden affordance
¿Cuando?
• Interfaces complejas
92. Principio 2: Tu diseño debe invitar a interactuar
3 - Hidden affordance
¿Cuando?
• Interfaces complejas
¿Contra?
Puede que nunca se encuentre
93. Principio 2: Tu diseño debe invitar a interactuar
4 - Metaphorical affordance
Comunica una acción a partir
de elementos del mundo real
94. Principio 2: Tu diseño debe invitar a interactuar
4 - Metaphorical affordance
Comunica una acción a partir
de elementos del mundo real
95. Principio 2: Tu diseño debe invitar a interactuar
4 - Metaphorical affordance
Comunica una acción a partir
de elementos del mundo real
¿Contra?
Puede significar diferentes
cosas
96. Principio 2: Tu diseño debe invitar a interactuar
5 - Negative Affordance
Señalar que un elemento de
la interfaz de usuario no
proporciona ninguna
capacidad en el momento.
97. Principio 2: Tu diseño debe invitar a interactuar
5 - Negative Affordance
Señalar que un elemento de
la interfaz de usuario no
proporciona ninguna
capacidad en el momento.
98. Principio 2: Tu diseño debe invitar a interactuar
5 - Negative Affordance
Señalar que un elemento de
la interfaz de usuario no
proporciona ninguna
capacidad en el momento.
99. Principio 2: Tu diseño debe invitar a interactuar
False Affordance
Algo que parece ser pero que no és
100. Principio 2: Tu diseño debe invitar a interactuar
False Affordance
Algo que parece ser pero que no és
101. Principio 2: Tu diseño debe invitar a interactuar
False Affordance
Algo que parece ser pero que no és
¿Contra?
Puede que ofrezcas algo que
no existe… frustración
104. Principio 3: Un buen diseño es fácil de aprender
“Facilidad de aprendizaje para utilizar una aplicación la primera vez que nos enfrentamos
con ella"
105. Principio 3: Un buen diseño es fácil de aprender
En un mundo feliz… no tenemos curva de aprendizaje
“Facilidad de aprendizaje para utilizar una aplicación la primera vez que nos enfrentamos
con ella"
106. Principio 3: Un buen diseño es fácil de aprender
En un mundo feliz… no tenemos curva de aprendizaje
En un mundo real… “siempre” existe una curva de aprendizaje
“Facilidad de aprendizaje para utilizar una aplicación la primera vez que nos enfrentamos
con ella"
107. Principio 3: Un buen diseño es fácil de aprender
En un mundo feliz… no tenemos curva de aprendizaje
En un mundo real… “siempre” existe una curva de aprendizaje
“Facilidad de aprendizaje para utilizar una aplicación la primera vez que nos enfrentamos
con ella"
Comprehensibility
108. Principio 3: Un buen diseño es fácil de aprender
En un mundo feliz… no tenemos curva de aprendizaje
En un mundo real… “siempre” existe una curva de aprendizaje
“Facilidad de aprendizaje para utilizar una aplicación la primera vez que nos enfrentamos
con ella"
Comprehensibility
Learnability
109. Principio 3: Un buen diseño es fácil de aprender
En un mundo feliz… no tenemos curva de aprendizaje
En un mundo real… “siempre” existe una curva de aprendizaje
“Facilidad de aprendizaje para utilizar una aplicación la primera vez que nos enfrentamos
con ella"
Comprehensibility
Learnability
123. Principio 3: Un buen diseño es fácil de aprender
Empresa Learnability
124. Principio 3: Un buen diseño es fácil de aprender
Empresa Learnability
Empresa más de 400.000 usuarios activos al mes
125. Principio 3: Un buen diseño es fácil de aprender
Empresa Learnability
Empresa más de 400.000 usuarios activos al mes
0,8% envía un email para resolver dudas (3.200)
126. Principio 3: Un buen diseño es fácil de aprender
Empresa Learnability
Empresa más de 400.000 usuarios activos al mes
0,8% envía un email para resolver dudas (3.200)
Coste medio para resolver la duda es de 24€
127. Principio 3: Un buen diseño es fácil de aprender
Empresa Learnability
Empresa más de 400.000 usuarios activos al mes
0,8% envía un email para resolver dudas (3.200)
Coste medio para resolver la duda es de 24€
Al mes: 76.800€
128. Principio 3: Un buen diseño es fácil de aprender
Empresa Learnability
Empresa más de 400.000 usuarios activos al mes
0,8% envía un email para resolver dudas (3.200)
Coste medio para resolver la duda es de 24€
Al mes: 76.800€
921.600€
131. Principio 4: Todo diseño debe ser predecible
"Si se puede predecir lo que va a suceder antes de hacer algo, es porque la acción que se
está tomando comprensible, clara, lógica, y hace que te sientas seguro."
Robert Hoekman, Jr.
132. Principio 4: Todo diseño debe ser predecible
"Si se puede predecir lo que va a suceder antes de hacer algo, es porque la acción que se
está tomando comprensible, clara, lógica, y hace que te sientas seguro."
Robert Hoekman, Jr.
Si no se sabe de que va a simple vista vuelve a empezar
147. Principio 5: Feedback, necesitamos saberlo todo
Es el corazón de la interacción, el final de una acción. Cada interacción
es una conversación entre el usuario y el producto.
148. Principio 5: Feedback, necesitamos saberlo todo
Es el corazón de la interacción, el final de una acción. Cada interacción
es una conversación entre el usuario y el producto.
Antes
Finalizar compra
149. Principio 5: Feedback, necesitamos saberlo todo
Es el corazón de la interacción, el final de una acción. Cada interacción
es una conversación entre el usuario y el producto.
Antes
Finalizar compra
Durante
Realizando transacción
150. Principio 5: Feedback, necesitamos saberlo todo
Es el corazón de la interacción, el final de una acción. Cada interacción
es una conversación entre el usuario y el producto.
Antes
Finalizar compra
Durante
Realizando transacción
Después
Su pago se realizó
correctamente
153. Principio 5: Feedback, necesitamos saberlo todo
Toda interacción debe saber responder…
1 - Ubicación actual
154. Principio 5: Feedback, necesitamos saberlo todo
Toda interacción debe saber responder…
1 - Ubicación actual
2 - Estado actual
155. Principio 5: Feedback, necesitamos saberlo todo
Toda interacción debe saber responder…
1 - Ubicación actual
2 - Estado actual
3 - Estado en el futuro
156. Principio 5: Feedback, necesitamos saberlo todo
Toda interacción debe saber responder…
1 - Ubicación actual
2 - Estado actual
3 - Estado en el futuro
4 - Resultados
157. Principio 5: Feedback, necesitamos saberlo todo
1
Toda acción tiene una reacción
Toda interacción debe ser visible, comprensible y se
debe mostrar con un tiempo razonable
158. Principio 5: Feedback, necesitamos saberlo todo
2
Ofrece un buen feedback
No interrumpas una acción con otra, si se ha
equivocado ofrécele soluciones
159. Principio 5: Feedback, necesitamos saberlo todo
3
Cuida tus mensajes de error
Dile que ha pasado, por que ha
pasado, ofrece una solución…
y no le hagas sentir estúpido