Los acordeones son un componente o elemento de interfaz de usuario muy popular en la actualidad. En dispositivos móviles se están usando bastante puesto que colapsan el contenido y hace que el alto o longitud de las páginas sean más manejables.
En escritorio, también, reducen la complejidad a nivel visual y permiten que los usuarios se centren en el contenido más importante o relevante.
Principales problemas de Usabilidad y UX con acordeones o Expand and Collapse
Los acordeones no son siempre la mejor solución para páginas que tienen mucho contenido. Cierto es que acortan las páginas y reducen el desplazamiento, pero aumentan el número de interacciones que realizan los usuarios para poder consumir el contenido teniendo que clicar en el título para poder acceder al mismo.
Un menú de acordeón o Expand and Collapse no es más que una lista de encabezados uno debajo de otro alineados verticalmente en los que se puede clicar para mostrar u ocultar su contenido.
Algunas ventajas de los acordeones
Algunas de las ventajas principales de usar Expand and Collapse en páginas con mucho contenido son:
- Al contraer los acordeones la longitud de la página se minimiza.
- Los títulos de los acordeones sirven como arquitectura de información para que el usuario genere un modelo mental sobre los contenidos de la página.
- Ocultar contenido o parte del contenido reduce la carga cognitiva a los usuarios.
- Los acordeones pueden ser una gran alternativa para ocultar nidos de enlaces. Una técnica muy utilizada por personas especializadas en SEO.
Algunas desventajas de Usabilidad con acordeones
Aunque los acordeones suelen ser componentes bastante buenos para presentar contenido complejo y muy extenso, tienen también algunas desventajas o inconvenientes:
- Obligar a los usuarios a hacer clic en los títulos de uno en uno para mostrar el contenido completo puede ser engorroso. En el hipotético caso de existir muchos temas interesantes para un usuario, es probable que tenga que abrir la mayoría de acordeones para poder consumir el contenido.
- Los acordeones aumentan el tiempo y esfuerzo de interacción. Obligar a los usuarios a realizar muchos clics para consumir contenido, puede ser contraproducente.
- No mostrar el contenido puede llevar a que no se entienda correctamente el título del acordeón. Los encabezados o títulos deben ser lo suficientemente claros, descriptivos y atractivos para motivar a las personas o usuarios a hacer clic y expandir los acordeones.
Claves para utilizar acordeones o Expand and Collapse
Conocer el contexto y escenario de los usuarios para los que se está diseñando una interfaz es muy importante. En el caso de que se quiera incluir acordeones en dicha página cobra mayor relevancia.
Algunos aspectos por los que se deben de evitar el uso de acordeones son:
- Cuando los usuarios necesiten la mayor parte o todo el contenido visible para poder ejecutar una tarea concreta.
Algunos aspectos clave para usar acordeones son:
- Cuando los usuarios sólo necesitan parte del contenido para poder ejecutar una tarea concreta o resolver sus dudas.
- Cuando el espacio esté restringido. Un ejemplo es en dispositivos móviles.
Acordeones o Expand and Collapse en móvil
Como definición un acordeón se puede describir como un elemento que al tocarlo en un móvil se expande para exponer o mostrar información oculta. En cuanto a su funcionamiento cuando se expanden empujan el contenido de la página hacia abajo en lugar de superponerse.
Si bien el uso de acordeones en versiones de escritorio puede ser discutible, en dispositivos móviles, los acordeones son uno de los componentes de diseño más útiles. A menudo, resuelve satisfactoriamente el problema de mostrar demasiado contenido en espacios de pantalla muy pequeños.
A pesar de que permiten que los usuarios puedan obtener una imagen completa antes de centrarse en los detalles y mitigan el problema de las páginas demasiado largas, también tienen desventajas.
Los acordeones en dispositivos móviles pueden presentar algunos problemas de Usabilidad:
- Iconos para expandir y contraer poco representativos.
- Desorientación.
Los acordeones son una gran herramienta para los diseños móviles porque condensan información en un espacio limitado y permiten a los usuarios ver el panorama general y centrarse en lo esencial en lugar de en los detalles. Sin embargo, cuando el contenido debajo del acordeón es demasiado extenso, pueden obligar a los usuarios a desplazarse demasiado para colapsar el acordeón y navegar a otra información en la página.
Créditos
Designing The Perfect Accordion
La imagen de cabecera es de Unsplash