ARQUITECTURA DE LA INFORMACIÓN PARA EL DISEÑO DE SITIOS WEB DE BIBLIOTECAS UNIVERSIDAD POLITÉCNICA DE MADRID UNIVERSIDAD CARLOS III DE MADRID SEDIC FRANCISCO TOSETE HERRANZ

4. SISTEMAS DE NAVEGACIÓN Sesión II 4. SISTEMAS DE NAVEGACIÓN La WWW es interacción: movimiento, acción, toma de decisiones y asimilación. De nada sirve ofrecer los mejores contenidos de la biblioteca si los usuarios no los encuentran en el sitio. VEMOS LA TELEVISIÓN NAVEGAMOS POR LA WEB

4. SISTEMAS DE NAVEGACIÓN El diseño del sistema de navegación gira en torno a la resolución de los dos problemas fundamentales del hipertexto (herencia en la WWW): La desorientación o pérdida de contexto: Ausencia de referencias físicas en un espacio virtual ¡Creación de contexto! ¡Consistencia! El desbordamiento cognoscitivo: Gran cantidad de operaciones y decisiones que el usuario enfrenta a la vez. No es posible (ni deseable) mostrar toda la información al usuario – ¡Enmascar! – ¡Plegar información! - ¡Simplificar interfaz! - ¡Consistencia!

SISTEMAS DE NAVEGACIÓN: CREACIÓN DE CONTEXTO La World Wide Web carece de referencias físicas. Únicamente existen aquellas que el diseñador aporte al usuario. Es necesario por tanto que este disponga: De un punto de partida u origen al que pueda volver siempre (logotipo). De una indicación del lugar en el que se encuentra.

SISTEMAS DE NAVEGACIÓN: CREACIÓN DE CONTEXTO La función de la navegación: crear contexto. ¿Donde estoy? ¿Dónde he estado? ¿Dónde puedo ir?

SISTEMAS DE NAVEGACIÓN: CREACIÓN DE CONTEXTO Creación de contexto. El color, el tamaño de fuente y los rótulos nos ayudan a crear contexto. ¿Existe suficiente contraste en la barra de la izquierda en cuanto a la sección en la que nos encontramos respecto de las demás?

SISTEMAS DE NAVEGACIÓN: CONSISTENCIA Para reducir la desorientación del usuario el sistema de navegación tiene que ser consistente lo que significa que: La navegación ha de estar situada siempre en el mismo lugar. La barra de navegación ha de tener siempre la misma apariencia. La barra de navegación ha de tener siempre las mismas opciones y en el mismo orden.

SISTEMAS DE NAVEGACIÓN: CONSISTENCIA Un ejemplo http://www.bne.es ¿Se mantiene la consistencia de la barra de navegación…? veámoslo en la web

SISTEMAS DE NAVEGACIÓN: CONSISTENCIA

SISTEMAS DE NAVEGACIÓN: CONSISTENCIA El color ayuda a marcar la sección en la que se encuentra el usuario y dotar de consistencia visual

SISTEMAS DE NAVEGACIÓN: DESBORDAMIENTO COGNOSCITIVO El diseño de una retícula permite la organización de los bloques de información de la página. Asimismo hemos de realizar una presentación progresiva de la información

SISTEMAS DE NAVEGACIÓN: DESBORDAMIENTO COGNOSCITIVO ¿Cuál es la barra de navegación principal? ¿Cuánto has tardado en darte cuenta de ello?

Es necesario agrupar los elementos comunes de navegación Es necesario agrupar los elementos comunes de navegación. La navegación ha de reconocerse como tal (barras y vínculos).

SISTEMAS DE NAVEGACIÓN: TIPOS DE NAVEGACIÓN horizontal (anchura) jerárquica (profundidad) directa semidirecta (facetas) Garret distingue además otro tipo de navegación, la suplementaria que trata de dar acceso a los contenidos que no son fácilmente accesibles por cualquiera de las tres anteriores.

