Diseño de la interfaz de usuario

Diseño de Interfaces de Software
IDS5501
V.1.0
@josebovet

2
Clase anterior
• Introducción a la Arquitectura de Software.
• Géneros Arquitectónicas
• Estilos Arquitectónicos.
• Diseño Arquitectónico.
• Evaluación de los diseños alternativos para la
Arquitectura.
Principios del diseño de Arquitectura

3
Objetivos de las clase
• Reglas doradas
• Análisis y diseño de la interfaz de usuario.
• Análisis de la Interfaz.
• Etapas del diseño.
• Diseño de una interfaz para aplicaciones Web.
• Evaluación del diseño.
Diseño de la interfaz de Usuario

6
¿Qué es?
El diseño de la interfaz de usuario crea un medio eficaz de comunicación entre
los seres humanos y la computadora.
Sigue un conjunto de principios de diseño que identifican los objetos y
acciones para luego crear plantillas de pantalla que constituyen la base del
prototipo de la interfaz de usuario.

8
Reglas de ORO
El plano de una casa (su diseño arquitectónico) no está completo
sin la representación de puertas, ventanas y conexiones de
servicios para el agua, electricidad, teléfono y t.v. por cable.
Las «puertas, ventanas y conexiones de servicios» del software
informático es lo que constituye el diseño de la interfaz de
usuario.

9
Reglas de ORO
El diseño de la interfaz se centra en tres áreas de interés:
1) El diseño de la interfaz entre los componentes del software;
2) El diseño de las interfaces entre el software y los otros productores
y consumidores de información no humanos (esto es, otras
entidades externas);
3) El diseño de la interfaz entre el hombre (usuario) y la computadora.
Aquí nos centramos sólo en la tercera categoría (diseño de interfaz del
usuario).

10
Las 3 Reglas
Hay tres «reglas de oro» para el diseño 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
diseño de la interfaz de usuario que servirán de guía para
esta actividad de diseño.

12
Dar el Control al Usuario
“Un usuario una vez dijo, con respecto a las interfaces: «Lo
que me gustaría 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.

13
La mayor parte de las restricciones y limitaciones impuestas por el
diseñador se han pensado para simplificar la interacción.
Pero, ¿para quienes?.
En muchos casos, el diseñador introduce limitaciones y
restricciones para simplificar la implementación de la interfaz.
Y el resultado puede ser una interfaz fácil de construir, pero
frustrante de utilizar.

14
Hay principios de diseño que permiten dar control al usuario:
Definir la interacción 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 ortográfico, el software pasa
a modo corrector ortográfico.
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.

15
¿Cómo se diseñan las interfaces que dan el control al usuario?.
Tener en consideración una interacción flexible.
Como diferentes usuarios tienen preferencias de interacción
diferentes, se deberán proporcionar diferentes selecciones.

16
Por ejemplo, un software que permita al usuario interactuar
a través de órdenes del teclado, con ratón, lápiz
digitalizador, mediante órdenes para el reconocimiento de
voz, etc.
Sin embargo, no toda acción responde a todo mecanismo
de interacción…

17
“No se puede dibujar una forma compleja mediante órdenes del
teclado (o entrada de voz). “

18
Permitir que la interacción 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á también tener la posibilidad de «deshacer»
cualquier acción.

19
Aligerar la interacción a medida que avanza el nivel de
conocimiento y permitir personalizar la interacción.
El usuario a menudo se encuentra haciendo la misma
secuencia de interacciones de manera repetida.
Se podría implementar un mecanismo de «macros» que
permita al usuario personalizar la interfaz y facilitar la
interacción.

20
Ocultar al usuario ocasional los entretelones técnicos.
La interfaz de usuario deberá introducir al usuario en el
mundo virtual de la aplicación.
El usuario no tiene que conocer el sistema operativo, las
funciones de gestión de archivos, o cualquier otro secreto de
la tecnología informática.

21
La interfaz no debe requerir nunca que el usuario interactúe a un
nivel «interno» de la máquina (teclear órdenes del sistema
operativo desde el software de aplicación).
Diseñar la interacción 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 ocurriría si el objeto fuera
algo físico.
Ejemplo de manipulación directa: interfaz que permita al usuario
«alargar» un objeto (cambiar su tamaño).

22
Reducir la carga de
memoria del
usuario

