Introducción a la Interacción Humano-Computadora, a su Diseño -como proceso- y la relación con el Diseño de Interacción. Curso de HCI. Versión 2012.

1. Interacción
Humano-
Computadora
2012
Introducción al Diseño
de Interacción
Humano-Computadora
Mtro. Omar Sosa Tzec.
Lic. en Diseño de Interacción.
Universidad Iberoamericana Campus Puebla.
http://www.tzek-design.com/blog

2. Objetivos
¿Qué es lo que tengo que dominar al final del curso?

3. El objetivo del curso es tener las bases del espectro que
abarca la Interacción Humano–Computadora (HCI por sus
siglas en inglés) y su relación con el diseño de interacción y
el diseño de experiencias de usuario.

4. IxD
HCI UXD

5. Conocimientos
generales
Base para Incorporación
la crítica de conocimiento
previo
Adopción de Afinar
métodos ejecución

6. Conocimientos
generales
Base para Incorporación
la crítica de conocimiento
previo
Adopción de Afinar
métodos ejecución

7. Conocimientos
generales
Base para Incorporación
la crítica de conocimiento
previo
Adopción de Afinar
métodos ejecución

8. Realidad Academia

9. Conocimientos
generales
Base para Incorporación
la crítica de conocimiento
previo
Adopción de Afinar
métodos ejecución

11. Conocimientos
generales
Base para Incorporación
la crítica de conocimiento
previo
Adopción de Afinar
métodos ejecución

12. Esquemática HCI

13. Arquitectura
HCI
de Información

14. Ingeniería
HCI
de Software

15. Animación HCI

16. Conocimientos
generales
Base para Incorporación
la crítica de conocimiento
previo
Adopción de Afinar
métodos ejecución

18. En el sentido práctico, el alumno debe: a) sensibilizarse
a los paradigmas de HCI bajo un enfoque centrado en el
usuario y en la experiencia de uso, b) desarrollar prototipos
para el diseño de interfaces, y c) entender el proceso de
evaluación de una interfaz de usuario y como aplicarla.

19. Temas
¿Y qué veremos en el curso?

20. Teoría Métodos Evaluación
y/de
diseño

21. Teoría Métodos Evaluación
y/de
diseño

22. HCI y DIx como disciplinas
Interfaz
Paradigmas de HCI
Síntesis y Análisis en el diseño de HCI
Métodos de diseño para HCI
El boceto como herramienta de ideación
Elaboración de prototipos
Diseño para pantalla
Ley de Fitts
Affordances
Diseño, usuarios y cognición
Diseño emocional
Retórica y HCI
La experiencia de usuario
Usabilidad
Comunicabilidad
etc…

23. Evaluación
¿Cómo seré evaluado?

24. 30%
Suma de las evaluaciones de Suma de dos evaluaciones
proyectos parciales que parciales escritas sobre conceptos
demuestren la aplicación de los
conceptos vistos en clase, 40% teóricos vistos en clase aplicadas
durante el curso.
elaborados durante el curso.
30%
Proyecto final para el curso.

25. ¿Exámenes escritos?

26. Material del curso

27. Proyecto final
¿Qué deberé entregar al final?

28. IxD
HCI UXD

29. Pantalla/Físico
Power Point
Flash
Photoshop
Illustrator
Cacoo
AfterEffects
Prototipo Impreso
Arduino
Cartón
Reporte
Contexto
Requerimientos
Personas
Entrevistas
Bocetos
Evaluación
Registro proceso
YouTube

30. Evaluación
¿Cómo serán evaluadas las tareas y el proyecto final?

31. Importante.
Las tareas son válidas hasta la fecha y hora que se indique su
entrega, con frecuencia hasta la siguiente clase.
* El criterio para obtener el 100% de los puntos se especificará
con cada tarea.
* Si la tarea es entregada el mismo día pero no a la hora
señalada, automáticamente reducirá su valor a un 50%.
* Si ya ha pasado un día a partir de la fecha de entrega. La
tarea valdrá cero puntos.
* Si hay excepciones, se indicará en clase delante de todo
el grupo.

32. Deseable 99.9%
que no sea
proyecto de ASE

33. Empecemos…

34. Los mismos
fundamentos
de siempre…

35. Usuario
Interfaz
Tarea Herramienta
Del objeto a la interfase.
Gui Bonsiepe.
Infinito. 1999.

36. ¿Qué caracteriza al usuario?
¿Qué caracteriza a la herramienta?
¿Qué caracteriza a la tarea?

37. El usuario podría estar caracterizado por:
* Su nivel de alfabetización.
* Su nivel de alfabetización funcional.
* Su nivel de alfabetización informática.
* Su nivel de alfabetización informacional.
* Experiencias de la niñez, adolescencia o
etapa adulta.
* Conocimiento.
* Capacidades psico-motoras.
* Capacidades especiales. ¿Qué otra cosa?

38. La herramienta podría estar caracterizada por:
* Su peso y volumen.
* La composición de sus materiales.
* Competitividad tecnológica, económica y
operacional.
* Capacidad de respuesta.
¿Qué otra cosa?

