Menú de navegación de la página web

Aprende a crear un buen sistema de navegación para tu página web y haz que tus visitantes encuentren lo que buscan sin problemas.

Que el usuario sea capaz de moverse con soltura y facilidad por las distintas páginas del sitio, que encuentre lo que busca rápidamente, que no se pierda yendo de un enlace a otro sin saber donde está, que no quede colgado en una página concreta sin poder navegar por otras o volver atrás… son algunas de los aspectos que hay que cuidar en la navegación de un sitio web.

Un buen sistema de navegación es imprescindible en toda página web. Es una parte importante de la organización de la estructura de la web.

¿Qué es un menú de navegación?

Es el / los elementos de la web que permite que los usuarios puedan seleccionar la parte de nuestro sitio que desean visitar.

En las imágenes del ejemplo, vemos que a pesar de ser capturas de pantallas de distintas páginas y secciones de un mismo sitio, el menú de la columna izquierda se encuentra en todas ellas, elemento que nos permitirá desplazarnos a cualquier otra parte del mismo sitio cuando lo deseemos.

¿Qué debe tener un buen sistema de navegación web?

La página de inicio

Si tu sitio web es pequeño, puedes permitirte el lujo de enlazar a todas las páginas de tu web desde la página principal, así el usuario tiene a su alcance toda la información disponible en el sitio.

Pero en muchos casos incluir un enlace a cada página convertiría en un caos a la portada del sitio debido a la gran cantidad de páginas internas. En estos casos lo más conveniente sería enlazar a las secciones principales de la web, desde las cuales se enlazaría al contenido de esa sección concreta, etc.

Pie de página

El pié de página de la web también puede usarse para mejorar la navegación del sitio.

Normalmente no se utiliza para poner enlaces a todas las secciones (para eso ya está el menú), pero sí para poner enlaces importantes o que consideras que deben aparecer en todas las páginas de la web, por ejemplo información legal sobre tu empresa, direcciones de contacto, políticas de uso del sitio, etc.

Evitar páginas huérfanas

Es cierto que dándole al botón “atrás” del navegador o modificando el campo de la url puede llegarse perfectamente a otra página del sitio, pero no todo el mundo tiene porqué saberlo, y hacer a la gente molestarse demasiado en navegar por un sitio es signo de falta de usabilidad web. No cuesta nada poner en cada página al menos un enlace a la principal.

Enlazar siempre al índice

Una de las formas de evitar páginas huérfanas y que mejora sin duda la navegabilidad de una web es incluir en cada página del sitio un enlace al índice.

Parece bastante extendido el enlazar a la página principal del sitio mediante el banner o logo de cabecera. Así, el usuario siempre tiene un recurso para volver al principio y buscar lo que necesita.

Ruta de acceso o ¿dónde estoy?

Es frecuente que aunque el usuario pueda navegar con facilidad por las páginas de tu sitio no sepa exactamente donde está.

No hace falta que indiques cada uno de los pasos, con los más importantes es suficiente, no es cuestión de que se convierta en una guía interminable. Un ejemplo de esto lo encontramos en LaWebera.es:

Es conveniente que cada parte de la ruta tenga su enlace correspondiente, de forma que el usuario pueda ir a esa categoría si lo desea. Sin el enlace a cada sitio, la ruta de acceso pierde sentido ya que le dice al usuario donde está pero no le da alternativas.

Incluir un buscador

Páginas web didácticas, de manuales, etc. son sitios que tienen mucho contenido distribuido a su vez en muchas páginas. Buscar una información concreta en ellas puede ser complicado dado el volumen de archivos que contienen.

Los buscadores mejor la experiencia del usuario en el sitio web y le ayudan a ahorrar tiempo en su búsqueda de información.

Evitar el empleo de botones “volver”

En algunos sitios se puede ver que cuando se llega a ciertas secciones o páginas, la única alternativa que se presenta al usuario que se encuentra en ella es la de hacer click en un botón “volver” o “atrás”.

Este tipo de navegación termina siendo desagradable para la mayoría de los usuarios, ya que para leer otro artículo debe seguir al menos dos pasos. Veamos un ejemplo:

Imaginemos que cada una de las páginas tuvieran como alternativa de salida el botón “volver”, si hubiéramos accedido a la página 1 y nos quisiéramos desplazar a la página 4, deberemos hacer click en el botón volver de la página 4, otro en el de la página “sección 2”, para luego retomar la ruta.

