INGENIERIA DEL SOFTWARE

DISEÑO DE INTERFAZ DE USUARIO

INTEGRANTES:AGUILAR ZAPANA, HUMBERTO

GUEVARA TARRILLO, JOHNYPEJERREY BRAVO, JORGE

PEREZ GONZALEZ, ELMER

DISEÑO DE INTERFAZ DE USUARIO

Principios de diseño de la interfaz de usuario

Interacción del usuario

Presentación de la información

Soporte al usuario

Evaluación de la interfaz

 EL DISEÑO DE LA INTERFAZ  

El Diseño de la Interfaz de usuario es la categoría de diseño que crea un medio de comunicación entre el hombre y la maquina.

Ventajas de la GUI ( Interfaz Gráfica del Usuario)

Relativamente fáciles de aprender y utilizar.

Para interactuar con el sistema el usuario cuenta

con Ventanas.

Acceso inmediato a cualquier punto de la

pantalla.

Tipos de Interfaz de Usuario

Elementos de GUI

DISPOSITIVOS DE INTERFAZ HUMANA VENTANAS Tipos

Ventanas de Aplicación Ventanas de Ficheros

MENUS Estado: Activo, Inactivo, Seleccionado, Activado, Pulsado Tipos: Menús Contextuales, Menús de

Navegación, Menús Jerárquicos, Menú de Inicio

Elementos de GUI

ICONOS CONTROLES

Botones Botón en Relieve, Botón en forma de Radio, Botones de Confirmación

Elementos de entrada de texto Campo de texto

Elementos de Información de salida Barra de Progreso, Cuadro de Consejo, Barra de Estados

Elementos compuestos Barra de Tareas, Combo de Texto

Reglas de Oro para el diseño de GUI

Modelos del Diseño de la Interfaz

Proceso de Diseño de GUI

La interfaz como Dispositivo Metafórico

LA INTERFAZ RECURRE A LA METAFORA PARA PODER TRADUCIR EL LENGUAJE

COMPLETO DEL SISTEMA AL LENGUAJE CONOCIDO DEL USUARIO PARA PERMITIR LA COMUNICACION

Principios para el Diseño de GUI

Anticipación Comunicación Consistencia Autonomía Controlada Eficiencia Flexibilidad

Principios para el Diseño de GUI

Centrada en el Usuario Ley de Fitt Reducción de Latencia Facilidad de Aprendizaje Metáforas Legibilidad Seguimiento del Estado

Directrices para el diseño de GUI

No forzar al usuario a leer grandes cantidades de texto.

Evitar los llamados iconos “under construction”.

La información importante debe colocarse dentro de las dimensiones típicas de la ventana del navegador.

La estética nunca debe sustituir a la funcionalidad.

Las opciones de navegación deben ser obvias.

Estándares para el Diseño de GUI

II. INTERACCION CON EL USUARIO

El diseñador de la interfaz se enfrenta

a dos preguntas:

 ¿Cómo introducirá el usuario la

información?

¿Cómo se presentará la información?

1. Principios de Interacción Schneiderman clasificó, en 1998, en 5 estilos

primarios las formas de Interacción con el

usuario.

1. Manipulación directa. El usuario interactúa

directamente con los objetos de la pantalla.

2. Selección de menús. En la que el usuario

selecciona un comando de una lista

de posibilidades .

Principios de Interacción

3. Llenado de formularios. En éste el usuario

llena campos.

Algunos campos tienen menús y/o botones

asociados

4. Lenguaje de comandos. El usuario emite

comandos especiales y parámetros

asociados para indicar al sistema que hacer.

5. Lenguaje natural.

2. Múltiples Interfaces de Usuario

Interfaz Gráfica del Usuario

Interfaz de Lenguaje de Comandos

Administrador de la GUI

Interprete de Lenguaje de Comandos

Sistema Operativo

III. PRESENTACIÓN DE LA INFORMACIÓN

Información a desplegar

Software de Presentación

Color en el diseño de la interfaz

Los diseñadores deben ser

conservadores en la utilización

del color para despliegues de

usuario.

Lineamientos clave para usar el Color

No deben ser más de 4 ó 5 colores diferentes en una ventana y no más de 7 en una interfaz de sistema.

Utilizar un cambio de color para mostrar un cambio de estado en el sistema.

Utilizar el código de colores para apoyar la tarea que los usuarios están tratando de llevar a cabo, identificar anómalas o similitudes.

Lineamientos clave para usar el Color

Utilizar el código de colores en una forma consciente y consistente.

Ser cuidadoso al utilizar pares de colores.› Algunos pares de colores pueden

