En diseño de interfaces web, los menús tipo acordeón son aquellos que despliegan enlaces o contenido adicional tras hacer clic sobre una de sus solapas. Sería fácil confundirlos con los menús desplegables, que ya conocimos en un artículo previo. Sin embargo, los menús acordeón presentan algunas características distintivas:

• Suelen ser verticales.
• Suelen activarse sólo ante clic (rara vez al pasar el mouse por encima).
• Suelen presentar una animación durante el despliegue.
• No sólo pueden servir como menús de enlaces, sino también para presentar diferentes secciones de contenido separadas por títulos. Por ejemplo, en una página de preguntas frecuentes, tras hacer clic sobre una pregunta se despliega hacia abajo su correspondiente respuesta. Por eso, a veces se habla genéricamente de «controles acordeón», ya que no necesariamente se aplican a menús.

El principal beneficio de los menús acordeón es que permiten dar una idea general de los contenidos de la página sin mostrarlo en su totalidad al principio. Esto evita (al menos inicialmente) que el usuario efectúe un desplazamiento vertical demasiado largo para alcanzar el pie de la página y que se vea avasallado por una gran cantidad de información.

Sin embargo, no son adecuados en todos los casos. ¿Cuándo utilizar y cuándo no utilizar menús tipo acordeón? 

Utilizarlos cuando…

• Queremos obtener los beneficios de una sidebar pero no contamos con suficiente espacio para listar todas las opciones.
• La página está dividida en un número moderado de secciones (idealmente, más de dos y menos de diez) que contienen textos de extensión similar entre sí.
• Todos los elementos de la lista visible tienen un nivel (no más, no menos) de subelementos, es decir, una sublista.

No utilizarlos cuando…

• Al activar una sección se despliega un texto tan largo que el usuario debe hacer scroll hacia abajo para alcanzar la próxima sección.
• Queremos ubicar elementos que deban atraer la atención del usuario, como por ejemplo botones call-to-action. Es muy probable que el usuario no despliegue todos los títulos del acordeón y no llegue a verlos.

Respetando estas normas podremos implementar menús tipo acordeón que realmente mejoren la navegación por la página en vez de representar un obstáculo.