Introducción al Diseño de
Experiencia del Usuario!
Gabriel Celemin | Giro54
@gcelemin | Giro54.com
Temas:
–	Orígenes
–	 Qué es la Experiencia del Usuario
–	 Diseño de UX
	 – UX vs UI
		 Diseño Centrado en el Usuario
–
	 –...
–	 Estándares, convenciones y más
	 – Contexto
	 – Estándares técnicos
	 – Patrones de diseño
	 – Guías de estilo
–	 Equip...
Orígenes del
Diseño de UX

Giro54
Giro54
Giro54
Giro54
“Error humano”

Giro54
Giro54
Giro54
Factores Humanos
Estudia el diseño de
herramientas y lugares de
trabajo para que coincidan con
las características físicas...
Giro54
Giro54
Giro54
Giro54
Giro54
Interacción HumanoComputadora (HCI)
Estudia la interacción entre las
personas y las computadoras a
través del diseño, eval...
También:
– Diseño industrial
– Psicología cognitiva
– Antropología y sociología
– Ciencias de la computación

Giro54
Estudios de
conducta humana

Factores
Humanos

Interacción
Humanocomputadora Diseño
(HCI)
de UX
Era de la Información

PC ...
Giro54
Experiencia del Usuario
User Experience

Giro54
HCI

UX

Transformación desde la
evaluación de interfaces hacia
tratar de lograr un entendimiento
más profundo de las pers...
La Experiencia del
usuario abarca toda la
relación de una persona
con una empresa y sus
productos y servicios.

Giro54
No sólo productos y
servicios digitales.

Giro54
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
rvic...
La Experiencia del
Usuario incorpora
también el componente
emocional.

Giro54
Giro54
Giro54
Giro54
Giro54
Giro54
Giro54
Giro54
Giro54
Giro54
Giro54
Giro54
Giro54
Giro54
Diseño de UX

User Experience Design

Giro54
Las “experiencias”
ocurren en la mente de
las personas.

Giro54
Podemos diseñar
los elementos que
crean y modelan las
experiencias.

Giro54
UX =

	 Arquitectura de la
información
+ Diseño de interacción
+ Diseño de UI
+	Usabilidad
+	Maquetadores
+ Programadores
...
UX vs UI

Giro54
Imagen: Ed Lea

Giro54
Imagen: Ed Lea

Giro54
Imagen: Ed Lea

Giro54
El diseño de UX se
basa en los principios
del Diseño Centrado en
el Usuario (DCU).

Giro54
Giro54
1. Colocar al usuario en
el centro del proceso
de diseño.

Giro54
2. Identificar qué
es importante
para la audiencia
(tareas, objetivos,
necesidades).

Giro54
3. Diseñar de manera
iterativa y con la
participación de los
usuarios.

Giro54
4. Evaluar el diseño
y recolectar
información para
mejorarlo.

Giro54
Contexto
de uso

Evaluación

Requerimientos

Diseño
Giro54
Componentes del
Diseño de UX

Giro54
Fuente: Jesse James Garrett

Giro54
Una buena UX
debe responder a
las expectativas y
necesidades del usuario
y evocar sentimientos y
emociones positivas.

Gir...
útil
deseable

usable
valioso
fácil de
encontrar

accesible
creíble

Fuente: Peter Morville

Giro54
Ejemplos

Giro54
Gabriel

Gabriel
http://www.gabriel.com

Giro54
gabriel@email.com

gabriel

Giro54
Giro54
Giro54
Giro54
Giro54
Giro54
Giro54
Giro54
Giro54
Giro54
Giro54
Giro54
Giro54
Giro54
Giro54
gabriel@email.com

Giro54
Giro54
Giro54
Estándares,
convenciones y más

Giro54
Contexto = Caos

Giro54
Imagen: bradfrostweb.com

Giro54
Imagen: bradfrostweb.com

Giro54
Imagen: bradfrostweb.com

