Está en la página 1de 101

Interaccin Hombre-Mquina

Interaccin Hombre-Mquina Diseo de Interfaces

Prof. Alberto Caldern N Universidad Nacional Sede Regin Brunca. Febrero 2013

Interaccin Hombre-Mquina

Agenda

Motivacin

Interaccin Hombre-Mquina

Agenda
Motivacin Aspectos histricos

Interaccin Hombre-Mquina

Agenda
Motivacin Aspectos histricos Estilos de interfaces

Interaccin Hombre-Mquina

Agenda
Motivacin Aspectos histricos Estilos de interfaces HCI Human Computer Interaction

Interaccin Hombre-Mquina

Agenda
Motivacin Aspectos histricos Estilos de interfaces HCI Human Computer Interaction Conceptos generales

Interaccin Hombre-Mquina

Motivacin

Qu es la Interfaz?

Medio de comunicacin y lenguaje de algo no necesariamente trivial"

Interaccin Hombre-Mquina

Motivacin

Qu es la Interfaz?

Medio de comunicacin y lenguaje, de algo no necesariamente trivial" La superficie de contacto entre dos entes dismiles

Interaccin Hombre-Mquina

Motivacin

Qu es la Interfaz?

Medio de comunicacin y lenguaje, de algo no necesariamente trivial" La superficie de contacto entre dos entes dismiles Todos los intercambios que suceden entre la persona y el computador (o cualquier dispositivo)

Interaccin Hombre-Mquina

Motivacin

Qu es la Interfaz?

La interfaz es la parte (hardware y software) del sistema informtico que facilita al usuario el acceso a los recursos del computador.

Interaccin Hombre-Mquina

Motivacin

Qu es la Interfaz?

La interfaz es la parte (hardware y software) del sistema informtico que facilita al usuario el acceso a los recursos del ordenador.

Para saber acerca de las interfaces, se requiere conocer las tareas de interaccin que puede realizar un individuo.

Interaccin Hombre-Mquina

Motivacin

Qu es la Interfaz?

Para saber disear interfaces, se requiere conocer algunos aspectos relacionados con los individuos. Es decir, se requiere analizar las peculiaridades de los usuarios.

Interaccin Hombre-Mquina

Motivacin

Qu es la Interfaz?

Para saber disear interfaces, se requiere conocer algunos aspectos relacionados con los individuos. Es decir, se requiere analizar las peculiaridades de los usuarios. Se requiere adems, conocer las caractersticas de los dispositivos que se utilizarn.

Interaccin Hombre-Mquina

Motivacin

Qu es la Interfaz?

El diseo de interfaces y el diseo de interaccin son reas de inters de la disciplina llamada Factores Humanos (Human Factors) , tambin llamada Interaccin Humano-Computador (HCI Human-Computer Interaction).

Interaccin Hombre-Mquina

Motivacin

Qu es la Interfaz?

El diseo de interfaces y el diseo de interaccin es son reas de inters de la disciplina llamada Factores Humanos (Human Factors) , tambin llamada Interaccin Humano-Computador (HCI Human-Computer Interaction). El objetivo primordial de esta disciplina es desarrollar tcnica y mtodos para mejorar la interaccin entre los humanos y las mquinas (el computador, entre ellas).

Interaccin Hombre-Mquina

Aspectos histricos

Interaccin Hombre-Mquina

Aspectos histricos 1963. Ivan Sutherland. SketchPad. El sistema soportaba la manipulacin de objetos grficos mediante un lpiz ptico, permitiendo coger los objetos, moverlos y cambiarles el tamao utilizando algunas restricciones. 1963. Elgerbart. Disea el primer mouse.

Interaccin Hombre-Mquina

Aspectos histricos 1968. MITs Lincoln Labs. AMBIT/G. Este sistema incluy representaciones de iconos, reconocimiento de gestos, mens dinmicos con la ayuda de dispositivos apuntadores y seleccin de iconos apuntndolos.

Interaccin Hombre-Mquina

Aspectos histricos Aos 70. Xerox PARC. Crearon el modelo y los dispositivos para las interfaces que incluan ventanas, menes, conos, botones, etc. Era la antesala de las interfaces que hoy conocemos como manipulacin directa. Otro importante hito de aquellas investigaciones fue la idea de WYSIWYG (What You See Is What You Get)

Interaccin Hombre-Mquina

