Diseño de la interfaz de usuario y sus reglas

Integrantes:
Camacho Urquiza María Vianney
Hernández Avila María Janeth
Resendiz Vega Ana Belem
Silvestre Reyes Hilaria
Definición de la interfaz de usuario
La Interfaz de Usuario, de un sistema es un conjunto de
elementos hardware y software de una computadora que
presentan información al usuario y le permiten interactuar con la
información y con la computadora.
Su principal uso consiste en proporcionar un entorno visual
sencillo que permite la comunicación con el sistema operativo, y
posiblemente con una B.D.
Definición de interfaz grafica
Tipo de visualización que permite al usuario elegir comandos,
iniciar programas y ver listas de archivos y otras opciones
utilizando las representaciones visuales (iconos) y las listas de
elementos del menú. Las selecciones pueden activarse bien a
través del teclado o con el ratón.
¿Quién lo hace?

Un ingeniero de software diseña la interfaz de usuario al aplicar

un proceso iterativo basado en principios de diseño ampliamente
aceptado.
Reglas de oro
1.-Dar control al usuario
2.-reducir la carga de memoria al usuario
3.-lograr que la interfaz sea consistente
1. Dar control al usuario

Definir los modos de interacción de forma que el usuario no

realice acciones innecesarias o indeseables.

Proporcionar una interacción flexible.

Incluir acciones de interrumpir y deshacer lo ya hecho

Depurar la interfaz a medida que aumentan los grados de
destreza y permita que se personalice la interacción.

Oculte al usuario ocasional los elementos técnicos internos.

Diseñar interacción directa con los objetos que aparecen en la

pantalla.
 2. Reducir la carga de memoria al usuario

Reducir la demanda de memoria a corto plazo.

definir valores por defecto que tengan significado.

Definir accesos directos intuitivos.

El formato visual debe basarse en una metáfora tomada de la realidad.

Desglosar la información de manera progresiva.

 3. Lograr que la interfaz sea consistente

Toda la información visual esta organizada de acuerdo con un estándar

de diseño que se mantenga en todas las presentaciones de pantalla.

Los mecanismos de entrada se restrinjan a un conjunto limitado que

se utilice de manera consistente en toda la aplicación.

Que los mecanismos para ir de una tarea a otra se hayan definido e

implementado de manera consistente
 Permitir que el usuario incluya la tarea actual en un contexto que
tenga algún significado.

 Mantener la consistencia en toda la familia de aplicaciones.

 Si los modelos interactivos anteriores han generado expectativas

en el usuario no hacer cambios a menos que haya razones
inexcusables.
Reglas para el objeto de diseño
Fecha
Fuente
Color
 Más de dos o tres colores de relieve en general llevara a una interfaz
confusa.
 Por el bien de los usuarios daltónicos, no elegir los colores sobre la
base del color rojo y verde, ni sobre la base del contraste.
Diseño de pantallas
Análisis y diseño de la interfaz de usuario
Modelos del análisis y diseño de la interfaz
Ingeniero humano (establece un modelo de usuario).

Ingeniero del software (modelo del diseño).

Usuario final (modelo mental o percepción del sistema).

Quienes implementan el sistema (modelo de la implementación).

Modelos del análisis y diseño de la interfaz
Modelo de usuario

-Principiantes.

-Usuarios esporádicos y con conocimientos.

-Usuarios frecuentes y con conocimientos.

Modelos del análisis y diseño de la interfaz
Modelo del diseño.

Modelo mental.

Modelo de implementación.
Proceso

1.- Análisis y modelado de usuarios, tareas y entornos.

2.- Diseño de la interfaz.

3.- Construcción (implementación) de la interfaz.

4.- Validación de la interfaz.

Análisis de la interfaz

Entrevista con el usuario.

Información de ventas.

Información de mercadotecnia.

Información proveniente de soporte.

Análisis y modelado de tareas
Casos de uso.

Elaboración de la tarea.
Elaboración del objeto
Estos objetos pueden ordenarse en clases, los atributos de cada
clase y una evaluación de las acciones aplicadas a cada objeto
proporcionan el diseñador una lista de operaciones.

EJEMPLO: DE EL SURTIDO DE UNA RECETA

C:\Users\janeth\Documents\~$paejemplo.docx
 Análisis de flujo de trabajo
Esta técnica permite que un ingeniero de software
comprenda como se realiza cada proceso de trabajo
cuando se involucran varias personas (y papeles).
 Representación jerárquica
La jerárquica se deriva de una elaboración paso a paso de cada tarea que el
usuario haya identificado.
Por ejemplo en el anterior se solicita que se resurta una receta se desarrolla la
siguiente jerarquía de tareas:
Solicitar que se resurta una receta
•Proporcionar información de identificación
•Especificar nombre
•Especificar identidad de usuario
•Especificar NIp y contraseña
•Especificar numero de receta
•Especificar fecha en que se requiere el resurtido
 Análisis de contenido de la pantalla

En este paso de análisis se consideran el formato y la estética

del contenido.
Se deberán de platear preguntas para dicho análisis las
cuales son las siguientes.
 Análisis del entorno del trabajo

En algunas aplicaciones la interfaz de usuario para un sistema de