23
Reducir la carga de memoria
Cuanto más tenga que recordar un usuario, más propensa a errores
será su interacción con el sistema.
Por eso, una interfaz de usuario bien diseñada no pondrá a prueba la
memoria del usuario.
El sistema deberá «recordar» la información pertinente y ayudar a que
el usuario recuerde mediante un escenario de interacción.

24
Principios de Diseño - 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 diseñar 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.

25
Establecer valores por defecto útiles.
El conjunto inicial de valores por defecto debe ser de utilidad para al
usuario, pero un usuario también debe tener la capacidad de
especificar sus propias preferencias.
Sin embargo, debe disponer de una opción de «reinicialización» que
le permita volver a definir los valores por defecto.

26
Definir atajos intuitivos o mnemotécnicos.
Cuando para diseñar un sistema se utiliza la mnemotécnica (por
ejemplo, alt-P para invocar la función de imprimir), ésta deberá ir
unida a una acción que sea fácil de recordar (por ejemplo, la primera
letra de la tarea que se invoca).

27
¿Cómo se pueden diseñar interfaces que reduzcan la carga de
memoria del usuario?.
El formato visual de la interfaz se deberá basar en una metáfora
del mundo real.
Un Sistema de Administración 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.

28
Desglosar la información de forma progresiva.
La interfaz debe organizarse de forma jerárquica.
Se debe presentar un objeto o comportamiento, primero, en un nivel
alto de abstracción.
Y sólo después de que el usuario indique su preferencia,
seleccionando con el ratón, se mostrarán más detalles.

29
Construcción de una
interfaz consistente

30
Interfaz Consistente
La interfaz deberá adquirir y presentar la información de forma
consecuente.
Esto implica :
Que toda la información visual esté organizada de acuerdo con el
diseño estándar, 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.

31
Principios de diseño 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 imágenes de pantallas.
Es importante proporcionar indicadores (títulos de ventanas, iconos
gráficos, codificaciones en colores consecuentes) que permitan al
usuario conocer el contexto del trabajo que está llevando a cabo.

32
¿Cómo 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 diseño para mantener la consistencia en toda la
interacción.
Los modelos interactivos anteriores han esperanzado al usuario, no
realicemos cambios a menos que exista alguna razón convincente para
hacerlo.

33
¿Cómo se pueden construir interfaces consecuentes?
Una vez que una secuencia interactiva se ha convertido en un
estándar impuesto (por ejemplo, la utilización de alt-S para grabar
un archivo), el usuario espera utilizar esta combinación en todas
las aplicaciones que se encuentre.
Un cambio podría originar confusión (si usamos alt-S para invocar la
función cambiar de tamaño).

Análisis del Diseño
de la interfaz de
Usuario

35
Modelos del Diseño
Para construir una interfaz de usuario efectiva, «todo diseño debe
comenzar por conocer los usuarios destino, así como los perfiles de
edad, sexo, habilidades físicas, educación, antecedentes culturales o
étnicos, motivación, objetivos y personalidad».
Existen las siguientes categorías de usuarios:
1) principiantes: en general no tienen conocimientos de la utilización
de la aplicación o del sistema;

36
Modelos del Diseño
2) usuarios esporádicos y con conocimientos: poseen un
conocimiento razonable, pero una retención baja de la información
necesaria para utilizar la interfaz.
3) usuarios frecuentes y con conocimientos: poseen el conocimiento
suficiente. Tienen el “síndrome del usuario avanzado”: individuos que
buscan interrupciones breves y modos abreviados de interacción.

37
Modelos del Diseño
La Percepción 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 vendría guiada por su
percepción del sistema.
La precisión de la descripción dependerá del perfil del usuario (por
ejemplo, los principiantes responderían con una respuesta muy
elemental) y de su familiaridad con el software.

38
Modelos del Diseño
Un usuario que comprenda bien los sistemas del rubro, aunque haya
trabajado solo una vez con ese software específico, puede dar una
descripción más completa de su funcionamiento, que el
principiante que haya pasado unas cuantas semanas intentando
aprender a usarlo.
La Imagen del sistema es una combinación de la apariencia del
sistema y la información de soporte: libros, manuales, videos,
archivos de ayuda, que describen al sistema.
Cuando la imagen y la percepción del sistema coinciden, los
usuarios generalmente se sienten a gusto con el software y su
funcionamiento.

