Interacción - Diseño de Interfaces

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
Agenda
 Motivación
Agenda
 Motivación
 Aspectos históricos
Agenda
 Motivación
 Estilos de interfaces
Agenda
 Motivación
 HCI – Human Computer Interaction

Agenda
 Motivación
 HCI – Human Computer Interaction
 Conceptos generales
Motivación  ¿Qué es la Interfaz?

“Medio de comunicación y lenguaje de algo no
necesariamente trivial"

“Medio de comunicación y lenguaje, de algo no
“La superficie de contacto entre dos entes

disímiles”

“Medio de comunicación y lenguaje, de algo no
“La superficie de contacto entre dos entes

disímiles”
“Todos los intercambios que suceden entre

la
persona y el computador (o cualquier
dispositivo)”

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

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.

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

los usuarios.

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.

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

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

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.
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)
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.
Estilos de Interfaces
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
HCI – Human
Computer Interaction
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

¿Cómo diseñar para mejorar la interacción
hombre-máquina?
Contextos básicos a considerar


hombre-máquina?
Físicos  relacionados con el hardware

y dispositivos de interfaz

hombre-máquina?

Sintácticos  • presentación de información

• secuencia, orden de las acciones

hombre-máquina?

Sintácticos  • presentación de información

• secuencia, orden de las acciones
Semánticos  • significado de los objetos

• significado de las acciones

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
Psicología
Computación
Cognitiva Psicología
Social
Ergonomía
HCI Ingeniería
y Diseño
Lingüística
Inteligencia Artificial Filosofía, Sociología

y Antropología
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
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.
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 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.
• 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.

• 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.
• 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.
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.
• Se utilizan normalmente tres canales:

• el visual,
• el auditivo y
• el háptico o gestual.
• 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.
• 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.
• 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.
• 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.
• 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.
• 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.
• 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.
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.
• 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.
• 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.
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.

• 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.
• 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:
 Introducir Valor
Obtención de un dato cuantificable
(numérico, porcentual, etc.)
Ejm. Datos sensibles en una

aplicación

interacción:
 Introducir Texto
Introducción de un texto o
identificador
Ejm. Nombre de un archivo


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:
 Arrastre
Secuencia de posiciones entre un
punto inicial y otro final.
Ejm. Mover un documento hacia

otra carpeta.



¿Cómo interactúa el
usuario con esta
aplicación?

Diseño de interfaces
Objetivos de una buena interfaz:
• Maximizar la velocidad de aprendizaje

• Minimizar la tasa de errores
• Maximizar la velocidad de uso
• Estética adecuada

hombre-máquina?
Diseño centrado en el usuario
Principios
Reglas
• Estándares
• Directrices  Guías de estilo

hombre-máquina?
Principios
Son conceptos de muy alto nivel que deben ser
utilizados en el diseño de aplicaciones.

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

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

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.

hombre-máquina?
Estándares
Son requisitos, reglas o recomendaciones
basadas en principios probados y en práctica.

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.

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.

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.
Objetos de las interfaces

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

Ventanas
Ventanas tipo diálogo

Menúes
Íconos
Botones
Campos

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

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

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

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

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

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)

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.

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.
Algunos principios de diseño

de interfaces
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.

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.

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.

Control del usuario
El usuario y no el computador (o aplicación)
inicia y controla las actividades.

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.

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.

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.

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.

Uso de metáforas
Manipulación directa de los objetos
•
•
•
•
•

Continuará .....

Interacción - Diseño de Interfaces

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Interacción - Diseño de Interfaces

Cargado por

Copyright:

Formatos disponibles

Interacción Hombre-Máquina

Prof. Adelaide Bianchini

 HCI – Human Computer Interaction

 HCI – Human Computer Interaction

Motivación  ¿Qué es la Interfaz?

Motivación  ¿Qué es la Interfaz?

“La superficie de contacto entre dos entes

Motivación  ¿Qué es la Interfaz?

“La superficie de contacto entre dos entes

“Todos los intercambios que suceden entre

Motivación  ¿Qué es la Interfaz?

Motivación  ¿Qué es la Interfaz?

Para saber acerca de las interfaces, se requiere

Motivación  ¿Qué es la Interfaz?

Es decir, se requiere analizar las peculiaridades de

Motivación  ¿Qué es la Interfaz?

Es decir, se requiere analizar las peculiaridades de

Se requiere además, conocer las características de

Motivación  ¿Qué es la Interfaz?

Motivación  ¿Qué es la Interfaz?

El objetivo primordial de esta disciplina es

1963. Elgerbart. Diseña el primer “mouse”.

Los estilos de interfaces predominantes son:

• La interfaz por línea de comandos

HCI – Human Computer Interaction

HCI – Human Computer Interaction

Contextos básicos a considerar

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

Contextos básicos a considerar

Físicos  relacionados con el hardware

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

Contextos básicos a considerar

Físicos  relacionados con el hardware

Sintácticos  • presentación de información

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

Contextos básicos a considerar

Físicos  relacionados con el hardware

Sintácticos  • presentación de información

Semánticos  • significado de los objetos

HCI – Human Computer Interaction

Aspectos sociales Áreas de aplicación

HCI – Human Computer Interaction

Inteligencia Artificial Filosofía, Sociología

Análisis del usuario

Conceptos generales – Análisis del usuario

Implica conocer aspectos como:

Conceptos generales – Lengua y lenguaje

• El lenguaje natural del hombre es la

Conceptos generales – Lengua y lenguaje

• El lenguaje natural del hombre es la

• El lenguaje natural es a la vez un

Conceptos generales – Lengua y lenguaje

• La lengua es el lenguaje hablado y escrito,

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

Conceptos generales – Lengua y lenguaje

• La lengua es artificial y puede alejar al

Conceptos generales – Lengua y lenguaje

• La lengua es artificial y puede alejar al

• El lenguaje es un fenómeno natural. La

Conceptos generales – Canales de comunicación

• Los canales de comunicación dependen de

Conceptos generales – Canales de comunicación

• Se utilizan normalmente tres canales:

Conceptos generales – Canales de comunicación