IDS5501

Diseo de Interfaces de Software

V.1.0
@josebovet
Clase anterior

Principios del diseo de Arquitectura

Introduccin a la Arquitectura de Software.

Gneros Arquitectnicas
Estilos Arquitectnicos.
Diseo Arquitectnico.
Evaluacin de los diseos alternativos para la
Arquitectura.

2
Objetivos de las clase

Diseo de la interfaz de Usuario

Reglas doradas
Anlisis y diseo de la interfaz de usuario.
Anlisis de la Interfaz.
Etapas del diseo.
Diseo de una interfaz para aplicaciones Web.
Evaluacin del diseo.

3
Introduccin

4
Qu es?
Qu es?

El diseo de la interfaz de usuario crea un medio eficaz de comunicacin entre

los seres humanos y la computadora.
Sigue un conjunto de principios de diseo que identifican los objetos y
acciones para luego crear plantillas de pantalla que constituyen la base del
prototipo de la interfaz de usuario.

6
Reglas Doradas
Reglas de ORO

El plano de una casa (su diseo arquitectnico) no est completo

sin la representacin de puertas, ventanas y conexiones de
servicios para el agua, electricidad, telfono y t.v. por cable.

Las puertas, ventanas y conexiones de servicios del software

informtico es lo que constituye el diseo de la interfaz de
usuario.

8
Reglas de ORO

El diseo de la interfaz se centra en tres reas de inters:

1) El diseo de la interfaz entre los componentes del software;

2) El diseo de las interfaces entre el software y los otros productores
y consumidores de informacin no humanos (esto es, otras
entidades externas);
3) El diseo de la interfaz entre el hombre (usuario) y la computadora.
Aqu nos centramos slo en la tercera categora (diseo de interfaz del
usuario).

9
Las 3 Reglas

Hay tres reglas de oro para el diseo de la interfaz:

1. Dar el control al usuario.

2. Reducir la carga de memoria del usuario.
3. Construir una interfaz consecuente.

Estas reglas de oro son la base para los principios del

diseo de la interfaz de usuario que servirn de gua para
esta actividad de diseo.

10
Dar el Control al Usuario

11
Dar el Control al Usuario

Un usuario una vez dijo, con respecto a las interfaces: Lo

que me gustara realmente es un sistema que lea mi mente.
Que conozca lo que quiero hacer antes de necesitarlo y que
me facilite hacerlo. Simplemente eso.

No hay nada malo en la solicitud del usuario.

Lo que quiere es que el sistema reaccione ante sus necesidades y le
ayude a hacer las cosas.
Quiere controlar a la computadora, y no dejar que la computadora lo
controle a l.

12
Dar el Control al Usuario

La mayor parte de las restricciones y limitaciones impuestas por el

diseador se han pensado para simplificar la interaccin.
Pero, para quienes?.
En muchos casos, el diseador introduce limitaciones y
restricciones para simplificar la implementacin de la interfaz.
Y el resultado puede ser una interfaz fcil de construir, pero
frustrante de utilizar.

13
Dar el Control al Usuario

Hay principios de diseo que permiten dar control al usuario:

Definir la interaccin de manera que no obligue a que el usuario realice
acciones innecesarias y no deseadas.

Si en un procesador de textos se selecciona el corrector ortogrfico, el software pasa

a modo corrector ortogrfico.
No hay por qu obligar al usuario a permanecer en este modo, si desea continuar
editando el texto.
El usuario debe poder entrar y salir de este modo sin esfuerzo.
14
Dar el Control al Usuario

Cmo se disean las interfaces que dan el control al usuario?.

Tener en consideracin una interaccin flexible.
Como diferentes usuarios tienen preferencias de interaccin
diferentes, se debern proporcionar diferentes selecciones.

15
Dar el Control al Usuario

Por ejemplo, un software que permita al usuario interactuar

a travs de rdenes del teclado, con ratn, lpiz
digitalizador, mediante rdenes para el reconocimiento de
voz, etc.

Sin embargo, no toda accin responde a todo mecanismo

de interaccin

16
Dar el Control al Usuario

No se puede dibujar una forma compleja mediante rdenes del

teclado (o entrada de voz).
17
Dar el Control al Usuario

Permitir que la interaccin del usuario se pueda interrumpir y

deshacer.

Cuando un usuario se ve involucrado en una secuencia de

acciones, debe poder interrumpir la secuencia, para hacer
cualquier otra cosa, (sin perder el trabajo que se hubiera hecho
anteriormente).
El usuario deber tambin tener la posibilidad de deshacer
cualquier accin.

18
Dar el Control al Usuario

Aligerar la interaccin a medida que avanza el nivel de

conocimiento y permitir personalizar la interaccin.

El usuario a menudo se encuentra haciendo la misma

secuencia de interacciones de manera repetida.
Se podra implementar un mecanismo de macros que
permita al usuario personalizar la interfaz y facilitar la
interaccin.

