Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Mejores prácticas para las barras de navegación en WordPress

by
Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Final product image
What You'll Be Creating

La barra de navegación: podrías pensar que es un elemento simple y aparentemente obvio de cualquier página web.

Es importante reflexionar sobre cómo construir tu menú de navegación de forma que funcione bien para tus usuarios, y sea accesible.

En este artículo, te mostraré cómo asegurarte de que tu menú de navegación funcione de la mejor manera posible y que constituya una mejora en tu sitio en lugar de un simple complemento.

Características de un menú de navegación excepcional

Un buen menú de navegación mejorará la Experiencia de Usuario (UX) y será de fácil uso para todos los usuarios de tu sitio web. A saber:

  • Claro, con etiquetas que tengan sentido y sean relevantes para las páginas a las que enlaza cada uno de sus elementos.
  • Estará en un lugar en el que los usuarios esperen encontrarlo, podría tratarse de la parte superior de la página o bajo un banner.
  • Funcionará bien tanto en ordenadores de sobremesa como en dispositivos móviles (y todo lo que se encuentre entre estos), quizá usando un menú hamburguesa en dispositivos móviles.
  • Será accesible, algo que no atañe únicamente al código sino también al diseño, ¿tienen los colores suficiente contraste entre sí?, ¿se queda fijo en algún momento el menú?
  • Mejora el diseño de tu sitio web y mantiene su consistencia en cuanto a los colores y fuentes.
  • Debe estar disponible permanentemente en cada página de tu sitio.

¡Esto es un montón de trabajo para crear un menú de navegación! WordPress gestiona por sí mismo algunos de estos desafíos, pero echemos un vistazo a algunos de los elementos clave de un menú de navegación eficaz para identificar mejores prácticas concretas.

Experiencia de usuario

La función más importante de un menú de navegación es facilitar a la gente el acceso a las áreas principales de tu sitio web. Dependiendo de la naturaleza de tu sitio, tu menú podría incluir enlaces a una mayor o menor cantidad de páginas.

  • En un sitio de noticias: enlaces hacia las distintas secciones, usando archivos de categoría.
  • En una tienda online: enlaces a los distintos departamentos, usando las categorías o líneas de productos.
  • En el sitio web de un pequeño negocio: enlaces a páginas estáticas con información sobre la empresa y sus servicios.
  • En un blog: enlaces a las categorías más populares.

Todo menú de navegación también debería incluir un enlace a la página de inicio, incluso aunque sea a través del logotipo o el nombre del sitio ubicados en la cabecera, siempre debería estar presente en el menú. Es probable que también quieras incluir enlaces a otras páginas estáticas como por ejemplo, la página 'sobre nosotros' y la página 'contacto'.

Los enlaces deberían ser claros, con nombres breves pero obvios, que tengan relación con el contenido al que enlazan aunque no tienen porque coincidir exactamente con el título de la página a la que dirigen. Por ejemplo, un sitio web con una página con el título Nuestros servicios de consultoría podría tener un enlace hacia ella en el menú con la etiqueta Consultoría.

La navegación principal del sitio web de Envato Elements es muy sencilla, tan solo contiene unos cuantos enlaces dentro de una barra en la parte superior de la página. La barra se percibe claramente como barra de navegación y destaca respecto al resto de la página:

Envato elements home page with black menu bar at the top

Es aconsejable asegurarnos de que la parte del menú que siempre queda visible (es decir, la navegación de nivel superior) esté contenida en una sola línea para los navegadores de ordenadores de sobremesa. Esto evitará la sobrecarga de información, y quedará más ordenado. Si tu menú se extiende ocupando dos o más líneas, valora la posibilidad de añadir algunos de los enlaces en un segundo nivel, usando menús desplegables.

Si tu menú necesita contener más enlaces, existen dos soluciones: usar un desplegable en forma de lista bajo los elementos de la navegación principal, o añadir un mega menú.

Puedes crear listados desplegables añadiendo elementos en distintos niveles desde la sección de menús de WordPress. Un tema con buen código trasladará esto en forma de menú desplegable en la pantalla. Aquí tienes a modo de ejemplo una página con múltiples niveles en su menú:

