25/12/2013

Menús de navegación: ¿verticales u horizontales?

Menús de navegación: ¿verticales u horizontales?

Actualmente, gracias a recursos como el paralaje o el uso de una página única, los sitios web presentan formas de navegación cada vez más originales. Sin embargo, a la hora de disponer los enlaces en el menú de secciones, las opciones suelen encuadrarse en las dos orientaciones más tradicionales: vertical u horizontal. En la primera modalidad, los enlaces se colocan en una lista de ítems tradicional, mientras que en la segunda, los enlaces aparecen en una tira que suele ubicarse en la parte superior de la pantalla.

¿Cuáles son las cualidades de cada enfoque?

Vertical

  • Utilizada en blogs, sitios de comercio electrónico y redes sociales.
  • Ideal para mostrar una gran cantidad de enlaces: en caso de necesitar realizar scroll para ver la lista entera, el desplazamiento vertical es más cómodo que el horizontal.
  • De acuerdo con el experto Jakob Nielsen, el lado izquierdo de la pantalla es el que más captura la atención, por lo que es una buena medida ubicar un menú vertical de ese lado.
  • Ideal para realizar listas desplegables con muchos niveles de profundidad (árboles).
  • Más difícil de integrar con el contenido. Por ejemplo, en un blog es probable que el menú vertical de la barra lateral sea más alto que el post, provocando un desnivel que genera un gran espacio vacío debajo de este.
  • Ocupa parte del ancho de la pantalla, quitándole espacio al contenido.

Horizontal

  • Cada vez más utilizado, especialmente en sitios web institucionales, portfolios y aquellos con una sola página.
  • En Occidente, el método de lectura predominante es de izquierda a derecha. Quizás por eso, muchos estudios de eye tracking indican que los menús horizontales son más visibles que los verticales. Sin embargo, la importancia de esta conclusión para elegir uno u otro menú es discutida.
  • Cuando son desplegables y de un solo nivel, es más fácil acceder a los elementos de la lista secundaria que en el caso de un menú vertical.
  • Es difícil agregar nuevos enlaces a ellos manteniéndonos dentro del ancho de la plantilla.
  • No son adecuados para dispositivos con poco ancho de pantalla, como celulares y tablets.

En general, es aconsejable utilizar un menú horizontal para un pequeño conjunto de opciones básicas, y un menú vertical para una lista con muchos elementos (especialmente si tenemos pensado agregar nuevos ítems en el futuro).

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce