Diseño de Interfaces de

usuarioIngeniero Noretsys Rodríguez

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.

Principios de diseño de Interfaces de usuario 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

Principios de diseño de Interfaces de usuario 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

Interacción del usuario

Llenado de formularios:Introducción de datos sencilla en los campos de un

formulario.Fácil de aprenderOcupa 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 flexibleDifícil de aprenderAdministración de errores pobre.Ejemplo: Sistemas operativos

Interacción del usuario

Lenguaje Natural:El usuario emite comandos en lenguaje natural .Accesible a usuarios casualesFácil de ampliarSe 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.

Interacción del usuario

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.

Presentación de la Información 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?

Presentación de la Información ¿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?

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.

Color en el diseño de la interfaz 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.

Color en el diseño de la interfaz 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 coloresDada la fisiología del ojo , las personas no

pueden enfocar el rojo y el azul simultáneamente .

Color en el diseño de la interfaz 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.

Factores de diseño en la redacción del mensaje de Error

Ventajas de las GUI Son fáciles de aprender y usar.

Usuarios sin experiencia pueden aprender el uso del sistema rápidamente.

El usuario puede cambiar rápidamente desde una proceso a otro y puede interactuar con diferentes aplicaciones a la vez.La información aparece visible en su propia

ventana cuando la atención cambia. Rápido, interacción de pantalla completa es

posible con acceso inmediato a cualquier cosa sobre la pantalla.

Principios de Diseño. El diseño de interfaces de Usuario toma en

cuenta las necesidades, experiencia y capacidades de los usuarios del sistema.

Los usuarios deberían involucrarse en el proceso de diseño y el diseño de interfaces de usuario deben refinarse hacia rápidos prototipos.

Existen factores cognoscitivos, como el tamaño de pequeños términos de memoria, que el diseño la interfaz de usuario deben tomarse en cuenta.

Principios de Diseño La interfaz debe basarse en los términos

orientados de usuario y conceptos sobre los conceptos informáticos. Por ejemplo, un sistema de oficinas debe utilizar

conceptos como cartas, documentos, folders etc. Así como directorios, identificadores de archivos, etc.

El sistema deberá mostrar un nivel apropiado de consistencia. Los comandos y los menús deban mantener el

mismo formato, las puntuaciones de los comandos deben ser similares,etc.

Principios de Diseño El sistema no debe tomar por sorpresa al usuario.

Si un comando opera en una forma conocida, el usuario debe ser capaz de predecir la operación de un comando parecido.

El sistema debe proveer alguna ayuda cada vez que el usuario cometa un error y dar la posibilidad a esté corregir el error antes de ejecutarlo. Esté debe incluir comandos para de para deshacer

acciones, acciones de confirmación o destrucción, tal como destrucción de archivos, etc.

Las guías de usuario deben fungir como suplementos.Sistemas de ayuda, manuales de línea,etc.

Interacción Usuario-Sistema Dos problemas deben ser direccionados en el

diseño de sistemas interactivos.¿Como es que la información es proporcionada por

el usuario al sistema?¿Cómo debe proporcionar la información el

sistema estando presente el usuario? La interacción y presentación de información

debe integrarse a través de un cuadro de trabajo coherente de tal forma que la interfaz de usuario se adapte a los fines requeridos.

Interfaces de comandos El usuario puede acceder comandos con el fin de

proveer instrucciones al sistema. Por ejemplo UNIX.

Puede ser implementado usando terminales menos costosas.

Fácil de procesar empleando técnicas de compilación.

Comandos de complejidad arbitraria pueden ser creados a través del comando de combinación.

Interfaces concisas requieren mínima escritura para ser creadas.

Problemas con las interfaces de comandos Los usuarios tiene que aprender y

recordar un lenguaje de comandos. Las interfaces de comando son además inaccesibles para usuarios ocasionales.

Los usuarios cometen errores de comandos. Una detección y recuperación del sistema es necesaria.

La interacción del sistema es por medio de un teclado habilitado

Lenguajes de comando Siempre es preferible para usuarios

