Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Pirámide del diseño web y Diseño de interfaces de las webapps

Ing software dic 12
by

Una Persona

on 3 December 2012

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Pirámide del diseño web y Diseño de interfaces de las webapps

Piramide de diseño Web
y
Diseño de interfaces de Las WebApp Ana Nohemi Avalos Martinez Julieta Gonzalez Diaz David Enrique Orona Murcia

El diseño conduce a un modelo que contiene la mezcla adecuada de estética, contenido y tecnología. La mezcla variará dependiendo de la naturaleza de la WebApp, y, como consecuencia, las actividades de diseño también variarán Pirámide  del  diseño  Web Pirámide del diseño web Toda interfaz de usuario debe presentar las siguientes características fácil de usar fácil de aprender fácil de navegar intuitiva consistente Eficiente libre de errores funcional Debe ofrecer al usuario final una experiencia satisfactoria y gratificante Los conceptos, principios y métodos de diseño de la interfaz brindan al ingeniero web las herramientas requeridas para lograr esta lista de atributos. Principios y directrices del diseño de interfaz Bruce Tognozzi define un conjunto de características fundamentales que deben presentar todas las interfaces y, al hacerlo, establece una filosofía que debe seguir todo diseñador de interfaz de WebApp: Las interfaces efectivas son visualmente aparentes e indulgentes,
e implantan en sus usuarios una sensación de control.

Las interfaces efectivas no preocupan al usuario con los
trabajos internos de la computadora.

El trabajo se guarda de manera cuidadosa y continua,
con la opción total de que el usuario deshaga cualquier actividad
en cualquier tiempo.

Las aplicaciones y servicios efectivos realizan un máximo de
trabajo mientras demandan un mínimo de información a los usuarios. Mecanismos de control de la interfaz Los objetivos de la interfaz de una WebApp son: 1) Establecer una ventana consistente con el contenido y la funcionalidad que proporciona.
2) Guiar al usuario a través de una serie de interacciones con la WebApp.
3) Organizar las opciones de navegación y el contenido disponible para el usuario. Las opciones de navegación las implementa el diseñador seleccionando de entre varios mecanismos de interacción
Algunos son: Menús de navegación: menús clave que mencionen
contenido o funcionalidad clave. Iconos gráficos: botón, interruptores e imágenes gráficas
similares que permitan al usuario seleccionar alguna
propiedad o especificar una decisión. Imágenes gráficas: alguna representación gráfica que el usuario pueda
seleccionar y que implemente un vínculo hacia un objeto de contenido
o funcionalidad de la WebApp. Flujo  de  trabajo  en  el  diseño  de  la  interfaz Una vez que se han identificado las tareas del usuario, se crean y analizan sus escenarios (casos de uso) para definir un conjunto de objetos y acciones de interfaz.
Las siguientes tareas representan un flujo de trabajo rudimentario para el diseño de la interfaz WebApp. 1. Revisar la información contenida en el modelo de análisis y refinarla conforme se requiera. 2. Desarrollar un bosquejo aproximado de la plantilla de la interfaz WebApp. 3. Correlacionar los objetivos el usuario con acciones específicas de la interfaz. 4. Definir un conjunto de tareas de usuario que estén asociadas con cada acción.

5. Elaborar bosquejos con imágenes de la pantalla para cada acción de la interfaz. 6. Refinar la plantilla de la interfaz y los bosquejos con el uso de entradas desde el diseño estético.

7. Identificar los objetivos de la interfaz de usuario que se requiera para implementarlo. 8. Desarrollar una representación de procedimiento de la interacción del usuario con la interfaz.

9. Desarrollar una representación del comportamiento de la interfaz. 10. Describir la plantilla de la interfaz para cada estado.

11. Refinar y revisar el modelo de diseño de la interfaz. Es llamado también diseño grafico, es un esfuerzo artístico que
complementa los aspectos técnicos de la ingeniería web.