39. La tarea podría estar caracterizada por:
* Su complejidad.
* El o los resultados esperados.
* Tiempo de ejecución.
* Camino de ejecución.
¿Qué otra cosa?

40. Interacción
Humano-
Computadora

41. La Interacción Humano–Computadora (HCI por sus siglas
en inglés) es el estudio de la relación que existe entre los
usuarios humanos y los sistemas de cómputo que usan
para realizar diversas tareas.
The Esscence of Human–Computer
Interaction.
Christine Faulkner.
Prentince Hall, 1997.

42. Usuario Computadora

43. Usuario ¿Computadora?

45. contexto
personas problema
necesidades

46. Busca entender cómo funcionan los usuarios, las tareas
que necesitan llevar a cabo y el modo en el que los
sistemas de cómputo necesitan estar estructurados para
facilitar el cumplimiento de esas tareas.
The Esscence of Human–Computer
Interaction.
Christine Faulkner.
Prentince Hall, 1997.

47. Usuario
Tarea
Computadora

48. Subtarea
Usuario 1
Subtarea
2
…
Subtarea
n-1
Subtarea Computadora
n

50. http://www.usabilitynet.org/tools/taskanalysis.htm

51. Para entender a los usuarios es
necesario entender los procesos,
capacidades y predilecciones que
pueden asociarse a las tareas que
desempeñan.
Esto involucra un entendimiento y
conocimiento de cosas como la
memoria, visión, cognición, oído,
tacto y habilidades motrices.
El sistema computacional necesita ser
entendido en términos de lo que
puede hacer por los usuarios y cómo
podría comunicarse mejor con ellos...
The Esscence of Human–Computer
Interaction.
Christine Faulkner.
Prentince Hall, 1997.

52. Cognición
Usuario Computadora

53. contexto
personas problema
necesidades

54. Cognición
Usuario Computadora

55. Usuario Computadora
Cultura

56. Usuario Computadora
Una pregunta para hacernos como diseñadores

57. La interacción humano-computadora comprende el
proceso que se lleva a cabo cuando un humano interactúa
con un producto de software.
Formalización del Modelo de Diseño para la
Interacción Humano-Computadora.
Gustavo A. Valero.
Universidad de los Andes Mérida, 2008.

58. IxD
HCI UXD

61. HCI Diseño

62. HCI Diseño
Una constante: el cambio

63. Existen varios factores que intervienen en la HCI relativos
al usuario, ambiente, tecnología y desempeño del
sistema en general, de que no considerarse
apropiadamente en el desarrollo del software, el producto
obtenido puede que no satisfaga completamente los
requisitos de los usuarios.
Formalización del Modelo de Diseño para la
Interacción Humano-Computadora.
Gustavo A. Valero.
Universidad de los Andes Mérida, 2008.

64. La interacción humano-computadora es una disciplina
que tiene que ver con el diseño, evaluación e
implementación de sistemas computacionales
interactivos para uso humano y con el estudio de los
fenómenos de mayor importancia que están involucrados.
ACM SIGCHI Curricula for Human-Computer Interaction.
Enero, 2010.

68. Si la tarea
es la misma…
¿Todos los usuarios pueden usar
exitosamente la misma herramienta?
¿Existe la idea de interfaz global?
¿El diseño es universal? ¿Por qué
hablar de la palabra diseño?

69. El diseño universal es un paradigma del diseño relativamente nuevo, que
dirige sus acciones al desarrollo de productos y entornos de fácil acceso
para el mayor número de personas posible, sin la necesidad de adaptarlos
o rediseñarlos de una forma especial.
El concepto surge del diseño sin barreras, del diseño accesible y de la
tecnología asistiva de apoyo. A diferencia de estos conceptos el diseño
universal alcanza todos los aspectos de la accesibilidad, y se dirige a
todas las personas, incluidas las personas con discapacidad.
Resuelve el problema con una visión holista, partiendo de la idea de la
diversidad humana. Además, tiene en cuenta la manera en que se vende el
producto y la imagen de producto, para que éstos, además de ser
accesibles, puedan venderse y captar a todo el rango de consumidores.
Wikipedia.
Enero 2010.

70. Global

71. Cultural

72. Contextual

73. Social

74. Ergonomía
Psicología social
y factores
y organizacional
humanos
Psicología
Ingeniería
cognitiva
Ciencias de la
Diseño
Computación
interacción
humano-computadora
Inteligencia
Artificial Antropología
Lingüística
Sociología
Filosofía
The Esscence of Human–
Computer Interaction.
Christine Faulkner.
Prentince Hall, 1997.

75. La interacción humano-computadora incluye la interfaz de
usuario (tanto hardware como software), modelado de
sistemas y usuarios, ciencias del comportamiento y
cognitivas, estudios empíricos, metodología, técnica y
herramientas. La meta de la mayoría del trabajo en
interacción humano-computadora es, de una forma u
otra, proveer al usuario con una gran alto de usabilidad.
Developing user interfaces: ensuring usability
trhough product & process.
Debora HIx and Rex Harston.
Wiley, 1993.

76. HCI Usabilidad
¿Si no es usable no sirve?