a multi-level menu in the WordPress menus admin screen

Un mega menú es idóneo para aquellos sitios web con muchos enlaces que no es fácil desglosar jerárquicamente en distintos niveles, o para sitios que tienen muchos elementos de igual relevancia. Este tipo de menús se usan mucho en las tiendas online.

Para crear un mega menú tienes varias posibilidades, puedes crear un tema que ya incluya un mega menú, o instalar un plugin para mega menús. Esto te permitirá añadir y personalizar tu propio mega menú.

Otro aspecto importante para la experiencia de usuario en la navegación es la posición del menú de navegación. Los usuarios siempre esperarán que esté situado en la parte superior de la pantalla, ya sea en una barra sobre el banner o bajo él. En ocasiones, los menús situados en la parte superior se justifican a la derecha del resto del contenido, por ejemplo a la derecha del logotipo.

El menú de Tuts+ usa una combinación de menú desplegable y un pequeño mega menú junto a uno de esos menús desplegables:

envato tuts site with navigation menu dropdown and mega menu

Y además, en la esquina superior derecha de la página tenemos un formulario de búsqueda y enlaces hacia otras partes del sitio web.

Otro aspecto que afecta a la experiencia de usuario se refiere a si el menú de navegación se mueve verticalmente acompañando el desplazamiento descendente del usuario, manteniéndose fijo en la parte superior de la ventana del navegador. Un experimento demostró que los menús de navegación fijos o “sticky” son hasta un 20% más fáciles de usar.

Esto solo funciona bien cuando nuestra barra de navegación es estrecha; una navegación ancha entrará en conflicto con el contenido. Algunos temas incluyen este tipo de menús, haz una búsqueda usando el término 'fixed menu' en Envato Elements y descubrirás 16 temas que lo contienen. Como alternativa, también puedes añadir esta funcionalidad a tu propio tema usando la regla CSS position: fixed y top: 0.

Los sitios web con menús fijos son relativamente poco frecuentes, pero grandes plataformas de redes sociales suelen usarlos, por ejemplo Google+:

google site - menu still visible after scrolling down

Diseño visual

El diseño visual de tu menú de navegación debería mejorar la experiencia del usuario y reflejar tu imagen de marca.

Los colores y las fuentes que uses en él normalmente reflejarán los mismos colores que uses en algún otro lugar de tu sitio web, escogidos entre la paleta que se usa a lo largo del sitio y seleccionando aquellos que contrasten con otros elementos situados alrededor del menú. Los sitios web de Envato, con su contrastado banner y texto verde, son un buen ejemplo de esto.

El sitio web de WordPress.com no cuenta con un menú de navegación con contraste, pero como el diseño del sitio es tan sencillo, queda claro que se trata de un menú de navegación:

WordPresscom site - blue background to page and menu

El sitio web de la BBC tiene un menú de navegación simple en la parte superior de la pantalla. De nuevo, con un bajo nivel de contraste, pero resulta obvio que se trata de un menú de navegación dada su ubicación:

BBC home page - white background nav menu at the top separated by a thin border

Si colocas tu menú de navegación bajo la cabecera (una práctica cada vez menos frecuente conforme los menús en la parte más superior se están siendo más populares), después tu diseño visual debería asegurar que el menú de navegación se percibe de forma inmediata y evidente sin confundirse con cualquier otra parte de la página.

El sitio web de Gap tiene dos menús de navegación: uno en la parte superior, por encima de las otras marcas de la empresa y un segundo bajo el banner que presenta los departamentos de la tienda. Queda claro que se trata de una navegación gracias al abundante espacio blanco:

the gap website - menu below the logo white background lots of white space either side of the logo

La navegación en dispositivos móviles

La navegación en los dispositivos móviles será distinta a la navegación para ordenadores de sobremesa por dos motivos:

  • La gente está usando los dedos, sobre todo los dedos pulgares, en lugar de un ratón.
  • Se dispone de menos espacio de pantalla.

Esto significa que si usaste un mega menú o un menú desplegable con varios niveles, tendrás que encontrar una forma creativa de adaptar esto a una pantalla más pequeña.

