UNIDAD 4 DISEÑO DE IGU WEBAPPS

Vista previa del material en texto

UNIDAD DE COMPETENCIA 4.
INGENIERÍA DE SISTEMAS.
UBA.
DISEÑO DE LA IGU PARA WEBAPPS.
USABILIDAD…
Toda interfaz de usuario para una webapp debe tener la misma característica de usabilidad de cualquiera aplicación de software tradicional.
INTERFAZ WEBAPP...
Una interfaz webapp debe responder tres preguntas principales del usuario final: 
1ERA PREGUNTA...
¿Dónde estoy? La interfaz debe indicar en que webapp está el usuario y en que parte se encuentra en la jerarquía del contenido.
EJEMPLO…
2DA. PREGUNTA…
¿Qué puedo hacer ahora? La interfaz debe informar al usuario de cuales funciones están disponibles para él, que vínculos están vivos, que contenido es relevante, entre otros. 
EJEMPLO DE VINCULOS VIVOS….
EJEMPLO DE UN VINCULO “MUERTO”…
¿Dónde he estado, hacia dónde voy? La interfaz debe facilitar la navegación. Para ello debe disponer de un “mapa” que exhiba donde ha estado el usuario y las direcciones que pueden tomarse para moverse a cualquier componente de la webapp.
3ERA. PREGUNTA…
EJEMPLO…
Una interfaz de webapp debe dar respuesta a todas estas preguntas cuando el usuario final navegue por sus contenidos y funciones o componentes.
ENTONCES…
 
1.- Principios y lineamientos del diseño de la interfaz.
La interfaz de usuario es la “primera impresión” que recibe el usuario, por eso la interfaz debe atrapar de inmediato al usuario principal, sin importar el valor de su contenido, ni la sofisticación de sus capacidades y servicios de procesamiento.
1.2.- Principios.
Previsión.
Comunicación.
Consistencia.
Autonomía controlada.
Eficiencia.
Flexibilidad.
1.2.- Principios. Cont…
Centrarse.
Ley de Fitt.
Objetos de la interfaz humana.
Reducción de la latencia.
Aprendizaje.
Metáforas.
1.2.- Principios. Cont…
Mantener la integridad de los productos del trabajo.
Legibilidad.
Dar seguimiento al estado.
Navegación visible.
La aplicación debe diseñarse de tal manera que podamos prever el siguiente paso del usuario.
1.2.1.- PREVISIÓN….
2.1.2.- Comunicación.,,
La interfaz debe comunicar el estado de cualquier actividad iniciada por el usuario.
EJEMPLO...
2.1.3.- CONSISTENCIA…
Debe ser consistente en la webapp el uso de controles de navegación, menús, iconos, y estética (color, forma, y distribución). Por último, toda característica debe responder de manera consistente con las expectativas del usuario.
2.1.4.- AUTONOMÍA CONTROLADA…
Debe facilitar el movimiento del usuario a través de la webapp, respetando las convenciones que se hayan establecido para la aplicación.
2.1.5.- EFICIENCIA…
Debe optimizar la eficiencia del trabajo del usuario. La productividad del usuario es la meta número uno, de entender la diferencia vital entre construir un sistema eficiente y dar poder a un usuario eficiente. 
2.1.6.- FLEXIBILIDAD…
Debe tener flexibilidad suficiente para permitir que algunos usuarios realicen tareas directamente, mientras otros exploran la aplicación de manera aleatoria. 
2.1.7.- CENTRARSE…
La interfaz debe mantenerse centrada en las tareas en curso del usuario.
2.1.8.- LEY DE FITT…
Si una secuencia de selecciones o entradas estandarizadas (con muchas opciones diferentes dentro de la secuencia) es definido por una transacción del usuario, la primera selección debe estar físicamente cerca de la siguiente selección. 
EJEMPLO…
2.1.9.- OBJETOS DE LA INTERFAZ HUMANA…
Se ha desarrollado una basta biblioteca de objetos reutilizables de interfaces humanas para webapps. Úselas. 
EJEMPLO...
2.1.10. REDUCCIÓN DE LA 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 finalice la operación.
EJEMPLO…
2.1.10. REDUCCIÓN DE LA LATENCIA. EJEMPLO…
Para reducir la latencia, en la imagen ANTERIOR se despliega una barra de avance ubicada en el centro de la página que se mueve de izquierda a derecha, que indica que hay un procesamiento en marcha.
2.1.11.- APRENDIZAJE…
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.
2.1.12.- METÁFORAS…
Una interfaz de usuario que usa una metáfora de información es más fácil de aprender y de usar, en la medida que la metáfora sea apropiada para la aplicación y el usuario.
2.1.12.- METÁFORAS…
Una metáfora de información 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. Son raras hoy en día…
EJEMPLO…
2.1.13.- Modelo de interacción
 de la webapp.