Toda esta peripecia pudo haber sido evitada si se implementa una navegación horizontal (entre secciones) y se enlaza a la home.

Volver en un click a la página principal

Algo que resulta particularmente útil para hacer sencilla la navegabilidad de un sitio y que no requiere implementaciones importantes, es incluir algún enlace a la página de inicio desde todas las demás páginas del sitio.

Esto da seguridad al usuario y facilita el reinicio de la navegación por el sitio en caso de haberse extraviado.

Este método es conocido por casi todos los usuarios de Internet, por lo que los mismos esperarán que el logotipo de todos los sitios se comporten de esta forma.

Una sección, un menú

Algunas páginas tienen en una de sus columnas laterales un amplio menú, el cual puede ser desplegable o no, que permite ver como se ordena el contenido de la sección donde se encuentra. La siguiente imagen nos muestra una página donde se ha implementado un submenú de este tipo.

En esta tienda virtual, el acceso a cada sección del sitio se encuentra en la parte superior, a la derecha del logotipo. Para facilidad de los visitantes, se ha implementado en este sitio un menú lateral a la izquierda, que permite navegar por las diferentes páginas de las secciones.

Otra forma de conseguir algo similar es el empleo de menus desplegables. Esta solución debe ser cuidadosamente empleada, ya que es bastante frecuente ver sitios donde el empleo de estos menus es dificultoso.

Regla de los tres clicks

Sin embargo, a pesar de que con hacer tres clicks se llegue a cualquier parte del sitio, el paradigma de la navegabilidad es poder acceder desde cualquier parte del sitio a otro con solo hacer un click, aunque no siempre es posible.

Tipos de menú de navegación

El menú de una página web es la principal herramienta de navegación que le podemos facilitar al visitante para que encuentre lo que busca. Es imprescindible para que las personas encuentren las demás páginas de la web, además del índice.

Los menús de navegación son básicamente listas de enlaces a las diferentes páginas o secciones de la web. De su estructuración dependerá en gran medida que los visitantes encuentren lo que buscan, por lo que es conveniente pensarse dos veces cómo hacerlo antes de implementarlo en la web.

Podemos encontrar un menú horizontal:

O un menú vertical;

Como mencionamos antes, para sitios web con un número de páginas pequeño puede ser bueno enlazar a todas ellas desde cada página para que el usuario tenga en todo momento la información disponible en la web a su alcance.

Por ejemplo, si es una página web informativa sobre tu empresa y no tiene otra finalidad, puede que cuente con 10 ó 15 páginas en total, las cuales pueden perfectamente ser enlazadas desde cada página individual.

Sin embargo, cuando una web contiene mucha información este tipo de menús tiene poco sentido, porque entonces tendríamos menús con cientos de enlaces, algo excesivamente largo para ser usable.

Lo normal en estos casos es enlazar desde la página principal a las secciones más importantes, y desde cada una de ellas a sus contenidos concretos.

Consejos para mejorar nuestro menú de navegación

Es por esto, que debemos analizar los elementos claves para lograr una buena navegación, y el más importante de estos siempre será nuestro menú.

El menú de navegación es un aspecto central muy relevante para la usabilidad del sitio, si se le da una estructura y uso adecuado ésta se ve beneficiada en gran medida, permitiendo guiar al usuario a través de su visita.

Simplicidad

Si mantenemos la sencillez lograremos obtener una navegación eficaz. Sin importar cuántas categorías tenga el sitio, ni la cantidad de páginas que alberga, nunca debes llevar al extremo la exigencia hacia el usuario, por lo que mantener alejada la complejidad del diseño de tu sitio se debe de convertir en una de tus tareas principales.

Para poder lograr la simplicidad en nuestro menú, primer debemos tener bien definida la estructura que tendrá la información, y a partir de ahí podemos definir el diseño que más nos conviene.

Es muy importante que los elementos de contenido que estén relacionados, se agrupen y se definan en categorías para que de esa manera la navegación sea más intuitiva y tenga más sentido para los usuarios.

Buena descripción de los ítem del menú

Una vez que tenemos definida la estructura en que estableceremos la información de nuestro menú, es importante tomarnos un tiempo para definir qué palabras claves vamos a utilizar para fijar los elementos que enlazarán a la información.

