Diseño Interfaz de Usuario

Ing. Carlos Bacalla

Características de las Interfaces gráficas de usuario (GUIs)

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

Ventajas de las GUIs

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

Proceso de Diseño de la GUI

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

Principios de diseño de Interfaces de usuario

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

Interacción del usuario

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

Presentació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?

Ejemplo alternativas de presentación de la información

Ene Feb. Mar Abril Mayo

Junio

2842 2851 3164 2789 1273 2835

0

500

1000

1500

2000

2500

3000

3500

Ene Feb Mar Abril Mayo Junio

Ejemplos de presentación con información dinámica

Evolución Ventas

0

50

100

150

200

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

Norte

Oeste

Este

Este; 20,4

Este; 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

Este

Oeste

Norte

Despliegue información gráfica con valores relativos

Presión

0 100 200 300

Temperatura

0 25 50 75 100

Información alfanumérica en relieve

El nombre del archivo ya existe.

Por favor, elija otro nombre.

El nombre del archivo ya existe.

Por favor, elija otro nombre.

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

!!Aceptar Cancelar

Otros ejemplos a considerar

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

Color en el diseño de la interfaz

• 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

Soporte al usuario, Sistema de ayuda en línea

• 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

Factores de diseño en la redacción del mensaje de Error

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

Ejemplo

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

Mensaje de error orientado al Sistema

Error # 27

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

?Aceptar Cancelar

Mensaje orientado al usuario

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

• 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

Documentación del usuario

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

Evaluación de la interfaz

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