Aspectos histricos 1977. ALAN KAY, Xerox PARC: Dynabook. 1981. Xerox Star. Sale al mercado el primer sistema comercial que hace extenso el uso de la Manipulacin Directa: Xerox Star . Le siguen el Apple Lisa en 1982 y el Macintosh en 1984. 1982. Ben Shneiderman, Universidad de Maryland. Acu el trmino Manipulacin directa, identificando adems los distintos componentes.

Interaccin Hombre-Mquina

Estilos de Interfaces

Interaccin Hombre-Mquina

Estilos de interfaces

Los estilos de interfaces predominantes son: La interfaz por lnea de comandos Mens y formularios Manipulacin directa - GUI Interfaces con interaccin asistida

Interaccin Hombre-Mquina

HCI Human Computer Interaction

Interaccin Hombre-Mquina

HCI Human Computer Interaction


Es la disciplina que se encarga de los siguientes procesos: disear evaluar implementar artefactos en sistemas interactivos utilizados por humanos + el estudio de los fenmenos que rodean estos procesos

Interaccin Hombre-Mquina

HCI Human Computer Interaction


Cmo disear para mejorar la interaccin hombre-mquina? Contextos bsicos a considerar

Interaccin Hombre-Mquina

Cmo disear para mejorar la interaccin hombre-mquina? Contextos bsicos a considerar


Fsicos relacionados con el hardware y dispositivos de interfaz

Interaccin Hombre-Mquina

Cmo disear para mejorar la interaccin hombre-mquina? Contextos bsicos a considerar


Fsicos relacionados con el hardware y dispositivos de interfaz

Sintcticos presentacin de informacin secuencia, orden de las acciones

Interaccin Hombre-Mquina

Cmo disear para mejorar la interaccin hombre-mquina? Contextos bsicos a considerar


Fsicos relacionados con el hardware y dispositivos de interfaz

Sintcticos presentacin de informacin secuencia, orden de las acciones Semnticos significado de los objetos significado de las acciones

Interaccin Hombre-Mquina

HCI Human Computer Interaction


Usos y contextos
Aspectos sociales y organizacionales Humanos
Procesamient o de informacin

reas de aplicacin y tareas Mquinas


Dilogos Metforas

Lenguajes y comunicacin Ergonoma Dispositivos I/O

Diseo Grfico

Interaccin Hombre-Mquina

HCI Human Computer Interaction


Computacin
Psicologa Cognitiva

Psicologa Social

Ergonoma

HCI
Lingstica

Ingeniera y Diseo

Inteligencia Artificial

Filosofa, Sociologa y Antropologa

Interaccin Hombre-Mquina

Observar al usuario Anlisis del usuario Lengua y lenguaje Canales de comunicacin Tipos Integracin Humanos Interaccin Primitivas
Procesamient o de informacin

Lenguajes y comunicacin Ergonoma

Interaccin Hombre-Mquina Conceptos generales Anlisis del usuario

Implica conocer aspectos como:


Habilidades fsicas y sensoriales. Habilidades cognitivas. Diferencias de personalidad. Diferencias culturales. Escenarios: Las tareas. Entorno fsico y social.

Interaccin Hombre-Mquina Conceptos generales Lengua y lenguaje

El lenguaje natural del hombre es la capacidad multisensorial y multimedial del hombre para comunicarse entre si.

Interaccin Hombre-Mquina Conceptos generales Lengua y lenguaje

El lenguaje natural del hombre es la capacidad multisensorial y multimedial del hombre para comunicarse entre si. El lenguaje natural es a la vez un fenmeno individual y social: el individuo habla el (o los) idiomas de uno o varios grupos humanos.

Interaccin Hombre-Mquina Conceptos generales Lengua y lenguaje

La lengua es el lenguaje hablado y escrito, enseado, cuidado y transmitido por una determinada comunidad a lo largo de un perodo histrico significativo. La lengua es estudiada por la lingstica.

Interaccin Hombre-Mquina Conceptos generales Lengua y lenguaje

La lengua es artificial y puede alejar al hombre de sus races ms profundas. Una lengua puede morir si no logra transformarse constantemente al contacto con el lenguaje natural.

Interaccin Hombre-Mquina Conceptos generales Lengua y lenguaje

La lengua es artificial y puede alejar al hombre de sus races ms profundas. Una lengua puede morir si no logra transformarse constantemente al contacto con el lenguaje natural. El lenguaje es un fenmeno natural. La lengua es producto de una civilizacin.

Interaccin Hombre-Mquina Conceptos generales Canales de comunicacin