ser perturbadores y difíciles de leer: Por ejemplo el ojo humano no puede enfocar simultáneamente el rojo y azul.

Errores al incorporar Color

Asociar significados a colores

particulares.

 Utilizar demasiados colores en un

despliegue puede provocar confusión

para entender la información.

IV. SOPORTE AL USUARIO

El Abastecimiento de guías al usuario cubre

tres áreas:

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.

Mensajes de error

Los mensajes de error son la primera marca que reciben los usuarios de un software

Es por ello que siempre deben ser:› amables, concisos, consistentes y constructivos.

No deben ser insultantes o tener sonidos asociados que molesten al usuario.

En la medida de lo posible, el mensaje sugerirá cómo corregir el error.› El mensaje debe vincularse a un sistema de

ayuda en línea sensible al contexto.

Factores de diseño en la redacción de mensajes

Contexto.

› Debe estar pendiente de lo que hace el usuario y

ajustarse a las circunstancias de salida.

Experiencia.

› Debe proveer mensajes para usuarios principiantes y

usuarios ya familiarizados con el sistema.

Nivel de Habilidad.

› Los mensajes se deben ajustar a las habilidades del

usuario.

Factores de diseño en la redacción de mensajes

Estilo.

› Los mensajes deben ser positivos en lugar

de negativos. No deben ser insultantes o

graciosos”.

Cultura.

› Un mensaje adecuado en una cultura

podría no aceptarse en otra.

Mensajes de error

Diseño del sistema de ayuda

Cuando se presenta un mensaje de error y no

comprenden.

› El usuario va inmediatamente al sistema de ayuda

por información.

La ayuda provee varios puntos de entrada.

Ayuda para obtener explicación de un mensaje

de error o

Explicación de un comando particular.

Documentación del usuario Ésta no es estrictamente parte del diseño de la

interfaz de usuario pero es recomendable

diseñar el apoyo de ayuda en línea junto con la

documentación en papel.

Los manuales del sistema proveen información

más detallada de la ayuda en línea y se

diseñan de tal forma que puedan ser utilizados

por diferentes clases de usuarios del sistema.

Documentos a entregar con un sistema de Software

Una descripción funcional que describe, muy

brevemente, los servicios que provee el sistema.

› A los usuarios les debe ser posible leer este

documento junto con un manual introductorio y decidir

si es el sistema que necesitan.

Un documento de instalación, que provee detalles

de instalación como la configuración mínima de

hardware requerida.

Documentos a entregar con un sistema de Software

Un manual introductorio.› Introducción informal de lo que hace el sistema en su

utilización “normal”,

› Cómo recuperarse de errores y reestablecimiento.

Un manual de referencia. › Describe los recursos del sistema y su utilización, provee una

lista de mensajes de error y las posibles causas, describe recuperación de errores detectados.

Un manual de administrador. Se provee en algunos tipos de sistemas.

› Mensaje generados cuando el sistema interactúe con otros sistemas y cómo reaccionar a estos mensajes, como reconocer y reparar problemas relacionados con el hardware.

Tipos de documentos producidos para apoyar a los usuarios:

V.EVALUACIÓN DE LA INTERFAZ

Proceso de valoración formal de la

utilización de una interfaz para verificar

que cumple sus requerimientos.

La evaluación sistemática del diseño de la

interfaz puede ser un proceso caro que

involucra científicos cognoscitivos y

diseñadores gráficos.

Evaluación de la interfaz

Existen varias técnicas menos caras y sencillas

para evaluar el diseño de la interfaz:

› Cuestionarios. Recolectan información de lo que

opinan los usuarios.

› Observar a los usuarios al momento de trabajar

con el sistema.

› Incluir código en el sistema que recolecte información

de los recursos más usados y de los errores más

comunes.

Atributos de usabilidad

ATRIBUTO DESCRIPCIÓN

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?

Atributos de usabilidad

ATRIBUTO DESCRIPCIÓN

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?

RESUMEN: El proceso de diseño se centra en el usuario. La interacción ocupa estilos varios El despliegue gráfico de resultados se utiliza según el uso

inmediato. El color se debe usar en forma moderada Hay dos tipos de ayuda: emergente y de información Los mensajes de error no deben hacer sentir al

usuario culpable. La documentación del sistema incluye manuales para

diversos niveles y usos La documentación de desarrollo debe incluir valores

cuantitativos, mismos que se deben aplicar en la evaluación.

APLICACIÓN:

SISTEMA DE VENTAS

Nuevo Producto

Búsqueda de productos

Modificación de productos

Mensajes de Error

Registro de Ventas

GRACIAS