SlideShare una empresa de Scribd logo
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
4
Introducción
¿Qué es?
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.
Reglas Doradas
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.
11
Dar el Control al Usuario
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
Dar el Control al Usuario
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
Dar el Control al Usuario
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
Dar el Control al Usuario
¿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
Dar el Control al Usuario
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
Dar el Control al Usuario
“No se puede dibujar una forma compleja mediante órdenes del
teclado (o entrada de voz). “
18
Dar el Control al Usuario
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
Dar el Control al Usuario
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
Dar el Control al Usuario
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
Dar el Control al Usuario
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
Principios de Diseño - 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 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
Principios de Diseño - Reducir la carga de memoria
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
Principios de Diseño - Reducir la carga de memoria
¿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
Principios de Diseño - Reducir la carga de memoria
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
41
El Proceso - Modelo
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
Análisis del contenido de la pantalla
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
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?
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?
Etapas y aspectos
del Diseño
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
Tiempo de respuesta del sistema
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.
Tiempo de respuesta del sistema
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.
Tiempo de respuesta del sistema
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
Servicios de ayuda al usuario
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
Servicios de ayuda al usuario
¿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
Servicios de ayuda al usuario
¿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
Manipulación de información 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 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
Manipulación de información de errores
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
Manipulación de información de errores
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
Principios y lineamientos del diseño de la interfaz
• 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
Principios y lineamientos del diseño 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 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.
Evaluación del
Diseño
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
Evaluación del Diseño
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
Evaluación del Diseño
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

Más contenido relacionado

La actualidad más candente

Ejemplo rup
Ejemplo rupEjemplo rup
Ejemplo rup
angel2365
 
Sistemas con interfaces a manipulación directa
Sistemas con interfaces a manipulación directaSistemas con interfaces a manipulación directa
Sistemas con interfaces a manipulación directa
Kike Salsalazar
 
Proceso del software
Proceso del softwareProceso del software
Proceso del software
Tensor
 
Modelo evolutivo
Modelo evolutivoModelo evolutivo
Modelo evolutivo
Barklyn Lsla
 
Modelos y capas de la ingenieria de software
Modelos y capas  de la ingenieria de softwareModelos y capas  de la ingenieria de software
Modelos y capas de la ingenieria de software
jhonatanalex
 
Principios del RUP
Principios del RUPPrincipios del RUP
Principios del RUP
Kenyo Puelles Otsu
 
Requerimiento funcional y no funcional
Requerimiento funcional y no funcional Requerimiento funcional y no funcional
Requerimiento funcional y no funcional
CristobalFicaV
 
Ingenieria de software
Ingenieria de softwareIngenieria de software
Ingenieria de software
Francisco Gómez
 
Diseño de interfaz de usuario
Diseño de interfaz de usuarioDiseño de interfaz de usuario
Diseño de interfaz de usuario
Yesith Valencia
 
Diseño de sistemas
Diseño de sistemasDiseño de sistemas
Diseño de sistemas
Jenyfer Utitiaja
 
13.diseño de web apps
13.diseño de web apps13.diseño de web apps
13.diseño de web apps
Ramiro Estigarribia Canese
 
Fundamentos de ingenieria del software (2)
Fundamentos de ingenieria del software (2)Fundamentos de ingenieria del software (2)
Fundamentos de ingenieria del software (2)
manuel alfredo chacon valero
 
Reglas de Oro
Reglas de OroReglas de Oro
Diagrama de casos de usos
Diagrama de casos de usosDiagrama de casos de usos
Diagrama de casos de usos
Juan Carlos Tapias
 
Arquitectura de software para aplicaciones móviles
Arquitectura de software para aplicaciones móvilesArquitectura de software para aplicaciones móviles
Arquitectura de software para aplicaciones móviles
Sergio Castillo Yrizales
 
Metodología RUP
Metodología RUPMetodología RUP
Metodología RUP
Jorge Cortés Alvarez
 
