DISEÑO PARA WebApp Modelado

¿Qué es? Modelo que guía la construcción de una WebApp. Jakob Nielsen : “En esencia, existen dos enfoques básicos del diseño: El ideal artístico de expresarse uno mismo y El ideal de ingeniería de resolver un problema para el cliente.

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

Jakob Nielsen : “En esencia, existen dos enfoques básicos del diseño:

El ideal artístico de expresarse uno mismo y

El ideal de ingeniería de resolver un problema para el cliente.

¿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.

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… 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.

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…. 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.

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…. “ 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.”

“ 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

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.

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 IWeb

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 .

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.

“ 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ético

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.

Sitios 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.

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 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)

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ónico

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 de navegación Acceso al contenido y las funciones de la Web. Identificar la semántica de navegación para diferentes usuarios Definir la mecánica (sintaxis) que logra la navegación. Barras de navegación Columnas de navegación Pestañas Mapas de sitio

Acceso al contenido y las funciones de la Web.

Identificar la semántica de navegación para diferentes usuarios

Definir la mecánica (sintaxis) que logra la navegación.

Barras de navegación

Columnas de navegación

Pestañas

Mapas de sitio

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 acuario Una agencia de modelos y edecanes.

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 acuario

Una agencia de modelos y edecanes.

Fuente: “ Ingeniería del software ”, un enfoque práctico Roger S. Pressman Ed. McGraw Hill, sexta edición. Páginas Web antes mencionadas.

“ Ingeniería del software ”, un enfoque práctico

Roger S. Pressman

Ed. McGraw Hill, sexta edición.

Páginas Web antes mencionadas.