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.

1. Día 2
Principios del diseño de interacción e interfaces

2. Hablamos de…

3. User Experience
Como piensan y sienten los usuarios
Hablamos de…

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…

6. Interfaces
ABSTRACCIÓN / CONTROL
Hablamos de…

7. Interfaces
ABSTRACCIÓN / CONTROL
CLI
Hablamos de…

8. Interfaces
ABSTRACCIÓN / CONTROL
CLI GUI
Hablamos de…

9. Interfaces
ABSTRACCIÓN / CONTROL
CLI GUI TS & ZI
Hablamos de…

10. Interfaces
ABSTRACCIÓN / CONTROL
CLI GUI TS & ZI NI
Hablamos de…

11. Interfaces
ABSTRACCIÓN / CONTROL
CLI GUI TS & ZI NI HI
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

16. Caso “BurgerIcon”
Xeroc Star, años 80

17. Caso “BurgerIcon”
Xeroc Star, años 80

18. Caso “BurgerIcon”
Xeroc Star, años 80

19. Caso “BurgerIcon”
Director de Marketing de Diseño

20. Caso “BurgerIcon”
Director de Marketing de Diseño

21. Caso “BurgerIcon”
Director de Marketing de Diseño
• la web ya se ve bien en mi iPhone
• por fin tenemos una web responsive
• “abrazamos al cambio”

22. Caso “BurgerIcon”
¿La cosa va de comida?

23. Caso “BurgerIcon”
¿La cosa va de comida?

24. Caso “BurgerIcon”
¿La cosa va de comida?

25. Caso “BurgerIcon”
¿La cosa va de comida?

26. Caso “BurgerIcon”
¿La cosa va de comida?

27. Taco Menu
Caso “BurgerIcon”
¿La cosa va de comida?

28. Taco Menu
Suchi Menu
Caso “BurgerIcon”
¿La cosa va de comida?

29. Caso “BurgerIcon”
¿La cosa va de comida?

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

32. Caso “BurgerIcon”
¿Quieres mantener el icono? “Empieza por una hipótesis y pruébala”
Test A/B

33. Caso “BurgerIcon”
¿Quieres mantener el icono? “Empieza por una hipótesis y pruébala”
Test A/B

34. Caso “BurgerIcon”
¿Quieres mantener el icono? “Empieza por una hipótesis y pruébala”
MENÚ
Test A/B

35. Caso “BurgerIcon”
¿Quieres mantener el icono? “Empieza por una hipótesis y pruébala”
MENÚ
MENÚ
Test A/B

36. Caso “BurgerIcon”
¿Quieres mantener el icono? “Empieza por una hipótesis y pruébala”
MENÚ
MENÚ MENÚ
Test A/B

37. Caso “BurgerIcon”
¿Quieres mantener el icono? “Empieza por una hipótesis y pruébala”
MENÚ
MENÚ MENÚ
Test A/B

38. Caso “BurgerIcon”
Creo que puedo convencer a mi jefe… ¿Qué puedo hacer?

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)

42. Caso “BurgerIcon”
Creo que puedo convencer a mi jefe… ¿Qué puedo hacer?
• No copies pero inspírate

43. Caso “BurgerIcon”
Creo que puedo convencer a mi jefe… ¿Qué puedo hacer?
• No copies pero inspírate

44. Caso “BurgerIcon”
Creo que puedo convencer a mi jefe… ¿Qué puedo hacer?
• No copies pero inspírate

45. Caso “BurgerIcon”
Creo que puedo convencer a mi jefe… ¿Qué puedo hacer?
• No copies pero inspírate

46. Caso “BurgerIcon”
si has luchado pero sigue sin querer cambiar…

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

48. ¿Qué debe conseguir una buena interacción?
Hablaremos de…

49. ¿Qué debe conseguir una buena interacción?
Hablaremos de…
Toda interacción con una interfaz debe
responder a unas preguntas…

50. ¿Qué debe conseguir una buena interfaz?
Hablaremos de…

51. ¿Qué debe conseguir una buena interfaz?
• Objetivos del usuario
• Aprendizaje
• Minimizar errores
• Velocidad de uso
• “estética adecuada”
• …
Hablaremos de…

52. ¿Cómo logramos una buena interacción usuario - interfaz?
Hablaremos de…

53. ¿Cómo logramos una buena interacción usuario - interfaz?
PRINCIPIOS
Hablaremos de…

54. ¿Cómo logramos una buena interacción usuario - interfaz?
PRINCIPIOS
REGLAS
Hablaremos de…

55. ¿Cómo logramos una buena interacción usuario - interfaz?
PRINCIPIOS
REGLAS
ESTÁNDARES
Hablaremos de…

56. ¿Cómo logramos una buena interacción usuario - interfaz?
PRINCIPIOS
REGLAS
ESTÁNDARES
DIRECTRICES
Hablaremos de…