SISTEMAS DE NAVEGACIÓN: TIPOS DE NAVEGACIÓN NAVEGACIÓN GLOBAL NAVEGACIÓN LOCAL NAVEGACIÓN CONTEXTUAL

SISTEMAS DE NAVEGACIÓN: PERSPECTIVAS DIFERENTES Navegación global siempre visible. Mostramos en todo momento las principales partes de las que consta el sitio. Navegación local (subsecciones): Sólo se muestra al usuario una parte de la navegación. ¿La mejor? Como siempre, depende del propósito que se quiera conseguir. ¿Son mutuamente excluyentes las categorías? ¿Es conveniente que estén siempre visibles todas las opciones o sólo determinadas?

SISTEMAS DE NAVEGACIÓN: PERSPECTIVAS DIFERENTES práctica SISTEMAS DE NAVEGACIÓN: PERSPECTIVAS DIFERENTES Veamos en la Web (y comentemos) algunos ejemplos de sistemas de navegación…

SISTEMAS DE NAVEGACIÓN: BARRA DE NAVEGACIÓN SUPERIOR

SISTEMAS DE NAVEGACIÓN: BARRA DE NAVEGACIÓN LATERAL

SISTEMAS DE NAVEGACIÓN: BARRA DE NAVEGACIÓN LATERAL La barra de navegación lateral enfatiza la anchura de la web (del árbol jerárquico).

SISTEMAS DE NAVEGACIÓN: NAVEGACIÓN EN “L” INVERTIDA

¿Navegación al centro?

SISTEMAS DE NAVEGACIÓN: NAVEGACIÓN EN “U” INVERTIDA

SISTEMAS DE NAVEGACIÓN: ETIQUETAS

SISTEMAS DE NAVEGACIÓN: ETIQUETAS Comenzaron a popularizarse en torno al 2000 y sobre todo a partir de su introducción en Amazon. Son una metáfora acertada como la del escritorio de Windows. Es la idea de las carpetas archivadoras del colegio. Son intuitivas y se reconocen rápidamente como navegación.

SISTEMAS DE NAVEGACIÓN: ETIQUETAS Si funciona… ¿Por qué no imitarlo? Unas dosis de imaginación y unas pizcas de creatividad… Se trata de identificar y aplicar patrones usuales de diseño.

SISTEMAS DE NAVEGACIÓN: ETIQUETAS Para que den resultado: Tiene que existir un buen contraste entre el fondo, el color activo y el de segundo plano. La etiqueta activa tiene que estar por delante de las demás.

SISTEMAS DE NAVEGACIÓN: ETIQUETAS Al entrar en el sitio tiene que haber una etiqueta seleccionada por defecto.

SISTEMAS DE NAVEGACIÓN: ETIQUETAS Una discusión sobre las etiquetas: ¿Si yo estoy interesado en una sección determinada qué sentido tiene mostrar todas las demás?

SISTEMAS DE NAVEGACIÓN: ETIQUETAS Desventajas de las etiquetas: Son muy rígidas. Son muy difíciles de modificar para añadir nuevas secciones. Ocupan y desaprovechan mucho espacio de pantalla. Si el espacio en una barra de navegación normal es limitado en las etiquetas lo es todavía más. Los rótulos de las categorías principales han de ser excepcionalmente cortos y significativos. Riesgo de ambigüedad o de escasa significación. Por ello es necesario plantearse muy seriamente estos inconvenientes antes de utilizarlas.

SISTEMAS DE NAVEGACIÓN: ETIQUETAS

¿Cómo podemos mostrar más de tres subniveles de navegación? ¿más sugerencias?

SISTEMAS DE NAVEGACIÓN: BREADCRUMB

SISTEMAS DE NAVEGACIÓN: BREADCRUMB La barra de navegación jerárquica (breadcrumb): Disminuye la desorientación del usuario al mostrar la ruta que ha seguido para llegar a un punto determinado. Permite volver rápidamente a cualquier punto anterior de la misma. Enfatiza la jerarquía de una determinada rama del árbol. Quizá el mejor resultado sea combinarlas con otro tipo de sistema de navegación. Son muy adecuadas cuando se tiene más de tres subniveles jerárquicos (ocupa poco espacio).