El diseño grafico considera cada aspecto de la presentación
y percepción de una WebApp.

El proceso de diseño grafico comienza con la plantilla y procede hacia la
consideración de esquemas de color globales, tipos de fuentes, tamaños
y estilos, el uso de medios audiovisuales complementarios y
todos los demás elementos estéticos de una aplicación. Desarrolla una representación de diseño para los objetos de contenido ,representa los mecanismos que se requieren para que establezcan sus relaciones uno con otro. Además, el diseño de contenido se ocupa de la representación de la información dentro de un objeto de contenido específico. Una vez modelados todos los objetos de contenido, la información que cada objeto entregará debe crearse y luego formatearse para satisfacer mejor las necesidades del cliente Está enlazado con las metas establecidas para la WebApp, el contenido que se presentará, los usuarios que la visitarán y la filosofía de navegación que se establezca
. El diseño de la arquitectura de contenido se centra en la definición de la estructura hipermedia global de la WebApp. El diseño se puede elegir de cuatro diferentes estructuras de contenido



Estructuras lineales.
Estructuras en retícula.
Estructuras jerárquicas.
Estructuras en red
o “Web pura”.
. La arquitectura de WebApp describe una infraestructura que permite a un sistema o aplicaciones basadas en web lograr sus objetivos de negocios. Una vez establecida la arquitectura de
WebApp y la identificación de los
componentes,
el diseñador debe definir las rutas
de navegación que habiliten
para los usuarios el acceso al
contenido y las funciones de la WebApp.
Para lograr esto el diseñador debe: 1. Identificar la semántica de navegación para diferentes usuarios del sitio

2.Definir la mecánica que logra la navegación. Patrones de diseño hipermedia. Los patrones de diseño aplicados en la Ingeniería Web abarcan dos grandes clases:
patrones de diseño genérico que son aplicables a todos los tipos de software
2) patrones de diseño hipermedia que son específicos de la WebApp. En el contexto de los sistemas basados en Web German y Cowan sugieren las siguientes categorías de patrones: Patrones arquitectónicos.
Patrones de construcción y
componentes.
Patrones de navegación.
Patrones de presentación.
Patrones de interacción
comportamiento/usuario. Diseño de interfaces de las webapps La interfaz de usuario de una WebApp
es la primera impresión.
Independientemente del valor del
contenido, la sofisticación de las capacidades, los servicios de procesamiento y el beneficio global de la WebApp en sí,
una interfaz con un diseño pobre
decepcionará al usuario potencial
y podrá de hecho hacer que
el usuario se vaya a cualquier
otro sitio. Dado el gran volumen de WebApps
que compiten virtualmente en todas
las áreas temáticas, la interfaz
debe arrastrar inmediatamente al usuario potencial. Nielsen y Wagner sugieren unas cuantas
líneas generales y sencillas en el rediseño de una WebApp: Probabilidad de que los errores del servidor, incluso los más pequeños,
haran que el usuario abandone el sitio Web y busque
información y servicios en algún otro sitio.

La velocidad de lectura del monitor de una computadora es aproximadamente un 25 por 100 más lento que
leer una copia impresa.
Por tanto, no hay que obligar al usuario a leer cantidades voluminosas de texto,
particularmente cuando el texto explica la operación
de la WebApp o ayuda a navegar por la red.

Evite los símbolos bajo construcción, estos levantan
expectación y provocan un enlace innecesario que
seguramente sea decepcionante. Los usuarios prefieren no tener que recorrer la pantalla.
Dentro de las dimensiones normales de una ventana
del navegador se deberá incluir información
importante.

Los menús de navegación y las barras de cabecera
se deberán diseñar consecuentemente y deberán
estar disponibles en todas las páginas a las que
el usuario tenga acceso.

El diseño no deberá depender de las funciones
del navegador para ayudar en la navegación.