19
Dar el Control al Usuario

Ocultar al usuario ocasional los entretelones tcnicos.

La interfaz de usuario deber introducir al usuario en el
mundo virtual de la aplicacin.
El usuario no tiene que conocer el sistema operativo, las
funciones de gestin de archivos, o cualquier otro secreto de
la tecnologa informtica.

20
Dar el Control al Usuario

La interfaz no debe requerir nunca que el usuario interacte a un

nivel interno de la mquina (teclear rdenes del sistema
operativo desde el software de aplicacin).

Disear la interaccin directa con los objetos que aparecen en la

pantalla.
Permitir al manipular los objetos necesarios para llevar a cabo
una tarea de forma similar a lo que ocurrira si el objeto fuera
algo fsico.
Ejemplo de manipulacin directa: interfaz que permita al usuario
alargar un objeto (cambiar su tamao).

21
Reducir la carga de
memoria del
usuario

22
Reducir la carga de memoria

Cuanto ms tenga que recordar un usuario, ms propensa a errores

ser su interaccin con el sistema.
Por eso, una interfaz de usuario bien diseada no pondr a prueba la
memoria del usuario.
El sistema deber recordar la informacin pertinente y ayudar a que
el usuario recuerde mediante un escenario de interaccin.

23
Principios de Diseo - Reducir la carga de memoria
Reducir la demanda de memoria a corto plazo.
Cuando los usuarios se ven involucrados en tareas complejas, exigir una
memoria a corto plazo puede ser significativo.
La interfaz se debe disear para reducir los requisitos y recordar
acciones y resultados anteriores.
Esto se puede llevar a cabo mediante claves visuales que permitan al
usuario reconocer acciones anteriores sin tenerlas que recordar.

24
Principios de Diseo - Reducir la carga de memoria

Establecer valores por defecto tiles.

El conjunto inicial de valores por defecto debe ser de utilidad para al
usuario, pero un usuario tambin debe tener la capacidad de
especificar sus propias preferencias.
Sin embargo, debe disponer de una opcin de reinicializacin que
le permita volver a definir los valores por defecto.

25
Principios de Diseo - Reducir la carga de memoria

Definir atajos intuitivos o mnemotcnicos.

Cuando para disear un sistema se utiliza la mnemotcnica (por
ejemplo, alt-P para invocar la funcin de imprimir), sta deber ir
unida a una accin que sea fcil de recordar (por ejemplo, la primera
letra de la tarea que se invoca).

26
Principios de Diseo - Reducir la carga de memoria

Cmo se pueden disear interfaces que reduzcan la carga de

memoria del usuario?.
El formato visual de la interfaz se deber basar en una metfora
del mundo real.
Un Sistema de Administracin puede utilizar la imagen de la
chequera para conducir al proceso de Pago de Facturas.
Esto permite que el usuario comprenda bien y no tenga que
memorizar una secuencia secreta de interacciones.

27
Principios de Diseo - Reducir la carga de memoria

Desglosar la informacin de forma progresiva.

La interfaz debe organizarse de forma jerrquica.

Se debe presentar un objeto o comportamiento, primero, en un nivel
alto de abstraccin.
Y slo despus de que el usuario indique su preferencia,
seleccionando con el ratn, se mostrarn ms detalles.

28
Construccin de una
interfaz consistente

29
Interfaz Consistente

La interfaz deber adquirir y presentar la informacin de forma

consecuente.
Esto implica :
Que toda la informacin visual est organizada de acuerdo con el
diseo estndar, que se mantiene en todas las presentaciones de
pantallas;
Que todos los mecanismos de entrada sean limitados;
Que los mecanismos para ir de tarea a tarea se hayan implementado
consecuentemente.

30
Principios de diseo para construir una interfaz consecuente

Permitir que el usuario realice una tarea en el contexto adecuado.

Muchas interfaces implementan capas complejas de interacciones

con docenas de imgenes de pantallas.
Es importante proporcionar indicadores (ttulos de ventanas, iconos
grficos, codificaciones en colores consecuentes) que permitan al
usuario conocer el contexto del trabajo que est llevando a cabo.

31
Cmo se pueden construir interfaces consecuentes?

Mantener la consistencia en toda la familia de aplicaciones.

Un conjunto de aplicaciones (o productos) debe implementar las

mismas reglas de diseo para mantener la consistencia en toda la
interaccin.
Los modelos interactivos anteriores han esperanzado al usuario, no
realicemos cambios a menos que exista alguna razn convincente para
hacerlo.

32
Cmo se pueden construir interfaces consecuentes?

Una vez que una secuencia interactiva se ha convertido en un

estndar impuesto (por ejemplo, la utilizacin de alt-S para grabar
un archivo), el usuario espera utilizar esta combinacin en todas
las aplicaciones que se encuentre.
Un cambio podra originar confusin (si usamos alt-S para invocar la
funcin cambiar de tamao).