SISTEMAS DE NAVEGACIÓN: BREADCRUMB Desventajas: Únicamente muestran una rama o subsección a la vez. La home se convierte en el punto de referencia obligado para ir a cualquier otro punto de la web. No existe navegación horizontal, sólo vertical. Desvirtúan los archivos logs (como por ejemplo, antiguamente “El País” o “Useit”).

SISTEMAS DE NAVEGACIÓN: BREADCRUMB Algunas recomendaciones (a): Suelen estar situadas en la parte superior de la página como la barra de navegación global. Lo mejor es emplear > entre los términos de cada categoría antes que :: I o cualquier otro carácter. El “mayor que” sugiere sensación de movimiento (profundizamos en la web). Es mejor emplear un tipo de letra pequeña para los términos de la barra.

SISTEMAS DE NAVEGACIÓN: BREADCRUMB Algunas recomendaciones (b): Una buena práctica es resaltar el último término en negrita. No se han de utilizar en lugar del nombre de la página (en la barra de título del navegador). KRUG, Steve. No me hagas pensar. Madrid: Pearson Educación, 2001, p. 78

SISTEMAS DE NAVEGACIÓN: BREADCRUMB La barra de navegación jerárquica (breadcrumb) enfatiza la profundidad de la web (del árbol jerárquico).

SISTEMAS DE NAVEGACIÓN: BARRA DE NAVEGACIÓN INFERIOR es una práctica recomendable añadir un enlace a la parte superior de la página

SISTEMAS DE NAVEGACIÓN: UTILIDADES Son los vínculos a los elementos importantes del sitio que no forman parte de la jerarquía de contenidos. KRUG, Steve. No me hagas pensar: una aproximación a la usabilidad en la web. Madrid: Prentice Hall, 2001

OTROS ELEMENTOS DE LA NAVEGACIÓN: EL LOGOTIPO Es uno de los elementos más importantes del sistema de navegación y del sitio. Refleja la marca y la identidad de la organización. El usuario identifica el nombre con el logotipo. Ha de estar presente en todas las páginas del sitio. Ha de enlazar siempre con la página de inicio para que el usuario siempre disponga de un punto de referencia al que volver. Ha de estar situado… ¿en dónde? ¿Ejemplos?

OTROS ELEMENTOS DE LA NAVEGACIÓN: EL LOGOTIPO

OTROS ELEMENTOS DE LA NAVEGACIÓN: LA TAGLINE Lema breve y descriptivo que se asocia de forma inequívoca al web. Está conectado visualmente al logotipo. Informa sobre la naturaleza del sitio. Refuerza la imagen de marca. Transmite los valores asociados de la organización. Parece que últimamente está cayendo en desuso.

OTROS ELEMENTOS DE LA NAVEGACIÓN: LA TAGLINE

OTROS ELEMENTOS DE LA NAVEGACIÓN: LOS VÍNCULOS En la página es necesario mostrar bien claro lo que es un enlace y lo que no lo es. ¿Qué es un enlace?

OTROS ELEMENTOS DE LA NAVEGACIÓN: LOS VÍNCULOS Entre otras convenciones, a la hora de realizar hipervínculos: El texto del enlace aparecía subrayado para destacarlo visualmente de las palabras de su alrededor. Se empleaba el color: Azul para los no visitados. Morado para los visitados.

OTROS ELEMENTOS DE LA NAVEGACIÓN: LOS VÍNCULOS

OTROS ELEMENTOS DE LA NAVEGACIÓN: LOS VÍNCULOS No obstante estos estándares hace tiempo que dejaron de serlo. Lo fundamental es elegir un color único para los enlaces y respetarlo en todo el web. ¿Cómo sabemos aquí qué es un enlace? El texto que lleva el pequeño icono + señala lo que es un enlace. El color no ayuda. Aunque pueda parecerlo no es un enlace.