Los canales de comunicacin dependen de un medio de transmisin, de los equipos de transduccin y traduccin y del aparato sensori-motor del hombre, capaz de producir y recibir mensajes por estos canales.

Interaccin Hombre-Mquina Conceptos generales Canales de comunicacin

Se utilizan normalmente tres canales: el visual, el auditivo y el hptico o gestual.

Interaccin Hombre-Mquina Conceptos generales Canales de comunicacin

Se utilizan normalmente tres canales: el visual, el auditivo y el hptico o gestual. El hombre trata de ampliar el ancho de banda de los canales de comunicacin.

Interaccin Hombre-Mquina Conceptos generales Canales de comunicacin

Canal hptico o gestual: El gesto es un signo no persistente y funciona por medio del contacto fsico directo o mediante la percepcin de posturas del cuerpo humano.

Interaccin Hombre-Mquina Conceptos generales Canales de comunicacin

Canal hptico o gestual: El gesto es un signo no persistente y funciona por medio del contacto fsico directo o mediante la percepcin de posturas del cuerpo humano. La computacin entiende ciertos gestos bien definidos, pero es en general muy pobre para producir gestos.

Interaccin Hombre-Mquina Conceptos generales Canales de comunicacin

Canal auditivo: Es el primer canal de contacto con el mundo del hombre. Es el primer canal lingstico de cada hombre. Es un canal bidireccional.

Interaccin Hombre-Mquina Conceptos generales Canales de comunicacin

Canal auditivo: Es el primer canal de contacto con el mundo del hombre. Es el primer canal lingstico de cada hombre. Es un canal bidireccional. La computacin produce y empieza a entender los signos auditivos.

Interaccin Hombre-Mquina Conceptos generales Canales de comunicacin

Canal visual: El canal visual tiene el ancho de banda ms importante de todos los canales de comunicacin. La comunicacin visual es la ms importante para la existencia y utilizacin de smbolos para la comunicacin.

Interaccin Hombre-Mquina Conceptos generales Canales de comunicacin

Canal visual: La historia de la computacin es al mismo tiempo la historia de la ampliacin y plena integracin de este canal en las aplicaciones. La computacin produce y empieza a entender signos visuales.

Interaccin Hombre-Mquina Conceptos generales Integracin

La interfaz es el indicio del esfuerzo del hombre para integrar la computacin en la comunicacin general del hombre.

Interaccin Hombre-Mquina Conceptos generales Integracin

La interfaz es el indicio del esfuerzo del hombre para integrar la computacin en la comunicacin general del hombre. Es el reconocimiento que un programa antes de ser clculo y evaluacin lgica es un lenguaje y un intento de comunicacin.

Interaccin Hombre-Mquina Conceptos generales Integracin

Las interfaces tienden a utilizar de manera natural todos los canales de comunicacin que se disponen. En la evolucin histrica se podr observar este hecho.

Interaccin Hombre-Mquina Conceptos generales Interaccin

El intercambio de informacin entre un usuario y un sistema informtico.

Interaccin Hombre-Mquina Conceptos generales Interaccin

El intercambio de informacin entre un usuario y un sistema informtico. El intercambio tiene asociado un lenguaje, por consiguiente una sintxis y una semtica.

Interaccin Hombre-Mquina Conceptos generales Interaccin

El intercambio de informacin entre un usuario y un sistema informtico. El intercambio tiene asociado un lenguaje, por consiguiente una sintxis y una semtica. Se interacta con objetos para activar acciones y eventos.

Interaccin Hombre-Mquina Conceptos generales Interaccin

Todo est basado en las primitivas de interaccin: Posicionamiento Obtencin de una posicin u orientacin (2D y 3D)

Ejm. Aplicacin de dibujo

Interaccin Hombre-Mquina Conceptos generales Interaccin

Todo est basado en las primitivas de interaccin: Introducir Valor Obtencin de un dato cuantificable (numrico, porcentual, etc.)

Ejm. Datos sensibles en una aplicacin

Interaccin Hombre-Mquina Conceptos generales Interaccin

Todo est basado en las primitivas de interaccin: Introducir Texto Introduccin de un texto o identificador Ejm. Nombre de un archivo

Interaccin Hombre-Mquina Conceptos generales Interaccin