Metodologías de Desarrollo de Software Tradicionales y Emergentes
Metodologías de Desarrollo de Software Tradicionales y EmergentesMetodologías de Desarrollo de Software Tradicionales y Emergentes
Metodologías de Desarrollo de Software Tradicionales y Emergentes
Miguel Rodríguez
 
Manuales de usuario y tecnico
Manuales de usuario y tecnicoManuales de usuario y tecnico
Manuales de usuario y tecnico
Jose
 
DISEÑO DE LA ARQUITECTURA DEL SOFTWARE
DISEÑO DE LA ARQUITECTURA DEL SOFTWAREDISEÑO DE LA ARQUITECTURA DEL SOFTWARE
DISEÑO DE LA ARQUITECTURA DEL SOFTWARE
jose_rob
 
TAREAS DE LA ING. DE REQUISITOS
TAREAS DE LA ING. DE REQUISITOSTAREAS DE LA ING. DE REQUISITOS
TAREAS DE LA ING. DE REQUISITOS
xinithazangels
 

La actualidad más candente (20)

Ejemplo rup
Ejemplo rupEjemplo rup
Ejemplo rup
 
Sistemas con interfaces a manipulación directa
Sistemas con interfaces a manipulación directaSistemas con interfaces a manipulación directa
Sistemas con interfaces a manipulación directa
 
Proceso del software
Proceso del softwareProceso del software
Proceso del software
 
Modelo evolutivo
Modelo evolutivoModelo evolutivo
Modelo evolutivo
 
Modelos y capas de la ingenieria de software
Modelos y capas  de la ingenieria de softwareModelos y capas  de la ingenieria de software
Modelos y capas de la ingenieria de software
 
Principios del RUP
Principios del RUPPrincipios del RUP
Principios del RUP
 
Requerimiento funcional y no funcional
Requerimiento funcional y no funcional Requerimiento funcional y no funcional
Requerimiento funcional y no funcional
 
Ingenieria de software
Ingenieria de softwareIngenieria de software
Ingenieria de software
 
Diseño de interfaz de usuario
Diseño de interfaz de usuarioDiseño de interfaz de usuario
Diseño de interfaz de usuario
 
Diseño de sistemas
Diseño de sistemasDiseño de sistemas
Diseño de sistemas
 
13.diseño de web apps
13.diseño de web apps13.diseño de web apps
13.diseño de web apps
 
Fundamentos de ingenieria del software (2)
Fundamentos de ingenieria del software (2)Fundamentos de ingenieria del software (2)
Fundamentos de ingenieria del software (2)
 
Reglas de Oro
Reglas de OroReglas de Oro
Reglas de Oro
 
Diagrama de casos de usos
Diagrama de casos de usosDiagrama de casos de usos
Diagrama de casos de usos
 
Arquitectura de software para aplicaciones móviles
Arquitectura de software para aplicaciones móvilesArquitectura de software para aplicaciones móviles
Arquitectura de software para aplicaciones móviles
 
Metodología RUP
Metodología RUPMetodología RUP
Metodología RUP
 
Metodologías de Desarrollo de Software Tradicionales y Emergentes
Metodologías de Desarrollo de Software Tradicionales y EmergentesMetodologías de Desarrollo de Software Tradicionales y Emergentes
Metodologías de Desarrollo de Software Tradicionales y Emergentes
 
Manuales de usuario y tecnico
Manuales de usuario y tecnicoManuales de usuario y tecnico
Manuales de usuario y tecnico
 
DISEÑO DE LA ARQUITECTURA DEL SOFTWARE
DISEÑO DE LA ARQUITECTURA DEL SOFTWAREDISEÑO DE LA ARQUITECTURA DEL SOFTWARE
DISEÑO DE LA ARQUITECTURA DEL SOFTWARE
 
TAREAS DE LA ING. DE REQUISITOS
TAREAS DE LA ING. DE REQUISITOSTAREAS DE LA ING. DE REQUISITOS
TAREAS DE LA ING. DE REQUISITOS
 

Similar a Diseño de la interfaz de usuario

Diseño de interfaces
Diseño de interfacesDiseño de interfaces
Diseño de interfaces
Juan Pablo Bustos Thames
 
