Interacción Humano-Computadora (IHC)

Interacción Hombre-Máquina
Diseño de Interfaces
 Interacción Humano-Computadora (IHC)

Agenda
 Motivación
 Interacción Humano-Computadora (IHC)

Agenda
 Motivación
 Aspectos históricos
 Interacción Humano-Computadora (IHC)

Agenda
 Motivación
 Aspectos históricos

 Estilos de interfaces
 Interacción Humano-Computadora (IHC)

Agenda
 Motivación
 Aspectos históricos

 Estilos de interfaces

 HCI – Human Computer Interaction

 Interacción Humano-Computadora (IHC)

Agenda
 Motivación
 Aspectos históricos

 Estilos de interfaces

 HCI – Human Computer Interaction

 Conceptos generales
 Interacción Humano-Computadora (IHC)

Motivación  ¿Qué es la Interfaz?

“Medio de comunicación y lenguaje de algo no
necesariamente trivial"
 Interacción Humano-Computadora (IHC)

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”
 Interacción Humano-Computadora (IHC)

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)”
 Interacción Humano-Computadora (IHC)

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.
 Interacción Humano-Computadora (IHC)

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.
 Interacción Humano-Computadora (IHC)

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.
 Interacción Humano-Computadora (IHC)

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.
 Interacción Humano-Computadora (IHC)

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).
 Interacción Humano-Computadora (IHC)

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).
 Interacción Humano-Computadora (IHC)

Aspectos históricos
 Interacción Humano-Computadora (IHC)

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

 Interacción Humano-Computadora (IHC)

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.
 Interacción Humano-Computadora (IHC)

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)
 Interacción Humano-Computadora (IHC)

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.
 Interacción Humano-Computadora (IHC)

Estilos de Interfaces
 Interacción Humano-Computadora (IHC)

Estilos de interfaces

Los estilos de interfaces predominantes son:

• La interfaz por línea de comandos

• Menús y formularios
• Manipulación directa - GUI
• Interfaces con interacción asistida
 Interacción Humano-Computadora (IHC)

HCI – Human
Computer Interaction
 Interacción Humano-Computadora (IHC)

HCI – Human Computer Interaction

Es la disciplina que se encarga de los siguientes
procesos:
• diseñar
• evaluar
• implementar
artefactos en sistemas interactivos utilizados
por humanos
+
el estudio de los fenómenos que rodean estos
procesos
 Interacción Humano-Computadora (IHC)

HCI – Human Computer Interaction

¿Cómo diseñar para mejorar la interacción
hombre-máquina?

Contextos básicos a considerar

 Interacción Humano-Computadora (IHC)

¿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
 Interacción Humano-Computadora (IHC)

¿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
 Interacción Humano-Computadora (IHC)

¿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
 Interacción Humano-Computadora (IHC)

HCI – Human Computer Interaction

Usos y contextos

Aspectos sociales Áreas de aplicación

y organizacionales y tareas

Humanos Máquinas
Diálogos
Procesamient
o de
información Metáforas

Lenguajes y
comunicación
Dispositivos Diseño
Ergonomía I/O Gráfico
 Interacción Humano-Computadora (IHC)

HCI – Human Computer Interaction

Psicología
Computación
Cognitiva Psicología
Social

Ergonomía

Ingeniería
HCI y Diseño
Lingüística

Inteligencia Artificial Filosofía, Sociología

y Antropología
 Interacción Humano-Computadora (IHC)

Observar al usuario

Análisis del usuario

Lengua y lenguaje
Canales de comunicación  Tipos
Integración Humanos
Interacción  Primitivas
Procesamient
o de
información

Lenguajes y
comunicación

Ergonomía
 Interacción Humano-Computadora (IHC)

Conceptos generales – Análisis del usuario

Implica conocer aspectos como:

 Habilidades físicas y sensoriales.
 Habilidades cognitivas.
 Diferencias de personalidad.
 Diferencias culturales.
 Escenarios:
• Las tareas.
• Entorno físico y social.
 Interacción Humano-Computadora (IHC)

Conceptos generales – Lengua y lenguaje

• El lenguaje natural del hombre es la

capacidad multisensorial y multimedial del
hombre para comunicarse entre si.
 Interacción Humano-Computadora (IHC)

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

fenómeno individual y social: el individuo
habla el (o los) idiomas de uno o varios
grupos humanos.
 Interacción Humano-Computadora (IHC)

Conceptos generales – Lengua y lenguaje

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

• La lengua es estudiada por la lingüística.

 Interacción Humano-Computadora (IHC)

Conceptos generales – Lengua y lenguaje

• 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.
 Interacción Humano-Computadora (IHC)

Conceptos generales – Lengua y lenguaje

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

• El lenguaje es un fenómeno natural. La

lengua es producto de una civilización.
 Interacción Humano-Computadora (IHC)

