DISEÑO PARA WebApp

Modelado

¿Qué es?¿Qué es?

• Modelo que guía la construcción de una WebApp.

Jakob NielsenJakob Nielsen: “En esencia, existen dos enfoques básicos del diseño:El ideal artístico de expresarse uno mismo yEl ideal de ingeniería de resolver un

problema para el cliente.

¿Por qué es importante?¿Por qué es importante?

Permite al Ingeniero Web crear un modelo que pueda valorarse en calidad y

Mejorarse antes de que se generen el contenido y el código.

El diseño es el lugar donde se establece la calidad de la WebApp.

Diseño en la IWeb…Diseño en la IWeb…

Cuestiones genéricas como específicas.

Genéricas: el diseño resulta en un modelo que guía la construcción de la WebApp.

Específicas: debe abordar atributos clave de una WebApp en una forma que permita al ingeniero Web construir y ponerla a prueba de manera efectiva.

Diseño y calidad de una WebApp….Diseño y calidad de una WebApp….

Es la actividad de ingeniería que conduce a un producto de gran calidad.

¿qué es calidad?

En los sistemas basados en Web, la facilidad de uso, funcionalidad, confiabilidad, eficiencia y facilidad de mantenimiento, proporcionan una base útil para valorar la calidad.

Susan Weinschenk….Susan Weinschenk….

“Si los productos se diseñan para encajar mejor en las tendencias naturales del comportamiento humano, entonces la gente estará más satisfecha, más completa y será más productiva.”

Árbol de requisitos de calidad en una WebAppÁrbol de requisitos de calidad en una WebApp

Metas de Diseño...Metas de Diseño...

No importa el dominio, tamaño o complejidad de la aplicación: Simplicidad. “Todo con medida” Consistencia. Mismo patrón. Identidad. Identificación con el usuario. Robustez. “promesa” implícita al usuario. El usuario

espera contenido y funciones que sean relevantes para sus necesidades.

Navegabilidad. Simple, consistente, intuitiva y predecible.

Apariencia visual. Compatibilidad. Una WebApp se utilizará en una

diversidad de ambientes: equipos tipos de conexión a internet, sistemas operativos, navegadores.

Pirámide del diseño IWebPirámide del diseño IWeb

Diseño de interfaz Diseño de interfaz

Características: 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.

“Si un sitio es perfectamente utilizable pero carece de un estilo de diseño elegante y adecuado, fracasará.”

Curl Cloninger

“El mejor viaje es el que tiene el menor número de pasos. Acorte la distancia entre el usuario y su meta.”

Anónimo.

“La gente tiene muy poca paciencia con los sitios WWW pobremente diseñados.”

Jakob Nielsen y Annette Wagner.

También llamado diseño gráfico. Esfuerzo artístico que complementa los

aspectos técnicos de la Iweb. Sin él una WebApp puede ser funcional

pero no atractiva. Lleva a los usuarios a un mundo que

incluye un ámbito tanto emocional como intelectual.

Diseño estético efectivo jerarquía de usuarios del modelo de análisis.

Diseño estéticoDiseño estético

Sitios Web bien diseñadosSitios Web bien diseñados

En su artículo “The top twenty Web Design tips”, Marcelle Toor (http://www.graphics-design.com/Web/feature/tips.html), sugiere los siguientes sitos Web como ejemplos de buen diseño gráfico:

www.grantasticdesigns.com www.wpdfd.com www.workbook.com, sirve de aparador para el

trabajo de ilustradores y diseñadores. www.pbs.org/riverofsong, serie de televisión para

la radio y la televisión. www.rkdinc.com, firma de diseño. www.commarts.com, publicación para diseñadores

gráficos. www.btdnyc.com, firma de diseño.

Diseño de contenidoDiseño de contenido

Se enfoca en dos asuntos de diseño diferentes:Para los objetos de contenido,

mecanismos para establecer relaciones unos con otros (ingeniero Web).

Representación de información dentro de un objeto de contenido específico (la dirigen los publicistas y diseñadores gráficos)

Enlazado con las metas establecidas para la WebApp: Contenido que se presentará Usuarios que la visitarán Filosofía de navegación Arquitectura de contenido y arquitectura de la

WebApp. Forma en que los objetos de contenido se

estructuran para su presentación y navegación. Forma en que la aplicación se estructura para

gestionar la interacción del usuario.

Diseño arquitectónicoDiseño arquitectónico

Diseño de navegaciónDiseño de navegación

Acceso al contenido y las funciones de la Web. Identificar la semántica de navegación

para diferentes usuariosDefinir la mecánica (sintaxis) que logra

la navegación.Barras de navegaciónColumnas de navegaciónPestañasMapas de sitio

Casos de Uso:Casos de Uso:

Una estética de alto peinado.Una florería de primera.Una compañía que se dedica a la

venta de dispositivos de seguridad.Una banda musical nueva.Un acuarioUna agencia de modelos y

edecanes.

Fuente:Fuente:Fuente:Fuente:

“Ingeniería del software”, un enfoque práctico Roger S. Pressman Ed. McGraw Hill, sexta edición.

Páginas Web antes mencionadas.