13.Diseño de WebApps

Ramiro Estigarribia Canese

Enfoques del Diseño de WebApps.Existen dos enfoques fundamentales del diseño: ➔ El ideal artístico de expresarse a sí mismo. ➔ El ideal de la ingeniería de resolver un problema

para un cliente.En la primera década del desarrollo de la web (1995-2005), el enfoque que elegían muchos diseñadores era el ideal artístico. El diseño se desarrollaba de manera ad hoc y por lo general se efectuaba a medida que se generaba HTML. Después evolucionó a partir de la visión artística que surgió de la construcción de webapps.

¿Qué es el Diseño de WebApps?El diseño de webapps incluye actividades técnicas y no técnicas que incluyen lo siguiente: establecer la vista y sensación de la webapp, creando la distribución estética de la interfaz de usuario, definiendo la estructura arquitectónica general, desarrollando el contenido y la funcionalidad queresiden en la arquitectura y planeando la navegaciónque ocurre dentro de la webapp.

¿Por qué es importante?El diseño permite crear un modelo que se evalúe respecto de su calidad para mejorarlo antes de la generación de contenido y código, de la realización de las pruebas y del involucramiento de un gran número de usuarios.

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

Calidad del Diseño de WebApps➔ El diseño es la actividad de la ingeniería

que genera un producto de calidad. ¿Cómo es la calidad en una WebAPP?

➔ Toda persona que haya navegado en internet, o que haya utilizado una intranet corporativa se ha formado una opinión sobre lo que constituye una “buena” webapp.

Los puntos de vista individuales varían mucho: ➔ A algunos usuarios les gustan los gráficos

brillantes, otros prefieren el texto simple, algunos más demandan mucha información, mientras los hay que desean una presentación abreviada.

¿Cómo se percibe la calidad de una WebApp?

➔ Cinco atributos principales:

Atributos Adicionales de Calidad - Seguridad➔ Las webapps se han integrado con bases de datos

críticas. ➔ Las aplicaciones de comercio electrónico extraen y

almacenan información delicada para el cliente. ➔ La medida clave de la seguridad de una webapp y

de su ambiente de servidor es su capacidad para rechazar los accesos no autorizados y detener un ataque proveniente del exterior.

Atributos Adicionales de Calidad - Disponibilidad➔ Inclusive la mejor WebApp será un fracaso si no se

encuentra disponible. ➔ En sentido técnico, la disponibilidad es la medida

porcentual del tiempo que una webapp puede utilizarse. El usuario final común espera que las webapps se hallen disponibles las 24 horas de los 365 días del año.

➔ Además es importante mantente la mayor compatibilidad con navegadores y plataformas. Esto hace que quienes tengan una configuración diferente no puedan utilizar la webapp. Invariablemente, el usuario irá a otro sitio.

Atributos Adicionales de Calidad - Escalabilidad➔ ¿Una webapp y su ambiente de servidor pueden

crecer para que manejen 100, 1.000, o 100.000 usuarios?

➔ ¿La webapp y los sistemas con los que tiene interfaz son capaces de manejar una variación significativa del volumen o su respuesta se desplomará?

➔ No basta construir una webapp exitosa. ➔ También es importante que pueda asimilar la carga

del éxito (muchos más usuarios) y que tenga aún más éxito.

Metas del Diseño de WebApps - Simplicidad.Se sugiere un conjunto de metas para el diseño que son aplicables virtualmente a toda webapp, sin importar su dominio de aplicación, tamaño o complejidad.El contenido debe ser informativo pero sucinto y debe utilizar un modo de entrega (texto, imágenes, video o audio) que resulte apropiado para la información que se envíe. La estética debe ser agradable pero no abrumadora.

Metas del Diseño de WebApps - Simplicidad.➔ El diseño de la estética y la navegación deben ser

consistentes con el dominio de la aplicación para la que se va a elaborar.

➔ Un sitio web para un grupo de hip-hop sin duda tendrá un aspecto y sensación distintos que una webapp diseñada para una Financiera.

➔ La arquitectura de la webapp será diferente por completo, las interfaces se construirán para que reciban a distintas categorías de usuarios.

