• Ventanas:– Ventanas múltiples permiten que se despliegue

simultáneamente información diversa en la pantalla del usuario.

• Iconos:– Representan diferentes tipos de información,

por ejemplo archivos, procesos ,etc.• Menús:

– Los comandos se seleccionan de un menú en lugar de teclearse en un lenguaje de ordenes.

• Apuntador:– Para seleccionar opciones de un menú o

para indicar elementos de interés en una ventana , se utiliza un dispositivo apuntador , como el ratón.

• Gráficos:– Los elementos gráficos se pueden

mezclar con texto en el mismo despliegue.

• Fáciles de aprender y utilizar.• Para interactuar con el sistema , los

usuarios cuentan con pantallas múltiples. Se puede pasar de una tarea a otra sin perder de vista la información de la anterior.

• Interacción rápida y acceso inmediato a cualquier punto de la pantalla.

Analizar y comprender las actividades del

usuario

Producir un prototipo de diseño en

papel

Evaluar el diseño con los usuarios finales

Diseñar el prototipo

Producir el prototipo del

diseño dinámico

Evaluar el diseño con los usuarios finales

Prototipo ejecutable

Implementar la interfaz del usuario final

• Familiaridad del usuario:– Utilizar términos y conceptos que se toman de la

experiencia de las personas que más utilizan el sistema.

• Consistencia:– Siempre que sea posible , la interfaz debe ser

consistente en el sentido de que las operaciones comparables se activan de la misma forma.

• Mínima sorpresa:– El comportamiento del sistema no debe provocar

sorpresa a los usuarios.• Recuperabilidad:

– La interfaz debe incluir mecanismos para permitir a los usuarios recuperarse de los errores. Esto puede ser de dos formas:• Confirmación de acciones destructivas• Proveer de un recurso para deshacer

• Guía al usuario:– Cuando los errores ocurren , la interfaz debe

proveer retroalimentación significativa y características de ayuda sensible al contexto.

• Diversidad de usuarios:– La interfaz debe proveer características de

interacción apropiada para los diferentes tipos de usuarios.

• Una interfaz coherente debe integrar la interacción del usuario y la presentación de la información.

• Shneiderman(1998) clasifica la interacción en 5 estilos primarios:– Manipulación directa:

• Interacción directa con los objetos de la pantalla.• Rápida e intuitiva• Fácil de aprender• Ejemplo: para borrar un archivo , el usuario lo arrastra

al bote de basura. Videos de juegos

• Puede ser difícil de implementar.• Sólo es adecuada donde hay una metáfora

visual para las tareas y objetos.– Selección de menús:

• El usuario selecciona un comando de una lista de posibilidades.

• Evita errores del usuario• Se requiere teclear poco• Lenta para usuarios experimentados.• Puede llegar a ser complejo si existen muchas

opciones en el menú.• Ejemplo: muchos de los sistemas de propósito

general

• Llenado de formularios:– Introducción de datos sencilla en los campos

de un formulario.– Fácil de aprender– Ocupa mucho espacio en la pantalla.– Ejemplo: ingreso datos del cliente

• Lenguaje de comandos:– Los usuarios emiten un comando especial y los

parámetros asociados para indicar al sistema que hacer.

– Poderoso y flexible– Difícil de aprender– Administración de errores pobre.– Ejemplo: Sistemas operativos

• Lenguaje Natural:– El usuario emite comandos en lenguaje

natural .– Accesible a usuarios casuales– Fácil de ampliar– Se requiere teclear más .– Los sistemas de comprensión de

lenguaje natural no son fiables.– Ejemplo: Sistemas de horarios, sistemas

www de recuperación de la información.

• Puede ser la presentación directa de la información de entrada (texto en un procesador de texto) o presentación gráfica

Información a desplegar

Software de presentación

Despliegue

Al separar el sistema de presentación de los datos , se puede cambiar la representación sobre la pantalla sin tener que cambiar el sistema de cómputo subyacente.

• Para encontrar la mejor presentación de la información es necesario conocer a los usuarios y y la forma en que utilizarán el sistema. Factores a considerar:– ¿El usuario está interesado en información precisa

o en las relaciones entre los diferentes valores de los datos?

– ¿Qué tan rápido cambian los valores de la información?¿Se indicarán de forma inmediata al usuario los cambios de un valor?

• ¿El usuario debe llevar a cabo una acción en respuesta a los cambios de la información?

• ¿El usuario necesita interactuar con la información desplegada vía una interfaz de manipulación directa?

• ¿La información que se va a desplegar es textual o numérica? ¿Son importantes los valores relativos de los elementos de la información?

Ene Feb. Mar Abril Mayo

Junio

2842 2851 3164 2789 1273 2835

Evolución Ventas

0

50

100

150

200

1er trim. 2do trim. 3er trim. 4to trim.

NorteOesteEste

Este; 20,4Este; 27,4

Este; 90

Este; 20,4

1er trim.

2do trim.

3er trim.

4to trim.

0

20

40

60

80

100

1er trim. 2do trim. 3er trim. 4to trim.

