Diseño Interfaz de Usuario

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 Producir un
comprender las prototipo de Evaluar el diseño con
actividades del diseño en los usuarios finales
usuario papel

Diseñar el Producir el
prototipo prototipo del Evaluar el diseño con los
diseño usuarios finales
dinámico

Prototipo Implementar la interfaz

ejecutable 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 Software de
a desplegar presentación

Al separar el sistema de
presentación de los datos , se puede
cambiar la representación sobre la Despliegue
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

3500
Ene Feb. Mar Abril May Juni 3000
o o
2500
2842 2851 3164 2789 1273 2835
2000
1500

1000
500
0
Ene Feb Mar Abril Mayo Junio
 Ejemplos de presentación con
información dinámica
Ventas por Zona
1er trim.
100

80 Este; 20,4 Este; 20,4 2do trim.

60 Este Este; 27,4 3er trim.

40 Oeste
Norte 4to trim.
20
Este; 90
0
1er trim. 2do trim. 3er trim. 4to trim.

Evolución Ventas

200

150
Norte
100 Oeste
Este
50

0
1er trim. 2do trim. 3er trim. 4to trim.
Despliegue información gráfica con
valores relativos

Presión Temperatura

0 100 200 300

0 25 50 75 100
Información alfanumérica en relieve

!
El nombre del archivo ya existe.
El nombre del archivo ya existe.
Por favor, elija otro nombre.
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:
– 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

 Diseño del sistema de ayuda
Entrada en el nivel
superior

Entrada
desde la
aplicación

Entrada desde el
sistema de
mensajes de error
• 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 Administradores Usuarios Usuarios Administradores

de sistemas del Sistemas Novatos experimentados del sistema

Descripción Documento Manual de Manual de Guía del

funcional de instalación introducción referencia administrador

Descripción Cómo instalar Iniciando Descripción Operación y

de servicios el sistema de recursos 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:
– ¿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?