Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Principios diseño de interacción

Clase sobre los principios de interacción e interfaces presentada en el Master de UX de ESDI.

En la presentación se explica el caso de IconBurger, sus ventajas y inconvenientes. A su vez se presentan propuestas de mejora.

Principios diseño de interacción

  1. 1. Día 2 Principios del diseño de interacción e interfaces
  2. 2. Hablamos de…
  3. 3. User Experience Como piensan y sienten los usuarios Hablamos de…
  4. 4. User Experience Como piensan y sienten los usuarios User Interface Aquellos elementos con los que interactuará el usuario Hablamos de…
  5. 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. 6. Interfaces ABSTRACCIÓN / CONTROL Hablamos de…
  7. 7. Interfaces ABSTRACCIÓN / CONTROL CLI Hablamos de…
  8. 8. Interfaces ABSTRACCIÓN / CONTROL CLI GUI Hablamos de…
  9. 9. Interfaces ABSTRACCIÓN / CONTROL CLI GUI TS & ZI Hablamos de…
  10. 10. Interfaces ABSTRACCIÓN / CONTROL CLI GUI TS & ZI NI Hablamos de…
  11. 11. Interfaces ABSTRACCIÓN / CONTROL CLI GUI TS & ZI NI HI Hablamos de…
  12. 12. Interfaces Principios del diseño de interfaces Hablamos de… http://www.fastcodesign.com/3053406/how-apple-is-giving-design-a-bad-name
  13. 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. 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. 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. 16. Caso “BurgerIcon” Xeroc Star, años 80
  17. 17. Caso “BurgerIcon” Xeroc Star, años 80
  18. 18. Caso “BurgerIcon” Xeroc Star, años 80
  19. 19. Caso “BurgerIcon” Director de Marketing de Diseño
  20. 20. Caso “BurgerIcon” Director de Marketing de Diseño
  21. 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. 22. Caso “BurgerIcon” ¿La cosa va de comida?
  23. 23. Caso “BurgerIcon” ¿La cosa va de comida?
  24. 24. Caso “BurgerIcon” ¿La cosa va de comida?
  25. 25. Caso “BurgerIcon” ¿La cosa va de comida?
  26. 26. Caso “BurgerIcon” ¿La cosa va de comida?
  27. 27. Taco Menu Caso “BurgerIcon” ¿La cosa va de comida?
  28. 28. Taco Menu Suchi Menu Caso “BurgerIcon” ¿La cosa va de comida?
  29. 29. Caso “BurgerIcon” ¿La cosa va de comida?
  30. 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. 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. 32. Caso “BurgerIcon” ¿Quieres mantener el icono? “Empieza por una hipótesis y pruébala” Test A/B
  33. 33. Caso “BurgerIcon” ¿Quieres mantener el icono? “Empieza por una hipótesis y pruébala” Test A/B
  34. 34. Caso “BurgerIcon” ¿Quieres mantener el icono? “Empieza por una hipótesis y pruébala” MENÚ Test A/B
  35. 35. Caso “BurgerIcon” ¿Quieres mantener el icono? “Empieza por una hipótesis y pruébala” MENÚ MENÚ Test A/B
  36. 36. Caso “BurgerIcon” ¿Quieres mantener el icono? “Empieza por una hipótesis y pruébala” MENÚ MENÚ MENÚ Test A/B
  37. 37. Caso “BurgerIcon” ¿Quieres mantener el icono? “Empieza por una hipótesis y pruébala” MENÚ MENÚ MENÚ Test A/B
  38. 38. Caso “BurgerIcon” Creo que puedo convencer a mi jefe… ¿Qué puedo hacer?
  39. 39. Caso “BurgerIcon” Creo que puedo convencer a mi jefe… ¿Qué puedo hacer? SAL A LA CALLE TEST DE GUERRILLA
  40. 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. 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. 42. Caso “BurgerIcon” Creo que puedo convencer a mi jefe… ¿Qué puedo hacer? • No copies pero inspírate
  43. 43. Caso “BurgerIcon” Creo que puedo convencer a mi jefe… ¿Qué puedo hacer? • No copies pero inspírate
  44. 44. Caso “BurgerIcon” Creo que puedo convencer a mi jefe… ¿Qué puedo hacer? • No copies pero inspírate
  45. 45. Caso “BurgerIcon” Creo que puedo convencer a mi jefe… ¿Qué puedo hacer? • No copies pero inspírate
  46. 46. Caso “BurgerIcon” si has luchado pero sigue sin querer cambiar…
  47. 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. 48. ¿Qué debe conseguir una buena interacción? Hablaremos de…
  49. 49. ¿Qué debe conseguir una buena interacción? Hablaremos de… Toda interacción con una interfaz debe responder a unas preguntas…
  50. 50. ¿Qué debe conseguir una buena interfaz? Hablaremos de…
  51. 51. ¿Qué debe conseguir una buena interfaz? • Objetivos del usuario • Aprendizaje • Minimizar errores • Velocidad de uso • “estética adecuada” • … Hablaremos de…
  52. 52. ¿Cómo logramos una buena interacción usuario - interfaz? Hablaremos de…
  53. 53. ¿Cómo logramos una buena interacción usuario - interfaz? PRINCIPIOS Hablaremos de…
  54. 54. ¿Cómo logramos una buena interacción usuario - interfaz? PRINCIPIOS REGLAS Hablaremos de…
  55. 55. ¿Cómo logramos una buena interacción usuario - interfaz? PRINCIPIOS REGLAS ESTÁNDARES Hablaremos de…
  56. 56. ¿Cómo logramos una buena interacción usuario - interfaz? PRINCIPIOS REGLAS ESTÁNDARES DIRECTRICES Hablaremos de…
  57. 57. ¿Cómo logramos una buena interacción usuario - interfaz? PRINCIPIOS REGLAS ESTÁNDARES DIRECTRICES GUÍAS ESTILO Hablaremos de…
  58. 58. ¿Cómo logramos una buena interacción usuario - interfaz? PRINCIPIOS REGLAS ESTÁNDARES DIRECTRICES GUÍAS ESTILO Hablaremos de…
  59. 59. Principio 1:
  60. 60. Principio 1: Los usuarios quieren consistencia
  61. 61. 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
  62. 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 “Al ser consistente en diseño, se crean unas expectativas y si se cumplen es cuando se sienten en control”
  63. 63. Principio 1: Los usuarios quieren consistencia
  64. 64. 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
  65. 65. 1 Sigue las guías de estilo Principio 1: Los usuarios quieren consistencia
  66. 66. 2 Look & Feel común Principio 1: Los usuarios quieren consistencia
  67. 67. 3 No cambies algo si funciona, simplemente añade (si hace falta) Principio 1: Los usuarios quieren consistencia
  68. 68. Principio 2:
  69. 69. Principio 2: Tu diseño debe invitar a interactuar “affordance”
  70. 70. 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
  71. 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. 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. 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. 74. Principio 2: Tu diseño debe invitar a interactuar Objetos físicos Peso FormaTamaño
  75. 75. Principio 2: Tu diseño debe invitar a interactuar Web, Mobile, wearable… Diseño visual
  76. 76. 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
  77. 77. Principio 2: Tu diseño debe invitar a interactuar Existen diferentes tipos de “affordance”
  78. 78. Principio 2: Tu diseño debe invitar a interactuar 1 - Explicit affordance A partir del lenguaje o forma del objeto
  79. 79. Principio 2: Tu diseño debe invitar a interactuar 1 - Explicit affordance A partir del lenguaje o forma del objeto
  80. 80. Principio 2: Tu diseño debe invitar a interactuar 1 - Explicit affordance A partir del lenguaje o forma del objeto
  81. 81. 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?
  82. 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? ¿Contra? Repetitivo para algunos usuarios
  83. 83. Principio 2: Tu diseño debe invitar a interactuar 2 - Pattern affordance Es un sistema ya establecido (patrón)
  84. 84. Principio 2: Tu diseño debe invitar a interactuar 2 - Pattern affordance Es un sistema ya establecido (patrón)
  85. 85. 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
  86. 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 ¿Contra? Se basa en algo que ya debe conocer.
  87. 87. Principio 2: Tu diseño debe invitar a interactuar 3 - Hidden affordance
  88. 88. Principio 2: Tu diseño debe invitar a interactuar 3 - Hidden affordance
  89. 89. Principio 2: Tu diseño debe invitar a interactuar 3 - Hidden affordance
  90. 90. Principio 2: Tu diseño debe invitar a interactuar 3 - Hidden affordance ¿Cuando? • Interfaces complejas
  91. 91. Principio 2: Tu diseño debe invitar a interactuar 3 - Hidden affordance ¿Cuando? • Interfaces complejas ¿Contra? Puede que nunca se encuentre
  92. 92. Principio 2: Tu diseño debe invitar a interactuar 4 - Metaphorical affordance Comunica una acción a partir de elementos del mundo real
  93. 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. 94. 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
  95. 95. 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.
  96. 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. 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. 98. Principio 2: Tu diseño debe invitar a interactuar False Affordance Algo que parece ser pero que no és
  99. 99. Principio 2: Tu diseño debe invitar a interactuar False Affordance Algo que parece ser pero que no és
  100. 100. 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
  101. 101. Principio 3:
  102. 102. Principio 3: Un buen diseño es fácil de aprender “learnability”
  103. 103. 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"
  104. 104. 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"
  105. 105. 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"
  106. 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" Comprehensibility
  107. 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 Learnability
  108. 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. 109. Principio 3: Un buen diseño es fácil de aprender
  110. 110. Principio 3: Un buen diseño es fácil de aprender ¿Esto es usable?
  111. 111. Principio 3: Un buen diseño es fácil de aprender
  112. 112. Principio 3: Un buen diseño es fácil de aprender Aprendizaje
  113. 113. Principio 3: Un buen diseño es fácil de aprender Aprendizaje Usabilidad
  114. 114. Principio 3: Un buen diseño es fácil de aprender Aprendizaje Usabilidad ¿Qué priorizamos?
  115. 115. Principio 3: Un buen diseño es fácil de aprender ¿Como medimos?
  116. 116. Principio 3: Un buen diseño es fácil de aprender ¿Como medimos? Eficiendia
  117. 117. Principio 3: Un buen diseño es fácil de aprender ¿Como medimos? Eficiendia Eficacia
  118. 118. Principio 3: Un buen diseño es fácil de aprender ¿Como medimos? Eficiendia Eficacia Satisfacción
  119. 119. Principio 3: Un buen diseño es fácil de aprender ¿Como medimos? Eficiendia Eficacia Satisfacción Errores
  120. 120. Principio 3: Un buen diseño es fácil de aprender ¿Como medimos? Eficiendia Eficacia Satisfacción Errores
  121. 121. Principio 3: Un buen diseño es fácil de aprender
  122. 122. Principio 3: Un buen diseño es fácil de aprender Empresa Learnability
  123. 123. Principio 3: Un buen diseño es fácil de aprender Empresa Learnability Empresa más de 400.000 usuarios activos al mes
  124. 124. 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)
  125. 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) Coste medio para resolver la duda es de 24€
  126. 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€ Al mes: 76.800€
  127. 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€ 921.600€
  128. 128. Principio 4:
  129. 129. Principio 4: Todo diseño debe ser predecible
  130. 130. 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.
  131. 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. Si no se sabe de que va a simple vista vuelve a empezar
  132. 132. Principio 4: Todo diseño debe ser predecible
  133. 133. Principio 4: Todo diseño debe ser predecible Estoy pensando… demasiado
  134. 134. Principio 4: Todo diseño debe ser predecible
  135. 135. Principio 4: Todo diseño debe ser predecible no estoy pensando
  136. 136. Principio 4: Todo diseño debe ser predecible ¿Evidencia o confusión?
  137. 137. Principio 4: Todo diseño debe ser predecible ¿Evidencia o confusión? I’m a button, believe you me
  138. 138. Principio 4: Todo diseño debe ser predecible ¿Evidencia o confusión? Evidencia Confusión
  139. 139. Principio 4: Todo diseño debe ser predecible ¿Evidencia o confusión? Evidencia Confusión INFORMACIÓN
  140. 140. Principio 4: Todo diseño debe ser predecible ¿Evidencia o confusión? Evidencia Confusión INFORMACIÓN INFORMACIÓN
  141. 141. Principio 4: Todo diseño debe ser predecible ¿Evidencia o confusión? Evidencia Confusión INFORMACIÓN INFORMACIÓN INFORMACIÓN
  142. 142. 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?
  143. 143. Principio 4: Todo diseño debe ser predecible
  144. 144. Principio 5:
  145. 145. Principio 5: Feedback, necesitamos saberlo todo
  146. 146. 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.
  147. 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. Antes Finalizar compra
  148. 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 Durante Realizando transacción
  149. 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 Después Su pago se realizó correctamente
  150. 150. Principio 5: Feedback, necesitamos saberlo todo
  151. 151. Principio 5: Feedback, necesitamos saberlo todo Toda interacción debe saber responder…
  152. 152. Principio 5: Feedback, necesitamos saberlo todo Toda interacción debe saber responder… 1 - Ubicación actual
  153. 153. Principio 5: Feedback, necesitamos saberlo todo Toda interacción debe saber responder… 1 - Ubicación actual 2 - Estado actual
  154. 154. Principio 5: Feedback, necesitamos saberlo todo Toda interacción debe saber responder… 1 - Ubicación actual 2 - Estado actual 3 - Estado en el futuro
  155. 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 4 - Resultados
  156. 156. 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
  157. 157. 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
  158. 158. 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
  159. 159. Los 5 principios
  160. 160. ¿Cómo mejoramos la interacción?
  161. 161. ¿Cómo mejoramos la interacción? 1 Testea… Testea… Testea…
  162. 162. ¿Cómo mejoramos la interacción?
  163. 163. ¿Cómo mejoramos la interacción? 2 Mapping Process
  164. 164. ¿Cómo mejoramos la interacción?
  165. 165. ¿Cómo mejoramos la interacción?
  166. 166. ¿Cómo mejoramos la interacción? 3 Simplifica al máximo, informa el mínimo
  167. 167. ¿Cómo mejoramos la interacción?
  168. 168. ¿Cómo mejoramos la interacción? 4 Revisa los momentos clave
  169. 169. ¿Cómo mejoramos la interacción?
  170. 170. ¿Cómo mejoramos la interacción? 5 Piensa y plásmalo en un papel
  171. 171. ¿Cómo mejoramos la interacción? 5 Piensa y plásmalo en un papel
  172. 172. Lo importante no es como se comporta tu interfaz, sino como se comportan tus usuarios
  173. 173. aboutme
  174. 174. aboutme
  175. 175. aboutme Xavi
  176. 176. aboutme Xavi Byte
  177. 177. aboutme @uxavic Xavi Byte
  178. 178. aboutme @uxavic xcardet@gmail.com Xavi Byte

×