La forma más común de adaptar la navegación a dispositivos móviles consiste en añadir un menú tipo hamburguesa ('burguer menu'), este nombre se debe a que normalmente es representado mediante tres líneas horizontales que se asemejan a una gran hamburguesa.

En el caso del sitio web de Envato Elements, el menú está representado por tres puntos suspensivos (o tres puntos uno sobre otro):

the envato elements home page on mobile - the navigation is replaced by three dots

Si das un toque sobre este símbolo, podrás ver los elementos del menú, que pueden expandirse tal y como ves en la siguiente captura de pantalla:

envato elements with menu dropped down back background white text Click on the sign and a second level menu appears

Este es un buen ejemplo de cómo incorporar un amplio menú de navegación en dispositivos móviles sin eliminar ninguno de los elementos del menú ni abrumar al usuario.

Tú mismo puedes añadir un menú de hamburguesa al código de tu tema, usar un tema que ya lo incluya o añadirlo mediante un plugin.

Algunos sitios web prefieren usar un menú alternativo cuando son vistos desde dispositivos móviles, con menos enlaces. Esto podría reducir el exceso de información, pero no es bueno para la experiencia de usuario, así que no te lo aconsejo. En lugar de eso, usa una solución como la mencionada anteriormente en la que se mantienen todos los enlaces pero adapta el menú a las pantallas pequeñas.

En dispositivos móviles, también debes tener en consideración el tamaño de los enlaces de tu menú de navegación. Esto se debe a que la gente pulsará sobre ellos con los dedos en lugar de hacer un clic con el ratón. Asegúrate de que tus enlaces están lo suficientemente espaciados entre sí y que no sea fácil pulsar un enlace equivocado accidentalmente.

Accesibilidad

Es importante no olvidar la accesibilidad al reflexionar sobre la experiencia de usuario, sobre el diseño visual, o el diseño móvil. Si tu menú de navegación no es accesible, estarás limitando la audiencia que puede usar tu sitio, y posiblemente estés infringiendo la ley.

Evalúa los colores de tu menú de navegación. Si tienen un contraste deficiente o el texto es pequeño o demasiado decorativo y alambicado, los usuarios con dificultades visuales tendrán dificultad para leerlos. Esto también es válido para la gente con miopía, ¡y somos millones! La iniciativa por la accesibilidad tiene útiles guías sobre el color y el contraste.

La manera en la que esté codificado el menú también tiene importancia. El código debería estar estructurado correctamente, con títulos en los enlaces y listas creadas con el código correcto.

Asegúrate de que el código de tu tema incluya una instrucción para saltar el menú de navegación a menos que este se solicite explícitamente. De no ser así, la gente que acceda a tu sitio web usando un lector de pantalla tendrá que escuchar la lectura del menú principal cada vez que cambien a una nueva página. Si estás usando un mega menú, esto podría suponer un tiempo considerable y posiblemente el usuario acabe abandonando tu sitio web.

Considera cualquier efecto visual que puedas estar usando en tu menú. Esto incluye mega menús, menús desplegables, menús fijos, y los menús que se muevan en cualquier forma.

Un menú que cambia su posición en la pantalla o que cambia de color conforme el usuario se desplace producirá distracción y causará problemas a gente con ciertas dificultades. Mi consejo es que mantengas el diseño de tu menú lo más sencillo y claro que sea posible, por lo tanto evita añadir efectos visuales estridentes.

W3C tiene un útil tutorial sobre la accesibilidad y los sistemas de navegación: úsalo como guía para comprobar tu sitio web mediante un validador de accesibilidad antes de publicar tu sitio web.

Una barra de navegación bien diseñada mejorará tu sitio web

El menú de navegación es una pieza tan obvia en cualquier sitio web que es fácil dejarlo caer sin reflexionar demasiado sobre su diseño.

Si sigues los consejos que acabamos de ver, conseguirás un menú de navegación con el que tus usuarios puedan navegar fácilmente a través de tu sitio web, y en consecuencia permanecerán durante más tiempo en él. Su diseño reflejará perfectamente tu marca y se asegurará de que no excluyes a un determinado conjunto de usuarios debido a la tecnología que usan o a las discapacidades que puedan tener.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.