33
Anlisis del Diseo
de la interfaz de
Usuario
Modelos del Diseo

Para construir una interfaz de usuario efectiva, todo diseo debe

comenzar por conocer los usuarios destino, as como los perfiles de
edad, sexo, habilidades fsicas, educacin, antecedentes culturales o
tnicos, motivacin, objetivos y personalidad.
Existen las siguientes categoras de usuarios:
1) principiantes: en general no tienen conocimientos de la utilizacin
de la aplicacin o del sistema;

35
Modelos del Diseo
2) usuarios espordicos y con conocimientos: poseen un
conocimiento razonable, pero una retencin baja de la informacin
necesaria para utilizar la interfaz.

3) usuarios frecuentes y con conocimientos: poseen el conocimiento

suficiente. Tienen el sndrome del usuario avanzado: individuos que
buscan interrupciones breves y modos abreviados de interaccin.

36
Modelos del Diseo

La Percepcin del Sistema (el modelo de usuario) es la imagen del

sistema que el usuario final tiene en su mente.
Por ejemplo, si se preguntara a un usuario que describiera su forma
de manejar el programa, la respuesta vendra guiada por su
percepcin del sistema.
La precisin de la descripcin depender del perfil del usuario (por
ejemplo, los principiantes responderan con una respuesta muy
elemental) y de su familiaridad con el software.

37
Modelos del Diseo

Un usuario que comprenda bien los sistemas del rubro, aunque haya
trabajado solo una vez con ese software especfico, puede dar una
descripcin ms completa de su funcionamiento, que el
principiante que haya pasado unas cuantas semanas intentando
aprender a usarlo.
La Imagen del sistema es una combinacin de la apariencia del
sistema y la informacin de soporte: libros, manuales, videos,
archivos de ayuda, que describen al sistema.
Cuando la imagen y la percepcin del sistema coinciden, los
usuarios generalmente se sienten a gusto con el software y su
funcionamiento.

38
Modelos del Diseo

El Diseador de la Interfaz debe cumplimentar el principio ms

importante del diseo de la interfaz de usuario: quien conoce al
usuario, conoce las tareas.
Cuando la imagen del sistema y la percepcin del sistema
coinciden, el usuario puede utilizar la aplicacin de forma
efectiva.

39
El Proceso

El proceso de diseo de las interfaces de usuario es iterativo y se

puede representar mediante un modelo espiral similar al abordado
en la Unidad I.
En la Figura siguiente se puede observar que el proceso de diseo de
interfaz de usuario acompaa cuatro actividades distintas:

1. Anlisis y modelado de usuarios, tareas y entornos.

2. Diseo de la interfaz
3. Implementacin de la interfaz
4. Validacin de la interfaz

40
El Proceso - Modelo

41
El Proceso

La espiral implica que cada una de las tareas anteriores aparecern

ms de una vez, en donde a medida que se avanza por la espiral se
representar la elaboracin adicional de los requisitos y el diseo
resultante.
La implementacin implica la generacin de prototipos (forma prctica
para validar lo que se ha diseado).
La actividad de anlisis inicial se concentra en el perfil de los usuarios
que van a interactuar con el sistema.

42
El Proceso

Se registran el nivel de conocimiento, la comprensin del negocio

y la receptividad general del nuevo sistema, y se definen
diferentes categoras de usuarios.
En cada categora se lleva a cabo la explicitacin de los requisitos.
El ingeniero del software intenta comprender la percepcin del
sistema para cada clase de usuario.

43
El Proceso

Una vez definidos los requisitos generales, se lleva a cabo un anlisis

ms detallado de las tareas.
Se identifican, describen y elaboran las tareas que realiza el usuario
para conseguir los objetivos.
El anlisis del entorno de usuario se centra en el entorno del trabajo
fsico.

Se formulan las siguientes preguntas :

Dnde se ubicar fsicamente la interfaz?
Dnde se situar el usuario? Llevar a cabo tareas no relacionadas con la
interfaz?
Se adapta bien el hardware a las limitaciones de luz, espacio o ruido?

44
El Proceso

Objetivo del Diseo de Interfaz: definir un conjunto de objetos y

acciones de interfaz que permitan al usuario llevar a cabo todas las
tareas definidas para que cumplir con todos los objetivos de
usabilidad definidos por el sistema.
La actividad de implementacin comienza con la creacin de un
prototipo que permita evaluar los escenarios de utilizacin.

45
El Proceso - Evaluacin del diseo
La validacin se centra en:

La habilidad de la interfaz para implementar correctamente todas

la tareas del usuario, adecuarse a todas las variaciones de tareas,
y cumplir los requisitos generales del usuario;

El grado de facilidad de utilizacin de la interfaz y de aprendizaje;

La aceptacin de la interfaz, por parte del usuario, como una

herramienta til en su trabajo.

46
Anlisis de la Interfaz del Usuario