Conceptos generales – Canales de comunicación

• 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.
 Interacción Humano-Computadora (IHC)

Conceptos generales – Canales de comunicación

• Se utilizan normalmente tres canales:

• el visual,
• el auditivo y
• el háptico o gestual.
 Interacción Humano-Computadora (IHC)

Conceptos generales – Canales de comunicación

• Se utilizan normalmente tres canales:

• el visual,
• el auditivo y
• el háptico o gestual.

• El hombre trata de ampliar el ancho de

banda de los canales de comunicación.
 Interacción Humano-Computadora (IHC)

Conceptos generales – Canales de comunicación

• Canal háptico o gestual:

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.
 Interacción Humano-Computadora (IHC)

Conceptos generales – Canales de comunicación

• Canal háptico o gestual:

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.
La computación entiende ciertos gestos
bien definidos, pero es en general muy
pobre para producir gestos.
 Interacción Humano-Computadora (IHC)

Conceptos generales – Canales de comunicación

• Canal auditivo:
Es el primer canal de contacto con el
mundo del hombre.
Es el primer canal lingüístico de cada
hombre. Es un canal bidireccional.
 Interacción Humano-Computadora (IHC)

Conceptos generales – Canales de comunicación

• Canal auditivo:
Es el primer canal de contacto con el
mundo del hombre.
Es el primer canal lingüístico de cada
hombre. Es un canal bidireccional.

La computación produce y empieza a

entender los signos auditivos.
 Interacción Humano-Computadora (IHC)

Conceptos generales – Canales de comunicación

• Canal visual:
El canal visual tiene el ancho de banda
más importante de todos los canales de
comunicación.
La comunicación visual es la más
importante para la existencia y utilización
de símbolos para la comunicación.
 Interacción Humano-Computadora (IHC)

Conceptos generales – Canales de comunicación

• Canal visual:
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.
La computación produce y empieza a
entender signos visuales.
 Interacción Humano-Computadora (IHC)

Conceptos generales – Integración

• La interfaz es el indicio del esfuerzo del

hombre para integrar la computación en la
comunicación general del hombre.
 Interacción Humano-Computadora (IHC)

Conceptos generales – Integración

• La interfaz es el indicio del esfuerzo del

hombre para integrar la computación en la
comunicación general del hombre.

• 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.
 Interacción Humano-Computadora (IHC)

Conceptos generales – Integración

• Las interfaces tienden a utilizar de manera

natural todos los canales de comunicación
que se disponen.

• En la evolución histórica se podrá observar

este hecho.
 Interacción Humano-Computadora (IHC)

Conceptos generales – Interacción

• El intercambio de información entre un

usuario y un sistema informático.
 Interacción Humano-Computadora (IHC)

Conceptos generales – Interacción

• El intercambio de información entre un

usuario y un sistema informático.

• El intercambio tiene asociado un lenguaje,

por consiguiente una sintáxis y una
semática.
 Interacción Humano-Computadora (IHC)

Conceptos generales – Interacción

• El intercambio de información entre un

usuario y un sistema informático.

• El intercambio tiene asociado un lenguaje,

por consiguiente una sintáxis y una
semática.

• Se interactúa con objetos para activar

acciones y eventos.
 Interacción Humano-Computadora (IHC)

Conceptos generales – Interacción

• Todo está basado en las primitivas de

interacción:
 Posicionamiento
Obtención de una posición u
orientación (2D y 3D)

Ejm. Aplicación de dibujo

 Interacción Humano-Computadora (IHC)

Conceptos generales – Interacción

• Todo está basado en las primitivas de

interacción:
 Introducir Valor
Obtención de un dato cuantificable
(numérico, porcentual, etc.)

Ejm. Datos sensibles en una

aplicación
 Interacción Humano-Computadora (IHC)

Conceptos generales – Interacción

• Todo está basado en las primitivas de

interacción:

 Introducir Texto
Introducción de un texto o
identificador

Ejm. Nombre de un archivo

 Interacción Humano-Computadora (IHC)

Conceptos generales – Interacción

• Todo está basado en las primitivas de

interacción:
 Selección
