2.5.2. Diseño Web

En 1996, en el seno del grupo de investigación del LIFIA liderado por Gustavo Rossi,  surgen los primeros trabajos sobre patrones de diseño aplicados al desarrollo de aplicaciones hipermedia, dándose a conocer algunos patrones para la creación de aplicaciones orientadas a objetos con funcionalidad hipermedia (Rossi et al., 1996) muy cercanos al estilo de los patrones de Gamma et al. (1994). Sus siguientes  trabajos se centran ya en problemas de diseño de las aplicaciones hipermedia (Rossi et al., 1997) y se hace una primera aproximación para la creación de un lenguaje de patrones aplicado a este dominio (Garrido et al., 1997). Además, en Design reuse in hypermedia application development (Rossi et al., 1997), se puso de manifiesto la necesidad de motivar a la comunidad hipertexto a discutir el asunto y producir un catálogo de patrones relacionados. Este periodo termina con un workshop (Rossi et al., 1999a) donde se discuten las principales carencias con las que contaba el espacio de patrones de diseño hipermedia y se proponen una serie de intenciones futuras. Además, en ese mismo año, se crea el primer repositorio web de patrones hipermedia (Bolchini, 2002) y se investiga cómo integrar los patrones en el proceso de diseño (Rossi et al., 1999b).

Sin embargo, con el auge de las aplicaciones web y la necesidad de que el desarrollo esté centrado en el usuario final, reaparecen los patrones de diseño con una nueva perspectiva. Aunque tanto los patrones anteriores como éstos tienen en común las necesidades de los usuarios, la diferencia radica en cómo son explicadas las soluciones que proponen los patrones. Mientras que en el primer caso se utiliza un vocabulario propio de los métodos de diseño, que los hace comprensibles sólo a diseñadores hipermedia experimentados en ese método concreto, este nuevo estilo de descripción de los patrones, que se ha recogido tanto en libros (van Duyne et al., 2002; Graham, 2003) como en repositorios web (van Welie, 2007; Addison-Wesley, 2002), los expone con un lenguaje comprensible tanto para diseñadores como para usuarios, permitiendo nuevos modos de uso de los patrones.

Los patrones de diseño hipermedia están pensados para capturar soluciones a  problemas de diseño derivados del modelado de las principales características de una aplicación hipermedia o web, como son la navegación, presentación, dominio de la aplicación, comportamientos interactivos, personalización y seguridad. Por ejemplo, cuando un diseñador menos experimentado tiene que afrontar el modo de navegar por la aplicación web que está diseñando, puede no conocer todas las herramientas de navegación que ayudan al usuario a moverse por el sitio sin que le parezca difícil o imposible de encontrar lo que está buscando. En este caso, el patrón  B1 - Multiple ways to navigate (van Duyne et al., 2002) propone una organización en la página principal de la aplicación para las principales herramientas de navegación, búsqueda y navegación secuencial.

Figura 2.5.2.a. Página www.amazon.com, Agosto, 2001

B1 Multiple Ways to Navigate
Amazon.com entiende que la intención como el impulso son motivadores de la navegación. Los usuarios pueden buscar lo que ellos tienen la intención de comprar, usando herramientas de exploración y de búsqueda. El sitio también proporciona enlaces a elementos que los usuarios pueden no tener intención de comprar pero pueden seguir los enlaces de todas maneras.

Contexto
Este patrón es usado por todos los patrones incluidos en el grupo A, proporcionando un esquema que ayuda a los usuarios a navegar por los sitios web.

Problema
Los usuarios navegan por los sitios web de diferentes maneras. Si alguna de las herramientas de navegación no está o es difícil de encontrar, los usuarios sentirán que es tedioso utilizar ese sitio web.

Los usuarios navegan a través de un sitio web para recoger información y llevar a cabo sus objetivos. Puede buscar información, actividades o productos de diferentes modos. Un usuario puede tener algo específico en mente y usar las herramientas de búsqueda. Otros pueden preferir navegar por el sitio siguiendo los enlaces. Un tercer tipo de usuario sólo sabe vagamente lo que quiere y desea echar un vistazo y ver qué le puede interesar. Debido a que los usuarios se mueven a través de un sitio web de diferentes modos, el sitio necesita ofrecerles diferentes modos de navegar.