Un sistema interactivo, basado en computadora, se usa para

reemplazar una actividad manual o semi-manual.
Primero, un ingeniero deber entender las tareas que realizan los
hombres actualmente (cuando existe un enfoque manual) y
corresponderlas con un conjunto de tareas similares (no
necesariamente idnticas) que se implementan en la interfaz del
usuario.

47
Anlisis del Usuario

Cmo se aprende lo que el usuario quiere de la

interfaz?

48
Anlisis del Usuario

Para ello, se utiliza informacin procedente de una variedad amplia de

fuentes:
Entrevistas: Miembros del equipo de software se renen con los usuarios para
entender mejor sus necesidades, motivaciones, cultura laboral y una multitud de
aspectos adicionales.
Informacin de Ventas: El personal de ventas habla con los usuarios de manera
regular y recaba informacin que ayuda al equipo de software a clasificarlos y a
entender mejor sus requerimientos.
Informacin de Mercadotecnia:El anlisis del mercado es invaluable para la
definicin de segmentos del mercado y su comprensin.
Informacin de Apoyo:Constituye la fuente de informacin ms probable acerca
de lo que funciona y lo que no, lo que les gusta a los usuarios y lo que les
desagrada, qu caractersticas generan preguntas y cules son fciles de usar.

49
Preguntas de ayuda para el Anlisis del Usuario.
Los usuarios son profesionales capacitados, tcnicos, oficinistas o trabajadores de manufactura?

Qu nivel de educacin formal tiene el usuario promedio?

Los usuarios son capaces de aprender mediante materiales escritos o han manifestado

el deseo de recibir enseanzas en un aula?

Los usuarios son mecangrafos expertos o tienen fobia a los teclados?

Cul es el rango de edades de la comunidad de usuarios?

Los usuarios estarn representados sobre todo por un gnero?

Cmo se compensa a los usuarios por el trabajo que realizan?

Los usuarios trabajan en un horario normal de oficina o hasta terminar el trabajo que hacen?

El software va a ser parte integral del trabajo de los usuarios o slo lo emplearn de manera
ocasional?

Cul es el idioma principal de los usuarios?

Cules son las consecuencias si el usuario comete un error al emplear el sistema? Los usuarios
son expertos en el tema en el que est centrado el sistema?
Los usuarios quieren saber sobre la tecnologa que hay tras la interfaz?
50
Anlisis y modelado de la tarea

Al observar el ambiente de trabajo, el ingeniero se da cuenta que el

mismo se compone de una serie de actividades importantes.
Todas estas tareas se conforman de varias subtareas.

Hay subtareas que se podrn llevar a cabo automticamente en el

software, con muy poca interaccin directa con el usuario.
La interfaz deber adaptarse a cada tarea, de forma consecuente.

51
Pasos a seguir - Anlisis de la tarea

Finalizado el Anlisis de Tareas, quedan definidas detalladamente

todas (objetos y acciones) que requiere el usuario final y comienza la
actividad del Diseo de la Interfaz.
Cules son los pasos que hay que seguir para llevar a cabo el diseo
de la Interfaz?

52
Pasos - Anlisis de la tarea

1. Establecer los objetivos e intenciones para cada tarea.

2. Hacer corresponder cada objetivo/intencin con una secuencia de acciones
especficas.
3. Especificar la secuencia de acciones: tareas y subtareas (escenario del
usuario), y la manera en que se ejecutarn en la interfaz.
4. Indicar el estado del sistema: aspecto que tiene la interfaz cuando se est
llevando a cabo el escenario del usuario.
5. Definir los mecanismo de control: objetos y acciones disponibles para que
el usuario altere el estado del sistema.
6. Mostrar cmo los mecanismos de control afectan al estado del sistema.
7. Indicar cmo el usuario interpreta el sistema a partir de la informacin
proporcionada por la interfaz.
53
Anlisis del contenido de la pantalla

Cmo se determina el formato y la esttica del

contenido desplegado como parte de la interfaz de
usuario?

54
Anlisis del contenido de la pantalla

Con posterioridad, se lleva a cabo el anlisis de la pantalla.

Es un proceso interactivo de diseo grfico y en l efectuamos:
A) colocacin de iconos,
B) definicin de textos descriptivos en pantalla,
C) especificacin y ttulos para ventanas,
D) definicin de elementos principales y secundarios del men .

55
Anlisis del contenido de la pantalla
Cmo se determina el formato y la esttica del contenido desplegado
como parte de la interfaz de usuario?
Respondiendo a estas preguntas:
Se asignan diferentes tipos de datos a sitios consistentes en la geografa de la
pantalla (por ejemplo, las fotografas aparecen siempre en la esquina superior
derecha)?
El usuario puede personalizar la ubicacin del contenido en la pantalla?
Se asigna una identificacin apropiada a todo el contenido que hay en la pantalla?
Si se presenta un reporte grande, cmo debe dividirse para facilitar su comprensin?
Se dispondr de mecanismos para pasar directamente a informacin resumida de
grandes conjuntos de datos?
Las salidas grficas estarn a escala para que se ajusten a los bordes del dispositivo
de pantalla que se utilice?
Cmo se emplear el color para mejorar la comprensin?
De qu manera se presentar al usuario los mensajes de error y las advertencias?

