Anlisis de Sistemas Cursos: 2K7 2K10

Unidad: 6
Prototipo de Interfaz de Usuario
- Diapositivas de clases

Docentes: Ing. Marcela F. Cattaneo

JTP : Ing. Claudia E. Snchez

Auxiliares Docentes:
2K7: Ing. Germn E. Vlez
2K10: Ing. Susana Turanzas

Prototipo de Interfaz de Usuario

Aunque las interfaces basadas en texto an se
utilizan, especialmente en los sistemas heredados,
los usuarios actuales de sistemas informticos
esperan que las aplicaciones tengan algn tipo de
interfaz grfica de usuario.
Este tipo de interfaces se caracterizan por el uso
de los siguientes elementos:
Ventanas: Las ventanas mltiples permiten que se
despliegue simultneamente informacin diversa en la
pantalla del usuario.
conos: Los conos representan diferentes tipos de
informacin. En algunos sistemas los conos
representan archivos y en otros representan procesos.
ASI Diapositivasdeclases:PrototipodeInterfazdeUsuario 2

1
Prototipo de Interfaz de Usuario
Mens: Los comandos se seleccionan de un men
en lugar de teclearse en un lenguaje de rdenes.
Apuntador: Para seleccionar las opciones de un
men, indicar elementos de inters en una ventana
o dirigirse a alguna parte de la ventana se utiliza
un dispositivo apuntador como el mouse
(ratn).
Grficos: Los elementos grficos se pueden
mezclar con texto en el mismo despliegue.

ASI Diapositivasdeclases:PrototipodeInterfazdeUsuario 3

Prototipo de Interfaz de Usuario

Ventajas de las GUI
Fciles de aprender y utilizar
Para interactuar con el sistema los usuarios
cuentan con pantalla mltiples (ventanas), es
posible ir de una tarea a otra sin perder de vista
la informacin generada durante la primera
tarea.
Es posible interactuar rpidamente y tener
acceso inmediato a cualquier punto de la
pantalla
ASI Diapositivasdeclases:PrototipodeInterfazdeUsuario 4

2
 Prototipo de Interfaz de Usuario
El proceso de diseo de la IU

Analizar y Producir un
comprender las prototipo del Evaluar el diseo con los
actividades diseo en papel usuarios finales
del usuario

Producir el
Disear el prototipo Evaluar el diseo con
prototipo del los usuarios finales
diseo dinmico

Implementar la
Prototipo ejecutable
interfaz del usuario
final

ASI Diapositivasdeclases:PrototipodeInterfazdeUsuario 5

Prototipo de Interfaz de Usuario

Principios de diseo de la interfaz de usuario
Tener en cuenta las capacidades fsicas y mentales de
la gente que utilizar el software.
Las personas olvidan fcilmente y cometen varios
errores cuando tienen que manejar demasiada
informacin o estn bajo presin, pero poseen un
amplio rango de capacidades fsicas.
Las habilidades humanas son la base para los
principios de diseo que se muestran a continuacin:

ASI Diapositivasdeclases:PrototipodeInterfazdeUsuario 6

3
Prototipo de Interfaz de Usuario
Principios de diseo de la interfaz de usuario:
Familiaridad del usuario: La Interfaz debe utilizar
trminos y conceptos que se toman de la experiencia
de las personas que ms utilizan el sistema.
Consistencia: La interfaz debe ser consistente en el
sentido de que las operaciones comparables se activan
de la misma forma.
Mnima sorpresa: El comportamiento del sistema no
debe provocar sorpresa a los usuarios.

ASI Diapositivasdeclases:PrototipodeInterfazdeUsuario 7

Prototipo de Interfaz de Usuario

Principios de diseo de la interfaz de usuario:
Recuperabilidad: La interfaz debe incluir
mecanismos para permitir a los usuarios recuperarse
de los errores (confirmacin de acciones destructivas
proveer un recurso para deshacer)
Gua al usuario: Cuando los errores ocurren, la
interfaz debe proveer retroalimentacin significativa y
caractersticas de ayuda sensible al contexto.
Diversidad de usuarios: La interfaz debe provee
caractersticas de interaccin apropiada para los
diferentes tipos de usuarios del sistema.

ASI Diapositivasdeclases:PrototipodeInterfazdeUsuario 8

4
 Prototipo de Interfaz de Usuario
