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

Interfaces

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to Interfaces

Similar to Interfaces (20)

Recently uploaded

Recently uploaded (20)

Interfaces