56
Etapas y aspectos
del Diseo
Etapas del diseo

1.Definir objetos y acciones de la interfaz (operaciones) con el uso de

la informacin desarrollada en el anlisis de la interfaz.

2.Definir eventos (acciones del usuario) que harn que cambie el

estado de la interfaz de usuario. Hay que modelar este
comportamiento.

3.Ilustrar cada estado de la interfaz como lo vera en la realidad el

usuario final.

4.Indicar cmo interpreta el usuario el estado del sistema a partir de

la informacin provista a travs de la interfaz.

58
Etapas del diseo

En ciertos casos, se comienza con bosquejos de cada estado de la

interfaz y despus se trabaja hacia atrs para definir objetos,
acciones y otra informacin importante del diseo.
Sin importar la secuencia de las tareas de diseo, debe:

1) Siempre apegarse a las reglas doradas estudiadas en la seccin.

2) Modelar la forma en la que se va a implementar la interfaz .
3) Considerar el ambiente (por ejemplo, tecnologa de la pantalla,
sistema operativo, herramientas de desarrollo, etc.) que se
emplear.

59
Aspectos y problemas del diseo

Un error comn que cometen las personas cuando tratan de disear

algo por completo a prueba de tontos es subestimar la ingenuidad de
los tontos completos.

60
Aspectos y problemas del diseo

A medida que la interfaz de usuario va evolucionando, afloran 6 temas

comunes de diseo:

1) el tiempo de respuesta del sistema,

2) los servicios de ayuda al usuario,
3) la manipulacin de informacin de errores
4) leyendas del men y de los comandos.
5) accesibilidad de la aplicacin..
6) Internacionalizacin.

Desgraciadamente, muchos diseadores no abordan estos temas

dentro del proceso de diseo hasta que es relativamente tarde (a
veces no se advierte un error hasta contar con el prototipo operativo).

61
Tiempo de respuesta del sistema

El resultado suele ser una iteracin innecesaria, demoras y

frustracin del usuario.
Es mejor encarar el tema al iniciar el diseo del software, cuando
los cambios son fciles y los costos, menores.
En muchas aplicaciones interactivas el tiempo de respuesta del
sistema es el principal motivo de queja.
El tiempo de respuesta del sistema se mide desde que el usuario
realiza la accin de control (pulsar la tecla ENTER o el botn del
ratn) hasta que el software responde con la accin deseada.

62
Tiempo de respuesta del sistema

63
Tiempo de respuesta del sistema

El tiempo de respuesta del sistema tiene dos caractersticas

importantes: la duracin y la variabilidad.
Si a duracin de la respuesta del sistema es demasiado larga,
tendremos como resultado la frustracin y el estrs del usuario.
Sin embargo, un tiempo de respuesta rpido puede obligar a que el
usuario se precipite y cometa errores.

64
Tiempo de respuesta del sistema
La variabilidad es la desviacin del tiempo de respuesta promedio, y
puede ser la caracterstica ms importante del tiempo de respuesta.

Una variabilidad baja permite al usuario establecer un ritmo de

interaccin, aunque el tiempo de respuesta sea relativamente largo.

Si una respuesta demora entre 0,1 a 2,5 segundos, el usuario estar

desconcertado y se preguntar qu habr pasado detrs de la
escena.

En esos casos, convendra ms reiterarle la misma pregunta o

peticin a estar sujeto a tan amplia variabilidad del tiempo de
respuesta.
65
Servicios de ayuda al usuario
Los usuarios de sistemas interactivos siempre requieren ayuda.
Hay 2 tipos de funciones de ayuda ms comunes: las integradas y las
complementarias (aadibles).

Funcin de ayuda integrada: se disea dentro del mismo software

desde el principio.

Es sensible al contexto => permite al usuario seleccionar entre los

temas relevantes para las acciones que est llevando a cabo en ese
momento.
Reduce el tiempo requerido para obtener ayuda, e incrementa su
familiaridad con la interfaz.

66
Servicios de ayuda al usuario
Cuando se va a considerar un servicio de ayuda debern abordarse
los siguientes temas de diseo:
Se necesitarn todas las funciones del sistema en cualquier
momento durante la interaccin del sistema? .
Opciones: ayuda solo para un subconjunto de funciones o ayuda
para todas las funciones.
Cmo solicitar ayuda el usuario?.
Opciones: men de ayuda; una tecla de funcin especial; una
orden de AYUDA.

67
Servicios de ayuda al usuario

Cmo se representar la ayuda?.