El Proceso de Diseño de interfaces de usuario. Roger Pressman
El Proceso de Diseño de interfaces de usuario. Roger PressmanEl Proceso de Diseño de interfaces de usuario. Roger Pressman
El Proceso de Diseño de interfaces de usuario. Roger Pressman
Juan Pablo Bustos Thames
 
Trabajo bañott
Trabajo bañottTrabajo bañott
Trabajo bañott
Eleny30
 
Trabajo baño
Trabajo bañoTrabajo baño
Trabajo baño
Eleny30
 
03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario
Manuel Mujica
 
03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario
Manuel Mujica
 
3490012.ppt
3490012.ppt3490012.ppt
3490012.ppt
ssuser948499
 
Hci
HciHci
Diseño interfaz de usuario
Diseño interfaz de  usuarioDiseño interfaz de  usuario
Diseño interfaz de usuario
Bayardo Medina
 
Diseño interfaz de usuario
Diseño interfaz de  usuarioDiseño interfaz de  usuario
Diseño interfaz de usuario
Bayardo Medina
 
Interfaz Usuario
Interfaz UsuarioInterfaz Usuario
Interfaz Usuario
taninof
 
17 evaluacion heuristica basica
17 evaluacion heuristica basica17 evaluacion heuristica basica
17 evaluacion heuristica basica
UVM
 
Diseño de interfaz importancia y proceso
Diseño de interfaz importancia y procesoDiseño de interfaz importancia y proceso
Diseño de interfaz importancia y proceso
adrianazamora
 
Interfaz De Usuario
Interfaz De UsuarioInterfaz De Usuario
Interfaz De Usuario
djyami
 
Interfaz de usuario
Interfaz de usuarioInterfaz de usuario
Interfaz de usuario
Ramiro Estigarribia Canese
 
Diseño de interfaces de usuario
Diseño de interfaces de usuarioDiseño de interfaces de usuario
Diseño de interfaces de usuario
Diego Rosas
 
Diseño del Arte Colaborativo entre artistas, ingenieros, etc
Diseño del Arte Colaborativo entre artistas, ingenieros, etcDiseño del Arte Colaborativo entre artistas, ingenieros, etc
Diseño del Arte Colaborativo entre artistas, ingenieros, etc
JimyJavier
 
DISEÑO DE INTERFAZ DE USUARIO.ppt.pptx
DISEÑO DE INTERFAZ DE USUARIO.ppt.pptxDISEÑO DE INTERFAZ DE USUARIO.ppt.pptx
DISEÑO DE INTERFAZ DE USUARIO.ppt.pptx
ssuserffa00a
 
Gui
GuiGui
Gui
GuiGui

Similar a Diseño de la interfaz de usuario (20)

Diseño de interfaces
Diseño de interfacesDiseño de interfaces
Diseño de interfaces
 
El Proceso de Diseño de interfaces de usuario. Roger Pressman
El Proceso de Diseño de interfaces de usuario. Roger PressmanEl Proceso de Diseño de interfaces de usuario. Roger Pressman
El Proceso de Diseño de interfaces de usuario. Roger Pressman
 
Trabajo bañott
Trabajo bañottTrabajo bañott
Trabajo bañott
 
Trabajo baño
Trabajo bañoTrabajo baño
Trabajo baño
 
03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario
 
03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario
 
3490012.ppt
3490012.ppt3490012.ppt
3490012.ppt
 
Hci
HciHci
Hci
 
Diseño interfaz de usuario
Diseño interfaz de  usuarioDiseño interfaz de  usuario
Diseño interfaz de usuario
 
Diseño interfaz de usuario
Diseño interfaz de  usuarioDiseño interfaz de  usuario
Diseño interfaz de usuario
 
Interfaz Usuario
Interfaz UsuarioInterfaz Usuario
Interfaz Usuario
 
17 evaluacion heuristica basica
17 evaluacion heuristica basica17 evaluacion heuristica basica
17 evaluacion heuristica basica
 
Diseño de interfaz importancia y proceso
Diseño de interfaz importancia y procesoDiseño de interfaz importancia y proceso
Diseño de interfaz importancia y proceso
 