La intención y el impulso llevan a los usuarios a actuar
A partir de la observación, hemos identificado dos cosas que llevan a los usuarios a actuar: la intención y el impulso. Si un sitio web omite la navegación basada en la intención, puede parecer superficial y estrafalario, mientras que si se omite la navegación basada en el impulso puede parecer aburrido. Toma ventaja de estos dos estilos de navegación para que el usuario tenga una experiencia satisfactoria.

Diferentes motivaciones llevan a diferentes estilos de navegación
La navegación familiar ayuda al usuario a tener una clara idea de cómo moverse por el sitio. Las opciones de navegación incluyen la búsqueda, la exploración, el siguiente paso o wizard. Los estilos de navegación sobre elementos relacionados y de promoción funcionan mejor con el comportamiento impulsivo.

Colocar las herramientas donde los usuarios puedan encontrarlas y usarlas
No sólo tiene sentido que cada herramienta de navegación aparezca en un sitio específico para que el usuario pueda encontrarla, sino que coincida con las experiencias adquiridas en visitas a otros sitios web. La colocación consistente de las herramientas de navegación es uno de los modos más importantes de hacer la navegación sencilla.

Una vez que se accede a una página, el usuario debe encontrar los enlaces que le posibilitarán completar sus objetivos e intenciones. Coloca las herramientas que llevan al usuario a realizar sus metas cerca del punto en que comienzan a leer. Esta localización asegura que las herramientas serán encontradas y usadas. Las herramientas que ayudan al usuario a continuar o completar sus metas también necesitan estar cerca de la parte de arriba de la página, para que el usuario pueda verlas sin tener que hacer desplazamientos por la página. Estas herramientas funcionan mejor si se sitúan en el lado opuesto de la página (arriba a la derecha) desde donde el usuario comienza a leer. Los usuarios tienden a explorar la página desde el principio al final, así que esperan que los enlaces de continuación queden en la parte baja de la página.

Debido a que no puedes garantizar que tus usuarios tengan una reacción impulsiva, este tipo de herramientas de navegación deberían ocupar un espacio menos valioso en la pantalla. Puedes ponerlas en la parte inferior de la página o en el lado opuesto a donde los usuarios comienza a leer (lado derecho).

Solución

Asegúrate de que tus usuarios completan sus metas, pon herramientas de navegación tanto de búsqueda (search) como de acceso a los contenidos (browse). Coloca esas herramientas de navegación arriba y al comienzo de la página. Sitúa herramientas de navegación al siguiente contenido (continue) tanto en la parte derecha como al final de la página. Incluye siempre herramientas de navegación hacia contenidos relacionados o de promoción (relate y promote), pero siempre lo más abajo de la página.

Figura 2.5.2.b. Solución del patrón B1-Multiple ways to navigate

Considera estos otros patrones
Dar a los usuarios diferentes modos de navegar: Sitúa un SEARCH ACTION MODULE (J1) o un enlace a STRAIGHTFORWARD SEARCH FORMS (J2) en la parte de arriba de cada página, proporcionando una consistente NAVIGATION BAR (K2) en cada página, y proporciona BROWSABLE CONTENT (B2). Haz más fácil para todo el mundo navegar por el sitio web con SITE ACCESSIBILITY (B9).

Ayuda a los usuarios a completar sus tareas usando ACTION BUTTONS (K4) y enlaces a CONTEXT-SENSITIVE HELP (H8) situado en la parte derecha de arriba de la página. Usa un PROCESS FUNNEL (H1) para tareas donde su finalización sea absolutamente necesaria.

Proporciona la capacidad de navegación por impulso usando CONSISTENT SIDEBARS OF RELATED CONTENT (I6) y promociones que usen DESCRIPTIVE, LONGER LINK NAMES (K9).