Sistemas de Navegación

Los sistemas de navegación son los elementos de una interfaz que permiten la navegación por las diferentes secciones y páginas que componen el sitio web. Generalmente se presentan como menús formados por diferentes opciones, con las que el usuario puede interaccionar; al hacer click sobre cada una ellas es cargada una página o sección de la misma diferente.

Mas concretamente, es todo lo referido a cómo se presenta la información, utilizando para ellos elementos basados en texto, gráficos o bien de entorno. Los elementos relevantes en este caso, serán todos aquellos que permiten mostrar la navegación en la pantalla. Entre ellos, la gráfica utilizada, la redacción de los textos que se muestran e incluso el nombre del dominio (URL) que permitirá que el usuario sienta que está en el lugar indicado.

Los SN pueden conformarse por varios elementos como son: gráficos, barras de menús horizontales y verticales y menús emergentes. Otros, como las tablas de contenido y el mapa del sitio, permiten el acceso remoto al contenido alojado en el EOI. Cada uno de estos elementos debe aparecer en cada página y la suma de todos ellos conforma el SN.

La razón para diseñar correctamente un sistema de navegación (SN) radica en prevenir que los usuarios puedan hallarse perdidos frente a nuestro web y experimenten sensaciones de confusión, frustración e ira, entre otras. Desde la brújula, las señalizaciones urbanas y los sistemas de posicionamiento global, el hombre ha demostrado gran dificultad en el uso y diseño de las herramientas de navegación.

El SN es necesario para brindar un sentido del entorno y dar flexibilidad al movimiento dentro del sitio. Los SN pueden diseñarse de manera que apoyen el aprendizaje asociativo mediante la presentación de recursos relacionados con el contenido que se muestra. Este es el caso de los vínculos "vea también" o "see also", en inglés. Esto permite el acceso a áreas del sitio que en un inicio no serían exploradas por el usuario. Debe prestarse especial atención al balance que debe existir entre la flexibilidad en la navegación y la inclusión de excesivas opciones que podrían confundir y desorientar al usuario.

Los sistemas de navegación son una pieza de vital importancia para la experiencia del usuario de nuestro sitio web. Su aparente sencillez es lo que hace que a menudo olvidemos su importancia y descuidemos su elaboración.

Todo buen sistema de navegación debe satisfacer al menos los siguientes objetivos:

- Establecer un modo de ir de un sitio a otro dentro de la web. La navegación debe ser clara, concisa, consistente y facilmente identificable dentro de la página. No se puede olvidar que también debe ser transparente: nadie debe ser consciente de que hay un sistema de navegación o de que está usándolo.

- Comunicar al usuario la relación entre el contenido que está visualizando y la navegación del sitio. Debemos permitir que el usuario sepa en todo momento dónde se encuentra, hacia donde puede ir desde este punto y que partes del sitio ha visitado ya.

- Reflejar la arquitectura del sitio que subyace al sistema de navegación. Debemos diferenciar la navegación global, la navegación local o subsecciones y la navegación contextual.

- Permitir volver a la página de inicio rapidamente. En un sitio web la página de inicio sirve como punto de partida y como lugar al que volver cuando nos encontramos perdidos, por eso debe ser sencillo ir a este punto desde cualquier parte del sitio.

- Dede tener un corsé para el crecimiento del site, lo cual significa tener muy claro desde el principio las posibilidades de agrandamiento de ese site y crear un sistema de navegación que permita cubrir esas posibilidades sin desvirtuarse.

Los menús son la parte más importante de los Sistemas de Navegación. Gracias a ellos, es que el usuario puede navegar libremente por la página, ir a cualquier otra página interna, y recorrer el site sin temor a que su ruta desaparezca. Un menú siempre debe permanecer constante, y lo más recomendable es que no cambie su ubicación ni su diseño en la página (color, tamaño, tipo de letra, etc..)

Hay dos tipos de barras de menús, los menús horizontales y los verticales. Ambos, en mi perspectiva, son igualmente usados en los diseños web. Los dos permiten desarrollarse en menus desplegables (aunque es más recomendable utilizar los menús horizontales para ello), y los dos tambien, permiten desarrollarse en botones de rollover.

