Diseño de interfaces

Vista previa del material en texto

Ing. 
Judith Meles 1
Diseño de Interfaces de Usuario
Universidad Tecnológica Nacional
Cátedra de Diseño de Sistemas
Ing. Judith Meles
Ing. 
Judith Meles 2
Ing. 
Judith Meles 2
Agenda
 Aspectos de Diseño
 Proceso de Diseño de Interfaz de Usuario
 Análisis de Usuario
 Prototipos de Interfaz de Usuario
 Evaluación de Interfaz
Ing. 
Judith Meles 3
Ing. 
Judith Meles 3
Diseño de Interfaz
 Cuatro modelos diferentes a la hora de 
diseñar interfaz hombre-máquina:
◦ Modelo de Diseño
◦ Modelo de Usuario
◦ Percepción del Sistema
◦ Imagen del Sistema
Ing. 
Judith Meles 4
Ing. 
Judith Meles 4
Principios del diseño de interfaces
 Interacción General
 Visualización de la Información
 Entrada de Datos
Ing. 
Judith Meles 5
Ing. 
Judith Meles 5
Interacción general
 Ser consistente
 Ofrecer respuestas significativas
 Pedir verificación de cualquier acción 
destructiva
 Permitir volver atrás en la mayoría de las 
acciones.
 Reducir la cantidad de información que se debe 
memorizar entre acciones.
 Perdonar los errores.
Ing. 
Judith Meles 6
Ing. 
Judith Meles 6
 Buscar la eficiencia en el diálogo, el movimiento y el 
pensamiento.
 Categorizar las actividades por función y organizar la 
pantalla de acuerdo a esto.
 Proporcionar ayudas sensibles al contexto.
 Usar verbos de acción sencillos o frases verbales cortas 
para nombrar las órdenes.
Interacción general (cont.)
Ing. 
Judith Meles 7
Ing. 
Judith Meles 7
Visualización de la información
 Mostrar sólo la información que sea relevante 
en el contexto actual.
 No abrumar al usuario con datos. Permitirle 
una rápida asimilación de la información.
 Usar etiquetas consistentes, abreviaciones 
estándar y colores predecibles.
 Permitir al usuario mantener el contexto visual.
 Producir mensajes de error 
significativos.
Ing. 
Judith Meles 8
Ing. 
Judith Meles 8
 Usar mayúsculas y minúsculas, tabulaciones y 
agrupamiento del texto.
 Usar ventanas para compartimentar diferentes 
tipos de información.
 Usar presentaciones analógicas para 
representar información que es más fácilmente 
asimilable.
 Estudiar la distribución disponible en la pantalla 
y usarla eficientemente.
Visualización de la información (cont.)
Ing. 
Judith Meles 9
Ing. 
Judith Meles 9
Entrada de Datos
 Minimizar el número de acciones de entrada de datos 
que necesita realizar el usuario.
 Mantener la consistencia entre la visualización y la 
introducción de datos.
 Permitir al usuario personalizar la entrada.
 La interacción debería ser flexible pero también 
sintonizarse al modo preferido del usuario de 
entrada.
Ing. 
Judith Meles 10
Ing. 
Judith Meles 10
 Desactivar las órdenes que son 
inapropiadas en el contexto de las 
acciones actuales.
 Dejar al usuario controlar el flujo 
interactivo.
 Proporcionar ayuda en todas las acciones 
de entrada.
 Eliminar las entradas innecesarias.
Entrada de Datos (cont)
Ing. 
Judith Meles 11
Ing. 
Judith Meles 11
Factores Humanos en el Diseño de Interfaz
 Memoria de Corto Plazo Limitada
◦ Las personas pueden recordar instantáneamente a cerca de 7 ítems de información. Si se 
presenta más de esto, hay más probabilidad de cometer errores.
 Las personas cometen errores
◦ Cuando una persona comete errores y el sistema funciona mal, alarmas y mensajes inapropiados 
pueden incrementar el stress y por lo tanto la probabilidad de más errores.
 Las personas son diferentes
◦ Las personas tienen un amplio rango de capacidades físicas. Los diseñadores no deberían diseñar 
solo para sus propias capacidades.
 Las personas tienen preferencias de interacción diferentes
