Diseo Interfaz de Usuario

Caractersticas de las Interfaces grficas de usuario (GUIs)

Ventanas:
Ventanas mltiples permiten que se despliegue simultneamente informacin diversa en la pantalla del usuario.

Iconos:
Representan diferentes tipos de informacin, por ejemplo archivos, procesos ,etc.

Mens:
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 inters en una ventana , se utiliza un dispositivo apuntador , como el ratn.

Grficos:
Los elementos grficos se pueden mezclar con texto en el mismo despliegue.

Ventajas de las GUIs

Fciles de aprender y utilizar. Para interactuar con el sistema , los usuarios cuentan con pantallas mltiples. Se puede pasar de una tarea a otra sin perder de vista la informacin de la anterior. Interaccin rpida y acceso inmediato a cualquier punto de la pantalla.

Proceso de Diseo de la GUI

Analizar y comprender las actividades del usuario Producir un prototipo de diseo en papel Evaluar el diseo con los usuarios finales

Disear el prototipo

Producir el prototipo del diseo dinmico

Evaluar el diseo con los usuarios finales

Prototipo ejecutable

Implementar la interfaz del usuario final

Principios de diseo de Interfaces de usuario

Familiaridad del usuario:
Utilizar trminos y conceptos que se toman de la experiencia de las personas que ms 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.

 Mnima 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:
Confirmacin de acciones destructivas Proveer de un recurso para deshacer

 Gua al usuario:
Cuando los errores ocurren , la interfaz debe proveer retroalimentacin significativa y caractersticas de ayuda sensible al contexto.

Diversidad de usuarios:
La interfaz debe proveer caractersticas de interaccin apropiada para los diferentes tipos de usuarios.

Interaccin del usuario

Una interfaz coherente debe integrar la interaccin del usuario y la presentacin de la informacin. Shneiderman(1998) clasifica la interaccin en 5 estilos primarios:
Manipulacin directa:
Interaccin directa con los objetos de la pantalla. Rpida e intuitiva Fcil de aprender Ejemplo: para borrar un archivo , el usuario lo arrastra al bote de basura. Videos de juegos

 Puede ser difcil de implementar. Slo es adecuada donde hay una metfora visual para las tareas y objetos.

Seleccin de mens:
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 propsito general

 Llenado de formularios:
Introduccin de datos sencilla en los campos de un formulario. Fcil de aprender Ocupa mucho espacio en la pantalla. Ejemplo: ingreso datos del cliente

Lenguaje de comandos:
Los usuarios emiten un comando especial y los parmetros asociados para indicar al sistema que hacer. Poderoso y flexible Difcil de aprender Administracin de errores pobre. Ejemplo: Sistemas operativos

 Lenguaje Natural:
El usuario emite comandos en lenguaje natural . Accesible a usuarios casuales Fcil de ampliar Se requiere teclear ms . Los sistemas de comprensin de lenguaje natural no son fiables. Ejemplo: Sistemas de horarios, sistemas www de recuperacin de la informacin.

Presentacin de la Informacin
Puede ser la presentacin directa de la informacin de entrada (texto en un procesador de texto) o presentacin grfica
Informacin a desplegar Software de presentacin

Al separar el sistema de presentacin de los datos , se puede cambiar la representacin sobre la pantalla sin tener que cambiar el sistema de cmputo subyacente.

Despliegue

 Para encontrar la mejor presentacin de la informacin es necesario conocer a los usuarios y y la forma en que utilizarn el sistema. Factores a considerar:
El usuario est interesado en informacin precisa o en las relaciones entre los diferentes valores de los datos? Qu tan rpido cambian los valores de la informacin?Se indicarn de forma inmediata al usuario los cambios de un valor?

 El usuario debe llevar a cabo una accin en respuesta a los cambios de la informacin? El usuario necesita interactuar con la informacin desplegada va una interfaz de manipulacin directa? La informacin que se va a desplegar es textual o numrica? Son importantes los valores relativos de los elementos de la informacin?

Ejemplo alternativas de presentacin de la informacin

3500

Ene 2842

Feb. 2851

Mar 3164

Abril 2789

May o 1273

