NAVEGACIÓN UNIVERSAL: CONECTANDO SUBSITIOS A LOS SITIOS PRINCIPALES

Mientras buscaba documentación para escribir un artículo acerca de la navegación universal, di con un excelente post en la web de Jakob Nielsen que, como es habitual, lo explicaba perfectamente. Dado que no había traducción al español hemos decidido traducir el artículo por su gran interés y lo reproducimos a continuación.

En el diseño de menús, nos referimos a “navegación global” como al nivel superior de navegación de un sitio, ya que debe aparecer en todas las páginas del mismo. Si una compañía u organización tiene muchos sitios, cada uno de ellos con su propia navegación global, ¿qué sucede si los usuarios desean navegar por un nivel global superior o ir a otro de los sitios de la compañía?. Ahí es cuando se hace necesaria la navegación universal, que ofrece una estructura de menús permitiendo la interconexión de sitios relacionados, cada uno con su propia navegación global.

Definición: La navegación global permite acceder a la home de un sitio desde sus secciones o microsites. A veces incluye enlaces a las categorías principales del sitio, además del acceso a la home del mismo.

Imagina una señal de salida en un gran edificio comercial. Lo normal es que exista una en cada habitación y piso del edificio. Es una indicación fiable para poder salir del edificio. La mayor parte de las veces no son necesarias pero en las escasas ocasiones que lo son, se agradece que estén ahí y sean sencillas de ver. Ese es el papel de la navegación universal.

En nuestra analogía del edificio, la navegación universal es como un transportador que te llevaría desde la caseta de material de mantenimiento al vestíbulo principal. Si bien esto sólo funcionaría en Star Trek, el medio digital se supone que debe ser mejor que la realidad. Desgraciadamente la mayoría de micrositios actúan como una caseta de material de mantenimiento que está tan lejos del edificio principal que no resulta sencillo acceder de uno a otro.

Claro ejemplo de implementación de la navegación universal

La barra superior de color morado en la página de Yahoo Movies es un ejemplo de navegacion universal. Aparece en la mayoría de subsitios de Yahoo.com (News, Sports y Answers)

Cuando testeamos sitios web grandes y con mucha información, habitualmente nos encontramos con usuarios que se pierden o quedan atascados en una subsección. Deambulan por el sitio buscando respuestas a sus preguntas, siguiendo enlaces aquí y allá. En algún momento, normalmente justo antes de seguir otro enlace, miran arriba y se dan cuenta que la navegación ya no es la misma que había antes. Miran alrededor buscando una forma de volver a algún lugar que les resulte familiar.

Y sé que estarás pensando: Para eso esta el link de “home”. Y tienes razón. Pero ¿qué sucedería con los subsitios que tienen su propia home y su propio sistema de navegación? ¿Cómo deberían los usuarios salir del subsitio y llegar a la home del sitio principal (la home universal)?

En un estudio reciente, un participante visitaba la sección News & Blogs de la web de Unicef de Reino Unido y llegó al subsitio de Soccer Aid para obtener la información requerida. No se dio cuenta de que estaba en un subsitio de la página principal y le resultó difícil y frustrante volver a la home principal de la página.

Hubo dos motivos para esta frustración:

1.- De un vistazo, es difícil darse cuenta que se está en un subsitio del sitio principal. Las zonas de cabecera tienen la misma apariencia y los títulos de cada sección (News & Blogs, Soccer Aid) situados a la derecha del baner principal, pueden ser facilmente pasados por alto. (Cómo diferenciar claramente secciones manteniendo un aspecto consistente es una de las principales preocupaciones de los diseñadores).