Interaccin del usuario
Manipulacin directa (arrastrar ... para mover o
eliminar un archivo)
Seleccin de mens (seleccionar el archivo y luego
seleccionar mover o eliminar)
Llenado de formularios: El usuario llena campos de
un formulario, puede tener mens asociados, botones,
etc.
Lenguaje de comandos: El usuario indica un comando
especial y parmetros necesarios (DEL nota.txt )
Lenguaje natural: emitir un comando en lenguaje
natural (borrar el archivo nota.txt)

ASI Diapositivasdeclases:PrototipodeInterfazdeUsuario 9

Prototipo de Interfaz de Usuario

Presentacin de la informacin al usuario
Como texto: utilizada generalmente cuando se
requiere informacin numrica precisa y la
informacin cambia relativamente lento.
Como grfico: utilizada generalmente cuando los
datos cambian rpidamente o si las relaciones entre los
datos son significantes (uso de grficos de barra,
curva, torta, etc).

ASI Diapositivasdeclases:PrototipodeInterfazdeUsuario 10

5
Prototipo de Interfaz de Usuario
Uso del color en el diseo de la interfaz:
En general, los sistemas interactivos permiten
despliegues a color y los diseadores de interfaces de
usuario utilizan el color de diferentes formas.
El uso del color en las interfaces puede resultar de
utilidad ayudando a los usuarios a comprender y
manejar la complejidad.
Sin embargo, si el color es utilizado de manera
errnea puede conducir a interfaces poco atractivas,
fatigosas para la vista y propensas a errores.

ASI Diapositivasdeclases:PrototipodeInterfazdeUsuario 11

Prototipo de Interfaz de Usuario

Recomendaciones respecto del uso del
color en las interfaces:
Limitar el nmero de colores utilizados, ser
conservador
Utilizar un cambio de color para mostrar un
cambio en el estado del sistema.
Utilizar el cdigo de colores para apoyar la
tarea que los usuarios estn tratando de llevar
a cabo (identificar instancias anmalas o
similitudes)
ASI Diapositivasdeclases:PrototipodeInterfazdeUsuario 12

6
Prototipo de Interfaz de Usuario
Utilizar el cdigo de colores en forma
consciente y consistente: Si en una parte se
muestran Msj de error en rojo, hacerlo as en
las dems.
Ser cuidadoso al utilizar pares de colores: Por
la fisiologa del ojo las personas no pueden
enfocar el rojo y el azul simultneamente.
Vista cansada despliegue de rojo sobre
azul, otras combinaciones tambin son
pertubadoras o difciles de leer.

ASI Diapositivasdeclases:PrototipodeInterfazdeUsuario 13

Prototipo de Interfaz de Usuario

Elementos de una interfaz grfica de usuario
Ventana de aplicacin con men y opciones
Nombre de la ventana actual

sistema

Clientes Men

Nuevo

Facturar
Opciones del men

Resmen

ASI Diapositivasdeclases:PrototipodeInterfazdeUsuario 14

7
 Prototipo de Interfaz de Usuario
Elementos de una interfaz grfica de usuario
Elementos a utilizar en ventana (formulario) de
conos para modificar tamao de
carga de datos la ventana, minimizar o cerrar
|
a)
Panel
linea 1
linea2 Combo
Lista desplegable

Grupo Edit Campo de texto

Por pantella
Por impresora
Check 1 Check box
Radio buttons (no excluyentes)
(mutuamente excluyentes Check 1
dentro del grupo)

bloque de texto OK Botn

ABC

conos
Campo memo
ASI Diapositivasdeclases:PrototipodeInterfazdeUsuario 15

Prototipo de Interfaz de Usuario

Elementos de una interfaz grfica de usuario
Elementos a utilizar en ventana (formulario) de
carga de datos
Pestaas
b)

Grilla

ASI Diapositivasdeclases:PrototipodeInterfazdeUsuario 16

8
 Prototipo de Interfaz de Usuario
Elementos de una interfaz grfica de usuario
Elementos a utilizar en ventana (formulario) de
carga de datos Ventana de asistente
c) Nombre de la
ventana actual Panel

Barras de avance
(distintos tipos)
62
Botn

Botones de < Back Next > Cancel

Navegacin

ASI Diapositivasdeclases:PrototipodeInterfazdeUsuario 17

Prototipo de Interfaz de Usuario

Bibliografa
Sommerville Ian, Ingeniera de
Software, 7ma. ed. (2006), Ed. Addison
Wesley, Captulo 16

ASI Diapositivasdeclases:PrototipodeInterfazdeUsuario 18