Interfaz De Usuario
Interfaz De UsuarioInterfaz De Usuario
Interfaz De Usuario
 
Interfaz de usuario
Interfaz de usuarioInterfaz de usuario
Interfaz de usuario
 
Diseño de interfaces de usuario
Diseño de interfaces de usuarioDiseño de interfaces de usuario
Diseño de interfaces de usuario
 
Diseño del Arte Colaborativo entre artistas, ingenieros, etc
Diseño del Arte Colaborativo entre artistas, ingenieros, etcDiseño del Arte Colaborativo entre artistas, ingenieros, etc
Diseño del Arte Colaborativo entre artistas, ingenieros, etc
 
DISEÑO DE INTERFAZ DE USUARIO.ppt.pptx
DISEÑO DE INTERFAZ DE USUARIO.ppt.pptxDISEÑO DE INTERFAZ DE USUARIO.ppt.pptx
DISEÑO DE INTERFAZ DE USUARIO.ppt.pptx
 
Gui
GuiGui
Gui
 
Gui
GuiGui
Gui
 

Más de Jose Patricio Bovet Derpich

OpenFeature: La especificación para el uso de feature flags
OpenFeature: La especificación para el uso de feature flagsOpenFeature: La especificación para el uso de feature flags
OpenFeature: La especificación para el uso de feature flags
Jose Patricio Bovet Derpich
 
Integración Continua
Integración ContinuaIntegración Continua
Integración Continua
Jose Patricio Bovet Derpich
 
Scrum overview
Scrum overview Scrum overview
Springboot Overview
Springboot  OverviewSpringboot  Overview
Springboot Overview
Jose Patricio Bovet Derpich
 
Principios de diseño de la arquitectura del software
Principios de diseño de la arquitectura del softwarePrincipios de diseño de la arquitectura del software
Principios de diseño de la arquitectura del software
Jose Patricio Bovet Derpich
 
Principios diseño del software
Principios diseño del software Principios diseño del software
Principios diseño del software
Jose Patricio Bovet Derpich
 
POO1501 - Composición java
POO1501 - Composición javaPOO1501 - Composición java
POO1501 - Composición java
Jose Patricio Bovet Derpich
 
POO1501 - Composición java
POO1501 - Composición javaPOO1501 - Composición java
POO1501 - Composición java
Jose Patricio Bovet Derpich
 
Conociendo Nuestro Fua interno
Conociendo Nuestro Fua internoConociendo Nuestro Fua interno
Conociendo Nuestro Fua interno
Jose Patricio Bovet Derpich
 
GitHub y el software libre
GitHub y el software libreGitHub y el software libre
GitHub y el software libre
Jose Patricio Bovet Derpich
 
Apache Servicemix
Apache ServicemixApache Servicemix
Apache Servicemix
Jose Patricio Bovet Derpich
 

Más de Jose Patricio Bovet Derpich (11)

OpenFeature: La especificación para el uso de feature flags
OpenFeature: La especificación para el uso de feature flagsOpenFeature: La especificación para el uso de feature flags
OpenFeature: La especificación para el uso de feature flags
 
Integración Continua
Integración ContinuaIntegración Continua
Integración Continua
 
Scrum overview
Scrum overview Scrum overview
Scrum overview
 
Springboot Overview
Springboot  OverviewSpringboot  Overview
Springboot Overview
 
Principios de diseño de la arquitectura del software
Principios de diseño de la arquitectura del softwarePrincipios de diseño de la arquitectura del software
Principios de diseño de la arquitectura del software
 
Principios diseño del software
Principios diseño del software Principios diseño del software
Principios diseño del software
 
POO1501 - Composición java
POO1501 - Composición javaPOO1501 - Composición java
POO1501 - Composición java
 
POO1501 - Composición java
POO1501 - Composición javaPOO1501 - Composición java
POO1501 - Composición java
 
Conociendo Nuestro Fua interno
Conociendo Nuestro Fua internoConociendo Nuestro Fua interno
Conociendo Nuestro Fua interno
 