◦ A algunas les gustan las imágenes y a otras el texto.
Ing. 
Judith Meles 12
Principio Descripción
Familiaridad de 
Usuario
La interfaz debería usar términos y conceptos tomados de la experiencia de la 
gente que hará uso del sistema.
Consistencia La interfaz debería ser consistente en que, cada vez que sea posible, las 
operaciones comparables deberían realizarse de la misma manera.
Mínima Sorpresa Los usuarios nunca deberían sorprenderse por el comportamiento del sistema.
Recuperación La interfaz debería incluir mecanismos para permitir a los usuarios recuperarse 
de los errores.
Orientación a 
Usuario
La interfaz debería proveer retroalimentación significativa cuando los errores 
ocurren y provee facilidades de ayuda sensible al contexto.
Diversidad de 
Usuario
La interfaz debería proveer apropiadas facilidades de interacción para diferentes 
tipos de usuarios de sistema.
Ing. 
Judith Meles 13
Ing. 
Judith Meles 13
Aspectos de Diseño en IU´s
 Dos problemas deben considerarse en el diseño de 
sistemas interactivos:
◦ ¿Cómo debería proveerse la información del usuario al 
sistema?
◦ ¿Cómo debería presentarse al usuario la información del 
sistema?
 La interacción de usuario y la presentación de 
información deben integrarse en un entorno 
coherente tal como una metáfora de IU.
Ing. 
Judith Meles 14
Ing. 
Judith Meles 14
Estilos de Interacción
 Manipulación Directa
 Selección de Menú
 Llenado de Formularios
 Lenguaje de Comando
 Lenguaje Natural 
Ing. 
Judith Meles 15
Estilos de Interacción
Interacción Principales Ventajas Principales Desventajas Ejemplos de Aplicación
Manipulación 
Directa
Interacción rápida e 
intuitiva. Fácil de Aprender
Puede ser difícil de implementar. 
Adecuado únicamente cuando hay una 
metáfora visual para tareas y objetos
Video Juegos
Sistemas CAD´s
Selección de 
Menú
Evita errores de usuario. 
Se requiere poco tipeo.
Lento para usuarios experimentados.
Puede convertirse en complejo si hay 
muchas opciones de menú.
La mayoría de los sistemas de 
propósito general
Llenado de 
Formularios
Ingreso de datos simple. Ocupo mucho espacio de la pantalla. 
Causa problemas cuando la opción del 
usuario no coincide con los campos del 
formulario
Control de Stock.
Procesamiento de Préstamos 
Personales
Lenguaje de 
Comando
Poderoso y Flexible Difícil de aprender. Manejo de errores 
pobre.
Sistemas Operativos 
Sistemas de Control de 
Comandos
Lenguaje 
Natural
Accesible para usuarios 
casuales
Fácilmente extensible
Requiere más tipeo, 
Los sistemas de comprensión de lenguaje 
natural son confiables
Sistemas de recuperación de 
información
Ing. 
Judith Meles 16
Ing. 
Judith Meles 16
 Información Estática
◦ Inicializada al principio de la sesión. No cambia 
durante la sesión
◦ Puede ser numérica o textual.
 Información Dinámica
◦ Cambia durante la sesión y los cambios deben 
ser comunicados al usuario del sistema.
◦ Puede ser numérica o textual.
Presentación de Información
Ing. 
Judith Meles 17
Ing. 
Judith Meles 17
Información muestra factores
 ¿Está interesado el usuario en información precisa o relaciones 
entre los datos? 
 ¿Qué tan rápido cambian los valores de la información? ¿El cambio 
debe ser indicado inmediatamente?
 ¿El usuario debe tomar alguna acción en respuesta a un cambio?
 ¿Existe una interfaz de manipulación directa?
 ¿Es la información textual o numérica? ¿Los valores relativos son 
importantes?
Ing. 
Judith Meles 18
Ing. 
Judith Meles 18
0
1000
2000
3000
4000
Jan Feb Mar April May June
Jan
2842
Feb
2851
Mar
3164
April
2789
May
1273
June
283 5
PRESENTACIÓN DE INFORMACIÓN
ALTERNATIVAS
Ing. 
Judith Meles 19
Ing. 
Judith Meles 19
¿Presentación Análoga o digital?
 Presentación Digital
◦ Compacta – necesita poco espacio de la pantalla;
◦ Los valores precisos pueden comunicarse.
 Presentación Análoga