2.- No hay una forma de ir a la home universal clara y que ofrezca confianza. (De hecho, la página News&Blog tiene un enlace que dice: “Unicef UK Main Site”, pero los usuarios lo ignoran debido a la inesperada posición que ocupa, como si fuera la última categoría en el menú de secciones.

Si los usuarios se pierden o quedan atrapados en una subsección, se sienten confundidos y se frustran, y estos sentimientos les pueden hacer abandonar la tarea o incluso ir al sitio de alguien de la competencia. Y no sólo eso, sino que perderán la oportunidad de descubrir otros subsitios potencialmente interesantes de tu sitio. Además pueden extraer falsas conclusiones de lo que ofrece tu sitio, resultando devastador para tu negocio.

La primera vez que observé este problema fue investigando en la experiencia de usuario en los sitios universitarios. Pero al mismo tiempo me di cuenta de que la navegación universal se usa (o al menos se hace necesaria) en muchos otros sectores, como el software, bancos, páginas gubernamentales, sitios de entretenimiento, noticias y ONGs. Claramente, los diseñadores no acaban de encontrar la manera de conectar subsitios con el sitio padre del que dependen.

6 Recomendaciones para implementar la Navegación Universal

A continuación enumeramos seis recomendaciones para tener una navegación universal usable:

1.- Si tu sitio contiene varios subsitios, incluye un elemento de navegación universal en cada subsitio. Como hemos visto anteriormente, los usuarios necesitan una manera sencilla de volver al sitio principal. Volviendo a nuestra metáfora inicial del edificio, asegúrate de que ponen una señal de salida en cada uno de los subsitios.

2.- Mantén la atención en la navegación global del subsitio. No permitas que la navegación universal distraiga a tus visitantes. La navegación propia del subsitio merece toda la atención del usuario y no debería competir con la navegación universal. Después de todo, la mayor parte de los visitantes de la sección están interesados en su contenido y deberíamos facilitarles que lo exploren de manera sencilla.

Navegación universal correcta

Implementación correcta: Para los usuarios que visitan la página de Disney On Ice, el menú de navegación del subsitio (rojo) está destacado e incita al usuario a navegarlo. La barra de navegación universal en la parte superior (gris) pasa desapercibida y no distrae de la navegación del subsitio

Navegación universal confusa

Implementación incorrecta: ¿Qué navegación deberían seguir los usuarios de Cardiff University’s Energy Systems Research Institute para encontrar actividades de investigación? En este caso la navegación de secciones (gris) destaca menos que la barra de navegación universal (negra) en la parte superior de la página.

3.- Asegúrate de que quede clara visualmente la jerarquía si el diseño tiene dos barras de navegación. De un vistazo, los visitantes deberían identificar la navegación relacionada con el subsitio que visitan y distinguirla fácilmente de la navegación universal.

Correcta jerarquización

En la web de IEEE Circuits & Systems Society, se hace evidente la jerarquía entre la navegación de la sección verde y la navegación universal en la parte superior.

4.- Incluye el dominio cuando uses un enlace a la home del sitio principal; Si es posible, ubícalo a la izquierda, cerca del logo Nuestros estudios revelan que la colocación del logo en la parte superior izquierda favorecen al acceso a la home mejor que si está en otras ubicaciones. Poniendo el enlace a la navegación principal del sitio cercano a un logo que está situado arriba a la izquierda, permite aprovechar la tendencia de los visitantes a dirigir su atención hacia esa esquina cuando quieren volver a la home.

Enlace a home confuso

Este subsitio de la Cruz Roja Británica para reclutar voluntarios carece de un claro título de sección, pero al menos tiene un enlace a la home universal. Desgraciadamente el enlace etiquetado como “Nuestro Sitio Principal” está situado en una posición poco habitual: en una caja gris, en la esquina superior derecha.

Enlace a home correcto

Puesto que los visitantes siempre buscan el enlace a la home en la parte superior izquierda, situarlo en ese lugar y etiquetarlo con el dominio “ESPN.com” permite de una manera efectiva que los usuarios salgan del subsitio y vayan al sitio principal.

5.- Pon categorías universales sólo si es útil para el usuarios que le permita tener una visión general , o si es probable que el mismo se quiera mover entre dichas categorías. Esconde las categorías si no es probable que quiera navegar entre las mismas.

Listado de categorías en menú universal

Zoho muestra en un listado las categorías de su software para dar una visión global a los visitantes de los productos que ofrecen.

Generalmente no es buena idea esconder la navegación principal en versiones web para ordenador, tal y como se haría en una versión mobile. Nuestros estudios nos indican que la navegación se usa el doble cuando es visible. En cualquier caso la navegación universal es una excepción a esta regla ya que lo habitual es que los usuarios no quieran pasar frecuentemente de un subsitio a otro. En este caso, el que sean visibles las opciones del menú de navegación universal son de menor utilidad y distraen más.

6.- En versiones mobile, no uses enlaces a la home universal y/o categorías universales si no es probable que los usuarios quieran navegar por ellas al mismo tiempo. Esta recomendación sería la misma que la anterior pero para versión mobile. En los móviles el espacio es muy escaso y sería un desperdicio de dicho espacio incluir un menú de navegación con categorías que no se usan habitualmente.

Conclusión

Al igual que sucede con otros sistemas de navegación secundaria como el camino de migas o breadcrumbs, la navegación universal es un elemento que la mayor parte de los usuarios nunca van a usar. Es correcto. Su papel no es el de atraer clics, sino simplemente ser fácilmente visible y accesible a los usuarios cuando lo necesiten. Mediante un correcto etiquetado y asegurándonos de que no compita con la navegación del subsitio, los diseñadores pueden ahorrar tiempo a los usuario, reducir la confusión y frustración y, en última instancia, mejorar la experiencia del usuario.

Traducción del artículo de Katie Sherwin para la web de Nielsen Norman Group. 
Artículo original: https://goo.gl/9LhzDG

En Sitelicon Ecommerce Services somos expertos en estrategias globales de crecimiento online. Y la integración, desarrollo y optimización y logística en Amazon es uno de los pilares. Si desea más información puede entrar en contacto con nosotros en info@sitelicon.com, los teléfonos 911 877 479 / 913 556 530 o completando el formulario: quiero vender más.

Autor
...

Andrés García. Director de Ecommerce de Sitelicon

Director de proyectos de ecommerce con más de 16 años de experiencia en el desarrollo de negocios de venta online.

Linkedin


CONTACTO

Hablemos sobre tu proyecto

¿Qué podemos hacer por ti? Si quieres que valoremos tu proyecto o tienes cualquier otra consulta, déjanos tus datos a través del formulario y contactaremos contigo para hablar sobre cómo mejorar tu negocio online.

O si lo prefieres, también puedes llamarnos o escribirnos un email.

ENVIAR

Estamos en

Calle Covarrubias 22, 6 derecha
28010 Madrid