57. ¿Cómo logramos una buena interacción usuario - interfaz?
PRINCIPIOS
REGLAS
ESTÁNDARES
DIRECTRICES
GUÍAS ESTILO
Hablaremos de…

58. ¿Cómo logramos una buena interacción usuario - interfaz?
PRINCIPIOS
REGLAS
ESTÁNDARES
DIRECTRICES
GUÍAS ESTILO
Hablaremos de…

60. Principio 1:

61. Principio 1:
Los usuarios quieren consistencia

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”

64. Principio 1: Los usuarios quieren consistencia

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

69. Principio 2:

70. Principio 2:
Tu diseño debe invitar a interactuar
“affordance”

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

102. Principio 3:

103. Principio 3:
Un buen diseño es fácil de aprender
“learnability”

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

110. Principio 3: Un buen diseño es fácil de aprender

111. Principio 3: Un buen diseño es fácil de aprender
¿Esto es usable?

112. Principio 3: Un buen diseño es fácil de aprender

113. Principio 3: Un buen diseño es fácil de aprender
Aprendizaje

114. Principio 3: Un buen diseño es fácil de aprender
Aprendizaje Usabilidad

115. Principio 3: Un buen diseño es fácil de aprender
Aprendizaje Usabilidad
¿Qué priorizamos?

116. Principio 3: Un buen diseño es fácil de aprender
¿Como medimos?

117. Principio 3: Un buen diseño es fácil de aprender
¿Como medimos?
Eficiendia

118. Principio 3: Un buen diseño es fácil de aprender
¿Como medimos?
Eficiendia Eficacia

119. Principio 3: Un buen diseño es fácil de aprender
¿Como medimos?
Eficiendia Eficacia Satisfacción

120. Principio 3: Un buen diseño es fácil de aprender
¿Como medimos?
Eficiendia Eficacia Satisfacción Errores

121. Principio 3: Un buen diseño es fácil de aprender
¿Como medimos?
Eficiendia Eficacia Satisfacción Errores

122. Principio 3: Un buen diseño es fácil de aprender

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€

129. Principio 4:

130. Principio 4:
Todo diseño debe ser predecible

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

133. Principio 4: Todo diseño debe ser predecible

134. Principio 4: Todo diseño debe ser predecible
Estoy pensando… demasiado

135. Principio 4: Todo diseño debe ser predecible

136. Principio 4: Todo diseño debe ser predecible
no estoy pensando

137. Principio 4: Todo diseño debe ser predecible
¿Evidencia o confusión?

138. Principio 4: Todo diseño debe ser predecible
¿Evidencia o confusión?
I’m a button, believe you me

139. Principio 4: Todo diseño debe ser predecible
¿Evidencia o confusión?
Evidencia Confusión

140. Principio 4: Todo diseño debe ser predecible
¿Evidencia o confusión?
Evidencia Confusión
INFORMACIÓN

141. Principio 4: Todo diseño debe ser predecible
¿Evidencia o confusión?
Evidencia Confusión
INFORMACIÓN INFORMACIÓN

142. Principio 4: Todo diseño debe ser predecible
¿Evidencia o confusión?
Evidencia Confusión
INFORMACIÓN INFORMACIÓN INFORMACIÓN

143. Principio 4: Todo diseño debe ser predecible
¿Evidencia o confusión?
Evidencia Confusión
INFORMACIÓN INFORMACIÓN INFORMACIÓN
Eliminación de interrogantes
¿Donde
estoy?
¿Pagaré
ahora?
¿Donde
está…? ¿Por qué se
llama asi?

144. Principio 4: Todo diseño debe ser predecible

145. Principio 5:

146. Principio 5:
Feedback, necesitamos saberlo todo

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

151. Principio 5: Feedback, necesitamos saberlo todo

152. Principio 5: Feedback, necesitamos saberlo todo
Toda interacción debe saber responder…

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

160. Los 5 principios

161. ¿Cómo mejoramos la interacción?

162. ¿Cómo mejoramos la interacción?
1
Testea… Testea… Testea…

163. ¿Cómo mejoramos la interacción?

164. ¿Cómo mejoramos la interacción?
2
Mapping Process

165. ¿Cómo mejoramos la interacción?

166. ¿Cómo mejoramos la interacción?

167. ¿Cómo mejoramos la interacción?
3
Simplifica al máximo, informa el mínimo

168. ¿Cómo mejoramos la interacción?

169. ¿Cómo mejoramos la interacción?
4
Revisa los momentos clave

170. ¿Cómo mejoramos la interacción?

171. ¿Cómo mejoramos la interacción?
5
Piensa y plásmalo en un papel

172. ¿Cómo mejoramos la interacción?
5
Piensa y plásmalo en un papel

174. Lo importante no es como se comporta tu interfaz, sino
como se comportan tus usuarios

175. aboutme

176. aboutme

177. aboutme
Xavi

178. aboutme
Xavi
Byte

179. aboutme
@uxavic
Xavi
Byte

180. aboutme
@uxavic
xcardet@gmail.com
Xavi
Byte