◦ Más fácil para obtener una impresión a primera 
vista de un valor;
◦ Es posible mostrar valores relativos;
◦ Más fácil de ver valores excepcionales de los 
datos.
Ing. 
Judith Meles 20
Ing. 
Judith Meles 20
Métodos de Presentación
1
3
4 2
0 10 20
Dial with needle Pie char t Ther mometer Horizontal barReloj de Agujas Termómetro Barra HorizontalGráfico de Torta
Ing. 
Judith Meles 21
Ing. 
Judith Meles 21
Mostrandovalores relativos
0 100 200 300 400 0 25 50 75 100
Pressur e Temper atur ePresión Temperatura
Ing. 
Judith Meles 22
Ing. 
Judith Meles 22
Visualización de datos
 Relacionado con la técnicas para mostrar grandes cantidades 
de información.
 La visualización puede revelar relaciones entre entidades y 
tendencias en los datos.
 Los posibles visualizaciones de los datos son:
◦ Información del clima recolectada de un número de fuentes;
◦ El estado de una red de teléfono como un conjunto de nodos 
interconectados;
◦ Una planta química visualizada mostrando presiones y temperaturas 
en un conjunto interconectado de tanques y tuberías;
◦ Un modelo de una molécula mostrado en tres dimensiones.
◦ Páginas Web mostradas como un árbol hiperbólico.
Ing. 
Judith Meles 23
Ing. 
Judith Meles 23
Visualización de colores
 Los colores agregan una dimensión extra a una 
interfaz y pueden ayudar al usuario a comprender 
estructuras de información complejas.
 Los colores pueden usarse para destacar eventos 
excepcionales.
 Los errores comunes en el uso de colores en el 
diseño de interfaces incluye:
◦ El uso de colores para comunicar significados;
◦ El sobre-uso de colores en la interfaz.
Ing. 
Judith Meles 24
Ing. 
Judith Meles 24
Lineamientos en el uso de colores
 Limite el número de colores utilizados y sea 
conservador en su uso.
 Utilice colores para mostrar cambios en el estado del 
sistema.
 Utilice códigos de colores para dar soporte a las tareas 
que los usuarios están tratando de realizar.
 Utilice códigos de colores de una manera pensada y 
consistente.
 Sea cuidadoso con las combinaciones de colores.
Ing. 
Judith Meles 25
Ing. 
Judith Meles 25
Mensajes de Error
 El diseño de mensajes de error tiene una 
importancia crítica. 
Los mensajes de error pobres pueden hacer 
que un usuario rechace un sistema en lugar 
de aceptarlo.
 Los mensajes deben ser amables, concisos, 
consistentes y constructivos.
 La experiencia de los usuarios debería ser 
un factor determinante en el diseño de 
mensajes.
Ing. 
Judith Meles 26
Ing. 
Judith Meles 26
Factores de Diseño en las forma de escribir mensajes
Factor Descripción
Contexto Los mensajes generados deben reflejar el contexto actual del usuario, cada vez que sea 
posible. El sistema debería poder determinar lo que el usuario está haciendo y generar 
mensajes relevantes a esa actividad.
Experiencia Debería proveerse mensajes para usuario experimentados y para usuarios 
principiantes y permitirle al usuario que elija que tan conciso es el tipo de mensaje 
que desea.
Nivel de Habilidad Los mensajes también debería adaptarse al nivel de habilidad de los usuarios. Los 
mensajes para diferentes clases de usuarios deberían presentar diferente terminología 
dependiendo de los que es familiar para el usuario.
Estilo Los mensajes deberías ser positivos en lugar de negativos. Debería usarse modos 
activos más que pasivos. Nunca deberían ser insultantes o tratar de ser graciosos.
Cultura Cada vez que sea posible, el diseñador de interfaces debería familiarizarse con la 
cultura del país donde se utilizará el sistema. Existen diferencias culturales distintivas 
entre los países y continentes. Un mensaje adecuado en una cultura puede ser 
inaceptable en otros.
Ing. 
Judith Meles 27
Ing. 
Judith Meles 27
Errores de usuario
 Asuma que una enfermera se equivoca al tipear
el nombre de un paciente cuyo registro intenta 
encontrar.
Please type the patient’s name in the bo x then c lic k on OK
MacDonald , R.
OK Cancel
Patient’s name
Por favor tipee el nombre del paciente en el recuadro y luego haga click en OK 
Perez, Juan 
Nombre del paciente 
Ing. 
Judith Meles 28
Ing. 
Judith Meles 28
Diseño de mensajes 
bueno y malo
Mensaje de Error Orientado al Sistema
Mensajes orientados al usuario
ERROR Nro. 27
Paciente Inválido
El Paciente Juan Perez no es un paciente registrado
Click en Patients para obtener una lista de pacientes
Click en Retry para ingresar otro nombre de paciente
Click en Help para obtener más información
Ing. 
Judith Meles 29
Ing. 
Judith Meles 29
El proceso de diseño de Interfaz de Usuario
 El diseño de IU es un proceso iterativo que implica 