39
Modelos del Diseño
El Diseñador de la Interfaz debe cumplimentar el principio más
importante del diseño de la interfaz de usuario: «quien conoce al
usuario, conoce las tareas».
Cuando la imagen del sistema y la percepción del sistema
coinciden, el usuario puede utilizar la aplicación de forma
efectiva.

40
El Proceso
El proceso de diseño 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 diseño de
interfaz de usuario acompaña cuatro actividades distintas:
1. Análisis y modelado de usuarios, tareas y entornos.
2. Diseño de la interfaz
3. Implementación de la interfaz
4. Validación de la interfaz

42
El Proceso
La espiral implica que cada una de las tareas anteriores aparecerán
más de una vez, en donde a medida que se avanza por la espiral se
representará la elaboración adicional de los requisitos y el diseño
resultante.
La implementación implica la generación de prototipos (forma práctica
para validar lo que se ha diseñado).
La actividad de análisis inicial se concentra en el perfil de los usuarios
que van a interactuar con el sistema.

43
El Proceso
Se registran el nivel de conocimiento, la comprensión del negocio
y la receptividad general del nuevo sistema, y se definen
diferentes categorías de usuarios.
En cada categoría se lleva a cabo la explicitación de los requisitos.
El ingeniero del software intenta comprender la percepción del
sistema para cada clase de usuario.

44
El Proceso
Una vez definidos los requisitos generales, se lleva a cabo un análisis
más detallado de las tareas.
Se identifican, describen y elaboran las tareas que realiza el usuario
para conseguir los objetivos.
El análisis del entorno de usuario se centra en el entorno del trabajo
físico.
Se
formulan
las
siguientes
preguntas
:

¿Dónde
se
ubicará
físicamente
la
interfaz?

¿Dónde
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?

45
El Proceso
Objetivo del Diseño 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 implementación comienza con la creación de un
prototipo que permita evaluar los escenarios de utilización.

46
El Proceso - Evaluación del diseño
La validación 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 utilización de la interfaz y de aprendizaje;
• La aceptación de la interfaz, por parte del usuario, como una
herramienta útil en su trabajo.

47
Análisis 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 idénticas) que se implementan en la interfaz del
usuario.

48
Análisis del Usuario
¿Cómo se aprende lo que el usuario quiere de la
interfaz?

49
Análisis del Usuario
Para ello, se utiliza información procedente de una variedad amplia de
fuentes:
• Entrevistas: Miembros del equipo de software se reúnen con los usuarios para
entender mejor sus necesidades, motivaciones, cultura laboral y una multitud de
aspectos adicionales.
• Información de Ventas: El personal de ventas habla con los usuarios de manera
regular y recaba información que ayuda al equipo de software a clasificarlos y a
entender mejor sus requerimientos.
• Información de Mercadotecnia:El análisis del mercado es invaluable para la
definición de segmentos del mercado y su comprensión.
• Información de Apoyo:Constituye la fuente de información más probable acerca
de lo que funciona y lo que no, lo que les gusta a los usuarios y lo que les
desagrada, qué características generan preguntas y cuáles son fáciles de usar.

50
Preguntas de ayuda para el Análisis del Usuario.
• ¿Los usuarios son profesionales capacitados, técnicos, oficinistas o trabajadores de manufactura?
• ¿Qué nivel de educación formal tiene el usuario promedio? 
• ¿Los usuarios son capaces de aprender mediante materiales escritos o han manifestado
el deseo de recibir enseñanzas en un aula?
• ¿Los usuarios son mecanógrafos expertos o tienen fobia a los teclados?
• ¿Cuál es el rango de edades de la comunidad de usuarios?
• ¿Los usuarios estarán representados sobre todo por un género?
• ¿Cómo 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 sólo lo emplearán de manera
ocasional?
• ¿Cuál es el idioma principal de los usuarios?
• ¿Cuáles 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 tecnología que hay tras la interfaz?

51
Análisis 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 podrán llevar a cabo automáticamente en el
software, con muy poca interacción directa con el usuario.
La interfaz deberá adaptarse a cada tarea, de forma consecuente.

52
Pasos a seguir - Análisis de la tarea
Finalizado el Análisis de Tareas, quedan definidas detalladamente
todas (objetos y acciones) que requiere el usuario final y comienza la
actividad del Diseño de la Interfaz.
¿Cuáles son los pasos que hay que seguir para llevar a cabo el diseño
de la Interfaz?

