El documento introduce los orígenes y conceptos fundamentales del diseño de experiencia de usuario (UX), incluyendo la evolución desde los estudios de factores humanos e interacción humano-computadora hasta convertirse en una disciplina centrada en la persona. Explica que UX abarca toda la relación del usuario con una empresa y sus productos, no solo lo digital. Además, describe los componentes clave del diseño UX como la arquitectura de información, diseño de interacción y roles como arquitecto de información y especialista en usabilidad.

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

138. Giro54

139. Conclusiones
Giro54

140. 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

141. Giro54

142. 3. El usuario en el
centro del proceso de
desarrollo y diseño.
Giro54

143. http://www.google.com/about/company/philosophy/
Giro54

144. 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

145. Muchas gracias.
Gabriel Celemin
@gcelemin
Giro54
Giro54.com | @Giro54
Giro54