una conexión entre usuarios y diseñadores.
 Las 3 actividades en el proceso son:
◦ Análisis de Usuario. Comprender que hará el usuario 
con el sistema;
◦ Prototipación del Sistema. Desarrollar una serie de 
prototipos para experimentar;
◦ Evaluación de Interfaz. Experimentar con esos 
prototipos con el usuario.
Ing. 
Judith Meles 30
Ing. 
Judith Meles 30
El proceso de diseño
Diseño del 
Prototipo
Analizar y 
Comprender
las actividades
del Usuario
Realizar el 
Diseño del 
Prototipo en 
Papel
Prototipo 
Ejecutable
Evaluar el Diseño
con los Usuarios
Finales
Realizar el 
Diseño Dinámico 
del 
Prototipo 
Evaluar el 
Diseño con los 
usuarios finales
Implementar la 
interfaz de usuario 
definitiva
Ing. 
Judith Meles 31
Atributos de Usabilidad 
Atributo Descripción
Aprendizaje ¿Cuánto tiempo tarda un usuario nuevo 
en ser productivo con el sistema?
Velocidad de 
Funcionamiento
¿Cómo responde el sistema a las 
operaciones de trabajo del usuario?
Robustez ¿Qué tolerancia tiene el sistema a los 
errores del usuario?
Recuperación ¿Cómo se recupera el sistema a los 
errores del usuario?
Adaptación ¿Está muy atado el sistema a un único 
modelo de trabajo?
Ing. 
Judith Meles 32
Ing. 
Judith Meles 32
Los ocho reglas de Shneiderman
 Buscar siempre la coherencia
 Permitir el uso de ‘short-cuts’
 Dar realimentación de información
 Diseñar diálogos que tengan un fin
 Permitir manejos simples de los errores
 Permitir deshacer las acciones con facilidad
 Permitir que el centro de control sea interno
 Reducir la carga de la memoria inmediata
Ing. 
Judith Meles 33
Productos del Diseño de la Interfaz Externa
Panorama 
del Sistema
Panorama 
de la 
Aplicación
Descripción 
de Ventana
Mini especificación
de Ventana
Especificación de 
Campo
Para cada aplicación …
Diagrama de Navegación de 
Ventanas
Disposición de Ventana
Registrar solicitud de compraRegistrar solicitud de compra
FechaUsuario
Empresas
Nº Solicitud
Rubros
Sectores
Lugares de 
entrega
Fecha 
entrega
Hora entrega
ArchivarEnviar
Imputaciones Artículos
Cód. Artículo
Cantidad
Cód. Precio Compra Cantidad Agregar
Modificar
Eliminar
Descripción
Buscar
Último Precio 
Compra
Descripción Subtotal $
Total $
Para cada ventana …
Ing. 
Judith Meles 34
Ing. 
Judith Meles 34
Puntos Clave
 Los principios de diseño de interfaz deberían ayudar a 
conducir el diseño de las interfaces de usuario.
 Los estilos de interacción incluyen:
◦ Manipulación directa
◦ Sistemas de Menú
◦ Llenado de formularios
◦ Lenguajes de Comando
◦ Lenguaje Natural
 Los gráficos deberían utilizarse para mostrar 
tendencias y valores aproximados. Los displays
digitales cuando se requiere precisión.
 Los colores deberían utilizarse escasa y consistentemente.
Ing. 
Judith Meles 35
Ing. 
Judith Meles 35
Puntos Clave
 El proceso de diseño de interfaz implica 
◦ El análisis de usuario
◦ La prototipación del sistema
◦ La Evaluación del Prototipo.
 El análisis de usuario ayuda a sensibilizar a los diseñadores respecto de la 
forma en la cual los usuarios realmente trabajan.
 La prototipación de IU debería ser un proceso gradual con prototipos 
tempranos en papel utilizados como base para la automatización de 
prototipos de interface.
 Lo objetivos de la evaluación de la IU son: obtener realimentación respecto 
de cómo mejorar el diseño de interfaz y para evaluar si las interfaces 
alcanzan sus requerimientos de usabilidad.
Ing. 
Judith Meles 36
Ing. 
Judith Meles 36
Bibliografía 
 Sommerville, Ian- Ingeniería de Software
 Ruble, David – Análisis y Diseño Práctico de 
Sistemas Cliente/Servidor con GUI