53
1. Establecer los objetivos e intenciones para cada tarea.
2. Hacer corresponder cada objetivo/intención con una secuencia de acciones
específicas.
3. Especificar la secuencia de acciones: tareas y subtareas (escenario del
usuario), y la manera en que se ejecutarán 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 cómo los mecanismos de control afectan al estado del sistema.
7. Indicar cómo el usuario interpreta el sistema a partir de la información
proporcionada por la interfaz.
Pasos - Análisis de la tarea

54
Análisis del contenido de la pantalla
¿Cómo se determina el formato y la estética del
contenido desplegado como parte de la interfaz de
usuario?

55
Con posterioridad, se lleva a cabo el análisis de la pantalla.
Es un proceso interactivo de diseño gráfico y en él efectuamos:
A) colocación de iconos,
B) definición de textos descriptivos en pantalla,
C) especificación y títulos para ventanas,
D) definición de elementos principales y secundarios del menú .

56
¿Cómo se determina el formato y la estética 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 geografía de la
pantalla (por ejemplo, las fotografías aparecen siempre en la esquina superior
derecha)?
• ¿El usuario puede personalizar la ubicación del contenido en la pantalla?
• ¿Se asigna una identificación apropiada a todo el contenido que hay en la pantalla?
• Si se presenta un reporte grande, ¿cómo debe dividirse para facilitar su comprensión?
• ¿Se dispondrá de mecanismos para pasar directamente a información resumida de
grandes conjuntos de datos?
• ¿Las salidas gráficas estarán a escala para que se ajusten a los bordes del dispositivo
de pantalla que se utilice?
• ¿Cómo se empleará el color para mejorar la comprensión?
• ¿De qué manera se presentará al usuario los mensajes de error y las advertencias?

58
Etapas del diseño
1.Definir objetos y acciones de la interfaz (operaciones) con el uso de
la información desarrollada en el análisis de la interfaz.
2.Definir eventos (acciones del usuario) que harán que cambie el
estado de la interfaz de usuario. Hay que modelar este
comportamiento.
3.Ilustrar cada estado de la interfaz como lo vería en la realidad el
usuario final.
4.Indicar cómo interpreta el usuario el estado del sistema a partir de
la información provista a través de la interfaz.

59
Etapas del diseño
En ciertos casos, se comienza con bosquejos de cada estado de la
interfaz y después se trabaja hacia atrás para definir objetos,
acciones y otra información importante del diseño.
Sin importar la secuencia de las tareas de diseño, debe:
1) Siempre apegarse a las reglas doradas estudiadas en la sección.
2) Modelar la forma en la que se va a implementar la interfaz .
3) Considerar el ambiente (por ejemplo, tecnología de la pantalla,
sistema operativo, herramientas de desarrollo, etc.) que se
empleará.

60
Aspectos y problemas del diseño
“Un error común que cometen las personas cuando tratan de diseñar
algo por completo a prueba de tontos es subestimar la ingenuidad de
los tontos completos.”

61
Aspectos y problemas del diseño
A medida que la interfaz de usuario va evolucionando, afloran 6 temas
comunes de diseño:
1) el tiempo de respuesta del sistema,
2) los servicios de ayuda al usuario,
3) la manipulación de información de errores
4) leyendas del menú y de los comandos.
5) accesibilidad de la aplicación..
6) Internacionalización.
Desgraciadamente, muchos diseñadores no abordan estos temas
dentro del proceso de diseño hasta que es relativamente tarde (a
veces no se advierte un error hasta contar con el prototipo operativo).

62
Tiempo de respuesta del sistema
El resultado suele ser una iteración innecesaria, demoras y
frustración del usuario.
Es mejor encarar el tema al iniciar el diseño del software, cuando
los cambios son fáciles 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 acción de control (pulsar la tecla ENTER o el botón del
ratón) hasta que el software responde con la acción deseada.

63

64
El tiempo de respuesta del sistema tiene dos características
importantes: la duración y la variabilidad.
Si a duración de la respuesta del sistema es demasiado larga,
tendremos como resultado la frustración y el estrés del usuario.
Sin embargo, un tiempo de respuesta rápido puede obligar a que el
usuario se precipite y cometa errores.