Si se desea lograr un buen diseño, es recomendable que la fuente que se utilize sea clara y grande, con un color que contraste con el fondo, para permitir una buena lectura. También es recomendable utilizar Sistemas de Etiquetado en el menú, es decir, utilizar íconos en vez de palabras, para que la página adquiera identidad, y sea más fácil para el usuario reconocer puntos estratégicos del site.

Otro punto importante es indicarle al usuario en que parte del menú está. Eso se logra con un cambio en el color del texto, o con una señal (si es una imagen) que indique que el usuario se encuentre en esa página (un blur distinto a la imagen, una flecha, un cambio en el ícono, etc...)

A continuación, se presentan ejemplos de distintas formas de barras de menus, muy bien logradas. Citamos un ejemplo para una barra de menú horizontal, vertical y horizontal-vertical juntas:

Barra de menú vertical //Fabeli// Barra de menú horizontal //ArgoGroup// Barra de menú vertical y horizontal //Potato.org//

Un site map es una página interna que lista las páginas que contiene un sitio web, organizadas jerárquicamente. Es decir, hace un desglozamiento completo del site y los organiza en una especie de "árbol sinóptico", que algunas veces es presentado en forma de gráfico, y otras, en forma de lista. Esto ayuda a los visitantes a conocer más a profundidad la página.

Los site maps pueden mejorar la optimización para los motores de búsqueda de un sitio asegurándose que todas ellas puedan ser encontradas. Esto es especialmente importante si el sitio usa menús Macromedia Flash o JavaScript que incluyan enlaces HTML.

La mayoría de los motores de búsquedas solo seguirán un finito número de enlaces desde una página, así si el sitio es muy grande, se deberán usar estrategias adicionales además del site map requerido por los motores de búsqueda y para que los visitantes puedan acceder al contenido.

Muchos usuarios comunes de la web no conocen, ni saben cual es la utilidad de los site maps. Éste es un recurso que puede ayudar mucho en la navegación del site, brindando rutas de links rápidas y dando a conocer páginas internas que tal vez el usuario podría pasar por alto. Por ésta razón es que Google implementó Google Sitemaps, que es un sistema que recomienda para que informemos a su robot de búsqueda sobre las páginas que tenemos en nuestro sitio web. De esta manera, Google podrá rastrear más fácilmente nuestros contenidos y podremos aparecer así en los resultados del buscador. Además, también proporciona estadísticas del acceso del robot, y resúmenes de posibles errores de rastreo.

A continuación, se presentan ejemplos de como se ve un site map en una página web. Se puede encontrar el enlace para ésta página casi siempre al inicio, o al final de una página web.

Ubicación del Site Map //AgamiCreative// Desarrollo del Site Map //AgamiCreative//

Durante el diseño de un sitio web, generalmente se incluyen varios tipos de SN. Para lograr el éxito es necesario conocerlos y entender en qué medida ofrece flexibilidad y una noción del contexto en el que nos encontramos. Pueden identificarse cuatro tipos de SN, ellos son:

- Sistemas de navegación jerárquicos

- Sistemas de navegación globales

- Sistemas de navegación locales

- Sistemas de navegación específicos

A continuación se caracterizará cada uno de ellos.

Este sistema es, por demás, el más tradicional. Ofrece acceso a los diferentes niveles jerárquicos inferiores a partir de la página inicial. Frecuentemente presenta inconvenientes para la navegación horizontal por lo que se recomienda combinarlo con otros sistemas.

Éste tipo de navegación ofrece conceptos muy detallados e incluidos bajo conceptos más generales, esto es, los conceptos más generales se desglosan en conceptos más detallados que son relacionados con eventos u objetos individuales.

Ruta de Acceso a la página del ejemplo: Home/Domain. Cuando se entra a Domain, se observan una serie de links que a su vez tienen más sun-links dentro de sí mismos, ésta, es una característica típica de las Navegaciones Jerárquicas.

Navegación Jerárquica //Ochitsuki//

sistema de navegacion globla (sng)

