1. Interacción Hombre-Máquina Diseño de Interfaces Prof. Adelaide Bianchini Depto. de Computación y Tecnología de la Información Universidad Simón Bolívar - Caracas. Enero 2006

7. Motivación  ¿Qué es la Interfaz? “ Medio de comunicación y lenguaje de algo no necesariamente trivial"

8. Motivación  ¿Qué es la Interfaz? “ Medio de comunicación y lenguaje, de algo no necesariamente trivial" “ La superficie de contacto entre dos entes disímiles”

9. Motivación  ¿Qué es la Interfaz? “ Medio de comunicación y lenguaje, de algo no necesariamente trivial" “ La superficie de contacto entre dos entes disímiles” “ Todos los intercambios que suceden entre la persona y el computador (o cualquier dispositivo)”

10. Motivación  ¿Qué es la Interfaz? La interfaz es la parte (hardware y software) del sistema informático que facilita al usuario el acceso a los recursos del computador.

11. Motivación  ¿Qué es la Interfaz? La interfaz es la parte (hardware y software) del sistema informático que facilita al usuario el acceso a los recursos del ordenador. Para saber acerca de las interfaces, se requiere conocer las tareas de interacción que puede realizar un individuo.

12. Motivación  ¿Qué es la Interfaz? Para saber diseñar interfaces, se requiere conocer algunos aspectos relacionados con los individuos. Es decir, se requiere analizar las peculiaridades de los usuarios.

13. Motivación  ¿Qué es la Interfaz? Para saber diseñar interfaces, se requiere conocer algunos aspectos relacionados con los individuos. Es decir, se requiere analizar las peculiaridades de los usuarios. Se requiere además, conocer las características de los dispositivos que se utilizarán.

14. Motivación  ¿Qué es la Interfaz? El diseño de interfaces y el diseño de interacción son áreas de interés de la disciplina llamada Factores Humanos ( Human Factors ) , también llamada Interacción Humano-Computador ( HCI – Human-Computer Interaction ).

15. Motivación  ¿Qué es la Interfaz? El diseño de interfaces y el diseño de interacción es son áreas de interés de la disciplina llamada Factores Humanos ( Human Factors ) , también llamada Interacción Humano-Computador ( HCI – Human-Computer Interaction ). El objetivo primordial de esta disciplina es desarrollar técnica y métodos para mejorar la interacción entre los humanos y las máquinas (el computador, entre ellas).

16. Aspectos históricos

17. Aspectos históricos 1963. Ivan Sutherland . SketchPad . El sistema soportaba la manipulación de objetos gráficos mediante un lápiz óptico, permitiendo coger los objetos, moverlos y cambiarles el tamaño utilizando algunas restricciones. 1963. Elgerbart. Diseña el primer “ mouse ”.

18. Aspectos históricos 1968. MIT’s Lincoln Labs . AMBIT/G . Este sistema incluyó representaciones de iconos, reconocimiento de gestos, menús dinámicos con la ayuda de dispositivos apuntadores y selección de iconos apuntándolos.

19. Aspectos históricos Años 70. Xerox PARC . Crearon el modelo y los dispositivos para las interfaces que incluían ventanas, menúes, íconos, botones, etc. Era la antesala de las interfaces que hoy conocemos como manipulación directa. Otro importante hito de aquellas investigaciones fue la idea de WYSIWYG ( What You See Is What You Get )

20. Aspectos históricos 1977. ALAN KAY, Xerox PARC: Dynabook. 1981. Xerox Star . Sale al mercado el primer sistema comercial que hace extenso el uso de la Manipulación Directa: Xerox Star . Le siguen el Apple Lisa en 1982 y el Macintosh en 1984. 1982. Ben Shneiderman , Universidad de Maryland. Acuñó el término “Manipulación directa”, identificando además los distintos componentes.

21. Estilos de Interfaces

23. HCI – Human Computer Interaction

25. HCI – Human Computer Interaction ¿Cómo diseñar para mejorar la interacción hombre-máquina? Contextos básicos a considerar

26. ¿Cómo diseñar para mejorar la interacción hombre-máquina? Contextos básicos a considerar Físicos  relacionados con el hardware y dispositivos de interfaz

27. ¿Cómo diseñar para mejorar la interacción hombre-máquina? Contextos básicos a considerar Físicos  relacionados con el hardware y dispositivos de interfaz Sintácticos  • presentación de información • secuencia, orden de las acciones

28. ¿Cómo diseñar para mejorar la interacción hombre-máquina? Contextos básicos a considerar Físicos  relacionados con el hardware y dispositivos de interfaz Sintácticos  • presentación de información • secuencia, orden de las acciones Semánticos  • significado de los objetos • significado de las acciones

29. HCI – Human Computer Interaction Máquinas Metáforas Diálogos Diseño Gráfico Dispositivos I/O Áreas de aplicación y tareas Aspectos sociales y organizacionales Usos y contextos Humanos Procesamiento de información Lenguajes y comunicación Ergonomía

30. HCI – Human Computer Interaction HCI Computación Psicología Cognitiva Ergonomía Lingüística Psicología Social Filosofía, Sociología y Antropología Inteligencia Artificial Ingeniería y Diseño

31. Observar al usuario Análisis del usuario Lengua y lenguaje Canales de comunicación  Tipos Integración Interacción  Primitivas Humanos Procesamiento de información Lenguajes y comunicación Ergonomía

58. Conceptos generales – Interacción

59. Conceptos generales – Interacción

60. Conceptos generales – Interacción

61. Conceptos generales – Interacción ¿Cómo interactúa el usuario con esta aplicación?

62. Conceptos generales – Interacción

63. Diseño de interfaces