El prototipo debe implementar los vínculos de navegación principales y representar el panel principal muy parecida a la que se construirá.
2.3 Modelo funcional 
 de la webapp.
El modelo funcional se enfrenta a dos elementos de procesamiento de la webapp, cada uno de los cuales representa un nivel distinto de abstracción del procedimiento:
2.3 Modelo funcional 
 de la webapp.
Funciones observables por los usuarios de la webapp.
Las operaciones contenidas en las clases de análisis identificadas en el modelo de requerimientos.
2.3 Modelo funcional 
 de la webapp.
La funcionalidad observable por el usuario final agrupa todas las funciones de procesamiento (identificadas por los casos de uso y que se llamarán componentes) que inicie directamente el usuario.
2.3 Modelo funcional 
 de la webapp.
Estas funciones se implementan con el uso de las operaciones o métodos dentro de cada una de las clases de análisis; pero lo que verá el usuario final será la función o componente.
2.3 Modelo funcional 
 de la webapp.
Sin que importe el nivel de abstracción del procedimiento, se puede utilizar el diagrama de actividades UML para representar los detalles correspondientes.
2.3 Modelo funcional 
 de la webapp.
Se utilizarán los diagramas de actividad en aquellas funciones relativamente complejas durante el análisis de los requerimientos.
2.3 Modelo funcional 
 de la webapp.
Gran parte de la complejidad de una webapp no está en las funciones que provee, sino en la naturaleza de la información a la que accede y en las formas que son manipuladas.
2.4 Modelo de navegación 
 de la webapp.
Para modelar la navegación se considera como navegará cada categoría de usuario de un elemento de la webapp (como un objeto de contenido) a otro. La mecánica de navegación es parte del diseño. En este modelo podrían considerarse ciertas preguntas como parte del análisis:
2.4 Modelo de navegación 
 de la webapp.
¿Cuál es la prioridad de presentación?
¿Se deben forzar a los usuarios finales a navegar en una dirección específica?
¿Cómo deberían manipularse los errores en la navegación?
2.4 Modelo de navegación 
 de la webapp.
¿La navegación será por vínculos, acceso basado en búsquedas, o por otro medio?
¿Debe mantenerse un registro de usuarios durante la navegación?
2.4 Modelo de navegación 
 de la webapp.
Estas preguntas y muchas otras que aparezcan durante el análisis, deben ser consideradas para el modelo de navegación.
2.5 Modelo de configuración 
 de la webapp.
En ciertos casos, el modelo de configuración no es sino una lista de atributos del lado del servidor y del lado del usuario final.
2.5 Modelo de configuración 
 de la webapp.
Sin embargo, para webapps complejas son varias las dificultades de configuración (base de datos, servidores, entre otros) que afectan tanto el análisis como el diseño.
2.5 Modelo de configuración 
 de la webapp.
El diagrama de despliegue UML se utiliza en situaciones en las que deben considerarse arquitecturas de configuración complejas.
2DA. EVALUACIÓN 2DO CORTE. 
 
Aplicando proceso inverso:
1.- identificar las categorías de usuarios, el contexto o dominio, las metas de información y aplicación. Utilliza unawebapp de su preferencia. (no bancarias). 4 ptos.
2.- identificar las relaciones de los objetos de contenido y datos con su componente y la jerarquía que mantiene la aplicación. 16 ptos
2DA. EVALUACIÓN 2DO CORTE. 
 
Aplicando proceso inverso:
2.- Crear arboles de datos por componente. Mínimo 4 componentes.
3.- Fecha de entrega: 12 feb 2020. 15%