65
La variabilidad es la desviación del tiempo de respuesta promedio, y
puede ser la característica más importante del tiempo de respuesta.
Una variabilidad baja permite al usuario establecer un ritmo de
interacción, 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 detrás de la
escena.
En esos casos, convendría más reiterarle la misma pregunta o
petición a estar sujeto a tan amplia variabilidad del tiempo de
respuesta.

66
Servicios de ayuda al usuario
Los usuarios de sistemas interactivos siempre requieren ayuda.
Hay 2 tipos de funciones de ayuda más comunes: las integradas y las
complementarias (añadibles).
Función de ayuda integrada: se diseña 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.

67
Cuando se va a considerar un servicio de ayuda deberán abordarse
los siguientes temas de diseño:
¿Se necesitarán todas las funciones del sistema en cualquier
momento durante la interacción del sistema? .
Opciones: ayuda solo para un subconjunto de funciones o ayuda
para todas las funciones.
¿Cómo solicitará ayuda el usuario?.
Opciones: menú de ayuda; una tecla de función especial; una
orden de AYUDA.

68
¿Cómo se representará la ayuda?.
Opciones: una ventana separada, una referencia a un documento
impreso (no recomendable); una sugerencia de una o dos líneas que
surge en una localización fija en la pantalla.
¿Cómo regresará el usuario a la interacción normal?.
Opciones: botón de retorno visualizado en la pantalla; tecla de
función o una secuencia de control.

69
¿Cómo se estructurará la información sobre la pantalla?
Opciones: una estructura «plana»; una jerarquía estratificada de
información que va proporcionando más datos a medida que el
usuario va entrando por la estructura; la utilización de hipertexto.

70
Manipulación de información de errores

71
Cuando ha salido algo mal, los mensajes de error y las sugerencias
son «malas noticias» para los usuarios.
En muchos casos, estos mensajes brindan información engañosa o
insuficiente y sirven sólo para aumentar la frustración 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 dónde mirar para
obtener más información.

72
Un mensaje de error así no alivia la ansiedad del usuario ni soluciona
el problema.
• Los mensajes de error deben tener estas características:
• Debe describir el problema en términos que el usuario entienda.
• Debe dar consejos constructivos para recuperarse de un error.
• Debe indicar las consecuencias negativas del error (“archivos de
datos posiblemente dañados”); para que el usuario lo pueda
corregir, en caso de existir.

73
El mensaje debe ir seguido por una clave audible o visual (según
Pressman).
Para acompañar la visualización del mensaje se podría generar un
pitido, o aparecer momentáneamente una luz destelleante o
visualizarse en un color que se pueda reconocer fácilmente 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.

74
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
gráfico en una aplicación y alt-D cuando ha de eliminarse en otra.
Resulta obvio el potencial que hay para el error.

75
Leyendas del menú y de los comandos.
• ¿Toda opción de menú tiene un comando correspondiente?
• ¿Qué forma tendrán los comandos? Las opciones incluyen una
secuencia de control (por
• ejemplo, alt-P), teclas de función o palabras escritas.
• ¿Cuán difícil 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 submenús con la función implicada por un
tema maestro del menú?

76
Accesibilidad de la aplicación.
• Asegurarse de que el diseño de la interfaz incluya mecanismos que
permitan el acceso fácil de las personas con necesidades
especiales.
• La accesibilidad para los usuarios que tengan discapacidades
físicas es un imperativo por razones éticas, legales y comerciales.

77
Internacionalización.
• El desafío para los diseñadores de interfaces es crear un software
“globalizado”.
• Las interfaces de usuario deben emplearse para que incluyan un
núcleo general de funcionalidad que se distribuya a todos
aquellos que utilicen el software.
• Las características de localización permiten que la interfaz se
personalice para un mercado específico.

Diseño de una
interfaz para
webapps

79
Diseño Interfaz de aplicaciones web
Toda aplicación de software tradicional, producto de consumo o
dispositivo industrial— debe tener características de usabilidad.
¿Dónde estoy? La interfaz debe:
1) dar una indicación de la webapp a la que se ha accedido.
2) Informar al usuario de su localización en la jerarquía del contenido.
¿Qué puedo hacer ahora?
La interfaz siempre debe ayudar al usuario a entender sus opciones actuales:
cuáles funciones están disponibles, qué vínculos están vivos, qué contenido
es relevante, etc.
¿Dónde he estado, hacia dónde voy? La interfaz debe facilitar la navegación.
Para ello, debe disponer un “mapa” (implementado en forma tal que sea fácil
de entender) que indique dónde ha estado el usuario y las trayectorias que
pueden tomarse para moverse a cualquier punto de la aplicación.

