19.3 diseño de la interfaz de la Web App

download 19.3 diseño de la interfaz de la Web App

of 36

Transcript of 19.3 diseño de la interfaz de la Web App

Modelo de diseo para la aplicacin Web

Diseo de la internas de la WebApp

Toda interfaz de usuario del usuario se debe de representar en el fcil manejo, fcil de aprender, fcil de navegar, intuitiva, consistente, eficiente, libre de errores y funcional. Los conceptos, mtodos de diseo de la interfaz brindan al ingeniero Web las herramientas para lograr la lista de atributos

Un ingeniero Web debe de disear una interfaz de modo que responda tres Dnde Estoy? Qu Puedo Hacer Ahora? Dnde e Estado, A Donde Voy?

Dnde Estoy? Ofrecer una indicacin de que se a tenido acceso a la WebApp. Informar al usuario de su ubicacin de la jerarqua de contenido.

Qu Puedo Hacer Ahora? La interfaz siempre debe ayudar al usuario a entender sus opciones actuales: Que funciones estn disponibles Que vnculos estn vivos Que contenido es relevante

Dnde e Estado, A Donde Voy? La interfaz debe facilitar la navegacin, debe proporcionar una forma fcil de entender de donde a estado el usuario y que rutas puede tomar para moverse a cualquier parte dentro de la WebApp.

Principios y directrices del diseo de la interfazInterfaces interactivas: son visualmente aparentes e indulgentes, los usuarios ven rpidamente la envergadura de sus opciones, comprenden como lograr sus metas y hacen su trabajo. Estas no preocupan al usuario con los trabajos internos del sistema

Las aplicacin de y servicios de disear interfaces que muestran dichas caractersticas un conjunto que identifica un conjunto de diseos primordiales:

Anticipacin Comunicacin Consistencia Autonoma controlada Eficiencia Flexilidad Enfoque Objetivos de interfaz humana Reduccin de latencia Facilidad de aprendizaje Metforas Legibilidad Estado de rastro Navegacin visible

Anticipacin es anticipar el siguiente movimiento del usuario en una WebApp, proporcionar facilidades de navegacin que permitan hacerlo sin solicitarle al usuario una bsqueda.

Comunicacin La interfaz debe de comunicar el estado de cualquier actividad que haya iniciado al usuario.

Debe de comunicar el estado del usuario (la identificacin del usuario). Tambin la ubicacin dentro de la jerarqua de contenido de la WebApp.

Consistencia Es el uso de controles de navegacin, mens, iconos, y lo que es la esttica a travs de toda la WebApp. Toda caracterstica de la interfaz debe responder a las expectativas del usuario.

Autonoma controlada Facilitacin al usuario de movimiento a travs de toda la WebApp, pero la debe de hacer en forma que solo lo haga en las navegaciones establecidas para la navegacin.

Eficiencia Es el conjunto de el diseo de la WebApp y su interfaz lo cual optimizan la eficiencia laboral del usuario y no la del ingeniero Web que la disea

Flexilidad La interfaz debe ser flexible para que algunos usuarios realicen tareas directamente y a otros que exploren.

Enfoque La interfaz de la WebApp (y contenido) se debe de enfocar en tareas importantes para el usuario. En toda hipermedia existe una tendencia para dirigir al usuario hacia contenido mal relacionado,

Objetivos de interfaz humana La desarrollacion de una gran librera de objetos de interfaz humana reutilizables para las WebApp. Las libreras son paquetes, interfaces y clases java

Reduccin de latencia Las demoras deben reconocerse de modo que el usuario comprenda lo que esta ocurriendo como proporcionar un audio en una accin inmediata o una barra de progreso.

Facilidad de aprendizaje La internas debe acentuar un diseo simple e intuitivo que organice el contenido y la funcionalidad de categoras obvias para el usuario.

Metforas Llamar imgenes y conceptos de la experiencia del usuario pero no una reproduccin exacta,

Legibilidad Toda la informacin debe de ser legible para cualquier persona.

Se debe de enfatizar los estilos de letra legible, tamaos de fuente, color de fondo, etc.,

Estado de rastro Es cuando el estado de la interaccin del usuario debe rastrearse y almacenarse de modo que un usuario pueda salir y regresar mas tarde al lugar de donde salio. Los Cookie se pueden disear para lo anterior

Navegacin visible Es proporcionar la ilusin de que los usuarios estn en el mismo lugar, ya que el usuario recupera objetos de contenido y selecciona funciones que se despliegan y ejecutan por medio de la interfaz

Directrices pragmticas en el diseo de interfaces (rediseo de una gran WebApp)

No forzar al usuario a leer voluminosas cantidades de texto como cuando se ofrece ayuda en la navegacin. Los mens de navegacin y encabezados deben de estar diseados de manera consistente y disponibles en toda la pagina

Las opciones de navegacin deben de ser obvias, el usuario no debe buscar en la pantalla como vincularse con otro contenido o servicio. Evitar paginas en construccin provocan decepciones

Mecanismos De Control De La Interfaz

Establecer una ventana consistente con el contenido y la funcionalidad que proporciona. Guiar al usuario a travs de una serie de interacciones de la WebApp. Organizar las opciones de navegacin y contenido disponible para el usuario,

Las opciones de navegacin las implementa el diseador seleccionando de entre varios mecanismos de interaccin: Mens de navegacin Iconos grficos Imgenes graficas

Flujo De Trabajo En El diseo De La Interfaz

Revisar la informacin contenida en el modelo de anlisis y refinarla conforme se requiera Desarrollar un prototipo aproximado de la interfaz de la WebApp el cual se revisa y se refina como se requiera

Correlacionar los objetivos del usuario con acciones especificas de la interfaz Definir un conjunto de tareas de usuario que estn asociados con cada accin

Elaborar bosquejos con imgenes de la pantalla para cada accin de la interfaz

Refinar la plantilla de la interfaz y los bosquejos con el uso de entradas desde el diseo esttico Identificar los objetos de la interfaz del usuario que se requieran para implementarla

Desarrollar un representacin de procedimiento de la interaccin del usuario con la interfaz

Desarrollar una representacin del comportamiento de la interfaz Describir la plantilla de la interfaz para cada estado

Refinar y revisar el modelo de diseo de la interfaz ( facilidad de uso) El conjunto de tareas finales que haya elegido un equipo de ingeniera Web se debe de adaptar a los requisitos especiales de la aplicacin que se va a construir.