DISEÑO DE WEBAPPS

El diseño es la actividad de la ingeniería que genera un producto de alta calidad. Esto lleva a unapregunta recurrente que surge en todas las disciplinas de la ingeniería: ¿qué es calidad? En esta sección estudiaremos la respuesta en el contexto del desarrollo de webapps.Toda persona que haya navegado en la red mundial 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. A algunos les agradan las herramientas analíticas sofisticadas o tener acceso a bases de datos y a otros les gusta lo sencillo. En realidad, la percepción del usuario acerca de lo que es “bueno” (y en consecuencia la aceptación o rechazo de la webapp) puede ser un aspecto más importante que cualquier otro de índole técnica sobre la calidad de las webapps.Pero, ¿cómo se percibe la calidad de una webapp? ¿Qué atributos debe tener para que haya bondad ante los ojos de los usuarios finales y a la vez existan las características técnicas de calidad que permitan corregir, adaptar, mejorar y dar apoyo a la aplicación en el largo plazo?En realidad, a las webapps se aplican todas las características técnicas de calidad del diseño estudiadas en el capítulo 8 y los atributos generales de calidad que se vieron en el capítulo 14.Sin embargo, los más relevantes de estos atributos generales —usabilidad, funcionalidad, confiabilidad, beficiencia y susceptibilidad de recibir mantenimiento— brindan una base útil para evaluar la calidad de los sistemas basados en web.Olsina et al. [Ols99] han preparado un “árbol de requerimientos de calidad” que identifica un conjunto de atributos técnicos —usabilidad, funcionalidad, confiabilidad, eficiencia y susceptibilidad de recibir mantenimiento— que generan la calidad en las webapps.2 La figura 13.1 resume su trabajo. Los criterios que ahí aparecen tienen interés especial si el lector diseña, construye y da mantenimiento a webapps a largo plazo.Offutt [Off02] agrega los siguientes a los cinco atributos principales de la calidad que se mencionan

Seguridad. Las webapps se han integrado mucho con bases de datos críticas, corporativas y gubernamentales. Las aplicaciones de comercio electrónico extraen y después almacenan información delicada para el cliente. Por estas y muchas otras razones, la seguridad de las webapps tiene importancia capital en muchas situaciones. La medida clave de la seguridad de una webapp y de su ambiente de servidor es su capacidad para rechazar los accesos no autorizados o para detener un ataque proveniente del exterior. El análisis detallado de la seguridad de las webapps está más allá del alcance de este libro. Si el lector está interesado en este tema, puede consultar [Vac06], [Kiz05] o [Kal03]. Disponibilidad. Aun la mejor webapp será incapaz de satisfacer las necesidades de los usuarios 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. Algo menos que eso es tomado como inaceptable.3 Pero el “tiempo arriba” no es el único indicador de la disponibilidad. Offutt [Off02] sugiere que “el empleo de características que sólo se encuentren disponibles en un navegador o plataforma” hace que quienes tengan una configuración diferente de navegador o plataforma no puedan utilizar la webapp. Invariablemente, el usuario irá a otro sitio.Escalabilidad. ¿Una webapp y su ambiente de servidor pueden crecer para que manejen 100,1 000, 10 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á (o cesará)?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.Tiempo para llegar al mercado. Aunque el tiempo que toma llegar al mercado en realidad no es un atributo de la calidad en el sentido técnico, sí lo es desde el punto de vista de la empresa.Es frecuente que la primera webapp que llega a un segmento específico del mercado obtenga un número desproporcionado de usuarios finales.