80
Principios y lineamientos del diseño de la interfaz
Se definen un conjunto de características fundamentales que todas las
interfaces deben tener y con ello establece la filosofía que todo
diseñador de interfaces de webapps debe seguir.

81
• Las interfaces eficaces son atractivas visualmente y perdonan los
errores, lo que da a sus usuarios la sensación de tener el control.
• Los usuarios perciben rápidamente la totalidad de sus opciones, captan
cómo lograr sus metas y cómo hacer su trabajo.

82
• Las interfaces eficaces no preocupan al usuario con el funcionamiento
interno del sistema.
• El trabajo se guarda de manera cuidadosa y continua, con opción total
para que el usuario deshaga cualquier actividad en cualquier
momento.
• Las aplicaciones y servicios eficaces realizan un máximo de trabajo, al
tiempo que requieren un mínimo de información de parte de los
usuarios.

83
Principios generales del diseño
• Previsión
• Comunicación
• Consistencia
• Autonomía Controlada
• Eficiencia
• Flexibilidad
• Centrarse
• Objetos de la interfaz humana.
• Redundancia de la latencia.
• Aprendizaje
• Metáforas
• Mantener integridad.
• Legibilidad
• Seguimiento de estado
• Navegación Visible

84
Previsión
Una aplicación web debe diseñarse 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 diseñador de la webapp debe prever que el usuario tal vez pida
descargar el controlador y debe brindar facilidades de navegación que lo
permitan, sin requerir que el usuario busque esta capacidad.

85
Comunicación.
• La interfaz debe comunicar el estado de cualquier actividad iniciada por el
usuario.
• La comunicación puede ser obvia (por ejemplo, un mensaje de texto) o
sutil (como la imagen de una hoja de papel que se mueva a través de
una impresora para indicar que hay una impresión en curso).
• La interfaz también debe comunicar el estado del usuario (como su
identificación) y su ubicación dentro de la jerarquía del contenido de la
webapp.

86
Consistencia.
El uso de controles de navegación, menús, iconos y estética (color, forma y
distribución) debe ser consistente en la webapp.
Por ejemplo, digamos un rectángulo en amarillo, que se utilice para indicar un
mensaje de precaución antes de que el usuario invoque una función o
acción particular, no debe usarse para otros propósitos en ningún otro
lugar de la webapp.

87
Autonomía Controlada
La interfaz debe facilitar el movimiento del usuario a través de la webapp,
pero lo debe hacer de manera que obligue a respetar las convenciones que
se hayan establecido para la aplicación.
Por ejemplo, debe controlarse la navegación hacia partes seguras de la
webapp por medio de la identificación y clave del usuario, y no debe haber
ningún mecanismo de navegación que permita que un usuario evite dichos
controles.

88
Eficiencia
El diseño de la webapp y su interfaz deben optimizar la eficiencia del trabajo
del usuario, no la del desarrollador que la diseña 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 número uno, y de entender la
diferencia vital entre construir un sistema eficiente y dar poder a un usuario
eficiente.”

89
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 dónde se encuentra y darle
la funcionalidad para deshacer errores y volver a trazar trayectorias de
navegación mal elegidas.

90
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 fácil hacerlo... El problema es que el usuario puede
extraviarse con rapidez en muchas capas de información de apoyo y perder
de vista el contenido original que buscaba inicialmente.

91
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, librerías de objetos.

92
Reducción de Latencia
En vez de hacer que el usuario espere a que termine alguna operación interna (como
descargar una imagen gráfica compleja), la webapp debe usar tareas múltiples, de
manera que permita que el usuario continúe con su trabajo mientras finaliza la
operación.
Además de reducir la latencia, los retrasos deben explicarse de modo que el usuario
entienda lo que esté pasando.
Esto incluye:
1) Dar retroalimentación auditiva cuando una selección no dé como resultado una acción
inmediata por parte de la webapp,
2) Desplegar un reloj con animación o una barra de avance que indique que hay un
procesamiento en marcha
3) Dar alguna distracción (presentación o texto animado) cuando tenga lugar un
procesamiento tardado.