Giro54
Giro54
Estándares técnicos
Apuntan a reducir los
costos y la complejidad y
a mejorar la accesibilidad
y la vida útil de los
desar...
Imagen: www.evolutionoftheweb.com

Giro54
– W3C (X/HTML, CSS,
accesibilidad)
– ECMA (JavaScript)
– IETF (protocolos: TCP/IP,
SMTP)
– The Web Standards Project *
* D...
Giro54
Patrones de diseño
Describen una solución
óptima para un problema
común.

Giro54
http://developer.yahoo.com/ypatterns/

Giro54
http://developer.android.com/design/patterns/

Giro54
http://developer.apple.com/library/IOS/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html

...
Guías de estilo
Documentan decisiones
de diseño para poder
evolucionar y escalar de
manera lógica y ordenada.

Giro54
– Uso de marcas, colores,
tipografías, imágenes.
– Diagramación y grillas
– Tipologías de pantallas
– Estándares de UI (ej...
Giro54
Giro54
Giro54
ISO 9241-210

(2010)
Ergonomics of human-system
interaction. Part 210: Humancentered design for interactive
systems

Giro5...
El equipo de UXD

Giro54
Giro54
Arquitecto de información
Se ocupa de la organización,
nomenclatura y esquemas de
navegación, con el objetivo
de ayudar a ...
Área de trabajo:
Sitios donde los usuarios
buscan información y
conocimiento (universidades,
empresas, instituciones
guber...
Diseñador de interacción
Define la manera en la cual un
producto interactivo responde a
las acciones de los usuarios de
fo...
Área de trabajo:
Sitios y aplicaciones donde
los usuarios “hacen cosas”
(e-commerce, banca online,
redes sociales, juegos,...
Diseñador de interfaces
Encargado de definir el estilo
visual de un sitio web (colores,
tipografías, imágenes) y producir
...
Área de trabajo:
Diagramación, jerarquías
de información, tipografía,
legibilidad, teoría de color,
identidad corporativa,...
Especialista en usabilidad
Observa y evalúa, con diferentes
métodos, el nivel de eficiencia,
eficacia y satisfacción de la...
Área de trabajo:
Análisis contextual, evaluación
heurística, pruebas de
usabilidad con usuarios, diseño
iterativo, encuest...
Otros roles:
– Maquetadores de Front-End (HTML/
CSS/JS)
– Programadores de Back-End
(funcionalidad, bases de datos, etc.)
...
Entregables

Giro54
Beneficios
– Eficiencia
– Foco
– Registro
– Claridad y síntesis
Giro54
Eficiencia
La introducción de cambios
tiene menor costo en las
etapas tempranas.

Giro54
Foco
Ayudan a enfocar las
charlas y decisiones en
lo que es importante en
cada etapa.

Giro54
Registro
Capturan y hacen explícitas
las decisiones y las
documentan para informar
las etapas siguientes.

Giro54
Claridad y síntesis
Facilitan el entendimiento de
los acuerdos, por ser más
fáciles de interpretar que la
documentación es...
Ejemplos

Giro54
Análisis / relevamiento
Mapas conceptuales, perfiles
de usuario (personas),
escenarios de uso,
storyboards.

Giro54
Giro54
Giro54
Giro54
Arquitectura de
información / diseño de
interacción
Inventarios de contenido,
sitemaps, flujos de tareas,
wireframes.

Gir...
Giro54
Giro54
Giro54
Giro54
Giro54
Diseño de interfaz
Diseños conceptuales,
diseños visuales, guías de
estilo, patrones de diseño.

Giro54
Giro54
Giro54
Giro54
Giro54
Giro54
Investigación de usuarios
Diseño participativo,
evaluación heurística,
pruebas y reportes de
usabilidad.

Giro54
Giro54
Giro54
Giro54
Conclusiones

Giro54
1.	UX como englobadora de
disciplinas:
	 –	 Arquitectura de la información
	 –	 Diseño de interacción
	 – 	 Diseño de inte...
Giro54
3.	El usuario en el
centro del proceso de
desarrollo y diseño.

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

Giro54
Recursos
Information Architecture Institute – www.iainstitute.org
Interaction Design Association – www.ixda.org
Usability ...
Muchas gracias.
Gabriel Celemin
@gcelemin

Giro54

Giro54.com | @Giro54

Giro54
Introducción al Diseño de Experiencia del Usuario – UX2013
Introducción al Diseño de Experiencia del Usuario – UX2013
Upcoming SlideShare
Loading in...5
×

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

1,368

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

Published in: Design
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,368
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

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

  1. 1. Introducción al Diseño de Experiencia del Usuario! Gabriel Celemin | Giro54 @gcelemin | Giro54.com
  2. 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. 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. 4. Orígenes del Diseño de UX Giro54
  5. 5. Giro54
  6. 6. Giro54
  7. 7. Giro54
  8. 8. “Error humano” Giro54
  9. 9. Giro54
  10. 10. Giro54
  11. 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. 12. Giro54
  13. 13. Giro54
  14. 14. Giro54
  15. 15. Giro54
  16. 16. Giro54
  17. 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. 18. También: – Diseño industrial – Psicología cognitiva – Antropología y sociología – Ciencias de la computación Giro54
  19. 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. 20. Giro54
  21. 21. Experiencia del Usuario User Experience Giro54
  22. 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. 23. La Experiencia del usuario abarca toda la relación de una persona con una empresa y sus productos y servicios. Giro54
  24. 24. No sólo productos y servicios digitales. Giro54
  25. 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. 26. La Experiencia del Usuario incorpora también el componente emocional. Giro54
  27. 27. Giro54
  28. 28. Giro54
  29. 29. Giro54
  30. 30. Giro54
  31. 31. Giro54
  32. 32. Giro54
  33. 33. Giro54
  34. 34. Giro54
  35. 35. Giro54
  36. 36. Giro54
  37. 37. Giro54
  38. 38. Giro54
  39. 39. Giro54
  40. 40. Diseño de UX User Experience Design Giro54
  41. 41. Las “experiencias” ocurren en la mente de las personas. Giro54
  42. 42. Podemos diseñar los elementos que crean y modelan las experiencias. Giro54
  43. 43. UX = Arquitectura de la información + Diseño de interacción + Diseño de UI + Usabilidad + Maquetadores + Programadores + Redactores etc. Giro54
  44. 44. UX vs UI Giro54
  45. 45. Imagen: Ed Lea Giro54
  46. 46. Imagen: Ed Lea Giro54
  47. 47. Imagen: Ed Lea Giro54
  48. 48. El diseño de UX se basa en los principios del Diseño Centrado en el Usuario (DCU). Giro54
  49. 49. Giro54
  50. 50. 1. Colocar al usuario en el centro del proceso de diseño. Giro54
  51. 51. 2. Identificar qué es importante para la audiencia (tareas, objetivos, necesidades). Giro54
  52. 52. 3. Diseñar de manera iterativa y con la participación de los usuarios. Giro54
  53. 53. 4. Evaluar el diseño y recolectar información para mejorarlo. Giro54
  54. 54. Contexto de uso Evaluación Requerimientos Diseño Giro54
  55. 55. Componentes del Diseño de UX Giro54
  56. 56. Fuente: Jesse James Garrett Giro54
  57. 57. Una buena UX debe responder a las expectativas y necesidades del usuario y evocar sentimientos y emociones positivas. Giro54
  58. 58. útil deseable usable valioso fácil de encontrar accesible creíble Fuente: Peter Morville Giro54
  59. 59. Ejemplos Giro54
  60. 60. Gabriel Gabriel http://www.gabriel.com Giro54
  61. 61. gabriel@email.com gabriel Giro54
  62. 62. Giro54
  63. 63. Giro54
  64. 64. Giro54
  65. 65. Giro54
  66. 66. Giro54
  67. 67. Giro54
  68. 68. Giro54
  69. 69. Giro54
  70. 70. Giro54
  71. 71. Giro54
  72. 72. Giro54
  73. 73. Giro54
  74. 74. Giro54
  75. 75. Giro54
  76. 76. gabriel@email.com Giro54
  77. 77. Giro54
  78. 78. Giro54
  79. 79. Estándares, convenciones y más Giro54
  80. 80. Contexto = Caos Giro54
  81. 81. Imagen: bradfrostweb.com Giro54
  82. 82. Imagen: bradfrostweb.com Giro54
  83. 83. Imagen: bradfrostweb.com Giro54
  84. 84. Giro54
  85. 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. 86. Imagen: www.evolutionoftheweb.com Giro54
  87. 87. – W3C (X/HTML, CSS, accesibilidad) – ECMA (JavaScript) – IETF (protocolos: TCP/IP, SMTP) – The Web Standards Project * * Disuelto en Marzo de 2013. Giro54
  88. 88. Giro54
  89. 89. Patrones de diseño Describen una solución óptima para un problema común. Giro54
  90. 90. http://developer.yahoo.com/ypatterns/ Giro54
  91. 91. http://developer.android.com/design/patterns/ Giro54
  92. 92. http://developer.apple.com/library/IOS/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html Giro54
  93. 93. Guías de estilo Documentan decisiones de diseño para poder evolucionar y escalar de manera lógica y ordenada. Giro54
  94. 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. 95. Giro54
  96. 96. Giro54
  97. 97. Giro54
  98. 98. ISO 9241-210 (2010) Ergonomics of human-system interaction. Part 210: Humancentered design for interactive systems Giro54
  99. 99. El equipo de UXD Giro54
  100. 100. Giro54
  101. 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. 102. Área de trabajo: Sitios donde los usuarios buscan información y conocimiento (universidades, empresas, instituciones gubernamentales, medios, etc.) Giro54
  103. 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. 104. Área de trabajo: Sitios y aplicaciones donde los usuarios “hacen cosas” (e-commerce, banca online, redes sociales, juegos, etc.) Giro54
  105. 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. 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. 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. 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. 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. 110. Entregables Giro54
  111. 111. Beneficios – Eficiencia – Foco – Registro – Claridad y síntesis Giro54
  112. 112. Eficiencia La introducción de cambios tiene menor costo en las etapas tempranas. Giro54
  113. 113. Foco Ayudan a enfocar las charlas y decisiones en lo que es importante en cada etapa. Giro54
  114. 114. Registro Capturan y hacen explícitas las decisiones y las documentan para informar las etapas siguientes. Giro54
  115. 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. 116. Ejemplos Giro54
  117. 117. Análisis / relevamiento Mapas conceptuales, perfiles de usuario (personas), escenarios de uso, storyboards. Giro54
  118. 118. Giro54
  119. 119. Giro54
  120. 120. Giro54
  121. 121. Arquitectura de información / diseño de interacción Inventarios de contenido, sitemaps, flujos de tareas, wireframes. Giro54
  122. 122. Giro54
  123. 123. Giro54
  124. 124. Giro54
  125. 125. Giro54
  126. 126. Giro54
  127. 127. Diseño de interfaz Diseños conceptuales, diseños visuales, guías de estilo, patrones de diseño. Giro54
  128. 128. Giro54
  129. 129. Giro54
  130. 130. Giro54
  131. 131. Giro54
  132. 132. Giro54
  133. 133. Investigación de usuarios Diseño participativo, evaluación heurística, pruebas y reportes de usabilidad. Giro54
  134. 134. Giro54
  135. 135. Giro54
  136. 136. Giro54
  137. 137. Conclusiones Giro54
  138. 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. 139. Giro54
  140. 140. 3. El usuario en el centro del proceso de desarrollo y diseño. Giro54
  141. 141. http://www.google.com/about/company/philosophy/ Giro54
  142. 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. 143. Muchas gracias. Gabriel Celemin @gcelemin Giro54 Giro54.com | @Giro54 Giro54

×