Opciones: una ventana separada, una referencia a un documento
impreso (no recomendable); una sugerencia de una o dos lneas que
surge en una localizacin fija en la pantalla.
Cmo regresar el usuario a la interaccin normal?.
Opciones: botn de retorno visualizado en la pantalla; tecla de
funcin o una secuencia de control.

68
Servicios de ayuda al usuario

Cmo se estructurar la informacin sobre la pantalla?

Opciones: una estructura plana; una jerarqua estratificada de
informacin que va proporcionando ms datos a medida que el
usuario va entrando por la estructura; la utilizacin de hipertexto.

69
Manipulacin de informacin de errores

70
Manipulacin de informacin de errores

Cuando ha salido algo mal, los mensajes de error y las sugerencias

son malas noticias para los usuarios.
En muchos casos, estos mensajes brindan informacin engaosa o
insuficiente y sirven slo para aumentar la frustracin del usuario.
Muchos usuarios se han encontrado con un error as: FALLO GRAVE
DEL SISTEMA - - 14A.
Este mensaje de error no indica qu significa o dnde mirar para
obtener ms informacin.

71
Manipulacin de informacin de errores

Un mensaje de error as no alivia la ansiedad del usuario ni soluciona

el problema.
Los mensajes de error deben tener estas caractersticas:
Debe describir el problema en trminos que el usuario entienda.
Debe dar consejos constructivos para recuperarse de un error.
Debe indicar las consecuencias negativas del error (archivos de
datos posiblemente daados); para que el usuario lo pueda
corregir, en caso de existir.

72
Manipulacin de informacin de errores

El mensaje debe ir seguido por una clave audible o visual (segn

Pressman).
Para acompaar la visualizacin del mensaje se podra generar un
pitido, o aparecer momentneamente una luz destelleante o
visualizarse en un color que se pueda reconocer fcilmente como el
color del error.
El mensaje no deber tener sentencias => el mensaje no debe
culpar al usuario.
A nadie le gusta tener malas noticias.

73
Leyendas del men y de los comandos.

Como ya se dijo, en todas las aplicaciones deben establecerse

convenciones para el uso de los comandos.

Con frecuencia resultan confusos y se facilita que el usuario cometa

errores si tiene que escribir alt-D cuando se ha de duplicar un objeto
grfico en una aplicacin y alt-D cuando ha de eliminarse en otra.

Resulta obvio el potencial que hay para el error.

74
Leyendas del men y de los comandos.

Toda opcin de men tiene un comando correspondiente?

Qu forma tendrn los comandos? Las opciones incluyen una
secuencia de control (por
ejemplo, alt-P), teclas de funcin o palabras escritas.
Cun difcil ser aprender y recordar los comandos? Qu puede
hacerse si se olvida un comando?
Los comandos pueden ser personalizados o abreviados por el
usuario?
Las leyendas del men se explican por s mismas en el contexto de
la interfaz?
Son consistentes los submens con la funcin implicada por un
tema maestro del men?

75
Accesibilidad de la aplicacin.

Asegurarse de que el diseo de la interfaz incluya mecanismos que

permitan el acceso fcil de las personas con necesidades
especiales.

La accesibilidad para los usuarios que tengan discapacidades

fsicas es un imperativo por razones ticas, legales y comerciales.

76
Internacionalizacin.

El desafo para los diseadores de interfaces es crear un software

globalizado.
Las interfaces de usuario deben emplearse para que incluyan un
ncleo general de funcionalidad que se distribuya a todos
aquellos que utilicen el software.
Las caractersticas de localizacin permiten que la interfaz se
personalice para un mercado especfico.

77
Diseo de una
interfaz para
webapps
Diseo Interfaz de aplicaciones web

Toda aplicacin de software tradicional, producto de consumo o

dispositivo industrial debe tener caractersticas de usabilidad.

Dnde estoy? La interfaz debe:

1) dar una indicacin de la webapp a la que se ha accedido.
2) Informar al usuario de su localizacin en la jerarqua del contenido.
Qu puedo hacer ahora?
La interfaz siempre debe ayudar al usuario a entender sus opciones actuales:
cules funciones estn disponibles, qu vnculos estn vivos, qu contenido
es relevante, etc.
Dnde he estado, hacia dnde voy? La interfaz debe facilitar la navegacin.
Para ello, debe disponer un mapa (implementado en forma tal que sea fcil
de entender) que indique dnde ha estado el usuario y las trayectorias que
pueden tomarse para moverse a cualquier punto de la aplicacin.
79
Principios y lineamientos del diseo de la interfaz

Se definen un conjunto de caractersticas fundamentales que todas las

interfaces deben tener y con ello establece la filosofa que todo
diseador de interfaces de webapps debe seguir.

80
Principios y lineamientos del diseo de la interfaz

Las interfaces eficaces son atractivas visualmente y perdonan los

errores, lo que da a sus usuarios la sensacin de tener el control.

Los usuarios perciben rpidamente la totalidad de sus opciones, captan

