Ingeniería del Software

1. 13.Diseño de WebApps
Ramiro Estigarribia Canese

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

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

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

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

6. ¿Cómo se percibe la calidad
de una WebApp?
➔ Cinco atributos principales:

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

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

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

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

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

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

13. 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ón
del contenido, distribución de la interfaz, coordinación
del color, balance del texto, imágenes y otros medios)
aumentan el atractivo visual.

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

15. Recomendaciones de
Navegación
1. 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.

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

17. 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?

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

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

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