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: Recuperabilidad: 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

Diversidad de usuarios: 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

Selección de menús: 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 ejemplo 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. Despliegue

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

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

Despliegue información gráfica con valores relativos Temperatura Presión 0 100 200 300 0 25 50 75 100

Información alfanumérica en relieve ! El nombre del archivo ya existe. Por favor, elija otro nombre. Cap. 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: Estilo: Cultura: 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 Evaluadores de sistemas Administradores del Sistemas Usuarios Novatos Usuarios experimentados Administradores del sistema 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

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: Adaptació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?