computo se coloca en un lugar amigable para el usuario por ejemplo
iluminación apropiada, buena altura de la pantalla, fácil acceso al teclado
entre otros.
Además los factores de entorno físico la cultura del lugar de trabajo
también incide aquí también los factores de entorno físico la cultura del
lugar de trabajo también incide, es necesario responder algunas que otras
preguntas tales son.
 Pasos del diseño de la interfaz

En el proceso de diseño de una interfaz de usuario se pueden distinguir

cuatro fases o pasos fundamentales:

1.Reunir y analizar la información del usuario

2.Diseñar la interfaz de usuario
3.Construir la interfaz de usuario
4.Validar la interfaz de usuario
Temas de diseño:
A medida que evoluciona el diseño de una interfaz casi
siempre surgen cuatro temas comunes:

1. Tiempo de respuesta del sistema.

2. Funciones de ayuda para el usuario.

3. Manejo de información de error.

4. Rotulado de comandos.
1. Tiempo de respuesta
En general, se mide desde el punto en que el usuario realiza alguna
acción de control (como oprimir la tecla Return o hacer clic con el
ratón) hasta que el software responde con la salida o la acción
deseada.
Cada vez que el programa tiene que pasar mucho tiempo(mas de 1 segundo)
ejecutando un proceso, el usuario debe recibir una indicación de que el proceso
se esta produciendo. Esta indicación debe ser:

I. Para procesos con un tiempo de ejecución menor a 5 segundos

1) Colocar el cursor del ratón para indicar el procesamiento que se esta
ejecutando.
2) Indicar el progreso a través del uso de una barra de progreso.

II. Para procesos con un tiempo de ejecución superior a los 5 segundos

3) Seguirlas indicaciones del punto anterior.
4) Utilizar un cuadro de dialogo de progreso para indicar el tratamiento que se
esta produciendo y su tiempo de espera de procesamiento total.
2. Funciones de ayuda para el usuario
•La ayuda estará disponible:
-Ayuda para todas las funciones y en todo momento durante la
interacción del usuario con el sistema.
-Ayuda solo para un subconjunto de todas las funciones y acciones del
sistema.

•La interfaz grafica por la cual se tendrá acceso a la ayuda:

-Entre las opciones se incluyen menú de ayuda.
- Una tecla especial de función o un comando AYUDA.
•Representación de la ayuda
-En una ventana separada.
-Un link a un documento impreso.
-Una sugerencia de una o dos líneas que aparece en un lugar fijo de la pantalla.

•¿Cómo regresará el usuario a la interacción normal?

-Un botón de regreso desplegado en la pantalla
-Una tecla de función
-Una secuencia de control

•Estructura de la información de ayuda

-Estructura plana
-Una jerarquía en capas de información
-Uso de hipertexto
 3. Manejo de errores
Los mensajes de error y los avisos de precaución del sistema son “malas noticias”
que se entregan al usuario de sistema interactivo cuando algo sale mal. En
general todo mensaje de error o aviso de precaución debe contar con las
siguientes características:
•El mensaje debe describir el problema en un lenguaje que el usuario entienda.

•El mensaje debe indicar consejos constructivos sobre la manera de recuperarse del
error.

•El mensaje debe indicar cualquier consecuencia negativa del error para que el usuario
se asegure que no han ocurrido.

•El mensaje debe acompañarse de una pista visual o auditiva.

•El mensaje no debe contener juicios.

4. Rotulación de menús y comandos.
• ¿Cada opción de menú tiene un comando correspondiente?

•¿Qué forma tendrán los comandos?

- Una secuencia de control (como alt-P).
-Teclas de función.
-Palabras escritas por el usuario.

•¿Qué tan difícil será aprender y recordar los comandos? ¿Qué puede hacerse si se olvida un
comando?

•¿El usuario tiene la opción de personalizar o abreviar los comandos?

•¿Las etiquetas de los menús se explican por sí solas dentro del contexto de la interfaz?

•¿Los submenús son consistentes con la función indicada en un elemento principal del menú?
Conceptos de diseño de interfaz usuario
Botones.- un botón es un control por lo general de forma rectangular y
que lleva una etiqueta que puede ser textual o grafica.
Tipo de funcionalidades mas comunes de un botón:
Aceptar
Cancelar
Aplicar /guardar
Salir
Borrar
Menú.-Los menús proporcionan listas de comandos u opciones
que el usuario puede seleccionar para realizar un tarea.

Tipos de menú:
-Barra de menú
-Menú desplegable
-Menú en cascada
Evaluación del diseño
Ciclo de evaluación del diseño de la interfaz

Diseño Preliminar

Construir interfaz prototipo

#1

Construir interfaz prototipo

#n

Se realizan modificaciones al El usuario

diseño Evalúa la
Interfaz

El diseñador estudia la
evaluación

Diseño de la interfaz completo

1. La longitud y complejidad de la especificación escrita del sistema y su
interfaz indican la cantidad de aprendizaje necesario para los usuarios del
sistema.

2. El número especificado de tareas del usuario y el promedio de acciones por

tarea indican el tiempo de interacción y la eficacia global del sistema.

3. La cantidad de acciones, tareas y estados del sistema que indica el modelo de

diseño se relaciona con la carga de memoria que recae en los usuarios del
sistema.

4. El estilo de la interfaz, las funciones de ayuda y el protocolo de manejo de

errores indican en forma general la complejidad de la interfaz y el grado de
aceptación del usuario.
Por su atención…