Es en esta parte que la descripción juega un papel muy relevante para lograr un funcionamiento eficiente.

De nada sirve tener toda la información del sitio en un orden adecuado y con la estructura correcta, si los elementos de navegación que llevan a ella no son llamados de la manera en que se espera.

Trata de utilizar palabras que sean familiares para el usuario, si es necesario hacer uso de frases o palabras extrañas trata de dar una explicación a través de algún otro medio, no dejes de ser creativo pero no malinterpretes este concepto, selecciona una redacción que sea simple y que vaya al grano.

Posicionamiento en la parte superior

La posición de nuestro menú es un factor muy importante, ya que las personas que ingresan a un sitio tienden a seguir un patrón de observación, centrando su atención en ciertas partes de la página a la vez.

Generalmente este patrón forma la figura de una F, esto nos dice que su atención esta puesta generalmente en la parte superior del sitio.

Si es necesario desplazarse a una parte media de la página, puede que la atención del usuario se pierda y su vista se centre en otros elementos, causando una distracción involuntaria, lo que puede llevar a la frustración que mencionábamos anteriormente. Es por eso que es importante mantener el menú en la parte superior de la ventana.

Visualmente atractivo

Esta comprobado que nuestros cerebros procesan, a cierta medida, mejor la información visual que la textual.

Cuando ingresamos a un sitio de manera apresurada, tendemos a hacer un análisis rápido del contenido, por lo que podemos omitir un cierto nivel del texto que se muestra, pero las imágenes son mucho más difíciles de omitir.

La idea de hacer un menú visualmente atractivo, es ayudar a los visitantes a interpretar el enlace mediante imágenes de fácil relación.

Elementos como iconos y patrones de colores, hacen que el usuario recuerde la posición de alguna categoría o sección de su interés.

Los colores también son importantes para resaltar los elementos que actualmente se encuentra activos, o que son llamados con algún evento, de esta manera el usuario podrá percatar si realmente esta realizando alguna acción y recordará la parte del menú a la que accedió.

¿Es conveniente que mi página web tenga menús desplegables?

Los menús desplegables son muy agradables a la vista, pero los menús no tienen en sí mismos una función decorativa, sino que se trata de elementos que colaboran en la usabilidad de la página y por consiguiente, mejoran la experiencia de los usuarios en nuestra página web.

Para determinar si una página web requiere de un menú desplegable o es mejor utilizar menús sencillos, debemos preguntarnos cuál es la utilidad que se agregará y evaluar beneficios e inconvenientes.

Para estos casos, la utilización de los menús desplegables, más que una opción se trata de una necesidad, ya que presentar los títulos de secciones y categorías de otra forma podría ocupar gran cantidad de espacio y quedar parcialmente fuera de la vista del usuario haciéndose necesario desplazarse por la página para ver todo, lo que es un grave inconveniente.

Pero teniendo en cuenta esta último, debemos saber que los menús desplegables es información oculta, y que obliga al usuario a realizar algunos movimientos para que se produzca el despliegue del menú.

Esto hace que la utilización de los menús desplegables deba ser racionalizada y llevada al mínimo posible, dado que es preferible que la información de navegación se encuentre visible.

Malas prácticas en el uso de menús desplegables

Si la página web requiere de la utilización de estos recursos, tengamos en cuenta que no debe realizarse de cualquier forma, y que en todos los casos, lo que debe primar es la usabilidad. Cuando no se tiene en cuenta esto, se producen los fracasos que son frecuentes en la web, donde los menús son una molestia para el usuario o son prácticamente inútiles.

El menú debe siempre ser una mejora en la usabilidad de la página, por lo que aumentar el tiempo de carga resulta contraproducente.

Otro de los errores comunes es la utilización de menús con tiempos de retardo para su despliegue. Los retardos excesivos pueden hacer que el usuario se impaciente al pasar de un ítem a otro y tener que esperar que se desplieguen.

Se debe prestar especial atención a la utilización de transparencias en los menús desplegables, ya que puede verse en algunas páginas, que el texto de fondo interfiere con la lectura de los ítems de menú, o que la imagen de fondo de la página hace que se pierda la visibilidad de los ítems.

Las transparencias en los menús desplegables son un efecto muy agradable, pero no en todos los casos es posible utilizarlas.

