Si tiene problemas con demasiadas opciones de navegación o demasiado contenido en un sitio web, un acordeón podría ser la solución perfecta.
Un acordeón es un menú de encabezados dispuestos verticalmente que revelan más detalles cuando se inician (a menudo cuando se hace clic con el mouse). Dado que este patrón de diseño web solo resalta la información esencial de las secciones, pero hace que el resto sea fácilmente accesible, es un elemento común del diseño receptivo.
En esta publicación, discutiremos qué es un acordeón, en qué consiste su interfaz de usuario y ejemplos.
¿Qué es un acordeón en diseño web?
En diseño web, un acordeón es un tipo de menú que muestra una lista de encabezados apilados uno encima del otro. Cuando se hace clic en ellos (o se invocan interactuando con un teclado o un lector de pantalla), estos encabezados revelarán u ocultarán el contenido relacionado.
Este patrón de diseño es perfecto para dividir contenido largo o complejo en partes digeribles. También es ideal para sitios móviles, ya que reduce el desplazamiento del usuario.
Aquí hay un ejemplo de un menú de acordeón utilizado en la página de preguntas frecuentes del sitio:
Esto le da a la gente control sobre qué y cuándo leer, lo que puede mejorar su experiencia de usuario. En el ejemplo anterior, los lectores solo pueden hacer clic en el primer título para conocer las dimensiones y el peso de la esterilla Yogaline y omitir el resto. También pueden desplazarse completamente por el menú. De cualquier manera, ellos deciden cuál es su experiencia de lectura.
¿Cuándo usar un acordeón?
Un acordeón puede mejorar la experiencia del usuario, si se usa por la razón correcta y con el contenido correcto. Veamos algunos casos de uso en los que debería usar un acordeón.
- Cuando los lectores solo necesitan una pequeña información clave: Si los lectores solo necesitan información en una página, un acordeón puede ayudarlos a encontrar la información que buscan de manera más fácil y eficiente. Las páginas de preguntas frecuentes a menudo usan un acordeón, ya que muchos lectores buscan la respuesta a una o dos preguntas.
- Cuando los lectores ven su sitio desde pantallas más pequeñas: Si tiene problemas para poner una gran cantidad de contenido en una pantalla pequeña, como un dispositivo móvil, el acordeón puede ayudar a los lectores a tener una idea de lo que trata la página y reducir la cantidad de desplazamiento.
Cuándo no usar un acordeón
A pesar de sus muchas ventajas, el acordeón no siempre es la mejor opción para el diseño del sitio. Veamos algunas razones por las que no querrás usar un acordeón.
- Cuando los lectores necesitarán hacer clic en la mayoría de las piezas de acordeón: Si los usuarios necesitan abrir la mayoría de las piezas del acordeón, es mejor revelar todo el contenido en lugar de ocultar una parte. De esta manera, no obligará a sus visitantes a decidir en qué encabezados hacer clic y hacer clic en ellos uno a la vez, lo que puede ser una molestia.
- Si no tiene los recursos para hacer esto: Los acordeones deben estar disponibles, lo cual es un esfuerzo de desarrollo adicional. Si no cuenta con el apoyo interno o el presupuesto necesarios para cumplir con los estándares de accesibilidad, es mejor utilizar texto sin formato.
Para ver en profundidad qué es un acordeón, cuándo usarlo y qué ventajas y desventajas tiene, consulte este vídeo de Niki Tisza:
Interfaz de usuario de acordeón
Aunque el diseño del acordeón varía según la ubicación y el destino, su interfaz de usuario consta de tres componentes. Echemos un vistazo a cada uno a continuación.
Titulares
Los encabezados de acordeón contienen títulos de sección. Pretenden ser breves, pero lo suficientemente descriptivos para indicar lo que el lector puede aprender haciendo clic. Aquí hay un ejemplo:
Iconos
Los iconos que suelen aparecer a la izquierda o a la derecha de los títulos de las secciones indican que hay más contenido disponible después de hacer clic. Estos íconos pueden ser una flecha que apunta hacia abajo o hacia la derecha, un signo de intercalación, un signo más o un cheurón hacia abajo, entre otros.
A menudo, se utilizan dos conjuntos de iconos para indicar si un elemento se ha expandido o colapsado. En el ejemplo a continuación, el ícono más de la sección expandida se gira para que parezca una «X». Cuando vuelva a hacer clic, la sección se contraerá y el icono volverá a su posición original.
Paneles
Los paneles son secciones de contenido asociadas a cada titular. De forma predeterminada, los paneles suelen estar ocultos y expuestos cuando un usuario hace clic en un encabezado o en un icono de un menú. Los paneles pueden constar de viñetas o varios párrafos, pero deben ser tan breves y descriptivos como los encabezados de acordeón.
La interfaz de acordeón también puede usar colores, símbolos y letras, como veremos en los ejemplos a continuación.
Para entender mejor la interfaz de acordeón, echa un vistazo a esto vídeo de DesignCoach que muestra cómo construir un componente de acordeón usando Figma:
Ejemplo de menú de acordeón
A pesar de ser un elemento de diseño tan común, los menús de acordeón se ven muy diferentes de un sitio a otro. Esto se debe a que el contexto o propósito del acordeón afectará su apariencia y cómo interactúa con él. Por ejemplo, un acordeón para la navegación no se verá ni se comportará igual que un acordeón en la sección de preguntas frecuentes del sitio.
Con eso en mente, veamos los varios ejemplos de menús de acordeón a continuación.
1. &Té
Lo que nos gusta: Home & Tea utiliza un acordeón para presentar las diferentes categorías del menú. De esta manera, los lectores pueden navegar fácilmente por cada sabor y saber a qué categoría pertenece, o saltar directamente a una categoría favorita.
2. Material
Lo que nos gusta: La página de preguntas frecuentes está dividida en secciones, cada una con su propio acordeón. Los enlaces de salto en el lado izquierdo facilitan que los usuarios salten a la sección y al acordeón correspondiente que les interesa.
3. la jungla urbana
Lo que nos gusta: Al igual que Material, Urban Jungle divide su página de preguntas frecuentes en secciones, cada una con su propio acordeón y enlace de salto, lo que facilita la navegación. Lo que distingue a esta página es el diseño horizontal donde los nombres de las secciones se colocan a la izquierda del acordeón en lugar de encima de él. Esta es una forma inteligente de acortar la página y desplazarse más rápido.
4. Alimentar el cambio
Lo que nos gusta: La página de preguntas frecuentes de Nourish Change tiene un diseño horizontal similar al de Urban Jungle, pero sus colores e íconos son completamente únicos. Los colores variables y el abundante uso de espacios en blanco hacen que cada pieza del acordeón sea única. Los iconos de texto de ayuda también transmiten claramente la funcionalidad del acordeón.
Usando el acordeón en el diseño de su sitio web
Accordion puede ayudar a mejorar la experiencia del usuario, especialmente en dispositivos móviles. Dado que brindan la información más importante primero y dejan que los usuarios decidan sobre qué quieren saber más, son perfectos para las páginas de preguntas frecuentes, las secciones de menú en las páginas de inicio y más.