Ventas por Zona

EsteOesteNorte

Presión

0 100 200 300

Temperatura

0 25 50 75 100

El nombre del archivo ya existe.

Por favor, elija otro nombre.

Cap. 15 diseño de la interfaz de usuario!

Aceptar Cancelar

• Información climática: mapa climático con isobaras, frentes climáticos ,etc.

• Estado de una red telefónica se despliega gráficamente como un conjunto vinculado de nodos en un centro de administración.

• El estado de una planta química se visualiza mostrando las presiones y temperaturas asociados a tanques y tuberías

• Un modelo de una molécula se despliega y manipula en tres dimensiones utilizando un sistema de realidad virtual.

• El color ayuda y mejora la presentación de la interfaz , permitiendo al usuario comprender y manejar la complejidad.

• Shneiderman(1998) establece 14 lineamientos claves para la utilización efectiva del color.

• Los mas relevantes:– Limitar el número de colores utilizados y ser

conservador al momento de utilizarlos . No utilizar mas de 4 ó 5 colores diferentes en una ventana y no más de 7 en la interfaz total del sistema.

• Utilizar un cambio de color para mostrar un cambio en el estado del sistema.– Ejemplo semáforos de alerta que reportan

estados normal, precaución y alarma.• Utilizar el código de colores para apoyar la

tarea que los usuarios están tratando de llevar a cabo.– Un color para resaltar una situación anómala,

otro para similitudes.

• Utilizar el código de colores en una forma consciente y consistente.– Si usamos rojo para mostrar alarma , mantener

esta lógica durante todo el sistema• Ser cuidadoso al utilizar pares de colores

– Dada la fisiología del ojo , las personas no pueden enfocar el rojo y el azul simultáneamente .

• En general el color no debe utilizarse para representar algún significado por dos razones:– Cerca del 10 % de los hombres no perciben el

color y pueden malinterpretar el significado.– Las percepciones humanas del color son

diferentes y existen convenciones diversas para varias profesiones Ej. Rojo para conductor significa peligro, para el químico es caliente.

• Si se utilizan muchos colores o sin son muy brillantes , el despliegue puede ser confuso

• Los mensajes producidos por el sistema en respuesta a las acciones del usuario

• El sistema de ayuda en línea.• La documentación suministrada con el

sistema

• Contexto:– El sistema guía del usuario debe estar pendiente de

lo que hace el usuario y ajustar el mensaje de salida al contexto actual.

• Experiencia:– Al aumentar la familiaridad con el sistema , aumenta

la molestia por mensajes largos y “sin significado”.– El usuario principiante no comprende los mensaje

concisos.– El sistema debe proveer de ambos tipos de mensajes

• Nivel de habilidad:– Conocer al usuario y sus habilidades

implica adecuar los mensajes a la terminología que el utiliza.

• Estilo:– Los mensajes deben ser positivos en

lugar de negativos. Activos y no pasivos. No deben ser insultantes o tratar de ser chistosos.

• Cultura:– Reconocer la cultura del país en lo

posible evita malas interpretaciones del contexto del mesaje.

Por favor, introduzca el nombre del paciente en el cuadro y presione la tecla Aceptar.

Nombre del paciente

Bates, J

Aceptar Cancelar

Una enfermera debe ingresar el nombre del paciente en la pantalla

Error # 27

Entrada inválida de la identificación del paciente.

?Aceptar Cancelar

El paciente J. Bates no está registrado

Haga clic en Pacientes para una lista de pacientes registrados.

Haga clic en Reintentar para introducir nuevamente un nombre de paciente.

Haga clic en Ayuda para más información.

Pacientes Ayuda Reintentar Cancelar

Entrada desde la aplicación

Entrada desde el sistema de mensajes de error

Entrada en el nivel superior

• Estructura de red complejas• Cada marco de información se vincula con otro marco de información.• Generalmente la estructura es jerarquica con vínculos cruzados.• En la cima la información es general y en la parte inferior mas detallada.• Induce a error de navegación cuando se entra luego de un error.• Se recomienda utilizar ventanas múltiples que guíen al usuario.• Desventaja es que el espacio en la pantalla es reducido.• Lo que se escribe en papel no siempre se ve de la misma forma en la pantalla

Descripción funcional

Documento de instalación

Manual de introducción

Manual de referencia

Guía del administrador

Descripción de servicios

Cómo instalar el sistema

Iniciando

Descripción de recursos

Operación y mantenimiento

Evaluadores de sistemas

Administradores del Sistemas

Usuarios Novatos

Usuarios experimentados

Administradores del sistema

• Aprendizaje:– ¿Cuánto tiempo tarda un usuario nuevo en ser

productivo con el sistema?• Velocidad de operación:

– ¿Qué tan bien responde el sistema a las operaciones de trabajo del usuario?

• Robustez:– ¿Qué tan tolerante es el sistema a los errores del

usuario?

• Recuperación:– ¿Qué tan bien se recupera el sistema a los errores

del usuario?• Adaptación:

– ¿Qué tan atado está el sistema a un solo modelo de trabajo?