➔ Usted (y quienes contribuyan al diseño) debe trabajar para establecer la identidad de la webapp por medio del diseño.

Metas del Diseño de WebApps - Navegabilidad.➔ Debe estar diseñada en forma tal que sea intuitiva

y predecible. Es decir, el usuario debe comprender cómo moverse por la webapp sin tener que buscar vínculos o instrucciones para la navegación.

➔ Nada es más frustrante que intentar encontrar el vínculo vivo apropiado entre muchas imágenes.

➔ También es importante colocar los vínculos hacia el contenido y las funciones de la webapp en una ubicación predecible en cada página web.

Metas del Diseño de WebApps - Atractivo Visual.De todas las categorías de software, las aplicaciones web son indiscutiblemente las más visuales, dinámicas y estéticas. La belleza (atractivo visual) radica sin lugar a dudas en los ojos del espectador, pero muchas características del diseño (aspecto y sensacióndel contenido, distribución de la interfaz, coordinación del color, balance del texto, imágenes y otros medios) aumentan el atractivo visual.

Diseño de la Interfaz.➔ Aunque las webapps plantean dificultades

especiales en el diseño de la interfaz de usuario, los principios generales son aplicables.

➔ Uno de los retos es la naturaleza indeterminada del punto en el que entra el usuario. Es decir, éste puede ingresar por una ubicación “inicial” de la webapp (la página de arranque).

➔ El diseño debe dar características de navegación en la interfaz que acompañen a todos los objetos sin importar el modo en el que el usuario ingrese.

Recomendaciones de Navegación1. Menús de navegación: contienen palabras clave

(organizadas en forma vertical u horizontal) que enlistan contenido o funciones clave.

2. Iconos gráficos: botones, interruptores y otras imágenes similares que permiten que el usuario seleccione alguna propiedad o que especifique una decisión.

3. Imágenes: cierta representación gráfica que el usuario selecciona para establecer un vínculo hacia un objeto de contenido o función de la webapp.

Diseño de la Estética➔ El diseño gráfico, es una actividad artística que

complementa los aspectos técnicos del diseño de las WebApps. Sin estética, una WebApp tal vez sea funcional pero no atractiva.

➔ Con estética, una WebApp lleva a sus usuarios a un mundo que los sitúa en un nivel tanto visceral como intelectual.

Diseño de la Estética (continuación)➔ Pero, ¿qué es la estética? Hay un viejo refrán que

dice: “La belleza está en los ojos del espectador”. Esto es particularmente cierto cuando se trata del diseño estético de las webapps.

➔ Para llevar a cabo con eficacia, hay que volver a la jerarquía del usuario desarrollada como parte del modelo de requerimientos (véase el capítulo 5) y preguntar:

➔ ¿Quiénes son los usuarios de la webapp y qué “vista” desean tener?

Diseño de Contenido.➔ El diseño del contenido define distribución,

estructura y bosquejo de todo el contenido que se presenta como parte de la webapp, y establece las relaciones entre los objetos del contenido.

➔ El diseño del contenido comienza con la representación de sus objetos, así como las asociaciones y relaciones entre ellos. Un conjunto de primitivas de navegación establece la base para el diseño de ésta.

Diseño Arquitectónico.➔ El diseño arquitectónico identifica la

estructura general de la webapp, e incluye la arquitectura a nivel de red.

➔ Los estilos arquitectónicos para el contenido incluyen estructuras lineales, de malla, jerárquicas y de red.

➔ La arquitectura de la webapp describe una infraestructura que permite que un sistema o aplicación basado en web cumpla con sus objetivos de negocios.

Resumen y Conclusiones➔ Para lograr calidad, un buen diseño de la webapp

debe tener las siguientes características: sencillez, consistencia, identidad, robustez, navegabilidad y atractivo visual.

➔ El diseño estético, llamado también diseño gráfico, describe el “aspecto y sensación” de la webapp, e incluye esquemas de color; distribución geométrica; tamaño del texto, de las fuentes y su colocación; empleo de imágenes y otras decisiones relacionadas con la estética.