cmo lograr sus metas y cmo hacer su trabajo.

81
Principios y lineamientos del diseo de la interfaz

Las interfaces eficaces no preocupan al usuario con el funcionamiento

interno del sistema.

El trabajo se guarda de manera cuidadosa y continua, con opcin total

para que el usuario deshaga cualquier actividad en cualquier
momento.

Las aplicaciones y servicios eficaces realizan un mximo de trabajo, al

tiempo que requieren un mnimo de informacin de parte de los
usuarios.

82
Principios generales del diseo

Previsin Aprendizaje
Comunicacin Metforas
Consistencia Mantener integridad.
Autonoma Controlada Legibilidad
Eficiencia Seguimiento de estado
Flexibilidad Navegacin Visible
Centrarse
Objetos de la interfaz humana.
Redundancia de la latencia.

83
Previsin

Una aplicacin web debe disearse de modo que prevea el siguiente

movimiento del usuario.

Por ejemplo, considere una webapp de ayuda al cliente desarrollada por

un fabricante de impresoras para computadora.

El diseador de la webapp debe prever que el usuario tal vez pida

descargar el controlador y debe brindar facilidades de navegacin que lo
permitan, sin requerir que el usuario busque esta capacidad.

84
Comunicacin.

La interfaz debe comunicar el estado de cualquier actividad iniciada por el

usuario.

La comunicacin puede ser obvia (por ejemplo, un mensaje de texto) o

sutil (como la imagen de una hoja de papel que se mueva a travs de
una impresora para indicar que hay una impresin en curso).

La interfaz tambin debe comunicar el estado del usuario (como su

identificacin) y su ubicacin dentro de la jerarqua del contenido de la
webapp.

85
Consistencia.

El uso de controles de navegacin, mens, iconos y esttica (color, forma y

distribucin) debe ser consistente en la webapp.

Por ejemplo, digamos un rectngulo en amarillo, que se utilice para indicar un

mensaje de precaucin antes de que el usuario invoque una funcin o
accin particular, no debe usarse para otros propsitos en ningn otro
lugar de la webapp.

86
Autonoma Controlada

La interfaz debe facilitar el movimiento del usuario a travs de la webapp,

pero lo debe hacer de manera que obligue a respetar las convenciones que
se hayan establecido para la aplicacin.

Por ejemplo, debe controlarse la navegacin hacia partes seguras de la

webapp por medio de la identificacin y clave del usuario, y no debe haber
ningn mecanismo de navegacin que permita que un usuario evite dichos
controles.

87
 Eficiencia

El diseo de la webapp y su interfaz deben optimizar la eficiencia del trabajo

del usuario, no la del desarrollador que la disea y construye ni del ambiente
cliente-servidor que la ejecuta.

Esta sencilla verdad explica por qu es tan importante que todos los
involucrados en un proyecto de software aprecien la importancia de hacer
que la productividad del usuario sea la meta nmero uno, y de entender la
diferencia vital entre construir un sistema eficiente y dar poder a un usuario
eficiente.

88
Flexibilidad

La interfaz debe tener flexibilidad suficiente para permitir que algunos

usuarios realicen tareas directamente, y que otros exploren la webapp en
forma aleatoria.

En cada caso, debe permitir al usuario entender dnde se encuentra y darle

la funcionalidad para deshacer errores y volver a trazar trayectorias de
navegacin mal elegidas.

89
Centrarse

La interfaz de la webapp (y el contenido que presente) debe mantenerse

centrada en las tareas en curso del usuario.

En todos los medio de hipertexto, existe la tendencia a llevar al usuario a

contenido poco relacionado.

Por qu? Porque es muy fcil hacerlo... El problema es que el usuario puede
extraviarse con rapidez en muchas capas de informacin de apoyo y perder
de vista el contenido original que buscaba inicialmente.

90
Objetos de la interfaz humana.

Se ha desarrollado una amplia biblioteca de objetos reutilizables de

interfaces humanas para webapps.

selas. Cualquier objeto de interfaz que pueda ser visto, escuchado,

tocado o percibido de otro modo por un usuario final, puede obtenerse
de alguna, entre muchas, libreras de objetos.

91
Reduccin de Latencia

En vez de hacer que el usuario espere a que termine alguna operacin interna (como
descargar una imagen grfica compleja), la webapp debe usar tareas mltiples, de
manera que permita que el usuario contine con su trabajo mientras finaliza la
operacin.

Adems de reducir la latencia, los retrasos deben explicarse de modo que el usuario
entienda lo que est pasando.

Esto incluye:
1) Dar retroalimentacin auditiva cuando una seleccin no d como resultado una accin
inmediata por parte de la webapp,
2) Desplegar un reloj con animacin o una barra de avance que indique que hay un
procesamiento en marcha
3) Dar alguna distraccin (presentacin o texto animado) cuando tenga lugar un
procesamiento tardado.