experimentados debido a que ellos tienen una interacción más rápida con el sistema.

Lo anterior no se aplica para usuarios casuales o inexpertos.

Tal vez establecido como una alternativa para un menú de comandos (Secuencias cortas de teclado). En la mayoría de los casos, una interfaz de lenguaje de comandos y una interfaz de menú basado están soportadas al mismo tiempo.

Presentación de la información Información Estática.

Inicializando al principio de la sesión. Está realmente no cambia durante la sesión.

Puede ser numérica o texto. Información Dinámica.

Cambios durante la sesión se actualizan automáticamente al momento de establecer comunicación con el sistema de usuario.

Puede ser numérica o texto.

Diseño de mensajes de errores El diseño de mensajes de error es

critica. Los mensajes de error pobre puede significar que un usuario prefiera rechazar que aceptar el sistema.

Los mensajes deberían ser amables. Concisos., consistentes y constructivos.

El fondo que el usuario debe experimentar debería ser un factor determinante en el diseño de mensajes.

Diseño del sistema de ayuda Ayuda? significa ‘ayuda, yo quiero

información” Ayuda! significa “ayuda,yo estoy en

problemas” Ambos de estos requerimientos tienen

que ser tomados en consideración en el diseño de la ayuda del sistema.

Diferentes facilidades dentro del sistema de ayuda puede ser requerido.

Información de ayuda Simplemente no se debería estar con un

manual en línea. Las pantallas o ventanas no caben en el

papel. Las características dinámicas de el

despliegue pueden improvisar la presentación de la información.

La gente no es buena leyendo ventanas como texto.

Uso de los sistemas de ayuda Múltiples puntos de entrada deberían

ser provistos dentro del sistema de ayuda de diferentes lugares.

Algunas indicaciones donde el usuario se posesiona en el sistema de ayuda es valuado.

Las facilidades estarán proveídas a todos los usuarios para navegar y atravesar el sistema de ayuda.

Documentación del usuario Tan bueno como la información en línea,

la documentación en papel debería ser sustituida con un sistema.

La documentación puede estar diseñada para un rango de usuarios tanto inexpertos como expertos.

Tan bueno como un manual. Otras documentaciones de uso fácil deberían ser provistas.

Tipos de documento Descripción funcional

Breve descripción de lo que puede hacer el sistema

Manual referente del sistemaDescribe todo el sistema con detalle

Manual del sistema para la instalaciónDescribe como se instala el sistema

Manual del sistema administradorDescribe como se desarrolla el sistema

cuando esta en uso

Evaluación de la interface de usuario Algunas evaluaciones para el diseño de

la interface de usuario pueden ser acarreados fuera del alcance de estos.

Una evaluación con escala completa es muy cara e impractica para muchos sistemas

Idealmente una interface puede evaluar una vez mas una especificación utilizada, sin embargo es raro para cada especificación ser producida.

Técnicas simples de evaluación Preguntas para la retroalimentacion del

usuario. La grabación del vídeo del sistema usa

una evaluación subsecuente. La instrumentación del código para la

información coleccionada facilita que el usuario controle los errores.

La provisión de un botón de celdas para el usuario en línea es retroalimentado.

Resumen El diseño de interfaces puede ser

centrada al usuario. Una interface debería ser lógica y consistente y la ayuda de usuarios recupera errores.

El sistema de menú debe de ser tan bueno como para usuarios de sistemas ocasionales.

El despliegue gráfico puede utilizarse para representar tendencias y valores aproximados. El despliegue digital es cuando es requerida la precisión.

Puede el color utilizarse regado y consistente.

Resumen Pueden los sistemas proveer ayuda en línea. Esto

incluye ayuda cuando se encuentran en problemas y ayuda cuando se requiere información.

Los mensajes de error pueden ser positivos como negativos.

Diferentes tipos de rangos, son provistos para el documento de usuarios.

Idealmente, una interface de usuario puede evaluar , una vez hecha la especificación de usabilidad.

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

Ejemplos

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

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

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?

Evaluación de la interfaz 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?