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.

UX no es lo mismo que UI

10,527 views

Published on

Published in: Design

UX no es lo mismo que UI

  1. 1. UX no es lo mismo que UI NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  2. 2. - Especialista UX - Ex Oracle (UX Fusion apps) - Egresada de UDEM (LDG, EME) - He trabajado para clientes como El Palacio de Hierro, Alen, Grainger, Gobierno N.L, Tec de Monterrey... SOBRE MI: ANDREA CANTÚ NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
  3. 3. Pueden seguirme @accantu blog.acantu.com NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
  4. 4. TEMA 1. Que es User Experience (UX) TEMA 2. Los 10 errores comunes en UX TEMA3. Los 10 errores comunes de UI en móviles Preguntas TEMARIO
  5. 5. Que es User Experience (UX) TEMA 1. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  6. 6. Si pudieran elegir dónde sentarse ahora...¿Cuál de las dos elegirían? NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  7. 7. vs. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  8. 8. ¿Cierto? NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR FUNCIONALIDAD + ESTÉTICA @accantu
  9. 9. UX es la filosofía de creación de un producto o servicio. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  10. 10. No depende solo de factores de diseño, sino en las emociones y sentimientos que crea una marca... NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  11. 11. en lo más importante: sus USUARIOS. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  12. 12. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR EJEMPLO YOUTUBE: FAST LANE - THE SLIDE @accantu
  13. 13. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR EJEMPLO YOUTUBE: MAQUINA DE LA AMISTAD COCA-COLA @accantu
  14. 14. ¿Qué emociones les causaron las marcas? NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  15. 15. Entonces, ¿Qué es experiencia? NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  16. 16. Usos inesperados EXPERIENCIA NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR Detalles Subjetiva Memorias Aprendizajes Sabiduría Sorpresas @accantu
  17. 17. UX EXPERIENCIA NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR DESEABLE USABLE ÚTIL NNGROUP 2008
  18. 18. La usabilidad es UN atributo de la experiencia de usuario NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  19. 19. y se refiere a la facilidad de uso… pero OJO no es = a UX NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  20. 20. Es la percepción de que tan consistente, organizado, eficiente, productivo, fácil de usar e intuitivo es el proceso de completar una tarea en particular dentro de un sistema. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR USABILIDAD @accantu
  21. 21. Pero frecuentemente nos quedamos aquí… NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  22. 22. UX EXPERIENCIA NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR DESEABLE USABLE ÚTIL NNGROUP 2008
  23. 23. UX no es una etapa más al desarrollar un producto… NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  24. 24. Es entender: LA SITUACIÓN NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  25. 25. Es entender: EL CONTEXTO NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  26. 26. Es entender: LOS HÁBITOS DE USO NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  27. 27. …de un determinado grupo de personas NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  28. 28. Centrado en el diseñador Centrado en el USUARIO NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  29. 29. UI: USER INTERFACE CON LO QUE INTERACTÚA UX: USER EXPERIENCE, QUE SIENTE MIENTRAS INTERACTÚA NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  30. 30. TOMADO DE WWW.UXISNOTUI.COM • Investigación etnográfica • Entrevistas 1-1 • Creación de test con usuarios • Recolección y organización de estadísticas • Creación de personas • Diseño de producto • Escritura de funcionalidades • Artes gráficas • Diseño de interacción • Arquitectura de información • Usabilidad • Prototipado • Diseño de interfaz • Diseño visual • Creación de taxonomía • Creación de terminología • Copywriting • Presentar y hablar • Trabajo en conjunto con programadores • Coordinación de brainstorming • Evangelización de cultura de diseño Lo que es UX • Investigación etnográfica • Entrevistas 1-1 • Creación de test con usuarios • Recolección y organización de estadísticas • Creación de personas • Diseño de producto • Escritura de funcionalidades • Artes gráficas • Diseño de interacción • Arquitectura de información • Usabilidad • Prototipado • Diseño de interfaz • Diseño visual • Creación de taxonomía • Creación de terminología • Copywriting • Presentar y hablar • Trabajo en conjunto con programadores • Coordinación de brainstorming • Evangelización de cultura de diseño Lo que la gente cree
  31. 31. Los 10 errores comunes en UX TEMA 2. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  32. 32. No establecer objetivos del negocio ERROR 1. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  33. 33. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR Error @accantu
  34. 34. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR SIEMPRE debo de tener claro: ¿Qué quiero lograr? @accantu
  35. 35. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR ¿Aumentar las ventas un 10%? ¿Mayor alcance? ¿Canal de soporte? @accantu
  36. 36. Establecer objetivos del negocio NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR REGLA 1. @accantu
  37. 37. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR Ofrecer personalización NIKE:
  38. 38. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR PLANOS UX J.J. GARRETT 2002 1 2 ESTRATEGIA 1. Necesidades del usuario 2. Objetivos del negocio
  39. 39. Desconocer a mis usuarios ERROR 2. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  40. 40. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR Error @accantu
  41. 41. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR SIEMPRE debo de tener claro: ¿Quiénes son mis usuarios? @accantu
  42. 42. Crear “PERSONAS” con sus hábitos de uso NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR REGLA 2. @accantu
  43. 43. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR Servicio de Taxi a domicilio UBER:
  44. 44. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR Cliente / Conductor UBER:
  45. 45. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR PLANOS UX J.J. GARRETT 2002 1 2 ESTRATEGIA 1. Necesidades del usuario 2. Objetivos del negocio
  46. 46. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR PLANOS UX J.J. GARRETT 2002 3 4 ALCANCE 3. Especificaciones funcionales 4. Requerimientos de contenido 1 2 ESTRATEGIA 1. Necesidades del usuario 2. Objetivos del negocio
  47. 47. No establecer escenarios de uso ERROR 3. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  48. 48. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR Error @accantu
  49. 49. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR SIEMPRE debo de tener claro: ¿Dónde y cómo se usará mi producto? @accantu
  50. 50. Crear escenarios de uso NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR REGLA 3. @accantu
  51. 51. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR Se mueve en una grúa WMS:
  52. 52. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR PLANOS UX J.J. GARRETT 2002 3 4 ALCANCE 3. Especificaciones funcionales 4. Requerimientos de contenido 1 2 ESTRATEGIA 1. Necesidades del usuario 2. Objetivos del negocio
  53. 53. Dar excesiva funcionalidad ERROR 4. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  54. 54. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR Error @accantu
  55. 55. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR SIEMPRE debo de tener claro: ¿Cuáles son los usos comunes? @accantu
  56. 56. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR Puedo dar funcionalidad avanzada, pero darle prioridad a la más usada @accantu
  57. 57. Establecer los usos comunes NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR REGLA 4. @accantu
  58. 58. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR Identificar música SHAZAM:
  59. 59. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR PLANOS UX J.J. GARRETT 2002 3 4 ALCANCE 3. Especificaciones funcionales 4. Requerimientos de contenido 1 2 ESTRATEGIA 1. Necesidades del usuario 2. Objetivos del negocio
  60. 60. No dar importancia a los contenidos ERROR 5. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  61. 61. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR Error @accantu
  62. 62. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR SIEMPRE debo de tener claro: ¿Qué voy a comunicar? @accantu
  63. 63. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR Y no sólo es texto, sino: imágenes, audio, video, etc… @accantu
  64. 64. Definir elementos de comunicación NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR REGLA 5. @accantu
  65. 65. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR VirtualAudio Fotos Texto Call to Action
  66. 66. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR PLANOS UX J.J. GARRETT 2002 3 4 ALCANCE 3. Especificaciones funcionales 4. Requerimientos de contenido 1 2 ESTRATEGIA 1. Necesidades del usuario 2. Objetivos del negocio
  67. 67. No hacer arquitectura de información ERROR 6. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  68. 68. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR Error @accantu
  69. 69. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR SIEMPRE debo de tener claro: ¿Cómo se va a navegar? @accantu
  70. 70. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR Por producto Por solución Por categoría, etc… @accantu
  71. 71. Hacer wireframes con flujos de navegación NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR REGLA 6. @accantu
  72. 72. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  73. 73. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR PLANOS UX J.J. GARRETT 2002 5 6 ESTRUCTURA 5. Diseño de interacción 6. Arquitectura de información 1 3 4 ESTRATEGIA 1. Necesidades del usuario 2. Objetivos del negocio ALCANCE 3. Especificaciones funcionales 4. Requerimientos de contenido
  74. 74. Pedir cosas innecesarias ERROR 7. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  75. 75. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR Error @accantu
  76. 76. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR SIEMPRE debo de tener claro: ¿Qué necesito realmente? @accantu
  77. 77. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR ¿Lo puedo pedir más tarde? ¿Edad? ¿Género? ¿Compañía? @accantu
  78. 78. Establecer los campos indispensables NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR REGLA 7. @accantu
  79. 79. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR Registro MUY sencillo MAILCHIMP:
  80. 80. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR PLANOS UX J.J. GARRETT 2002 5 6 ESTRUCTURA 5. Diseño de interacción 6. Arquitectura de información 1 3 4 ESTRATEGIA 1. Necesidades del usuario 2. Objetivos del negocio ALCANCE 3. Especificaciones funcionales 4. Requerimientos de contenido
  81. 81. Hacer zoom out de mi sitio web para móvil ERROR 8. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  82. 82. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR Error @accantu
  83. 83. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR SIEMPRE debo de tener claro: LEGIBILIDAD @accantu
  84. 84. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR ¿Los objetivos desde móvil son los mismos que desde web? @accantu
  85. 85. Establecer objetivos para móvil NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR REGLA 8. @accantu
  86. 86. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR Scan & GoWALMART: http://www.jslpublishing.com/wal-mart-app-user-leaves-mobile-author-in-her-dust/
  87. 87. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR PLANOS UX J.J. GARRETT 2002 7 8 9 ESQUELETO 7. Diseño de la interfaz 8. Diseño de navegación 9. Diseño de información 1 2 3 4 5 6 ESTRATEGIA 1. Necesidades del usuario 2. Objetivos del negocio ALCANCE 3. Especificaciones funcionales 4. Requerimientos de contenido ESTRUCTURA 5. Diseño de interacción 6. Arquitectura de información
  88. 88. No diseñar la información ERROR 9. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  89. 89. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR Error @accantu
  90. 90. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR SIEMPRE debo de tener claro: ¿Cómo puedo simplificar? @accantu
  91. 91. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR ¿Necesito todos esos datos? ¿Puedo esconder algunos? ¿Puedo mostrar gráficas? @accantu
  92. 92. Planear el diseño de información NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR REGLA 9. @accantu
  93. 93. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR Dashboard con analytics COUNTLY:
  94. 94. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR PLANOS UX J.J. GARRETT 2002 7 8 9 ESQUELETO 7. Diseño de la interfaz 8. Diseño de navegación 9. Diseño de información 1 2 3 4 5 6 ESTRATEGIA 1. Necesidades del usuario 2. Objetivos del negocio ALCANCE 3. Especificaciones funcionales 4. Requerimientos de contenido ESTRUCTURA 5. Diseño de interacción 6. Arquitectura de información
  95. 95. No medir o probar con usuarios reales ERROR 10. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  96. 96. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR Error @accantu
  97. 97. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR SIEMPRE debo de tener claro: ¿Fue fácil de usar? @accantu
  98. 98. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR ¿La experiencia fue buena? ¿Hubo frustración? ¿Completaron las tareas? @accantu
  99. 99. Hacer pruebas de usabilidad reales NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR REGLA 10. @accantu
  100. 100. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR Pruebas con usuarios REALES
  101. 101. Los 10 errores comunes de UI en móviles TEMA 3. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  102. 102. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR PLANOS UX J.J. GARRETT 2002 1 2 3 4 5 6 7 8 9 10 ESTRATEGIA 1. Necesidades del usuario 2. Objetivos del negocio ALCANCE 3. Especificaciones funcionales 4. Requerimientos de contenido ESTRUCTURA 5. Diseño de interacción 6. Arquitectura de información ESQUELETO 7. Diseño de la interfaz 8. Diseño de navegación 9. Diseño de información SUPERFICIE 10. Diseño visual
  103. 103. Botones pequeños ERROR 1. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  104. 104. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR NO SI @accantu
  105. 105. No dar feedback visual ERROR 2. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  106. 106. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR NO SI @accantu
  107. 107. Excesivas notificaciones (push) ERROR 3. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  108. 108. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR NO SI @accantu
  109. 109. Tener un mal affordance ERROR 4. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  110. 110. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR NO SI @accantu
  111. 111. INCONSISTENCIA ERROR 5. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  112. 112. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR NO SI @accantu
  113. 113. Textos miniatura o ilegibles ERROR 6. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  114. 114. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR NO SI @accantu
  115. 115. Mal diseño de formularios ERROR 7. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  116. 116. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR NO SI @accantu
  117. 117. IGNORAR PATRONES ERROR 8. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  118. 118. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR NO SI @accantu
  119. 119. Querer “innovar” en símbolos predefinidos ERROR 9. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  120. 120. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR NO SI @accantu
  121. 121. Uso incorrecto del color ERROR 10. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu
  122. 122. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR NO SI @accantu
  123. 123. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR PLANOS UX J.J. GARRETT 2002 1 2 3 4 5 6 7 8 9 10 ESTRATEGIA 1. Necesidades del usuario 2. Objetivos del negocio ALCANCE 3. Especificaciones funcionales 4. Requerimientos de contenido ESTRUCTURA 5. Diseño de interacción 6. Arquitectura de información ESQUELETO 7. Diseño de la interfaz 8. Diseño de navegación 9. Diseño de información SUPERFICIE 10. Diseño visual
  124. 124. ¡Gracias! @accantu blog.acantu.com NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

×