Introducción al Diseño de Experiencia del Usuario – UX2013

  • 1,033 views
Uploaded on

Esta presentación se realizó para el evento "UX 2013: Usabilidad, Accesibilidad, Diseño y Tecnología" en el marco del Día Mundial de la Usabilidad, el martes 3 de diciembre de 2013 en la Universidad …

Esta presentación se realizó para el evento "UX 2013: Usabilidad, Accesibilidad, Diseño y Tecnología" en el marco del Día Mundial de la Usabilidad, el martes 3 de diciembre de 2013 en la Universidad Católica Argentina (UCA, Campus Puerto Madero).

El objetivo es presentar las disciplinas que convergieron para dar origen a lo que llamamos Diseño de Experiencia del Usuario, haciendo referencia a los Factores Humanos e Interacción Humano-Computadora (HCI).

Definir qué es el Diseño de UX, las diferencias entre UX y UI, los principios de Diseño Centrado en el Usuario (DCU), y los componentes y beneficios del diseño de UX.
Se menciona la importancia de conocer los estándares, convenciones, patrones de diseño y guías de estilo.

Se presentan los roles de los miembros de un equipo de UX, y ejemplos de los entregables de cada etapa del proceso de diseño.

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,033
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
1
Comments
0
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Introducción al Diseño de Experiencia del Usuario! Gabriel Celemin | Giro54 @gcelemin | Giro54.com
  • 2. Temas: – Orígenes – Qué es la Experiencia del Usuario – Diseño de UX – UX vs UI Diseño Centrado en el Usuario – – Componentes del Diseño de UX – Buenas Experiencias Giro54
  • 3. – Estándares, convenciones y más – Contexto – Estándares técnicos – Patrones de diseño – Guías de estilo – Equipo de UX. Roles – Entregables Giro54
  • 4. Orígenes del Diseño de UX Giro54
  • 5. Giro54
  • 6. Giro54
  • 7. Giro54
  • 8. “Error humano” Giro54
  • 9. Giro54
  • 10. Giro54
  • 11. Factores Humanos Estudia el diseño de herramientas y lugares de trabajo para que coincidan con las características físicas y las habilidades cognitivas de las personas. Giro54
  • 12. Giro54
  • 13. Giro54
  • 14. Giro54
  • 15. Giro54
  • 16. Giro54
  • 17. Interacción HumanoComputadora (HCI) Estudia la interacción entre las personas y las computadoras a través del diseño, evaluación e implementación de sistemas y las consecuencias de su uso. Giro54
  • 18. También: – Diseño industrial – Psicología cognitiva – Antropología y sociología – Ciencias de la computación Giro54
  • 19. Estudios de conducta humana Factores Humanos Interacción Humanocomputadora Diseño (HCI) de UX Era de la Información PC + Web 1900-20s 1940s 1970s 1990-2000s Revolución industrial 2º Guerra Mundial Giro54
  • 20. Giro54
  • 21. Experiencia del Usuario User Experience Giro54
  • 22. HCI UX Transformación desde la evaluación de interfaces hacia tratar de lograr un entendimiento más profundo de las personas. Giro54
  • 23. La Experiencia del usuario abarca toda la relación de una persona con una empresa y sus productos y servicios. Giro54
  • 24. No sólo productos y servicios digitales. Giro54
  • 25. HCI Usabilidad Instalación Uso Descarte Reciclado ien rcam to inicia e l Ac Compra Ac t u a li z c i o n e s a Se rvici nte o a l c li e Giro54
  • 26. La Experiencia del Usuario incorpora también el componente emocional. Giro54
  • 27. Giro54
  • 28. Giro54
  • 29. Giro54
  • 30. Giro54
  • 31. Giro54
  • 32. Giro54
  • 33. Giro54
  • 34. Giro54
  • 35. Giro54
  • 36. Giro54
  • 37. Giro54
  • 38. Giro54
  • 39. Giro54
  • 40. Diseño de UX User Experience Design Giro54
  • 41. Las “experiencias” ocurren en la mente de las personas. Giro54
  • 42. Podemos diseñar los elementos que crean y modelan las experiencias. Giro54
  • 43. UX = Arquitectura de la información + Diseño de interacción + Diseño de UI + Usabilidad + Maquetadores + Programadores + Redactores etc. Giro54
  • 44. UX vs UI Giro54
  • 45. Imagen: Ed Lea Giro54
  • 46. Imagen: Ed Lea Giro54
  • 47. Imagen: Ed Lea Giro54
  • 48. El diseño de UX se basa en los principios del Diseño Centrado en el Usuario (DCU). Giro54
  • 49. Giro54
  • 50. 1. Colocar al usuario en el centro del proceso de diseño. Giro54
  • 51. 2. Identificar qué es importante para la audiencia (tareas, objetivos, necesidades). Giro54
  • 52. 3. Diseñar de manera iterativa y con la participación de los usuarios. Giro54
  • 53. 4. Evaluar el diseño y recolectar información para mejorarlo. Giro54
  • 54. Contexto de uso Evaluación Requerimientos Diseño Giro54
  • 55. Componentes del Diseño de UX Giro54
  • 56. Fuente: Jesse James Garrett Giro54
  • 57. Una buena UX debe responder a las expectativas y necesidades del usuario y evocar sentimientos y emociones positivas. Giro54
  • 58. útil deseable usable valioso fácil de encontrar accesible creíble Fuente: Peter Morville Giro54
  • 59. Ejemplos Giro54
  • 60. Gabriel Gabriel http://www.gabriel.com Giro54
  • 61. gabriel@email.com gabriel Giro54
  • 62. Giro54
  • 63. Giro54
  • 64. Giro54
  • 65. Giro54
  • 66. Giro54
  • 67. Giro54
  • 68. Giro54
  • 69. Giro54
  • 70. Giro54
  • 71. Giro54
  • 72. Giro54
  • 73. Giro54
  • 74. Giro54
  • 75. Giro54
  • 76. gabriel@email.com Giro54
  • 77. Giro54
  • 78. Giro54
  • 79. Estándares, convenciones y más Giro54
  • 80. Contexto = Caos Giro54
  • 81. Imagen: bradfrostweb.com Giro54
  • 82. Imagen: bradfrostweb.com Giro54
  • 83. Imagen: bradfrostweb.com Giro54
  • 84. Giro54
  • 85. Estándares técnicos Apuntan a reducir los costos y la complejidad y a mejorar la accesibilidad y la vida útil de los desarrollos web. Giro54
  • 86. Imagen: www.evolutionoftheweb.com Giro54
  • 87. – W3C (X/HTML, CSS, accesibilidad) – ECMA (JavaScript) – IETF (protocolos: TCP/IP, SMTP) – The Web Standards Project * * Disuelto en Marzo de 2013. Giro54
  • 88. Giro54
  • 89. Patrones de diseño Describen una solución óptima para un problema común. Giro54
  • 90. http://developer.yahoo.com/ypatterns/ Giro54
  • 91. http://developer.android.com/design/patterns/ Giro54
  • 92. http://developer.apple.com/library/IOS/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html Giro54
  • 93. Guías de estilo Documentan decisiones de diseño para poder evolucionar y escalar de manera lógica y ordenada. Giro54
  • 94. – Uso de marcas, colores, tipografías, imágenes. – Diagramación y grillas – Tipologías de pantallas – Estándares de UI (ej. mensajes de sistema, errores, botones, etc.) Giro54
  • 95. Giro54
  • 96. Giro54
  • 97. Giro54
  • 98. ISO 9241-210 (2010) Ergonomics of human-system interaction. Part 210: Humancentered design for interactive systems Giro54
  • 99. El equipo de UXD Giro54
  • 100. Giro54
  • 101. Arquitecto de información Se ocupa de la organización, nomenclatura y esquemas de navegación, con el objetivo de ayudar a las personas a encontrar y manejar información. Giro54
  • 102. Área de trabajo: Sitios donde los usuarios buscan información y conocimiento (universidades, empresas, instituciones gubernamentales, medios, etc.) Giro54
  • 103. Diseñador de interacción Define la manera en la cual un producto interactivo responde a las acciones de los usuarios de forma tal que este “diálogo” sea lo más intuitivo, simple y claro posible. Giro54
  • 104. Área de trabajo: Sitios y aplicaciones donde los usuarios “hacen cosas” (e-commerce, banca online, redes sociales, juegos, etc.) Giro54
  • 105. Diseñador de interfaces Encargado de definir el estilo visual de un sitio web (colores, tipografías, imágenes) y producir el material necesario para llevarlo a cabo. Giro54
  • 106. Área de trabajo: Diagramación, jerarquías de información, tipografía, legibilidad, teoría de color, identidad corporativa, ilustración y fotografía. Giro54
  • 107. Especialista en usabilidad Observa y evalúa, con diferentes métodos, el nivel de eficiencia, eficacia y satisfacción de las personas al usar un sitio web; y hace recomendaciones para mejorar su experiencia. Giro54
  • 108. Área de trabajo: Análisis contextual, evaluación heurística, pruebas de usabilidad con usuarios, diseño iterativo, encuestas, reportes con recomendaciones, pruebas de accesibilidad. Giro54
  • 109. Otros roles: – Maquetadores de Front-End (HTML/ CSS/JS) – Programadores de Back-End (funcionalidad, bases de datos, etc.) – Redactores y editores de textos – Fotógrafos e ilustradores – Gerentes de proyecto Giro54
  • 110. Entregables Giro54
  • 111. Beneficios – Eficiencia – Foco – Registro – Claridad y síntesis Giro54
  • 112. Eficiencia La introducción de cambios tiene menor costo en las etapas tempranas. Giro54
  • 113. Foco Ayudan a enfocar las charlas y decisiones en lo que es importante en cada etapa. Giro54
  • 114. Registro Capturan y hacen explícitas las decisiones y las documentan para informar las etapas siguientes. Giro54
  • 115. Claridad y síntesis Facilitan el entendimiento de los acuerdos, por ser más fáciles de interpretar que la documentación escrita. Giro54
  • 116. Ejemplos Giro54
  • 117. Análisis / relevamiento Mapas conceptuales, perfiles de usuario (personas), escenarios de uso, storyboards. Giro54
  • 118. Giro54
  • 119. Giro54
  • 120. Giro54
  • 121. Arquitectura de información / diseño de interacción Inventarios de contenido, sitemaps, flujos de tareas, wireframes. Giro54
  • 122. Giro54
  • 123. Giro54
  • 124. Giro54
  • 125. Giro54
  • 126. Giro54
  • 127. Diseño de interfaz Diseños conceptuales, diseños visuales, guías de estilo, patrones de diseño. Giro54
  • 128. Giro54
  • 129. Giro54
  • 130. Giro54
  • 131. Giro54
  • 132. Giro54
  • 133. Investigación de usuarios Diseño participativo, evaluación heurística, pruebas y reportes de usabilidad. Giro54
  • 134. Giro54
  • 135. Giro54
  • 136. Giro54
  • 137. Conclusiones Giro54
  • 138. 1. UX como englobadora de disciplinas: – Arquitectura de la información – Diseño de interacción – Diseño de interfaces – Usabilidad 2. Familiaridad con los roles y entregables del equipo de UX. 3. ... Giro54
  • 139. Giro54
  • 140. 3. El usuario en el centro del proceso de desarrollo y diseño. Giro54
  • 141. http://www.google.com/about/company/philosophy/ Giro54
  • 142. Recursos Information Architecture Institute – www.iainstitute.org Interaction Design Association – www.ixda.org Usability Professionals’ Association – www.upassoc.org Jesse James Garrett – www.jjg.net/ia Peter Morville – semanticstudios.com Jakob Nielsen – www.useit.com Don Norman – www.jnd.org Wikipedia, Google Giro54
  • 143. Muchas gracias. Gabriel Celemin @gcelemin Giro54 Giro54.com | @Giro54 Giro54