66. ¿Cómo diseñar para mejorar la interacción hombre-máquina? Principios Son conceptos de muy alto nivel que deben ser utilizados en el diseño de aplicaciones.

69. ¿Cómo diseñar para mejorar la interacción hombre-máquina? Reglas de diseño Guían al diseñador con el fin de incrementar la “usabilidad”. Se clasifican en estándares y directrices.

70. ¿Cómo diseñar para mejorar la interacción hombre-máquina? Estándares Son requisitos, reglas o recomendaciones basadas en principios probados y en práctica.

71. ¿Cómo diseñar para mejorar la interacción hombre-máquina? Directrices Las directrices recomiendan acciones que se basan en un conjunto de principios de diseño. Son más específicas que los principios y requieren menos experiencia para entenderlas e interpretarlas que éstos.

72. ¿Cómo diseñar para mejorar la interacción hombre-máquina? Guías de estilo Llamadas también guías corporativas. Están basadas en principios y contienen directrices que se concretan a muy bajo nivel.

73. ¿Cómo diseñar para mejorar la interacción hombre-máquina? Guías de estilo Llamadas también guías corporativas. Están basadas en principios y contienen directrices que se concretan a muy bajo nivel. Las guías de estilo corporativas se centran en presentaciones comunes, comportamientos y técnicas que deben ser implementadas por todos los productos en una compañía.

74. Objetos de las interfaces

75. Objetos de las interfaces gráficas Ventanas Menúes Íconos Botones Campos etc.

76. Objetos de las interfaces gráficas Ventanas

77. Objetos de las interfaces gráficas Ventanas tipo diálogo

78. Objetos de las interfaces gráficas Menúes

79. Objetos de las interfaces gráficas Íconos

80. Objetos de las interfaces gráficas Botones

81. Objetos de las interfaces gráficas Campos

82. Objetos de las interfaces gráficas Metáforas Es un tropo fundamental de la retórica . Es una descripción de una situación desconocida utilizando una situación conocida. ¿Qué es?

84. Objetos de las interfaces gráficas Metáforas Ejm. (palabras) TV: programas, canales, redes, anuncios, guías, noticias Juegos: reglas del juego, piezas del juego, tablero del juego Árboles: raíces, tronco, ramas, hojas

85. Objetos de las interfaces gráficas Metáforas Existen metáforas verbales, basadas en la utilización de verbos para “denotar” acciones. Ejm. Mover : navegar, conducir, volar Localizar : apuntar Seleccionar : tocar un elemento, poner el dedo sobre.... Crear : añadir (nuevo), copiar Borrar : botar, destruir, perder, cortar

86. Objetos de las interfaces gráficas Metáforas Existen metáforas verbales, basadas en la utilización de verbos para “denotar” acciones. Ejm. Mover : navegar, conducir, volar Localizar : apuntar Seleccionar : tocar un elemento, poner el dedo sobre.... Crear : añadir (nuevo), copiar Borrar : botar, destruir, perder, cortar

87. Objetos de las interfaces gráficas Metáforas Existen metáforas del mundo real Ejms.: Semáforo (¿aplicaciones?) Colores Escritorio (global) Levantamiento y diagramación de textos (acciones) A.K. + S.J.

88. Objetos de las interfaces gráficas Metáforas  Utilidad Utilidad práctica : se espera que permita un entendimiento más rápido de la situación desconocida y que acelere el aprendizaje de una herramienta mediante el conocimiento que se tiene del mundo real.

89. Objetos de las interfaces gráficas Metáforas Utilidad comunicacional : La metáfora va creando comunicación mediante su posibilidad de dejar de ser metafórica y convertirse en expresión directa de la lengua, así la metáfora crea lengua ampliando los elementos básicos de comunicación y dando posibilidades nuevas de comunicación.

90. Algunos principios de diseño de interfaces

91. Algunos principios de diseño de interfaces gráficas Consistencia La consistencia en un interfaz permite a los usuarios transferir sus conocimientos y destrezas de una aplicación a otra.

92. Consistencia La consistencia en un interfaz permite a los usuarios transferir sus conocimientos y destrezas de una aplicación a otra. La consistencia en las interfaces gráficas ayuda a los usuarios a aprender y reconocer fácilmente el lenguaje gráfico de esa interfaz. Algunos principios de diseño de interfaces gráficas

93. Consistencia La consistencia en el comportamiento de una interfaz significa que los usuarios aprenden cómo hacer las cosas, por ejemplo apuntar y seleccionar, una sola vez. Algunos principios de diseño de interfaces gráficas

94. Control del usuario El usuario y no el computador (o aplicación) inicia y controla las actividades. Algunos principios de diseño de interfaces gráficas

95. Control del usuario El usuario y no el computador (o aplicación) inicia y controla las actividades. Tolerancia Posibilidad de ofrecerle al usuario la capacidad de recuperarse de los errores. Algunos principios de diseño de interfaces gráficas

96. Retroalimentación y diálogo El usuario debe estar constantemente informado de lo que está ocurriendo con los procesos. Diálogo simple al alcance del usuario La información que recibe el usuario debe ser entendible y a su alcance. Algunos principios de diseño de interfaces gráficas

97. Integridad estética La información se encuentra organizada en forma adecuada y consistente con los principios de diseño visual. El número de elementos y su respectivo comportamiento debe ser limitado para aumentar la “usabilidad” de la interfaz. Algunos principios de diseño de interfaces gráficas

98. Integridad estética Se debe asegurar de mantener la semántica del lenguaje gráfico o del lenguaje asociado a la interfaz. No cambiar el significado de los objetos que son estándares. Algunos principios de diseño de interfaces gráficas

100. Algunos principios de diseño de interfaces gráficas

101. Continuará .....