93
Aprendizaje
Una interfaz de webapp debe diseñarse 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 diseño sencillo e
intuitivo que organice el contenido y funcionalidad en categorías que
resulten obvias para el usuario.

94
Metaforas
Una interfaz que use una metáfora de interacción es más fácil de
aprender y de usar, en la medida en la que la metáfora sea apropiada
para la aplicación y el usuario.
Una metáfora debe recurrir a imágenes y conceptos salidos de la
experiencia del usuario, pero no necesita ser una reproducción exacta
de una experiencia del mundo real.
Carrito de compras

95
Mantener la integridad de los productos del trabajo.
Un producto del trabajo (por ejemplo, un formulario llenado por un
usuario) debe guardarse en forma automática, de modo que no se pierda
si ocurriera un error.
Todos hemos experimentado la frustración 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 función y dar al usuario un mecanismo fácil
de recuperación de la información “perdida”.

96
Legibilidad
Toda la información presentada en la interfaz debe ser legible para todo
segmento de la población.
El diseñador de la interfaz debe hacer énfasis en estilos legibles para las
letras, en su tamaño y en el color del fondo, que debe contrastar.

97
Seguimiento de Estado
Cuando resulte apropiado, debe darse seguimiento al estado de la
interacción del usuario y guardarlo, de modo que éste pueda salir y
volver más tarde para recuperarlo de donde lo haya dejado.
En general, las cookies pueden diseñarse para que guarden información
del estado. Sin embargo, son una tecnología controvertida y para
ciertos usuarios resultan más atractivas otras soluciones de diseño.

98
Navegación Visible
Una interfaz de webapp bien diseñada da “la ilusión de que los usuarios
están en el mismo lugar, con el trabajo llevado a ellos”
Cuando se emplea este enfoque, la navegación no es asunto del usuario.
En vez de ello, éste recupera objetos del contenido y selecciona
funciones que se despliegan y ejecutan a través de la interfaz.

Flujos de Trabajo
en el diseño de la
interfaz Web.

100
Flujos de trabajo
• Revisar la información contenida en el modelo de requerimientos y
refinarla según se requiera.
• Desarrollar un esquema aproximado de la distribución de la interfaz
para la webapp.
• Mapear los objetivos del usuario en acciones específicas de la interfaz
• Definir un conjunto de tareas de usuario asociadas con cada acción.
• Elaborar un guión de las imágenes en la pantalla para cada acción de la
interfaz.
• Refinar la distribución de la interfaz y los guiones con entradas del
diseño de la estética.

101
Flujos de trabajo
• Identificar los objetos de la interfaz de usuario requeridos para
implementar la interfaz.
• Desarrollar una representación del procedimiento de la interacción del
usuario con la interfaz
• Desarrollar una representación del comportamiento de la interfaz.
• Describir la distribución de la interfaz para cada estado.
• Refinar y revisar el modelo del diseño de la interfaz.

103
Evaluación del Diseño
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 evaluación abarca un espectro de formalidad que va desde una “prueba
de manejo” informal, en la que el usuario da retroalimentación
instantánea a un estudio.

104
Ciclo de evaluación del Diseño

105
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 número de
bucles en el ciclo de evaluación y disminuirá el tiempo de desarrollo

106
Se pueden aplicar los siguientes criterios de evaluación durante las primeras revisiones.
1. La longitud y complejidad del modelo de requerimientos o especificaciones escritas del sistema y
su interfaz darán una indicación de la cantidad de aprendizaje requerido por los usuarios del
sistema.
2. El número de tareas del usuario especificadas y el número promedio de acciones por tarea
indicarán el tiempo de interacción de la eficiencia general del sistema.
3. El número de acciones, tareas y estados del sistema indicados por el modelo del diseño implicarán
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 darán una
indicación general de la complejidad de la interfaz y de su grado de aceptación por parte del
usuario.

107
Próxima clase
PRUEBAS DE SOFTWARE

Diseño de la interfaz de usuario

Más contenido relacionado

La actualidad más candente (20)

Similar a Diseño de la interfaz de usuario (20)

Más de Jose Patricio Bovet Derpich (9)

Último (20)

Diseño de la interfaz de usuario