Los elementos de maquetación llamados Acordeón permiten disponer de más espacio en la pantalla del móvil, pero también pueden causar desorientación y exceso de desplazamiento. Unas sencillas correcciones en el diseño mejoran el uso de este tipo de elementos UI.
Un acordeón es un elemento de diseño que se expande con el fin de mostrar información que está oculta. A diferencia de las superposiciones, los acordeones empujan el contenido de la página hacia abajo en vez de ser superponerla sobre la parte superior de la página de contenido.
Si bien el uso de acordeones en pantallas de escritorio es discutible, en el móvil los acordeones son uno de los elementos de diseño más útiles, ya que a menudo resuelven el problema de mostrar demasiado contenido en muy poco espacio de la pantalla. Ocasionalmente sin embargo, los acordeones pueden generar confusión; por suerte en el navegador esta confusión se evita fácilmente mediante la ampliación de la funcionalidad Volver.
Mini-IAS, o por qué los Acordeones son buenos para el móvil
Una de las mayores ventajas de los acordeones es que a menudo permiten a los usuarios obtener una vista previa antes de centrarse en los detalles, y pueden mitigar con eficacia el problema común de las páginas excesivamente largas.
Cuando los usuarios llegan a una nueva página web, intentan tener una idea global de lo que la página contiene y si esa información va a ser relevante para su objetivo. Tan pronto como han respondido a esa pregunta, o bien siguen la visita (si están convencidos de que la página es la adecuada para sus necesidades) o navegan lejos en busca de una mejor fuente de información. Cuando una página móvil contiene muchas áreas de contenido relacionado, los usuarios tienen que desplazarse hacia abajo para encontrarlas, un proceso tedioso y poco gratificante cuando la mayor parte del contenido de la página es irrelevante. Como resultado los usuarios a menudo dejan de desplazarse hacia abajo y se van.
Entonces, ¿cuál es la solución? Una buena página web anuncia cual es su contenido. Esto está relacionado con tener una tabla de los contenidos (o mini-IA) relevantes y visible de inmediato cuando el usuario aterriza en nuestra página. Hay tres beneficios principales de una tabla de contenidos como esta:
- Se indica a los usuarios los contenidos de la página y si éstos son relevantes para sus objetivos.
- Se ofrece a los usuarios un acceso directo a una sección de intereses.
- Ayuda a los usuarios a formarse un modelo mental de la página y, potencialmente, de la web.
Hay varias maneras de realizar un mini-IA o tabla de contenido: enlaces de salto, una barra de navegación secundaria, un menú, o acordeones. En este artículo nos centraremos en los acordeones que quizás sea la solución más elegante: ocupan la menor cantidad de espacio posible y mantienen al usuario en su lugar.
Los acordeones pueden ser útiles no sólo en páginas de contenido, sino también en páginas de formularios. Contraer cada paso del formulario en un acordeón puede ser una manera eficaz de transmitir el flujo de trabajo de un formulario para los usuarios sin abrumarlos, y también sin necesidad de múltiples cargas de la página.
Dificultades causadas por los Acordeones
Desorientación
Cuando los usuarios expanden un acordeón, este se puede mover a la parte superior de la pantalla para maximizar la visualización del contenido del acordeón. Por desgracia, eso tiene la desventaja de que los usuarios piensen que han cambiado de página. Como resultado, puede que utilicen el botón Volver para volver a la vista del acordeón cerrado, pero al hacerlo salen de la página actual con el acordeón.
Para evitar esta confusión y también para que los usuarios puedan ir rápidamente de nuevo a la vista con el acordeón cerrado, prueba el uso del botón Volver como un botón que contrae el acordeón: si la última acción del usuario expandía un acordeón, pulsando Volver debe llevar al usuario a una vista cerrada del acordeón. Básicamente, esto significa tratar a los acordeones como si fueran enlaces dentro de una misma página (anclas).
Otra solución (que sin embargo utiliza el espacio de una manera menos eficiente) es evitar la ilusión de una nueva página al no desplazar la página cuando se expande el acordeón. Esta solución tiene la ventaja de no desorientar al usuario .
Desplazarse a la siguiente opción
La mayoría de los acordeones se cierran con sólo pulsar el mismo elemento que los abrió.
A veces el contenido bajo un acordeón puede ser muy largo y puede ser bueno permitir un acceso rápido al botón de cierre. En situaciones como ésta, una cabecera de acordeón fija u otro elemento flotante que permita a los usuarios cerrar rápidamente el acordeón puede acelerar la interacción y ayudar a los usuarios. En el navegador, el tratamiento de los acordeones como si fueran enlaces de ancla y el uso de Volver para deshacer la expansión de un acordeón en lugar de llevar a los usuarios a la página anterior también puede acelerar la interacción.
Una buena manera de evitar el problema del desplazamiento para poder navegar fuera del contenido del acordeón desplegado es el uso de botones tipo Contraer, para lo que es recomendable utilizar por una parte símbolos reconocibles por el usuario, y la fijación de la pestaña del acordeón que se ha desplegado en la parte superior de la pantalla al desplazarse hacia abajo en las opciones que contiene.
Resumen
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 tener una visión global y centrarse en lo esencial, más que en los detalles. Sin embargo, hay que tener cuidado cuando el contenido bajo el acordeón es demasiado largo, se puede acabar obligando a los usuarios a desplazarse demasiado y perder la opción de colapsar el acordeón para ir a otra información de la página. Los acordeones también pueden incidir en la desorientación del usuario. Afortunadamente, estos problemas son fácilmente solucionables con pequeños cambios en el diseño, como las cabeceras de acordeón fijas y el tratamiento de los acordeones como enlaces de ancla.
Comentarios