92
Aprendizaje

Una interfaz de webapp debe disearse para minimizar el tiempo de

aprendizaje y, una vez aprendida, minimizar el que se dedique a
reaprender cuando se regrese a la webapp.

En general, la interfaz debe hacer nfasis en un diseo sencillo e

intuitivo que organice el contenido y funcionalidad en categoras que
resulten obvias para el usuario.

93
Metaforas

Una interfaz que use una metfora de interaccin es ms fcil de

aprender y de usar, en la medida en la que la metfora sea apropiada
para la aplicacin y el usuario.

Una metfora debe recurrir a imgenes y conceptos salidos de la

experiencia del usuario, pero no necesita ser una reproduccin exacta
de una experiencia del mundo real.

Carrito de compras

94
Mantener la integridad de los productos del trabajo.

Un producto del trabajo (por ejemplo, un formulario llenado por un

usuario) debe guardarse en forma automtica, de modo que no se pierda
si ocurriera un error.

Todos hemos experimentado la frustracin que surge cuando al terminar

de llenar un formulario extenso en una webapp, se pierde su contenido
debido a un error.

La interfaz debe apoyar esta funcin y dar al usuario un mecanismo fcil

de recuperacin de la informacin perdida.

95
Legibilidad

Toda la informacin presentada en la interfaz debe ser legible para todo

segmento de la poblacin.

El diseador de la interfaz debe hacer nfasis en estilos legibles para las

letras, en su tamao y en el color del fondo, que debe contrastar.

96
Seguimiento de Estado

Cuando resulte apropiado, debe darse seguimiento al estado de la

interaccin del usuario y guardarlo, de modo que ste pueda salir y
volver ms tarde para recuperarlo de donde lo haya dejado.

En general, las cookies pueden disearse para que guarden informacin

del estado. Sin embargo, son una tecnologa controvertida y para
ciertos usuarios resultan ms atractivas otras soluciones de diseo.

97
Navegacin Visible

Una interfaz de webapp bien diseada da la ilusin de que los usuarios

estn en el mismo lugar, con el trabajo llevado a ellos

Cuando se emplea este enfoque, la navegacin no es asunto del usuario.

En vez de ello, ste recupera objetos del contenido y selecciona
funciones que se despliegan y ejecutan a travs de la interfaz.

98
Flujos de Trabajo
en el diseo de la
interfaz Web.
Flujos de trabajo

Revisar la informacin contenida en el modelo de requerimientos y

refinarla segn se requiera.
Desarrollar un esquema aproximado de la distribucin de la interfaz
para la webapp.
Mapear los objetivos del usuario en acciones especficas de la interfaz
Definir un conjunto de tareas de usuario asociadas con cada accin.
Elaborar un guin de las imgenes en la pantalla para cada accin de la
interfaz.
Refinar la distribucin de la interfaz y los guiones con entradas del
diseo de la esttica.

100
Flujos de trabajo

Identificar los objetos de la interfaz de usuario requeridos para

implementar la interfaz.
Desarrollar una representacin del procedimiento de la interaccin del
usuario con la interfaz
Desarrollar una representacin del comportamiento de la interfaz.
Describir la distribucin de la interfaz para cada estado.
Refinar y revisar el modelo del diseo de la interfaz.

101
Evaluacin del
Diseo
Evaluacin del Diseo

Una vez que se crea un prototipo operativo de la interfaz de usuario, debe

evaluarse con objeto de determinar si satisfacen las necesidades de
ste.

La evaluacin abarca un espectro de formalidad que va desde una prueba

de manejo informal, en la que el usuario da retroalimentacin
instantnea a un estudio.

103
Ciclo de evaluacin del Diseo

104
Evaluacin del Diseo

El enfoque del prototipo es eficaz, pero es posible evaluar la calidad de una interfaz de usuario
antes de que se construya el prototipo?

Si se identifican y corrigen a tiempo los problemas potenciales, se reducir el nmero de

bucles en el ciclo de evaluacin y disminuir el tiempo de desarrollo

105
 Evaluacin del Diseo
Se pueden aplicar los siguientes criterios de evaluacin durante las primeras revisiones.

1. La longitud y complejidad del modelo de requerimientos o especificaciones escritas del sistema y

su interfaz darn una indicacin de la cantidad de aprendizaje requerido por los usuarios del
sistema.

2. El nmero de tareas del usuario especificadas y el nmero promedio de acciones por tarea
indicarn el tiempo de interaccin de la eficiencia general del sistema.

3. El nmero de acciones, tareas y estados del sistema indicados por el modelo del diseo implicarn
la carga de memoria para los usuarios del sistema.

4. El estilo de la interfaz, las herramientas de ayuda y el protocolo del manejo de errores darn una
indicacin general de la complejidad de la interfaz y de su grado de aceptacin por parte del
usuario.

106
 Prxima clase

PRUEBAS DE SOFTWARE

107