admin
La buena navegación es una de las características más importantes de un sitio web. Y no solo estamos diciendo eso, hay investigaciones para respaldarlo.
Es fácil entender por qué la navegación es tan importante para los visitantes. Les permite encontrar rápida y fácilmente la información que buscan, como una publicación de blog o una página de producto. También puede ayudarlos a encontrar información importante que no sabían que necesitaban, como un plan de precios, una página de registro de correo electrónico o información de contacto.
Esto hace que la navegación sea una parte esencial de la experiencia del usuario y de la estrategia de su sitio web. Un sistema de navegación que permite a los visitantes encontrar contenido mediante la búsqueda y la exploración no solo puede mejorar las posibilidades de que los visitantes naveguen por su sitio durante más tiempo, sino que también puede mejorar las posibilidades de que tomen medidas en su sitio.
Para ayudarlo a diseñar un sistema de navegación que satisfaga las necesidades de sus visitantes, echemos un vistazo más de cerca a lo que es la navegación del sitio web y las diferentes formas en que puede implementarla en su sitio. Luego, veremos ejemplos de sitios web reales y exploraremos algunas de las mejores prácticas para diseñar una interfaz navegable. Empecemos.
¿Qué es la navegación web?
La navegación del sitio web es una colección de componentes de interfaz de usuario que ayuda a los visitantes a encontrar contenido y funciones en un sitio. Estos componentes toman la forma de copia, enlace de texto y botones y menús.
Ese último elemento es especialmente relevante en la navegación, así que definamos rápidamente qué significa realmente un menú en el diseño web:
¿Qué es un menú de navegación?
En un sitio web, un menú de navegación es una lista organizada de enlaces a otras páginas web, generalmente páginas internas. Los menús de navegación aparecen con mayor frecuencia en los encabezados de página o en las barras laterales de un sitio web, lo que permite a los visitantes acceder rápidamente a las páginas más útiles.
Ahora, sería fácil dejarlo ahí y llamarlo un día. Sin embargo, la navegación hace más que ayudarnos a pasar de una página web a otra, también nos ayuda a comprender las relaciones entre las páginas individuales de un sitio web.
Esto se debe a que la navegación se considera la punta del iceberg que es la arquitectura de la información (IA) de un sitio web, según el analista de IA Nathaniel Davis en un artículo para UXmatters. Debajo de la superficie del agua se encuentran las partes del iceberg que el visitante del front-end no puede ver: la investigación, la estrategia, la gestión y la organización que se utilizaron para construir la IA del sitio web. Por encima de la superficie se encuentra la interfaz de navegación, representada con mayor frecuencia como una serie de enlaces de hipertexto y una barra de búsqueda.
En otras palabras, la IA del sitio web no es visible en la interfaz de navegación, pero es la base de esa interfaz. Esto les da a los visitantes la sensación de que el contenido está conectado y categorizado para satisfacer sus necesidades y expectativas, sin mostrar realmente todas las hojas de cálculo y diagramas que se usaron para identificar y organizar esas relaciones entre su contenido.
Aquí hay un vistazo a un ejemplo de la jerarquía de un sitio web. Un poco intimidante a primera vista, ¿verdad? En un menú de navegación principal, probablemente solo verá los tres nombres de sección de ese primer nivel. Las subpáginas tendrían que estar anidadas en un menú de subnavegación. Definamos ese término a continuación.
¿Qué es la subnavegación en un sitio web?
La navegación secundaria, también conocida como navegación local, es la interfaz donde los visitantes pueden encontrar categorías de nivel inferior de la IA de un sitio. Suelen ser subcategorías de los principales enlaces de navegación.
Por ejemplo, en el sitio web sin fines de lucro para el zoológico de Nashville, el menú de navegación principal contiene el elemento de navegación «Soporte». Cuando pasa el cursor sobre ese elemento, aparece un menú de subnavegación que ofrece múltiples formas de ayudar al zoológico. Hay enlaces a las páginas de donaciones, carreras y voluntarios, entre otros.
Tipos de navegación del sitio web
La navegación es uno de los – si no los — elemento de diseño más importante en un sitio web. En última instancia, afecta si los visitantes llegan a su página de inicio y navegan, o si hacen clic en el botón «Atrás».
La forma en que estructura la navegación de su sitio web depende de su público objetivo y qué formato cree que sería más intuitivo y accesible para ellos. Veamos algunos de los tipos más comunes de navegación de sitios web entre los que puede elegir.
Barra de navegación horizontal
La barra de navegación horizontal es el tipo más común de menú de navegación. Enumera las páginas principales una al lado de la otra y se coloca en el encabezado del sitio web. Muchos sitios web presentan las mismas secciones, como «Acerca de», «Productos», «Precios» y «Contacto», porque los visitantes esperan verlos. Pero estas secciones no serán necesariamente las más útiles para los visitantes de todos los sitios.
Activa la barra de navegación blavidad como ejemplo. Las secciones presentadas incluyen tres categorías de contenido: «Noticias», «Eds de opinión» y «Estilo de vida», así como enlaces a una página de envío y una página de registro. Es más probable que proporcionen a los visitantes un acceso fácil a las páginas que están buscando en lugar de las páginas estándar Acerca de, Precios y Contacto.
Menú de navegación desplegable
Los menús desplegables de navegación son ideales para sitios ricos en contenido con una IA compleja. Si desea incluir muchos enlaces a páginas en su barra de navegación, no puede enumerarlos todos uno al lado del otro; se vería desordenado o sería imposible colocarlos todos horizontalmente. En su lugar, enumere los elementos más importantes o generales en la barra de navegación de nivel superior e incluya el resto en un menú desplegable.
Sephora es un gran ejemplo ya que ofrece muchos productos y servicios. En su sitio web, puede pasar el cursor sobre cualquier enlace de navegación principal y aparecerá un menú desplegable detallado. El menú desplegable contendrá todas las categorías para esa sección particular del sitio.
Menú de navegación de hamburguesas
El menú de hamburguesas se ve con mayor frecuencia en el diseño web móvil. Con este enfoque, los elementos de navegación a menudo se enumeran horizontalmente en pantallas de mayor tamaño y se colapsan detrás de un botón de hamburguesa en pantallas de menor tamaño. Cuando los visitantes hacen clic en este icono de tres líneas, aparece un menú desplegable vertical o una ventana emergente horizontal con los enlaces de navegación. Este tipo de diseño es ideal para aplicaciones móviles o sitios donde el espacio disponible es limitado.
Consulte el menú de hamburguesas en el sitio móvil de Nettle Studio.
Menú de navegación de la barra lateral vertical
Con este tipo de menú, los elementos se apilan uno encima del otro y se colocan en la barra lateral. Si bien es menos popular que la navegación horizontal, la navegación vertical ofrece varios beneficios. Dado que los bienes raíces no son tan limitados, puede escribir enlaces de navegación más largos e incluir más opciones de nivel superior. También es más llamativo, lo que hace que este estilo funcione bien para agencias y otras empresas creativas.
Eche un vistazo a la barra lateral vertical de Arbor Restaurant a continuación.
Menú de navegación de pie de página
Un menú de pie de página generalmente se combina con una barra de navegación horizontal y se expande sobre ella. Si un visitante no encuentra el enlace que está buscando en el encabezado, puede desplazarse hacia abajo hasta la parte inferior de la página para ver más opciones.
Los New York Times tiene 19 enlaces de navegación en su menú de navegación horizontal en la parte superior de la página. Su menú de pie de página tiene más de 50 enlaces, la mayoría de los cuales pertenecen a una de las categorías enumeradas en el menú de navegación principal. Esto ofrece fácil acceso a las subcategorías de las secciones más populares del sitio web.
Diseño de la barra de navegación del sitio web
No existe una forma «correcta» de diseñar la navegación de su sitio web. Simplemente debe considerar cómo puede permitir que los visitantes nuevos y repetidos aprovechen al máximo su sitio.
Al centrar su proceso de diseño en sus visitantes únicos, su estructura de navegación puede verse y funcionar de manera diferente a la estructura de navegación en otro sitio, y eso es algo bueno.
Teniendo en cuenta a su público objetivo, repasemos las etapas del proceso de diseño de la barra de navegación del sitio web a continuación.
¿Qué debe incluirse en la barra de navegación de su sitio web?
Con todas las páginas de su sitio web, puede ser difícil determinar cuáles son lo suficientemente importantes como para ser parte de la navegación universal. Por el bien del SEO y la experiencia del usuario, Orbit Media recomienda mantener su navegación limitada a siete elementos como máximo.
Entonces, ¿cómo comienzas a reducir el campo? Las partes interesadas de toda su empresa pueden tener diferentes opiniones sobre lo que es digno de navegación y lo que no, pero en última instancia, debe mirar a los visitantes de su sitio web para ayudarlo a determinar la mejor dirección.
Clasificación de tarjetas
La clasificación de tarjetas es una técnica de experiencia de usuario simple que lo ayuda a entrar en la mente de los visitantes de su sitio web y diseñar la navegación desde su punto de vista. La buena noticia es que no es necesario tener experiencia en UX para ejecutar este ejercicio.
Invite a personas ajenas a su organización a un ejercicio simple de 20 minutos. Coloque una pila de fichas sobre la mesa, cada una de las cuales representa una página principal de su sitio. Luego pídale al participante que organice las tarjetas de la forma que mejor le parezca. Busque tendencias en la forma en que los participantes agrupan las páginas de su sitio y pregúnteles cómo nombrarían cada categoría. La organización resultante puede ayudar a construir la columna vertebral de la navegación de su sitio.
Informes de atribución
Si su software de análisis de marketing lo proporciona, los informes de atribución son perfectos para decidir qué debe incluirse en su navegación principal. Este informe atribuye la cantidad de contactos recién creados a sus interacciones con su empresa, para que pueda comprender mejor el contenido y la funcionalidad de su sitio que está convirtiendo a los visitantes en clientes potenciales. Este es un vistazo a algunos de los informes de muestra disponibles en la herramienta de informes de atribución de HubSpot.
Tome el propio sitio web de HubSpot, por ejemplo. Si bien algunas de nuestras ofertas de contenido obtienen mucho tráfico, las páginas más comunes que vieron las personas que terminaron comprando el software de HubSpot fueron las páginas de productos, precios, estudios de casos y socios. Si echa un vistazo a nuestra página de inicio, verá que la navegación refleja este hallazgo y prioriza esas páginas críticas.
Flujo de usuarios
Si no tiene un informe de atribución, aún puede tener una idea de qué páginas son importantes en su sitio a través del informe Flujo de usuarios en Google Analytics. Si bien este informe no diferencia el tráfico estándar de los clientes, sí destaca cómo las personas parecen navegar su experiencia en su sitio. En Palabras propias de Google: «El informe Flujo de usuarios es una representación gráfica de las rutas que los usuarios tomaron a través de su sitio, desde el origen, a través de las distintas páginas y dónde a lo largo de su…