También es importante tener en cuenta que no deben haber alteraciones durante el desplazamiento del puntero por el menú, para que cuando el usuario realice este movimiento el menú no se cierre y se deba repetir la acción; este error, que parece elemental, es bastante frecuente.

Consejos para la instalación de menús desplegables

Siempre se debe tratar de que haya continuidad visual entre el menú que se despliega y el ítem desde el que parte, de forma tal que el usuario siempre tenga visible el punto de partida y le resulte sencillo desplazarse a otro ítem.

Hay menús desplegables que tienen un tiempo de retardo para cerrarse. Siempre debe tenerse en cuenta que esto se hace principalmente para que el menú no se cierre por una acción involuntaria del usuario, pero el tiempo de retardo no debe ser tal que cuando el usuario deba esperar en forma innecesaria para que el efecto termine.

Ante la duda, siempre es preferible optar por la opción más simple. Basta con hacer una recorrida por las páginas web más visitadas, para ver que los efectos no son un elemento principal, y en muchas, ni siquiera existen.

Técnicas para realizar menús adaptables

Diseño responsive

Manejar un diseño adaptable (responsive design) te permitirá proporcionar una mejor experiencia para el usuario, previendo los problemas relacionados a las diferentes tipos de resoluciones y tamaños de pantalla, que se presentan por la variedad de dispositivos que se utilizan en la actualidad para desplegar páginas web.

El diseño adaptable (responsive design), se ha convertido en una consideración casi obligatoria al momento de elaborar la estructura de un sitio web.

Actualmente son muchos los usuarios y clientes potenciales que acceden a través de algún dispositivo móvil, a alguna de las páginas que hemos desarrollado para presentar un proyecto o producto, como tal debemos de proporcionar el soporte adecuado a estos dispositivos para no tener una fuga de inversión.

Vale destacar que sólo haremos uso de CSS para llevar a cabo estos ejemplos, pero nos respaldaremos con una pequeña línea de código JavaScript.

Uso de menus que ocupen toda la horizontal

Esta es la técnica más sencilla para crear un menú responsive, ya que simplemente consiste en crear los elementos en forma de lista y darles un ancho para que abarquen totalmente la pantalla en sus distintos tamaños.

See the Pen Menús que ocupen toda la horizontal by LaWebera.es (@lawebera) on CodePen.32567

Con este código cuando la ventana se haga pequeña o la página se visualice en una pantalla de dispositivo móvil, los elementos del menú tomarán un ancho de 100% para desplegarse de manera horizontal.

Las ventajas de este método son que no te utilizamos JavaScript, no es necesario añadir código HTML extra y el CSS se mantiene sencillo.

Desplegar elementos en un select

Con este método nos encargaremos de ocultar el menú cuando la pantalla sea muy pequeña, y en vez de él mostaremos un elemento de tipo select donde desplegaremos todos elementos que componen dicho menú.

Para poder lograr esto necesitaremos agregar un nuevo elemento HTML par así crear el select. Además de esto, haremos uso de JavaScript para redireccionar a la página que se seleccione de la lista.

See the Pen Desplegar elementos en un selectbox by LaWebera.es (@lawebera) on CodePen.32567

Para las pantallas y ventanas grandes ocultaremos el select. Mientras que para las pequeñas ocultaremos el menú y desplegaremos el select.

De igual manera mediante el pseudo elemento “:before” agregamos la palabra Menú para que el usuario sepa que debe dar clic ahí para acceder a las secciones.

Las ventajas de esta técnica es que no se necesita mucho espacio y se utilizan controles nativos, mientras que las desventajas son la necesidad de usar JavaScript, el duplicado de contenido y que el elemento select no puede ser muy estilizado.

Menú fijo con scroll suavizado (sticky menu)

Otra opción muy interesante es tener el menú fijo en la parte superior de la página y hacer que al pinchar en una de las opciones de menú, vaya a la sección con una animación que haga el movimiento más suave.

Puedes ver el siguiente ejemplo y pinchar en los elementos para ver de lo que hablamos.

See the Pen Sticky Menu con scroll suavizado by LaWebera.es (@lawebera) on CodePen.32567

Pasos para hacer un menú web eficaz

La navegación web es una de los principales elementos que podemos mejorar y adecuar con las hojas de estilo, esto se ve reflejado en el constante uso de menús y barras para guiar al usuario en las páginas de internet.