Este SN generalmente complementa a uno jerárquico. Brinda la posibilidad de navegación tanto a lo profundo como a lo largo del sitio - navegación vertical y horizontal. Es común el establecimiento de reglas que regulen las condiciones y situaciones en las que se utilizará la navegación según el nivel dentro del sitio. Los SN más utilizados son los basados en una barra de navegación gráfica que permite el acceso a las principales secciones, cada sección en su interior se complementa con otras barras o menús laterales relativos a estas. En la página principal, esta barra puede ser innecesaria toda vez que duplicará las opciones primarias que se han relacionado. En las páginas de segundo nivel, debe incluirse un vínculo a la página inicial y es opcional incluír otro vínculo hacia las secciones de retroalimentación -contáctenos, listas de discusión, etcétera.

En la página de National Geographic que se muestra a continuación, se ve un claro ejemplo de Navegación Global. Cuando accedemos a un link, surgen nuevas barras de navegación y nuevas formas de diagramar la información para acomodarse a la profundidad que la página está ofreciendo en ese momento.

Navegación Global //National Geographic//

Cuando se enfrenta el diseño de un sitio web más complejo seguramente se necesitará complementar el sistema global de navegación con la inclusión de uno o más sistemas locales de navegación (SNL). Para comprender la necesidad de implementar un SNL es necesario entender el concepto de subsede o subsitio. Este término lo acuñó Jacob Nielsen para identificar las situaciones en las que una colección de páginas web de un sitio muy grande sugiere un mecanismo de navegación y estilo propio exclusivo de ellas. Tal es el caso de un catálogo de productos. Las páginas relativas a esta categoría contendrán vínculos entre ellas como pueden ser "Buscar productos por categorías, marcas, etc." No se debe pasar por alto que en ningún caso el SNG desaparece, este se mantiene en las distintas subsedes.

El siguiente ejemplo es una clara muestra de la Navegación Local. Cuando se ingresa a la tienda de Apple ("Store"), la barra principal gris se mantiene arriba, pero se generan también una serie de menús adicionales, que ayudan enormemente a la navegación del site.

Navegación Local //Apple//

Se utiliza principalmente cuando no es posible clasificar las relaciones entre las páginas web en algunos de los sistemas de navegación anteriores. El ejemplo más ilustrativo se encuentra en los enlaces dentro de un texto hacia otro documento relacionado, esté o no en el sitio. Es muy frecuente hallar este tipo de navegación en revistas digitales que los incluyen en las notas finales o a pie de página (imitando a las publicaciones impresas).

Este tipo de Navegación es común encontrarlo en las Wikis. Casi todas poseen links a páginas internas (Como el caso de la primera imagen), pero también presentan referencias externas, y claro está, la bibliografía (Como es el caso de la segunda imagen).

Navegación Específica //Wikipedia// Navegación Específica //Wikipedia//

- The Elements of user experience
Autor: Jesse James Garret

La Web fue originalmente concebida como un espacio de información hipertextual; pero el desarrollo de cada vez más sofisticadas tecnologías que afectan a éste medio ha fomentado ahora su uso como una interfaz de software. Esta doble naturaleza ha llevado a mucha confusión, y como profesionales de experiencia hemos estado en casos extremos de adaptar la terminología a su máximo punto, para sobrellevar el proyecto que estamos haciendo. El objetivo de este documento es definir algunos de estos términos dentro de sus propios contextos, para aclarar las relaciones entre estos diferentes elementos.

Artículo Completo

- Interfaces e Intuición
Autor: Daniel Mordecki. Montevideo, Uruguay.

Todo sitio que se precie anuncia una interfaz "intuitiva" como uno de sus méritos. Los clientes lo solicitan, los visitantes lo exigen y los diseñadores se vanaglorian... Pero ¿cómo se operacionaliza lo "intuitivo"? El autor propone un modelo conceptual de tres niveles para abordar el tema.

Artículo Completo

- Especializar u Homogenizar. Cuestión de Experiencia
Autor: David Gómez-Rosado. San Francisco, EE.UU.

Al diseñar la interacción con un sistema ¿debe ésta orientarse hacia sus usuarios especializados en desmedro de la estandarización? ¿O viceversa? En ambos casos la decisión implica costos y beneficios. El autor los expone, cautelando la experiencia del usuario en cada contexto de uso.

Artículo Completo

- Blogold
- WikiLearning
- Guía Web 1.0
- Desarrollo Web
- Hipertexto

por: ||Isaberu||

Todo el material acá es propiedad de sus respectivos autores.