La estética nunca deberá sustituir la funcionalidad.
Por ejemplo, un botón sencillo podría ser una
opción de navegación mejor que una imagen o icono
estéticamente agradables, pero vagos cuya
intención no es muy clara. Las opciones de navegación deberán ser obvias, incluso para el usuario casual.
El usuario deberá buscar la pantalla para determinar cómo enlazar con otro contenido o servicio.
Una interfaz bien diseñada mejora la percepción del contenido o de los servicios del usuario que proporciona el sitio Web.
No tiene que ser necesariamente deslumbrante, pero deberá estar siempre bien estructurada y ergonómica. 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 (esto es, el usuario) y la computadora. Las 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 forman en realidad 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
de software tan importante. Dar el control al usuario Los principios de diseño que permiten dar control al usuario son:

Definir los modos de interacción de manera que no obligue a que el usuario realice acciones innecesarias y no deseadas.
Un modo de interacción es el estado actual de la interfaz.
Por ejemplo
si en el procesador de textos se selecciona el corrector ortográfico, el software pasa a modo corrector ortográfico. No hay ninguna razón por la que obligar a que el usuario permanezca en este modo si el usuario desea continuar editando una parte pequeña de texto. El usuario deberá tener la posibilidad de entrar y salir de este modo sin mucho o ningún esfuerzo. ¿Cómo se diseñan
interfaces que den
el control al usuario? Tener en consideración una interacción flexible.

Permitir que la interacción del usuario se
pueda interrumpir y deshacer.

Aligerar la interacción a medida que avanza el nivel de
conocimiento y permitir personalizar la interacción.

Ocultar al usuario ocasional los entresijos técnicos.

Diseñar la interacción directa con los objetos que aparecen
en la pantalla. Reducir la carga de memoria del usuario Cuanto más tenga que recordar un usuario, más propensa a errores será su interacción con el sistema. Esta es la razón por la que una interfaz de usuario bien diseñada no pondrá a prueba la memoria del usuario. Siempre que sea posible, el sistema deberá recordar la información pertinente y ayudar a que el usuario recuerde mediante un escenario de interacción.
Construcción de una interfaz consistente. La interfaz deberá adquirir y presentar la información de forma consistente. Esto implica: 1.- 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.
2.-Que todos los mecanismos de entrada se limiten a un conjunto limitado y que se utilicen consecuentemente por toda la aplicación.
3.- Que los mecanismos para ir de tarea a tarea se hayan definido e implementado consecuentemente.

Diseño de la interfaz de usuario El proceso global para el diseño de la interfaz de usuario comienza con la creación de diferentes modelos de funcionamiento del sistema (la percepción desde fuera).
El proceso de diseño de la interfaz de usuario El proceso de diseño de la interfaz de usuario acompaña cuatro actividades distintas de marco de trabajo: 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
Proceso de diseño de la interfaz de usuario ¿Cuál es el objetivo del diseño de la interfaz de usuario? El objetivo del diseño de la interfaz es definir un conjunto de objetos y acciones de interfaz (y sus representaciones en la pantalla) que posibiliten al usuario llevar a cabo todas las tareas definidas de forma que cumplan todos los objetivos de usabilidad definidos por el sistema.
Resumen Se puede argumentar que la interfaz de usuario es el elemento más importante de un sistema o producto basado en computadora.
Si la interfaz tiene un diseño pobre, la capacidad que tiene el usuario de aprovecharse de la potencia de proceso de una aplicación se puede dificultar gravemente.
En efecto, una interfaz débil puede llevar al fracaso de una aplicación con una implementación sólida y un buen diseño. Existen tres principios importantes que dirigen el diseño de interfaces de usuario eficaces:
1. poner el control en manos del usuario.
2. reducir la carga de la memoria del usuario. 3. construir una interfaz consecuente. La interfaz de usuario es la ventana del
software.
En muchos casos, la interfaz modela la percepción que tiene un usuario de la
calidad del sistema.
Si la ventana se difumina, se ondula o
se quiebra, el usuario puede rechazar un sistema potente basado en computadora.

Full transcript