METAS DEL DISEÑOEn su columna periódica sobre el diseño web, Jean Kaiser [Kai02] 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.Simplicidad: Aunque parezca algo pasado de moda, el aforismo “todo con moderación” es aplicable a las webapps. Existe una tendencia entre ciertos diseñadores a dar al usuario final“demasiado”: contenido exhaustivo, extremos visuales, animaciones intrusas, páginas web enormes… y la lista sigue. Es mejor moderación y simplicidad.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 (demasiados colores tienden a distraer al usuario en vez de mejorar la interacción). La arquitectura debe lograr los objetivos de la webapp de la manera más sencilla posible. La navegación debe ser directa y sus mecanismos, obvios para la intuición del usuario final. Las funciones deben ser fáciles de utilizar y más fáciles de entender.Consistencia. Esta meta del diseño se aplica virtualmente a todo elemento del modelo del diseño. El contenido debe construirse de modo congruente (formato y tipografía del texto deben ser los mismos en todos los documentos de texto; las imágenes deben tener coherencia en su aspecto, color y estilo). El diseño gráfico (estética) debe presentar una vista consistente en todas las partes de la webapp. El diseño arquitectónico debe establecer plantillas que generen una estructura de hipermedios constante. El diseño de la interfaz debe definir modos consistentes de interacción, navegación y despliegue del contenido. Los mecanismos de navegación deben usarse de manera consistente en todos los elementos de la webapp. Como dice Kaiser [Kai02]:“recuerde que para un visitante, un sitio web es un lugar físico. Si sus páginas no tienen un diseño consistente, son fuente de confusión”.Identidad. El diseño de la estética, la interfaz y la navegación de una webapp 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 compañía de servicios financieros. La arquitectura de la webapp será diferente por completo, las interfaces se construirán para que reciban a distintas categorías de usuarios, la navegación se organizará para que cumpla objetivos diferentes. Usted (y quienes contribuyan al diseño) debe trabajar para establecer la identidad de la webapp por medio del diseño.Robustez. Con base en la identidad que se haya establecido, es frecuente que una webapp haga una “promesa” implícita al usuario. Éste espera contenido y funciones robustas que sean relevantes para sus necesidades. Si no existen o son insuficientes, es probable que la webapp fracase.Navegabilidad. Ya se dijo que la navegación debe ser sencilla y consistente. También debe estar diseñada en forma tal que sea intuitiva y predecible. Es decir, el usuario debe comprende cómo moverse por la webapp sin tener que buscar vínculos o instrucciones para la navegación.

Cuando el usuario interactúa con un sistema basado en computadora, se aplica un conjunto de principios fundamentales y lineamientos generales de diseño. Éstos se estudiaron en el capítuloAunque las webapps plantean algunas dificultades especiales en el diseño de la interfaz de usuario, los principios y lineamientos básicos son aplicables.Uno de los retos del diseño de la interfaz de las webapps es la naturaleza indeterminada del punto en el que entra el usuario. Es decir, éste puede ingresar por una ubicación “inicial” de lawebapp (la página de arranque, por ejemplo) o por algún vínculo en cierto nivel inferior de la arquitectura de aquélla. En algunos casos, la webapp se diseña de modo que redirija al usuario a una ubicación inicial, pero si esto es algo indeseable, entonces el diseño debe dar características de navegación en la interfaz que acompañen a todos los objetos de contenido y de las cuales se disponga sin importar el modo en el que el usuario ingrese al sistema.Los objetivos de la interfaz de una webapp son los siguientes: 1) establecer una ventana congruente en el contenido y las funciones que brinda, 2) guiar al usuario a través de una serie de interacciones con la webapp y 3) organizar las opciones de navegación y contenido disponibles para el usuario. Para lograr una interfaz consistente, primero debe usarse un diseño estético a fin de establecer un “aspecto” coherente. Esto incluye muchas características, pero debe ponerse énfasis en la distribución y la forma de los mecanismos de navegación.Para guiar la interacción del usuario, debe establecerse una metáfora5 apropiada que permita al usuario tener una comprensión intuitiva de la interfaz. A fin de implementar las opciones de navegación, puede seleccionarse alguno de los siguientes mecanismos:• Menús de navegación: contienen palabras clave (organizadas en forma vertical u horizontal) que enlistan contenido o funciones clave. Estos menús se implementan de modo que el usuario pu da elegir entre una jerarquía de subtemas que se despliegan al seleccionar la opción principal en el menú.

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 que residen en la arquitectura y planeando la navegación que ocurre dentro de la webapp.

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.

El diseño de una webapp incluye seis etapas principales que son orientadas por la información obtenida durante la modelación de los requerimientos. El diseño del contenido utiliza el contenido del modelo (desarrollado durante el análisis) como la base para establecer el diseño de los objetos del contenido. El diseño estético (también llamado diseño gráfico) establece la vista y sensación que el usuario final percibe. El diseño arquitectónico se centra en la estructura general de hipermedios de todos los objetos y funciones del contenido. El diseño de la interfaz establece la distribución y mecanismos de distribución que definen a la interfaz de usuario. El diseño de la navegación define la forma en la que el usuario final navega a través de la estructura de hipermedios. Y el diseño de los componentes representa la estructura interna detallada de los elementos funcionales de la webapp. ¿Cuál es el producto final? El principal producto que se genera durante el diseño de la webapp es un modelo del diseño que incluye aspectos del diseño del contenido, de la estética, de la arquitectura, de la interfaz, de la navegación y en el nivel de componentes