Todo est basado en las primitivas de interaccin: Seleccin Obtencin de una alternativa (entre varias posibles. Puede ser sobre un conjunto finito o un conjunto de cardinalidad variable.

Interaccin Hombre-Mquina Conceptos generales Interaccin

Todo est basado en las primitivas de interaccin: Arrastre Secuencia de posiciones entre un punto inicial y otro final.

Ejm. Mover un documento hacia otra carpeta.

Interaccin Hombre-Mquina Conceptos generales Interaccin

Interaccin Hombre-Mquina Conceptos generales Interaccin

Interaccin Hombre-Mquina Conceptos generales Interaccin

Interaccin Hombre-Mquina Conceptos generales Interaccin

Cmo interacta el usuario con esta aplicacin?

Interaccin Hombre-Mquina Conceptos generales Interaccin

Interaccin Hombre-Mquina

Diseo de interfaces

Interaccin Hombre-Mquina

Objetivos de una buena interfaz:

Maximizar la velocidad de aprendizaje


Minimizar la tasa de errores Maximizar la velocidad de uso Esttica adecuada

Interaccin Hombre-Mquina

Cmo disear para mejorar la interaccin hombre-mquina?

Diseo centrado en el usuario


Principios Reglas Estndares Directrices Guas de estilo

Interaccin Hombre-Mquina

Cmo disear para mejorar la interaccin hombre-mquina?

Principios
Son conceptos de muy alto nivel que deben ser utilizados en el diseo de aplicaciones.

Interaccin Hombre-Mquina

Cmo disear para mejorar la interaccin hombre-mquina?

Principios A modo de ejemplo


Aliviar la carga cognitiva Confiar en el reconocimiento Proporcionar pistas visuales Proporcionar opciones por defecto Proporcionar atajos

Interaccin Hombre-Mquina

Cmo disear para mejorar la interaccin hombre-mquina?

Principios A modo de ejemplo (cont.)


Aliviar la carga cognitiva Promover la sintaxis objetoaccin Emplear metforas del mundo real Emplear la revelacin progresiva para evitar abrumar al usuario. Promover la claridad visual

Interaccin Hombre-Mquina

Cmo disear para mejorar la interaccin hombre-mquina?

Reglas de diseo
Guan al diseador con el fin de incrementar la usabilidad. Se clasifican en estndares y directrices.

Interaccin Hombre-Mquina

Cmo disear para mejorar la interaccin hombre-mquina?

Estndares
Son requisitos, reglas o recomendaciones basadas en principios probados y en prctica.

Interaccin Hombre-Mquina

Cmo disear para mejorar la interaccin hombre-mquina?

Directrices
Las directrices recomiendan acciones que se basan en un conjunto de principios de diseo.

Son ms especficas que los principios y requieren menos experiencia para entenderlas e interpretarlas que stos.

Interaccin Hombre-Mquina

Cmo disear para mejorar la interaccin hombre-mquina?

Guas de estilo
Llamadas tambin guas corporativas. Estn basadas en principios y contienen directrices que se concretan a muy bajo nivel.

Interaccin Hombre-Mquina

Cmo disear para mejorar la interaccin hombre-mquina?

Guas de estilo
Llamadas tambin guas corporativas. Estn basadas en principios y contienen directrices que se concretan a muy bajo nivel. Las guas de estilo corporativas se centran en presentaciones comunes, comportamientos y tcnicas que deben ser implementadas por todos los productos en una compaa.

Interaccin Hombre-Mquina

Objetos de las interfaces

Interaccin Hombre-Mquina

Objetos de las interfaces grficas

Ventanas Menes conos Botones Campos etc.

Interaccin Hombre-Mquina

Objetos de las interfaces grficas

Ventanas

Interaccin Hombre-Mquina

Objetos de las interfaces grficas

Ventanas tipo dilogo

Interaccin Hombre-Mquina

Objetos de las interfaces grficas

Menes

Interaccin Hombre-Mquina

Objetos de las interfaces grficas

conos

Interaccin Hombre-Mquina

Objetos de las interfaces grficas

Botones

Interaccin Hombre-Mquina

Objetos de las interfaces grficas

Campos

Interaccin Hombre-Mquina

Objetos de las interfaces grficas Metforas


Qu es?

Es un tropo fundamental de la retrica.


Es una descripcin de una situacin desconocida utilizando una situacin conocida.

Interaccin Hombre-Mquina

Objetos de las interfaces grficas Metforas

Existen metforas visuales: Basados en en lenguaje visual Se asocian a estructuras, clases, objetos, atributos a nombres y operaciones Se pueden asociar procesos y algoritmos a verbos

Interaccin Hombre-Mquina

Objetos de las interfaces grficas Metforas

Ejm. (palabras)
TV: programas, canales, redes, anuncios, guas, noticias Juegos: reglas del juego, piezas del juego, tablero del juego

rboles: races, tronco, ramas, hojas

Interaccin Hombre-Mquina

Objetos de las interfaces grficas Metforas

Existen metforas verbales, basadas en la utilizacin de verbos para denotar acciones.


Ejm. Mover: navegar, conducir, volar Localizar: apuntar Seleccionar: tocar un elemento, poner el dedo sobre.... Crear: aadir (nuevo), copiar Borrar: botar, destruir, perder, cortar

Interaccin Hombre-Mquina

Objetos de las interfaces grficas Metforas

Existen metforas verbales, basadas en la utilizacin de verbos para denotar acciones.


Ejm. Mover: navegar, conducir, volar Localizar: apuntar Seleccionar: tocar un elemento, poner el dedo sobre.... Crear: aadir (nuevo), copiar Borrar: botar, destruir, perder, cortar

Interaccin Hombre-Mquina

Objetos de las interfaces grficas Metforas

Existen metforas del mundo real


Ejms.: Semforo (aplicaciones?)

Colores

A.K. + S.J.

Escritorio (global) Levantamiento y diagramacin de textos

(acciones)

Interaccin Hombre-Mquina

Objetos de las interfaces grficas Metforas Utilidad

Utilidad prctica: se espera que permita un entendimiento ms rpido de la situacin desconocida y que acelere el aprendizaje de una herramienta mediante el conocimiento que se tiene del mundo real.

Interaccin Hombre-Mquina

Objetos de las interfaces grficas Metforas Utilidad comunicacional: La metfora va creando comunicacin mediante su posibilidad de dejar de ser metafrica y convertirse en expresin directa de la lengua, as la metfora crea lengua ampliando los elementos bsicos de comunicacin y dando posibilidades nuevas de comunicacin.

Interaccin Hombre-Mquina

Algunos principios de diseo de interfaces

Interaccin Hombre-Mquina

Algunos principios de diseo de interfaces grficas Consistencia La consistencia en un interfaz permite a los usuarios transferir sus conocimientos y destrezas de una aplicacin a otra.

Interaccin Hombre-Mquina

Algunos principios de diseo de interfaces grficas Consistencia La consistencia en un interfaz permite a los usuarios transferir sus conocimientos y destrezas de una aplicacin a otra.

La consistencia en las interfaces grficas ayuda a los usuarios a aprender y reconocer fcilmente el lenguaje grfico de esa interfaz.

Interaccin Hombre-Mquina

Algunos principios de diseo de interfaces grficas Consistencia La consistencia en el comportamiento de una interfaz significa que los usuarios aprenden cmo hacer las cosas, por ejemplo apuntar y seleccionar, una sola vez.

Interaccin Hombre-Mquina

Algunos principios de diseo de interfaces grficas Control del usuario El usuario y no el computador (o aplicacin) inicia y controla las actividades.

Interaccin Hombre-Mquina

Algunos principios de diseo de interfaces grficas Control del usuario El usuario y no el computador (o aplicacin) inicia y controla las actividades. Tolerancia Posibilidad de ofrecerle al usuario la capacidad de recuperarse de los errores.

Interaccin Hombre-Mquina

Algunos principios de diseo de interfaces grficas Retroalimentacin y dilogo El usuario debe estar constantemente informado de lo que est ocurriendo con los procesos. Dilogo simple al alcance del usuario La informacin que recibe el usuario debe ser entendible y a su alcance.

Interaccin Hombre-Mquina

Algunos principios de diseo de interfaces grficas Integridad esttica La informacin se encuentra organizada en forma adecuada y consistente con los principios de diseo visual.

El nmero de elementos y su respectivo comportamiento debe ser limitado para aumentar la usabilidad de la interfaz.

Interaccin Hombre-Mquina

Algunos principios de diseo de interfaces grficas Integridad esttica Se debe asegurar de mantener la semntica del lenguaje grfico o del lenguaje asociado a la interfaz.

No cambiar el significado de los objetos que son estndares.

Interaccin Hombre-Mquina

Algunos principios de diseo de interfaces grficas Uso de metforas Manipulacin directa de los objetos

Interaccin Hombre-Mquina

Algunos principios de diseo de interfaces grficas

Interaccin Hombre-Mquina

Continuar .....