Diseño interfaz usuario
-
Upload
oswaldo-bernal -
Category
Documents
-
view
943 -
download
3
description
Transcript of Diseño interfaz usuario
• 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.
• 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.
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
• 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.
• 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.
• 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?
Ene Feb. Mar Abril Mayo
Junio
2842 2851 3164 2789 1273 2835
Evolución Ventas
0
50
100
150
200
1er trim. 2do trim. 3er trim. 4to trim.
NorteOesteEste
Este; 20,4Este; 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
EsteOesteNorte
Presión
0 100 200 300
Temperatura
0 25 50 75 100
El nombre del archivo ya existe.
Por favor, elija otro nombre.
Cap. 15 diseño de la interfaz de usuario!
Aceptar Cancelar
• 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.
• 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
• 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
• 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.
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
Error # 27
Entrada inválida de la identificación del paciente.
?Aceptar Cancelar
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
Entrada desde la aplicación
Entrada desde el sistema de mensajes de error
Entrada en el nivel superior
• 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
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
• 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?