Este documento describe las características clave de las interfaces gráficas de usuario y principios de diseño. Explica que las interfaces gráficas utilizan ventanas múltiples, iconos, menús y un apuntador para interactuar. También describe los estilos de interacción como manipulación directa, selección de menús y formularios. Finalmente, discute factores importantes en la presentación de información y diseño de mensajes de error para el usuario.

1. FORMADOR: ING. JORGE LUIS QIÑONEZ TICONA
Diseño Interfaz de Usuario
UNIVERSIDAD ANDINA NESTOR CACERES VELASQUEZ
CARRERA: INGENIERIA DE SISTEMAS

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

3. 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.

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

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

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

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

8. 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.

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

10.  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

11. 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

12. 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.

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

14. 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?

15. ¿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?

16. Ejemplo alternativas de presentación de
la información
Ene Feb. Mar Abril May
o
Juni
o
2842 2851 3164 2789 1273 2835
0
500
1000
1500
2000
2500
3000
3500
Ene Feb Mar Abril Mayo Junio

17. Ejemplos de presentación con
información dinámica
0
20
40
60
80
100
1er trim. 2do trim. 3er trim. 4to trim.
Ventas por Zona
Este
Oeste
Norte
Este; 20,4
Este; 27,4
Este; 90
Este; 20,4
1er trim.
2do trim.
3er trim.
4to trim.
Evolución Ventas
0
50
100
150
200
1er trim. 2do trim. 3er trim. 4to trim.
Norte
Oeste
Este

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

19. 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. diseño de la interfaz de usuarioCap. diseño de la interfaz de usuario
!!
Aceptar Cancelar

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

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

22. 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.

23. 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 .

24. 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

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

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

27. 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.

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

29. Mensaje de error orientado al Sistema
Error # 27
Entrada inválida de la
identificación del
paciente.
?
Aceptar Cancelar

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

31. Diseño del sistema de ayuda
Entrada
desde la
aplicación
Entrada desde el
sistema de
mensajes de error
Entrada en el nivel
superior

32. 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

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

34. 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?

35. 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?