77. ¿Responsabilidad
Social?
¿Cultura? ¿Marketing?
HCI Usabilidad
¿Emoción? ¿Diseño
sostenible?
¿Economía?

78. HCI y
Diseño de
Interacción

79. El diseño de interacción (DIx) define la estructura y
comportamiento de productos y servicios interactivos.
Los diseñadores de interacción crean relaciones sólidas
entre la gente y los sistemas interactivos que usan, desde
las computadoras hasta dispositivos móviles, dando las
bases para experiencias intangibles.
IxDA. Interaction Design Association.
2010.

80. HCI
DIx
¿Está el diseño de interacción contenido en la interacción humano-computadora?

81. DIx
HCI
¿Está la interacción humano-computadora contenida en el el diseño de interacción?

82. En los primeros días, el término “diseño” dentro de la
comunidad de HCI significaba ingeniería de usabilidad:
“…el proceso de modelar a los usuarios y sistemas y
especificar el comportamiento del sistema de tal forma
que encaje con las tares de los usuarios, que sea
eficiente, fácil de usar y de aprender.
Research Through Design as a Method for Interaction
Design Research in HCI.
John Zimmerman, Jodi Forlizzi, Shelley Evenson.
CHI 2007 Proceedings

83. A través del tiempo, los diseñadores comenzaron
trabajando con los desarrolladores de software,
incorporando las habilidades en jerarquías visuales,
navegación, color y tipografía que se habían
desarrollados en los productos impresos.
Research Through Design as a Method for Interaction
Design Research in HCI.
John Zimmerman, Jodi Forlizzi, Shelley Evenson.
CHI 2007 Proceedings

84. Jonas Löwgren nombró a este proceso que llevaron al
diseño de interacción como “diseño creativo” para
distinguirlo del enfoque de ingeniería.
En la ingeniería del diseño, los desarrolladores crean
software para cubrir una especificación, mientras que en
el diseño creativo, los diseñadores continúan re-
enmarcando el problema, constantemente cuestionando
los supuestos inherentes durante el proceso de diseño.
Research Through Design as a Method for Interaction
Design Research in HCI.
John Zimmerman, Jodi Forlizzi, Shelley Evenson.
CHI 2007 Proceedings

85. Diseño de
Experiencia de
Usuario.
Arq. de
Arquitectura.
Información.
Diseño
Contenido.
industrial.
Factores
humanos.
Diseño
visual. Diseño de
Interacción.
Diseño
de sonido.
Interacción
Designing for Interaction: Creating Innovative humano-computadora.
Applications and Devices, Second Edition.
Dan Saffer.
New Riders, 2009.

86. Disciplinas académicas. Prácticas de diseño.
Ergonomía. Diseño gráfico.
Psicología/Ciencias cognitivas. Diseño de Producto.
Informática. Diseño artístico.
Ingeniería. Diseño industrial.
Ciencias de la computación. Industria del cine.
Ingeniería de software.
Ciencias sociales.
diseño de
interacción
Campos multidisciplinarios.
Factores humanos.
Ingeniería cognitiva.
HCI.
Ergonomía cognitiva.
CSCW. Interaction Design beyond human-computer
interaction. Second Edition.
Sistemas de información. Preece, Sharp & Rogers.
Wiley, 2007.

87. Los diseñadores de interacción trabajan en una variedad
de productos: todo desde sitios web a aplicaciones de
escritorio, de electrónica de consumo hasta robótica, de
dispositivos móbiles y médicos hasta ambientes
interactivos. Estos productos pueden ser solamente
digitales (software) o mayormente análogos (robots) o
incorpóreos (una interfaz por gestos), o una combinación
de todo.
Designing for Interaction: Creating Innovative
Applications and Devices, Second Edition.
Dan Saffer.
New Riders, 2009.

89. Más y más, los productos en los que trabajan los
diseñadores de interacción están conectados a un
servicio, a tal punto que no es importante distinguir entre
ambos para el diseño de la interacción.
Designing for Interaction: Creating Innovative
Applications and Devices, Second Edition.
Dan Saffer.
New Riders, 2009.

90. Un proceso es un conjunto de las fases
sucesivas de un fenómeno natural o de
una operación artificial.
RAE.
Enero 2010.

91. Un servicio es una cadena de
actividades o eventos en secuencia,
paralelas o bien, no lineales que
forman un proceso y tienen valor para
el usuario final.
Designing for Interaction: Creating Innovative
Applications and Devices, Second Edition.
Dan Saffer.
New Riders, 2009.

92. Tarea 1:
* Hacer una presentación de un “meme” que narre un
problema grave y recurrente para los usuarios de un servicio
dado –un cine, un establecimiento de comida rápida,
transporte público, etc. El asunto es que dicho servicio debe
ser fuera de la universidad. Posteriormente, a nivel boceto –
posteriormente escaneado– o wireframe, bocetar una
solución. Concluir la presentación con un “meme” que de
evidencia de por qué y cómo el problema se solucionó con la
propuesta de diseño.

93. Gracias.
* Todas las imágenes mostradas en esta presentación son sin fines de lucro y los derechos son
propiedad de sus autores o dueños.