Obtención de una alternativa (entre
varias posibles. Puede ser sobre un
conjunto finito o un conjunto de
cardinalidad variable.
 Interacción Humano-Computadora (IHC)

Conceptos generales – Interacción

• Todo está basado en las primitivas de

interacción:
 Arrastre
Secuencia de posiciones entre un
punto inicial y otro final.

Ejm. Mover un documento hacia

otra carpeta.
 Interacción Humano-Computadora (IHC)

Conceptos generales – Interacción

 Interacción Humano-Computadora (IHC)

Conceptos generales – Interacción

 Interacción Humano-Computadora (IHC)

Conceptos generales – Interacción

 Interacción Humano-Computadora (IHC)

Conceptos generales – Interacción

¿Cómo interactúa el
usuario con esta
aplicación?
 Interacción Humano-Computadora (IHC)

Conceptos generales – Interacción

 Interacción Humano-Computadora (IHC)

Diseño de interfaces
 Interacción Humano-Computadora (IHC)

Objetivos de una buena interfaz:

• Maximizar la velocidad de aprendizaje

• Minimizar la tasa de errores
• Maximizar la velocidad de uso
• Estética adecuada
 Interacción Humano-Computadora (IHC)

¿Cómo diseñar para mejorar la interacción

hombre-máquina?
Diseño centrado en el usuario
Principios
Reglas
• Estándares
• Directrices  Guías de estilo
 Interacción Humano-Computadora (IHC)

¿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.
 Interacción Humano-Computadora (IHC)

¿Cómo diseñar para mejorar la interacción

hombre-máquina?
Principios – A modo de ejemplo
Aliviar la carga cognitiva
• Confiar en el reconocimiento
• Proporcionar pistas visuales
• Proporcionar opciones por defecto
• Proporcionar atajos
 Interacción Humano-Computadora (IHC)

¿Cómo diseñar para mejorar la interacción

hombre-máquina?
Principios – A modo de ejemplo (cont.)
Aliviar la carga cognitiva
• Promover la sintaxis objeto–acción
• Emplear metáforas del mundo real
• Emplear la revelación progresiva para
evitar abrumar al usuario.
• Promover la claridad visual
 Interacción Humano-Computadora (IHC)

¿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.
 Interacción Humano-Computadora (IHC)

¿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.
 Interacción Humano-Computadora (IHC)

¿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.
 Interacción Humano-Computadora (IHC)

¿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.
 Interacción Humano-Computadora (IHC)

¿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.
 Interacción Humano-Computadora (IHC)

Objetos de las interfaces

 Interacción Humano-Computadora (IHC)

Objetos de las interfaces gráficas

Ventanas
Menúes
Íconos
Botones
Campos
etc.
 Interacción Humano-Computadora (IHC)

Objetos de las interfaces gráficas

Ventanas
 Interacción Humano-Computadora (IHC)

Objetos de las interfaces gráficas

Ventanas tipo diálogo

 Interacción Humano-Computadora (IHC)

Objetos de las interfaces gráficas

Menúes
 Interacción Humano-Computadora (IHC)

Objetos de las interfaces gráficas

Íconos
 Interacción Humano-Computadora (IHC)

Objetos de las interfaces gráficas

Botones
 Interacción Humano-Computadora (IHC)

Objetos de las interfaces gráficas

Campos
 Interacción Humano-Computadora (IHC)

Objetos de las interfaces gráficas

¿Qué es?
Metáforas
Es un tropo fundamental de la retórica.

Es una descripción de una situación desconocida

utilizando una situación conocida.
 Interacción Humano-Computadora (IHC)

Objetos de las interfaces gráficas

Metáforas
Existen metáforas 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
 Interacción Humano-Computadora (IHC)

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
 Interacción Humano-Computadora (IHC)

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
 Interacción Humano-Computadora (IHC)

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
 Interacción Humano-Computadora (IHC)

Objetos de las interfaces gráficas

Metáforas
Existen metáforas del mundo real

Ejms.: Semáforo (¿aplicaciones?)

Colores A.K. + S.J.
Escritorio (global)
Levantamiento y diagramación de textos
(acciones)
 Interacción Humano-Computadora (IHC)

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.
 Interacción Humano-Computadora (IHC)

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.
 Interacción Humano-Computadora (IHC)

Algunos principios de diseño

de interfaces
 Interacción Humano-Computadora (IHC)

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.
 Interacción Humano-Computadora (IHC)

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.

La consistencia en las interfaces gráficas ayuda a

los usuarios a aprender y reconocer fácilmente el
lenguaje gráfico de esa interfaz.
 Interacción Humano-Computadora (IHC)

Algunos principios de diseño de interfaces gráficas

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.
 Interacción Humano-Computadora (IHC)

Algunos principios de diseño de interfaces gráficas

Control del usuario
El usuario y no el computador (o aplicación)
inicia y controla las actividades.
 Interacción Humano-Computadora (IHC)

Algunos principios de diseño de interfaces gráficas

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.
 Interacción Humano-Computadora (IHC)

Algunos principios de diseño de interfaces gráficas

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.
 Interacción Humano-Computadora (IHC)

Algunos principios de diseño de interfaces gráficas

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.
 Interacción Humano-Computadora (IHC)

Algunos principios de diseño de interfaces gráficas

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.
 Interacción Humano-Computadora (IHC)

Algunos principios de diseño de interfaces gráficas

Uso de metáforas

Manipulación directa de los objetos