GitHub y el software libre
GitHub y el software libreGitHub y el software libre
GitHub y el software libre
 
Apache Servicemix
Apache ServicemixApache Servicemix
Apache Servicemix
 

Último

TEMA 1 EL PROCESO DE FORMACIÓN DEL ESTADO
TEMA 1 EL PROCESO DE FORMACIÓN DEL ESTADOTEMA 1 EL PROCESO DE FORMACIÓN DEL ESTADO
TEMA 1 EL PROCESO DE FORMACIÓN DEL ESTADO
José Manuel Vera Santos
 
La Relación Mixta DA ( Riesgo)- Matriz DA
La Relación Mixta DA ( Riesgo)- Matriz DALa Relación Mixta DA ( Riesgo)- Matriz DA
La Relación Mixta DA ( Riesgo)- Matriz DA
JonathanCovena1
 
CARTELERA DE PACO YUNQUE 2024 IEI 0767 BA
CARTELERA DE PACO YUNQUE 2024 IEI 0767 BACARTELERA DE PACO YUNQUE 2024 IEI 0767 BA
CARTELERA DE PACO YUNQUE 2024 IEI 0767 BA
CesarAugustoParedesP
 
Revista Universidad de Deusto - Número 155 / Año 2024
Revista Universidad de Deusto - Número 155 / Año 2024Revista Universidad de Deusto - Número 155 / Año 2024
Revista Universidad de Deusto - Número 155 / Año 2024
Universidad de Deusto - Deustuko Unibertsitatea - University of Deusto
 
🔴 (AC-S18) Semana 18 - Tema 1 Informe sobre un tema del curso.docx
🔴 (AC-S18) Semana 18 - Tema 1 Informe sobre un tema del curso.docx🔴 (AC-S18) Semana 18 - Tema 1 Informe sobre un tema del curso.docx
🔴 (AC-S18) Semana 18 - Tema 1 Informe sobre un tema del curso.docx
FernandoEstebanLlont
 
3° SES MATE JUEV 18 LOGROS MATEMATICOS 4 OPERACIONES 933623393 PROF YESSENIA....
3° SES MATE JUEV 18 LOGROS MATEMATICOS 4 OPERACIONES 933623393 PROF YESSENIA....3° SES MATE JUEV 18 LOGROS MATEMATICOS 4 OPERACIONES 933623393 PROF YESSENIA....
3° SES MATE JUEV 18 LOGROS MATEMATICOS 4 OPERACIONES 933623393 PROF YESSENIA....
Wilian24
 
Análisis y Evaluación del Impacto Ambiental.pdf
Análisis y Evaluación del Impacto Ambiental.pdfAnálisis y Evaluación del Impacto Ambiental.pdf
Análisis y Evaluación del Impacto Ambiental.pdf
JonathanCovena1
 
