Interfaces

2,359 views

Published on

Published in: Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,359
On SlideShare
0
From Embeds
0
Number of Embeds
41
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Interfaces

  1. 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
  2. 2. <ul><li>Agenda </li></ul><ul><ul><li>Motivación </li></ul></ul>
  3. 3. <ul><li>Agenda </li></ul><ul><ul><li>Motivación </li></ul></ul><ul><ul><li>Aspectos históricos </li></ul></ul>
  4. 4. <ul><li>Agenda </li></ul><ul><ul><li>Motivación </li></ul></ul><ul><ul><li>Aspectos históricos </li></ul></ul><ul><ul><li>Estilos de interfaces </li></ul></ul>
  5. 5. <ul><li>Agenda </li></ul><ul><ul><li>Motivación </li></ul></ul><ul><ul><li>Aspectos históricos </li></ul></ul><ul><ul><li>Estilos de interfaces </li></ul></ul><ul><ul><li>HCI – Human Computer Interaction </li></ul></ul>
  6. 6. <ul><li>Agenda </li></ul><ul><ul><li>Motivación </li></ul></ul><ul><ul><li>Aspectos históricos </li></ul></ul><ul><ul><li>Estilos de interfaces </li></ul></ul><ul><ul><li>HCI – Human Computer Interaction </li></ul></ul><ul><ul><li>Conceptos generales </li></ul></ul>
  7. 7. Motivación  ¿Qué es la Interfaz? “ Medio de comunicación y lenguaje de algo no necesariamente trivial&quot;
  8. 8. Motivación  ¿Qué es la Interfaz? “ Medio de comunicación y lenguaje, de algo no necesariamente trivial&quot; “ La superficie de contacto entre dos entes disímiles”
  9. 9. Motivación  ¿Qué es la Interfaz? “ Medio de comunicación y lenguaje, de algo no necesariamente trivial&quot; “ La superficie de contacto entre dos entes disímiles” “ Todos los intercambios que suceden entre la persona y el computador (o cualquier dispositivo)”
  10. 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. 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. 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. 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. 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. 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. 16. Aspectos históricos
  17. 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. 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. 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. 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. 21. Estilos de Interfaces
  22. 22. Estilos de interfaces <ul><li>Los estilos de interfaces predominantes son: </li></ul><ul><ul><li>La interfaz por línea de comandos </li></ul></ul><ul><ul><li>Menús y formularios </li></ul></ul><ul><ul><li>Manipulación directa - GUI </li></ul></ul><ul><ul><li>Interfaces con interacción asistida </li></ul></ul>
  23. 23. HCI – Human Computer Interaction
  24. 24. HCI – Human Computer Interaction <ul><li>Es la disciplina que se encarga de los siguientes procesos: </li></ul><ul><ul><li>diseñar </li></ul></ul><ul><ul><li>evaluar </li></ul></ul><ul><ul><li>implementar </li></ul></ul><ul><li>artefactos en sistemas interactivos utilizados </li></ul><ul><li>por humanos </li></ul><ul><li>+ </li></ul><ul><li>el estudio de los fenómenos que rodean estos procesos </li></ul>
  25. 25. HCI – Human Computer Interaction ¿Cómo diseñar para mejorar la interacción hombre-máquina? Contextos básicos a considerar
  26. 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. 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. 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. 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. 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. 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
  32. 32. Conceptos generales – Análisis del usuario <ul><li>Implica conocer aspectos como: </li></ul><ul><ul><li>Habilidades físicas y sensoriales. </li></ul></ul><ul><ul><li>Habilidades cognitivas. </li></ul></ul><ul><ul><li>Diferencias de personalidad. </li></ul></ul><ul><ul><li>Diferencias culturales. </li></ul></ul><ul><ul><li>Escenarios: </li></ul></ul><ul><ul><ul><li>Las tareas. </li></ul></ul></ul><ul><ul><ul><li>Entorno físico y social. </li></ul></ul></ul>
  33. 33. Conceptos generales – Lengua y lenguaje <ul><li>El lenguaje natural del hombre es la capacidad multisensorial y multimedial del hombre para comunicarse entre si. </li></ul>
  34. 34. <ul><li>El lenguaje natural del hombre es la capacidad multisensorial y multimedial del hombre para comunicarse entre si. </li></ul><ul><li>El lenguaje natural es a la vez un fenómeno individual y social: el individuo habla el (o los) idiomas de uno o varios grupos humanos. </li></ul>Conceptos generales – Lengua y lenguaje
  35. 35. <ul><li>La lengua es el lenguaje hablado y escrito, enseñado, cuidado y transmitido por una determinada comunidad a lo largo de un período histórico significativo. </li></ul><ul><li>La lengua es estudiada por la lingüística. </li></ul>Conceptos generales – Lengua y lenguaje
  36. 36. <ul><li>La lengua es artificial y puede alejar al hombre de sus raíces más profundas. Una lengua puede morir si no logra transformarse constantemente al contacto con el lenguaje natural. </li></ul>Conceptos generales – Lengua y lenguaje
  37. 37. <ul><li>La lengua es artificial y puede alejar al hombre de sus raíces más profundas. Una lengua puede morir si no logra transformarse constantemente al contacto con el lenguaje natural. </li></ul><ul><li>El lenguaje es un fenómeno natural. La lengua es producto de una civilización. </li></ul>Conceptos generales – Lengua y lenguaje
  38. 38. <ul><li>Los canales de comunicación dependen de un medio de transmisión, de los equipos de transducción y traducción y del aparato sensori-motor del hombre, capaz de producir y recibir mensajes por estos canales. </li></ul>Conceptos generales – Canales de comunicación
  39. 39. <ul><li>Se utilizan normalmente tres canales: </li></ul><ul><ul><li>el visual, </li></ul></ul><ul><ul><li>el auditivo y </li></ul></ul><ul><ul><li>el háptico o gestual. </li></ul></ul>Conceptos generales – Canales de comunicación
  40. 40. <ul><li>Se utilizan normalmente tres canales: </li></ul><ul><ul><li>el visual, </li></ul></ul><ul><ul><li>el auditivo y </li></ul></ul><ul><ul><li>el háptico o gestual. </li></ul></ul><ul><li>El hombre trata de ampliar el ancho de banda de los canales de comunicación . </li></ul>Conceptos generales – Canales de comunicación
  41. 41. <ul><li>Canal háptico o gestual: </li></ul><ul><ul><li>El gesto es un signo no persistente y funciona por medio del contacto físico directo o mediante la percepción de posturas del cuerpo humano. </li></ul></ul>Conceptos generales – Canales de comunicación
  42. 42. <ul><li>Canal háptico o gestual: </li></ul><ul><ul><li>El gesto es un signo no persistente y funciona por medio del contacto físico directo o mediante la percepción de posturas del cuerpo humano. </li></ul></ul><ul><ul><li>La computación entiende ciertos gestos bien definidos, pero es en general muy pobre para producir gestos. </li></ul></ul>Conceptos generales – Canales de comunicación
  43. 43. <ul><li>Canal auditivo: </li></ul><ul><ul><li>Es el primer canal de contacto con el mundo del hombre. </li></ul></ul><ul><ul><li>Es el primer canal lingüístico de cada hombre. Es un canal bidireccional. </li></ul></ul>Conceptos generales – Canales de comunicación
  44. 44. <ul><li>Canal auditivo: </li></ul><ul><ul><li>Es el primer canal de contacto con el mundo del hombre. </li></ul></ul><ul><ul><li>Es el primer canal lingüístico de cada hombre. Es un canal bidireccional. </li></ul></ul><ul><ul><li>La computación produce y empieza a entender los signos auditivos. </li></ul></ul>Conceptos generales – Canales de comunicación
  45. 45. <ul><li>Canal visual: </li></ul><ul><ul><li>El canal visual tiene el ancho de banda más importante de todos los canales de comunicación. </li></ul></ul><ul><ul><li>La comunicación visual es la más importante para la existencia y utilización de símbolos para la comunicación. </li></ul></ul>Conceptos generales – Canales de comunicación
  46. 46. <ul><li>Canal visual: </li></ul><ul><ul><li>La historia de la computación es al mismo tiempo la historia de la ampliación y plena integración de este canal en las aplicaciones. </li></ul></ul><ul><ul><li>La computación produce y empieza a entender signos visuales. </li></ul></ul>Conceptos generales – Canales de comunicación
  47. 47. <ul><li>La interfaz es el indicio del esfuerzo del hombre para integrar la computación en la comunicación general del hombre. </li></ul>Conceptos generales – Integración
  48. 48. <ul><li>La interfaz es el indicio del esfuerzo del hombre para integrar la computación en la comunicación general del hombre. </li></ul><ul><li>Es el reconocimiento que un programa antes de ser cálculo y evaluación lógica es un lenguaje y un intento de comunicación. </li></ul>Conceptos generales – Integración
  49. 49. <ul><li>Las interfaces tienden a utilizar de manera natural todos los canales de comunicación que se disponen. </li></ul><ul><li>En la evolución histórica se podrá observar este hecho. </li></ul>Conceptos generales – Integración
  50. 50. <ul><li>El intercambio de información entre un usuario y un sistema informático. </li></ul>Conceptos generales – Interacción
  51. 51. <ul><li>El intercambio de información entre un usuario y un sistema informático. </li></ul><ul><li>El intercambio tiene asociado un lenguaje, por consiguiente una sintáxis y una semática. </li></ul>Conceptos generales – Interacción
  52. 52. <ul><li>El intercambio de información entre un usuario y un sistema informático. </li></ul><ul><li>El intercambio tiene asociado un lenguaje, por consiguiente una sintáxis y una semática. </li></ul><ul><li>Se interactúa con objetos para activar acciones y eventos. </li></ul>Conceptos generales – Interacción
  53. 53. <ul><li>Todo está basado en las primitivas de interacción: </li></ul><ul><ul><li>Posicionamiento </li></ul></ul><ul><ul><ul><li>Obtención de una posición u orientación (2D y 3D) </li></ul></ul></ul><ul><ul><ul><li>Ejm. Aplicación de dibujo </li></ul></ul></ul>Conceptos generales – Interacción
  54. 54. <ul><li>Todo está basado en las primitivas de interacción: </li></ul><ul><ul><li>Introducir Valor </li></ul></ul><ul><ul><ul><li>Obtención de un dato cuantificable (numérico, porcentual, etc.) </li></ul></ul></ul><ul><ul><ul><li>Ejm. Datos sensibles en una aplicación </li></ul></ul></ul>Conceptos generales – Interacción
  55. 55. <ul><li>Todo está basado en las primitivas de interacción: </li></ul><ul><ul><li>Introducir Texto </li></ul></ul><ul><ul><ul><li>Introducción de un texto o identificador </li></ul></ul></ul><ul><ul><ul><li>Ejm. Nombre de un archivo </li></ul></ul></ul>Conceptos generales – Interacción
  56. 56. <ul><li>Todo está basado en las primitivas de interacción: </li></ul><ul><ul><li>Selección </li></ul></ul><ul><ul><ul><li>Obtención de una alternativa (entre varias posibles. Puede ser sobre un conjunto finito o un conjunto de cardinalidad variable. </li></ul></ul></ul>Conceptos generales – Interacción
  57. 57. <ul><li>Todo está basado en las primitivas de interacción: </li></ul><ul><ul><li>Arrastre </li></ul></ul><ul><ul><ul><li>Secuencia de posiciones entre un punto inicial y otro final. </li></ul></ul></ul><ul><ul><ul><li>Ejm. Mover un documento hacia </li></ul></ul></ul><ul><ul><ul><li>otra carpeta. </li></ul></ul></ul>Conceptos generales – Interacción
  58. 58. Conceptos generales – Interacción
  59. 59. Conceptos generales – Interacción
  60. 60. Conceptos generales – Interacción
  61. 61. Conceptos generales – Interacción ¿Cómo interactúa el usuario con esta aplicación?
  62. 62. Conceptos generales – Interacción
  63. 63. Diseño de interfaces
  64. 64. Objetivos de una buena interfaz: <ul><li>Maximizar la velocidad de aprendizaje </li></ul><ul><li>Minimizar la tasa de errores </li></ul><ul><li>Maximizar la velocidad de uso </li></ul><ul><li>Estética adecuada </li></ul>
  65. 65. ¿Cómo diseñar para mejorar la interacción hombre-máquina? <ul><li>Diseño centrado en el usuario </li></ul><ul><li>Principios </li></ul><ul><li>Reglas </li></ul><ul><ul><li>Estándares </li></ul></ul><ul><ul><li>Directrices  Guías de estilo </li></ul></ul>
  66. 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.
  67. 67. ¿Cómo diseñar para mejorar la interacción hombre-máquina? <ul><li>Aliviar la carga cognitiva </li></ul><ul><ul><li>Confiar en el reconocimiento </li></ul></ul><ul><ul><li>Proporcionar pistas visuales </li></ul></ul><ul><ul><li>Proporcionar opciones por defecto </li></ul></ul><ul><ul><li>Proporcionar atajos </li></ul></ul>Principios – A modo de ejemplo
  68. 68. ¿Cómo diseñar para mejorar la interacción hombre-máquina? <ul><li>Aliviar la carga cognitiva </li></ul><ul><ul><li>Promover la sintaxis objeto–acción </li></ul></ul><ul><ul><li>Emplear metáforas del mundo real </li></ul></ul><ul><ul><li>Emplear la revelación progresiva para evitar abrumar al usuario. </li></ul></ul><ul><ul><li>Promover la claridad visual </li></ul></ul>Principios – A modo de ejemplo (cont.)
  69. 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. 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. 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. 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. 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. 74. Objetos de las interfaces
  75. 75. Objetos de las interfaces gráficas Ventanas Menúes Íconos Botones Campos etc.
  76. 76. Objetos de las interfaces gráficas Ventanas
  77. 77. Objetos de las interfaces gráficas Ventanas tipo diálogo
  78. 78. Objetos de las interfaces gráficas Menúes
  79. 79. Objetos de las interfaces gráficas Íconos
  80. 80. Objetos de las interfaces gráficas Botones
  81. 81. Objetos de las interfaces gráficas Campos
  82. 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?
  83. 83. Objetos de las interfaces gráficas <ul><li>Metáforas </li></ul><ul><li>Existen metáforas visuales: </li></ul><ul><ul><li>Basados en en lenguaje visual </li></ul></ul><ul><ul><li>Se asocian a estructuras, clases, objetos, atributos a nombres y operaciones </li></ul></ul><ul><ul><li>Se pueden asociar procesos y algoritmos a verbos </li></ul></ul>
  84. 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. 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. 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. 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. 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. 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. 90. Algunos principios de diseño de interfaces
  91. 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. 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. 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. 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. 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. 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. 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. 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
  99. 99. <ul><li>Uso de metáforas </li></ul><ul><li>Manipulación directa de los objetos </li></ul>Algunos principios de diseño de interfaces gráficas
  100. 100. Algunos principios de diseño de interfaces gráficas
  101. 101. Continuará .....

×