Por ello, debemos de realizar un esfuerzo a la hora de diseñar un menú y no simplemente tomarlo como un paso más, debemos planearlo y codificarlo de tal manera de que el producto sea efectivo y sobre todo útil para los internautas.

La creación de menús de navegación con CSS es un tema creativo, con muchas formas de explotarse y que nos permitirá desplegar nuestras ideas para que los usuarios se sientan cómodos en nuestra página.

Existen cientos de galerías y códigos en internet para obtener menús desplegables, horizontales, verticales,  transparentes, con hijos, sin hijos, etc., es cuestión de buscar y con la ayuda de Google tendremos un sinfín de menús que lucirían fantásticos en nuestros sitios.

Esto no es ninguna novedad, pero que pasa si deseamos ir más allá y queremos empezar a diseñar nuestros propios menús y nosotros mismos manipular cada aspecto y saber el para qué y cómo de las cosas, para ello hay que empezar con la estructura la cual se irá formando tomando en cuenta varios puntos.

Elegir el lenguaje web para crear el menú

En primer lugar debemos definir con que lenguaje haremos nuestro menú, como ya mencionamos en nuestro caso usaremos únicamente CSS por ser el lenguaje en el que nos estamos adentrando actualmente y debido a su sencillez y fácil ejecución.

Se puede optar por crear menús en otros lenguajes o mezclar estos con el propio CSS, como es el caso de Javascript, el cual se ha convertido en la mejor opción para hacer menús dinámicos ligeros que muestren los “hijos” o sub-secciones de las páginas principales, para ello el uso de librerías como jQuery nos puede ahorrar unas cuantas horas de trabajo.

Estructura básica del menú de navegación

La estructura básica en XHTML para nuestro menú será la siguiente:

<nav id="menu">
<ul>
<li>Sección 1</li>
<li>Sección 2</li>
<li>Sección 3</li>
<li>Sección 4</li>
</ul>
</nav>


Estos son los cimientos sobre los cuales construiremos el resto del proyecto, como podemos ver se trata simplemente de una lista desordenada (unordered list) que contendrá el número de “ítems” o secciones que queremos mostrar en el menú los cuales están resguardados dentro de las etiquetas “<li>”.

Sin agregar un estilo, esto se vería nada más como una lista con viñetas de punto en nuestro navegador, pero ahí es donde empieza a hacer su trabajo el CSS.

Añadiendo estilos CSS

Debemos declarar la propiedad “inline-block” para los ítem del id #menu en nuestro CSS, así todo el texto dentro de las etiquetas “<li>” se acomodaran dentro de una sola línea sin que exista saltos entre ellos; es decir, al momento de definir esta propiedad en el navegador veremos una lista pero ahora de manera horizontal y sin decoración, aunque esto puede variar si nosotros se la agregamos.

Para lograr esto basta con agregar las siguientes líneas en nuestro código:

#menu li {
display: inline-block;
}


Al momento de definir la propiedad “inline-block” también podemos agregar otras como padding para separar cada elemento por cierta distancia dada en pixeles, si yo indico algo como “padding-left: 15px;” existirá una distancia de 15 píxeles a la izquierda de cada elemento de la lista.

Con “inline-block” podemos agregar width y height para definir el tamaño del elemento, es por ello que en este caso lo usamos en vez de “inline”, que aunque a simple vista parecen la misma propiedad, al usar “inline” no se puede dar ancho ni altura a los elementos de la lista.

También podemos irle dando estilo a nuestro menú agregando atributos como fuentes y colores.

#menu a {
background-color: #e0e0e0;
color: #3c3c3c;
text-decoration: none;
border-left: 4px solid #c000ff;
}


Con ello tenemos definida la estructura del menú, este menú lo podemos incrustar dentro de un div “contenedor” y así centrarlo o colocarlo en el lugar donde queremos que luzca.

Para poder realizar una menú vertical básicamente se hace lo mismo sólo que obviamente la propiedad “inline-block” se omite.

A partir de ahí podemos usar nuestra creatividad para darle el estilo que deseemos a nuestro menú podemos manejar fondos, sombras, eventos y demás.

Y aquí puedes ver el menú en funcionamiento:

See the Pen Dar estilos a un menú de navegación by LaWebera.es (@lawebera) on CodePen.32567