🔴 (AC-S18) Semana 18 - Tema 01 - Tarea - Proyecto Final (terminado y revisado...
🔴 (AC-S18) Semana 18 - Tema 01 - Tarea - Proyecto Final (terminado y revisado...🔴 (AC-S18) Semana 18 - Tema 01 - Tarea - Proyecto Final (terminado y revisado...
🔴 (AC-S18) Semana 18 - Tema 01 - Tarea - Proyecto Final (terminado y revisado...
FernandoEstebanLlont
 
mapa conceptual animales foráneos traídos al Perú
mapa conceptual animales foráneos traídos  al Perúmapa conceptual animales foráneos traídos  al Perú
mapa conceptual animales foráneos traídos al Perú
KarlaSaldaaPerez
 
Lecciones 03 Esc. Sabática. Controversias.docx
Lecciones 03 Esc. Sabática. Controversias.docxLecciones 03 Esc. Sabática. Controversias.docx
Lecciones 03 Esc. Sabática. Controversias.docx
Alejandrino Halire Ccahuana
 
Presentación sobré las culturas del Perú .
Presentación sobré las culturas del Perú .Presentación sobré las culturas del Perú .
Presentación sobré las culturas del Perú .
Juan Luis Cunya Vicente
 
INSTRUMENTOS USADOS EN LA PSICOLOGÍA
INSTRUMENTOS USADOS EN LA PSICOLOGÍA INSTRUMENTOS USADOS EN LA PSICOLOGÍA
INSTRUMENTOS USADOS EN LA PSICOLOGÍA
Kiara Ocampo Apolo
 
LA COMUNICACIÓN ACADEMICA EN LA ERA DIGITAL (1).pptx
LA COMUNICACIÓN ACADEMICA EN LA ERA DIGITAL (1).pptxLA COMUNICACIÓN ACADEMICA EN LA ERA DIGITAL (1).pptx
LA COMUNICACIÓN ACADEMICA EN LA ERA DIGITAL (1).pptx
herreraluis3817
 
BLOQUE II SEMANA DE GESTION EN INSTITUVIONES EDUCATIVAS.pptx
BLOQUE II SEMANA DE GESTION EN INSTITUVIONES EDUCATIVAS.pptxBLOQUE II SEMANA DE GESTION EN INSTITUVIONES EDUCATIVAS.pptx
BLOQUE II SEMANA DE GESTION EN INSTITUVIONES EDUCATIVAS.pptx
royguzman5
 
Apuntes de Enfermería (para estudiantes)
Apuntes de Enfermería (para estudiantes)Apuntes de Enfermería (para estudiantes)
Apuntes de Enfermería (para estudiantes)
milyluna0207
 
PRESENTACIÓN TALLER INTENSIVO PARA DOCENTES JULIO 2024 WEB.pptx
PRESENTACIÓN TALLER INTENSIVO PARA DOCENTES JULIO 2024 WEB.pptxPRESENTACIÓN TALLER INTENSIVO PARA DOCENTES JULIO 2024 WEB.pptx
PRESENTACIÓN TALLER INTENSIVO PARA DOCENTES JULIO 2024 WEB.pptx
glopezmaciel
 
2024 DIA DEL LOGRO IE HONORIO DELGADO ESPINOZA
2024 DIA DEL LOGRO IE HONORIO DELGADO ESPINOZA2024 DIA DEL LOGRO IE HONORIO DELGADO ESPINOZA
2024 DIA DEL LOGRO IE HONORIO DELGADO ESPINOZA
Sandra Mariela Ballón Aguedo
 
2024 DIA DEL LOGRO-ARTE 2 - IE HONORIO DELGADO ESPINOZA
2024 DIA DEL LOGRO-ARTE 2 - IE HONORIO DELGADO ESPINOZA2024 DIA DEL LOGRO-ARTE 2 - IE HONORIO DELGADO ESPINOZA
2024 DIA DEL LOGRO-ARTE 2 - IE HONORIO DELGADO ESPINOZA
Sandra Mariela Ballón Aguedo
 
FI-001 Introducción - Conocimiento Institucional.pptx
FI-001 Introducción - Conocimiento Institucional.pptxFI-001 Introducción - Conocimiento Institucional.pptx
FI-001 Introducción - Conocimiento Institucional.pptx
ENJ
 

Último (20)

TEMA 1 EL PROCESO DE FORMACIÓN DEL ESTADO
TEMA 1 EL PROCESO DE FORMACIÓN DEL ESTADOTEMA 1 EL PROCESO DE FORMACIÓN DEL ESTADO
TEMA 1 EL PROCESO DE FORMACIÓN DEL ESTADO
 
La Relación Mixta DA ( Riesgo)- Matriz DA
La Relación Mixta DA ( Riesgo)- Matriz DALa Relación Mixta DA ( Riesgo)- Matriz DA
La Relación Mixta DA ( Riesgo)- Matriz DA
 
CARTELERA DE PACO YUNQUE 2024 IEI 0767 BA
CARTELERA DE PACO YUNQUE 2024 IEI 0767 BACARTELERA DE PACO YUNQUE 2024 IEI 0767 BA
CARTELERA DE PACO YUNQUE 2024 IEI 0767 BA
 
Revista Universidad de Deusto - Número 155 / Año 2024
Revista Universidad de Deusto - Número 155 / Año 2024Revista Universidad de Deusto - Número 155 / Año 2024
Revista Universidad de Deusto - Número 155 / Año 2024
 
🔴 (AC-S18) Semana 18 - Tema 1 Informe sobre un tema del curso.docx
🔴 (AC-S18) Semana 18 - Tema 1 Informe sobre un tema del curso.docx🔴 (AC-S18) Semana 18 - Tema 1 Informe sobre un tema del curso.docx
🔴 (AC-S18) Semana 18 - Tema 1 Informe sobre un tema del curso.docx
 
3° SES MATE JUEV 18 LOGROS MATEMATICOS 4 OPERACIONES 933623393 PROF YESSENIA....
3° SES MATE JUEV 18 LOGROS MATEMATICOS 4 OPERACIONES 933623393 PROF YESSENIA....3° SES MATE JUEV 18 LOGROS MATEMATICOS 4 OPERACIONES 933623393 PROF YESSENIA....
3° SES MATE JUEV 18 LOGROS MATEMATICOS 4 OPERACIONES 933623393 PROF YESSENIA....
 
Análisis y Evaluación del Impacto Ambiental.pdf
Análisis y Evaluación del Impacto Ambiental.pdfAnálisis y Evaluación del Impacto Ambiental.pdf
Análisis y Evaluación del Impacto Ambiental.pdf
 
🔴 (AC-S18) Semana 18 - Tema 01 - Tarea - Proyecto Final (terminado y revisado...
🔴 (AC-S18) Semana 18 - Tema 01 - Tarea - Proyecto Final (terminado y revisado...🔴 (AC-S18) Semana 18 - Tema 01 - Tarea - Proyecto Final (terminado y revisado...
🔴 (AC-S18) Semana 18 - Tema 01 - Tarea - Proyecto Final (terminado y revisado...
 
mapa conceptual animales foráneos traídos al Perú
mapa conceptual animales foráneos traídos  al Perúmapa conceptual animales foráneos traídos  al Perú
mapa conceptual animales foráneos traídos al Perú
 
Lecciones 03 Esc. Sabática. Controversias.docx
Lecciones 03 Esc. Sabática. Controversias.docxLecciones 03 Esc. Sabática. Controversias.docx
Lecciones 03 Esc. Sabática. Controversias.docx
 
Presentación sobré las culturas del Perú .
Presentación sobré las culturas del Perú .Presentación sobré las culturas del Perú .
Presentación sobré las culturas del Perú .
 
INSTRUMENTOS USADOS EN LA PSICOLOGÍA
INSTRUMENTOS USADOS EN LA PSICOLOGÍA INSTRUMENTOS USADOS EN LA PSICOLOGÍA
INSTRUMENTOS USADOS EN LA PSICOLOGÍA
 
POR ENTRE AS ONDAS DO PARAÍSO .
POR ENTRE AS ONDAS DO PARAÍSO             .POR ENTRE AS ONDAS DO PARAÍSO             .
POR ENTRE AS ONDAS DO PARAÍSO .
 
LA COMUNICACIÓN ACADEMICA EN LA ERA DIGITAL (1).pptx
LA COMUNICACIÓN ACADEMICA EN LA ERA DIGITAL (1).pptxLA COMUNICACIÓN ACADEMICA EN LA ERA DIGITAL (1).pptx
LA COMUNICACIÓN ACADEMICA EN LA ERA DIGITAL (1).pptx
 
BLOQUE II SEMANA DE GESTION EN INSTITUVIONES EDUCATIVAS.pptx
BLOQUE II SEMANA DE GESTION EN INSTITUVIONES EDUCATIVAS.pptxBLOQUE II SEMANA DE GESTION EN INSTITUVIONES EDUCATIVAS.pptx
BLOQUE II SEMANA DE GESTION EN INSTITUVIONES EDUCATIVAS.pptx
 
Apuntes de Enfermería (para estudiantes)
Apuntes de Enfermería (para estudiantes)Apuntes de Enfermería (para estudiantes)
Apuntes de Enfermería (para estudiantes)
 
PRESENTACIÓN TALLER INTENSIVO PARA DOCENTES JULIO 2024 WEB.pptx
PRESENTACIÓN TALLER INTENSIVO PARA DOCENTES JULIO 2024 WEB.pptxPRESENTACIÓN TALLER INTENSIVO PARA DOCENTES JULIO 2024 WEB.pptx
PRESENTACIÓN TALLER INTENSIVO PARA DOCENTES JULIO 2024 WEB.pptx
 
2024 DIA DEL LOGRO IE HONORIO DELGADO ESPINOZA
2024 DIA DEL LOGRO IE HONORIO DELGADO ESPINOZA2024 DIA DEL LOGRO IE HONORIO DELGADO ESPINOZA
2024 DIA DEL LOGRO IE HONORIO DELGADO ESPINOZA
 
2024 DIA DEL LOGRO-ARTE 2 - IE HONORIO DELGADO ESPINOZA
2024 DIA DEL LOGRO-ARTE 2 - IE HONORIO DELGADO ESPINOZA2024 DIA DEL LOGRO-ARTE 2 - IE HONORIO DELGADO ESPINOZA
2024 DIA DEL LOGRO-ARTE 2 - IE HONORIO DELGADO ESPINOZA
 
FI-001 Introducción - Conocimiento Institucional.pptx
FI-001 Introducción - Conocimiento Institucional.pptxFI-001 Introducción - Conocimiento Institucional.pptx
FI-001 Introducción - Conocimiento Institucional.pptx
 

Diseño de la interfaz de usuario

  • 1. Diseño de Interfaces de Software IDS5501 V.1.0 @josebovet
  • 2. 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. 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. 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. 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. 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. 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.
  • 11. 11 Dar el Control al Usuario
  • 12. 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. 13 Dar el Control al Usuario 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. 14 Dar el Control al Usuario 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. 15 Dar el Control al Usuario ¿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. 16 Dar el Control al Usuario 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. 17 Dar el Control al Usuario “No se puede dibujar una forma compleja mediante órdenes del teclado (o entrada de voz). “
  • 18. 18 Dar el Control al Usuario 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. 19 Dar el Control al Usuario 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. 20 Dar el Control al Usuario 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. 21 Dar el Control al Usuario 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. 22 Reducir la carga de memoria del usuario
  • 23. 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. 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. 25 Principios de Diseño - 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 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. 26 Principios de Diseño - Reducir la carga de memoria 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. 27 Principios de Diseño - Reducir la carga de memoria ¿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. 28 Principios de Diseño - Reducir la carga de memoria 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.
  • 30. 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. 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. 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. 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).
  • 34. Análisis del Diseño de la interfaz de Usuario
  • 35. 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. 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. 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. 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. 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. 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
  • 41. 41 El Proceso - Modelo
  • 42. 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. 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. 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. 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. 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. 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. 48 Análisis del Usuario ¿Cómo se aprende lo que el usuario quiere de la interfaz?
  • 49. 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. 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. 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. 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. 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. 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. 55 Análisis del contenido de la pantalla 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. 56 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? 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. 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. 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. 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. 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. 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. 63 Tiempo de respuesta del sistema
  • 64. 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. Tiempo de respuesta del sistema
  • 65. 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. Tiempo de respuesta del sistema
  • 66. 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. 67 Servicios de ayuda al usuario 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. 68 Servicios de ayuda al usuario ¿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. 69 Servicios de ayuda al usuario ¿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.
  • 71. 71 Manipulación de información 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 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. 72 Manipulación de información de errores 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. 73 Manipulación de información de errores 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. 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. 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. 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. 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.
  • 78. Diseño de una interfaz para webapps
  • 79. 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. 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. 81 Principios y lineamientos del diseño de la interfaz • 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. 82 Principios y lineamientos del diseño 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 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.
  • 99. Flujos de Trabajo en el diseño de la interfaz Web.
  • 100. 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. 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. 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. 104 Ciclo de evaluación del Diseño
  • 105. 105 Evaluación del Diseño 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. 106 Evaluación del Diseño 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.