Las tendencias en diseño web afectan a cada uno de los elementos con los que se construye una página y especialmente a los de la portada. Pero cuando se habla de tendencias, hay que tener en cuenta que éstas suelen crear un marco referencial en el que tienen cabida distintas opciones. Es el caso del que hoy nos ocupamos: el menú. Como decíamos en nuestro artículo sobre los vocablos básicos de un web, el menú funciona como un sumario del contenido de la web, un directorio a través del cual se llega a todos los rincones de la página. Así pues, el menú es un elemento básico en la estructura de cualquier web. Como tal, podría considerarse que es bastante inmutable y, sin embargo, las tendencias imperantes en los últimos meses lo han convertido en un elemento muy versátil y controvertido.
 
Distribución clásica
Hasta hace poco había dos formas dominantes a la hora de colocar un menú en la portada de una web: el menú horizontal en la parte superior o el menú vertical en el lateral izquierdo. El horizontal solía combinarse con el logo, pudiendo alinearse tanto a la derecha y a la izquierda como centrarse. El vertical se reservaba para páginas sin scroll, modelo ‘width’.
 

 
El menú fijo
Es una de las tendencias más importantes en lo que a diseño web se refiere. A día de hoy se considera imprescindible que durante toda la navegación por la portada el menú siempre esté a la vista. Esto se aplica tanto al menú horizontal como al vertical. Responde a la filosofía imperante de mejorar la experiencia de navegación del usuario dándole más poder sobre los movimientos a realizar en la web. Sorprendentemente, aún nos encontramos de vez en cuando con plantillas que no se han sumado a esta tendencia.
 

 

 
Color y movimiento
Mantener el menú fijo durante toda la navegación se ha traducido en varios modelos de menú. Si hablamos del menú horizontal, podemos encontrarnos con el mismo en la primera pantalla o que aparezca según iniciamos el descenso por la portada. En función de donde se coloque primariamente el menú, su movimiento será hacia abajo o hacia arriba hasta quedarse fijo en la parte superior de la imagen que estemos viendo en cada momento. También se puede apostar por un fondo transparente que pase a blanco o a algún color sólido durante la navegación (para facilitar su visibilidad) o por fondos semitransparentes. Esta última opción resulta más ‘sucia’ a la vista, dificultando la lectura.
 

 
La hamburguesa
Aquí llega la controversia. Se denomina menú hamburguesa a ese símbolo de tres rayas horizontales que representa el acceso al menú. Es una solución que llegó al diseño web cuando se impuso el diseño ‘responsive’, es decir, cuando se pasó de crear versiones móviles de las páginas a crear estructura adaptativas que permiten visualizar una web en cualquier dispositivo (ya sea un ordenador, una tableta o un teléfono móvil) sin recurrir a versiones alternativas: es la misma web, pero con la capacidad de adaptarse al tamaño de cualquier pantalla.
 

 
Que una web sea ‘responsive’ es fundamental en la actualidad, ya que mejora su posicionamiento en buscadores y, sobre todo, mejora notablemente la experiencia de navegación del usuario. Sin embargo, conseguir que una web se adapte de una manera natural a un móvil supone varios retos. Uno de los más relevantes es cómo colocar el menú. Si tenemos una página con un menú horizontal con seis apartados, es imposible que se vea de la misma forma en un teléfono (manteniendo una navegación sencilla y la legibilidad). Por este motivo, se optó por ocultar el menú en dispositivos móviles y crear un acceso directo al mismo, dando al visitante la opción de acceder al menú si lo necesita, pero sin que su presencia sea un incordio. Así nació el menú hamburguesa. Nada más simple que tres rayas horizontales para simbolizar un sumario.
 

 
El problema surge cuando los diseñadores optan por incorporar este símbolo al diseño para ordenadores. No sabemos si es una decisión estética o técnica (para simplificar el desarrollo de un diseño ‘responsive’), pero sí tenemos claro que es una tendencia en auge y que es una mala idea. Eliminar el menú de una web y sustituirlo por un acceso directo es uno de los comportamientos que llevaron este año al jurado del premio al mejor diseño de prensa digital de la Society for News Design a calificar de «aberración» algunas de las propuestas de diseño analizadas y a pedir una paridad entre dispositivos, evitando que se priorice el diseño para móviles por encima del diseño para ordenadores. Han pasado tres meses desde este veredicto y la realidad parece dispuesta a no atender a críticas de ningún tipo: cada vez se usa más el menú hamburguesa. Desde nuestro punto de vista es una tendencia que contradice la filosofía imperante en diseño web: facilitar la navegación al usuario, que es quien toma las decisiones de cómo relacionarse con una web. Poner un acceso directo a un menú conlleva obligar al visitante a dar un paso más para llegar a la información que está buscando, lo que se traduce en ponerle trabas.
 

 
En algunos casos, como en las webs modelo ‘width’ con una gran foto como principal presentación y reclamo, podemos entender que, desde una perspectiva estética, se recurra a eliminar el mayor número de elementos a la vista para dar prioridad a la imagen. Sigue contraviniendo el espíritu de accesibilidad, pero al menos hay un motivo detrás de esta decisión. Lo que resulta incomprensible es cuando se opta por una presentación muy rotunda de la hamburguesa (o de su espacio en la portada) para evitar disuadir al visitante de que se vaya de la web, garantizando que el símbolo que da acceso al menú no acabe siendo invisible por ser demasiado discreto. Vemos el motivo para destacar la hamburguesa, pero si ya la portada no va a ser un modelo de limpieza, ¿por qué no poner el menú directamente?
 

 

 
Soluciones peculiares
En nuestra recopilación de modelos de menús, nos hemos encontrado con una utilización inversa de la hamburguesa. Es el caso de la plantilla Arka, en la que el menú sí está presente en la portada, pero va acompañado del símbolo de las tres rayas. Cuando se pincha en el mismo, se ocultan todos los elementos de la portada (menú, marco, logo…) para permitir que la foto con la que se presenta la web luzca en todo su esplendor.
 

 
Otra solución peculiar es la de combinar la imagen de presentación con el logo y con el menú. Al entrar en Vertex nos encontramos el logo sobre la imagen (acompañando al lema) y el menú centrado en la parte superior. Cuando iniciamos la navegación, el logo pasa a estar en la misma barra que el menú, que siempre está a la vista. Es una solución interesante para dar visibilidad y protagonismo al logo sin que pierda su función en el menú.
 

 
Por si no ha quedado claro más arriba, para nosotros, atendiendo principalmente a garantizar una navegación fácil e intuitiva, la mejor opción pasa por un menú horizontal fijo transparente, que esté presente en la primera pantalla (para evitar abandonos de la web) y que opte por un color sólido de fondo durante la navegación. Y que conste que nos gusta el símbolo de la hamburguesa, pero cada cosa, en su sitio.
 
——
 
¿Te gustó el artículo? Puedes leer más como éste si te suscribes a nuestro boletín. ¡Pincha aquí y suscríbete!
 
 

Sobre María Sierra

Periodista.

• 

¡Compártelo!

Facebook

Twitter

Google+

Pinterest

Linkedin

Buffer

email