Juni o 2835

3000 2500 2000 1500 1000 500 0

Ene Feb Mar Abril Mayo Junio

Ejemplos de presentacin con informacin dinmica

Ventas por Zona
1er trim.
100 80 60 40 20 0

Este; 20,4
Este Oeste Norte

Este; 20,4 Este; 27,4

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

Este; 90
1er trim. 2do trim. 3er trim. 4to trim.

Evolucin Ventas
200 150 100 50 0

Norte Oeste Este

1er trim.

2do trim.

3er trim.

4to trim.

Despliegue informacin grfica con valores relativos

Temperatura
300 0 25 50 75 100

Presin
0 100 200

Informacin alfanumrica en relieve

El nombre del archivo ya existe. Por favor, elija otro nombre. Cap. 15 diseo de la interfaz de usuario

Aceptar

Cancelar

Otros ejemplos a considerar

Informacin climtica: mapa climtico con isobaras, frentes climticos ,etc. Estado de una red telefnica se despliega grficamente como un conjunto vinculado de nodos en un centro de administracin. El estado de una planta qumica se visualiza mostrando las presiones y temperaturas asociados a tanques y tuberas Un modelo de una molcula se despliega y manipula en tres dimensiones utilizando un sistema de realidad virtual.

Color en el diseo de la interfaz

El color ayuda y mejora la presentacin de la interfaz , permitiendo al usuario comprender y manejar la complejidad. Shneiderman(1998) establece 14 lineamientos claves para la utilizacin efectiva del color. Los mas relevantes:
Limitar el nmero de colores utilizados y ser conservador al momento de utilizarlos . No utilizar mas de 4 5 colores diferentes en una ventana y no ms de 7 en la interfaz total del sistema.

 Utilizar un cambio de color para mostrar un cambio en el estado del sistema.

Ejemplo semforos de alerta que reportan estados normal, precaucin y alarma.

Utilizar el cdigo de colores para apoyar la tarea que los usuarios estn tratando de llevar a cabo.
Un color para resaltar una situacin anmala, otro para similitudes.

 Utilizar el cdigo de colores en una forma consciente y consistente.

Si usamos rojo para mostrar alarma , mantener esta lgica durante todo el sistema

Ser cuidadoso al utilizar pares de colores

Dada la fisiologa del ojo , las personas no pueden enfocar el rojo y el azul simultneamente .

 En general el color no debe utilizarse para representar algn 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 qumico es caliente.

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

Soporte al usuario, Sistema de ayuda en lnea

Los mensajes producidos por el sistema en respuesta a las acciones del usuario El sistema de ayuda en lnea. La documentacin suministrada con el sistema

Factores de diseo en la redaccin del mensaje de Error

Contexto:
El sistema gua 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 terminologa 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 pas 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

?
Aceptar

Error # 27 Entrada invlida de la identificacin del paciente.

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 ms informacin.

Pacientes

Ayuda

Reintentar

Cancelar

Diseo del sistema de ayuda

Entrada en el nivel superior

Entrada desde la aplicacin

Entrada desde el sistema de mensajes de error

 Estructura de red complejas Cada marco de informacin se vincula con otro marco de informacin. Generalmente la estructura es jerarquica con vnculos cruzados. En la cima la informacin es general y en la parte inferior mas detallada. Induce a error de navegacin cuando se entra luego de un error. Se recomienda utilizar ventanas mltiples que guen 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

Documentacin del usuario

Evaluadores de sistemas Administradores del Sistemas Usuarios Novatos Usuarios experimentados Administradores del sistema

Descripcin funcional

Documento de instalacin

Manual de introduccin

Manual de referencia

Gua del administrador

Descripcin de servicios

Cmo instalar el sistema

Iniciando

Descripcin de recursos

Operacin y mantenimiento

Evaluacin de la interfaz
Aprendizaje:
Cunto tiempo tarda un usuario nuevo en ser productivo con el sistema?

Velocidad de operacin:
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?

 Recuperacin:
Qu tan bien se recupera el sistema a los errores del usuario?

Adaptacin:
Qu tan atado est el sistema a un solo modelo de trabajo?