Te hayas dado cuenta o no, ya has experimentado la divulgación progresiva.
Es muy probable que te haya pasado al encontrarte perdido entre tres y cinco niveles dentro de los ajustes de tu teléfono, solo intentando cambiar la intensidad de la vibración. ¿Por qué esta función está tan escondida en la interfaz?, te habrás preguntado.
Lo más probable es que sea porque la intensidad de la vibración es un ajuste que solo tocarás una o dos veces en toda la vida útil de tu teléfono.
Y a eso es a lo que llamamos "divulgación progresiva".
¿Qué es la divulgación progresiva?
La divulgación progresiva traslada las funciones avanzadas o poco utilizadas a una pantalla secundaria, lo que hace que las aplicaciones sean más fáciles de aprender y menos propensas a errores.
–Jakob Nielsen, “Progressive Disclosure”, Nielsen Norman Group
La idea central de la divulgación progresiva, entonces, es resaltar las acciones más importantes que los visitantes pueden realizar y ofrecer las acciones más complejas y menos frecuentes en niveles más profundos de la estructura de tu sitio.
Usos comunes de la divulgación progresiva en el diseño web
Sin embargo, la divulgación progresiva no se limita al diseño de productos digitales. Encontrarás técnicas de divulgación progresiva aplicadas de muchas formas en el diseño web, normalmente para controlar la cantidad de información que un sitio muestra al visitante.
Aquí tienes algunos ejemplos de divulgación progresiva en acción:
Menús de navegación desplegables (es decir, menús desplegables y mega-menús)
Best Buy tiene un menú desplegable con enlaces a categorías de productos anidados para una navegación rápida. Esto les permite simplificar su navegación y dejar espacio para la barra de búsqueda, que probablemente se utilice más a menudo para encontrar productos específicos. Al fin y al cabo, suele ser más fácil escribir lo que buscas que perderte en la arquitectura de información de un sitio.
Curiosamente, el menú desplegable de productos de Best Buy aparece expandido al cargar, una decisión que probablemente tomaron para aumentar la interacción con el menú y para dar una pista a los visitantes de que los enlaces de Servicios y Ofertas se comportarán de forma similar.
Eso suele ser uno de los retos principales de la divulgación progresiva: cómo ocultar contenido, pero dar a la gente suficiente "rastro de información" para ayudarles a encontrar ese contenido oculto. Aquí, el menú desplegable pre-expandido sirve como una señal que ayuda a la gente a "aprender" la interfaz.
Deslizadores y carruseles
Los deslizadores se han convertido en una de las técnicas de divulgación progresiva más comunes en el diseño web, hasta el punto de que muchos dirían que están sobreutilizados.
Dicho esto, mostrar productos de esta manera puede mantener a los usuarios enganchados e interactuando con el sitio. Amazon aprovecha este método para ayudar a la gente a descubrir productos populares y relacionados, lo cual tiene sentido: como la mayoría de los minoristas, dependen de las ventas adicionales y las compras impulsivas.
Fíjate en cómo Amazon utiliza grandes "botones" de flecha que cambian de color para indicar hacia dónde debes ir para encontrar más contenido.
El menú "hamburguesa"
Probablemente hayas visto menús de hamburguesa en cientos de sitios web móviles, adaptables y responsivos, generalmente porque puede ser muy difícil reducir los sistemas de navegación diseñados para escritorio para que quepan en pantallas móviles.
Es muy importante que la experiencia de navegación de tu sitio sea fluida y sencilla. Solo ten en cuenta que no todo el mundo reconocerá qué funcionalidad esconde un menú de hamburguesa. Si tu audiencia es muy experta en la web, probablemente no sea un problema. Pero añadir la palabra "Menú" no debería afectar mucho a tu diseño y probablemente mejorará la interacción con el botón.
Otros métodos para mejorar la navegación móvil incluyen:
- Mostrar solo las páginas principales en la navegación principal y relegar el resto al pie de página de tu sitio.
- Usar navegación por pestañas en la parte superior o inferior de la pantalla, al estilo de tu aplicación de Facebook.
- Incluir regularmente enlaces a otras páginas principales en el contenido de tu página de inicio.
El enlace "Leer más"
Muchos sitios de noticias y blogs utilizan páginas de índice que muestran resúmenes de artículos junto con un enlace de "leer más" para acceder al contenido completo. Esta técnica de divulgación progresiva te permite mostrar a los visitantes de tu sitio una gran cantidad de historias de entrada y dejar que accedan fácilmente a las que más les interesan.
Sin embargo, el enlace de "leer más" plantea importantes desafíos de accesibilidad para las personas que utilizan lectores de pantalla. Es por eso que el índice del blog de Webflow no utiliza enlaces de "leer más" (fuera de la historia destacada).
Paginación
La paginación puede funcionar muy bien cuando tienes mucha información que mostrar, como en nuestros libros electrónicos de diseño web.
Sin embargo, probablemente estés más familiarizado con un abuso de la paginación: dividir listas en fragmentos tipo galería para conseguir más visitas a los anuncios. Esto ignora el hecho de que el desplazamiento ofrece una mejor experiencia de usuario que hacer clic.
Si debes usar esta técnica, haz que el proceso de paginación sea sencillo y directo para crear una experiencia fluida para los visitantes de tu sitio. Y asegúrate de que la paginación tenga sentido como metáfora de diseño para tu contenido. Funciona muy bien para libros electrónicos y presentaciones, pero de lo contrario puede parecer que estás forzando el contenido en un modelo que no le queda bien.
Elementos de acordeón
Los elementos de acordeón son muy útiles cuando necesitas mostrar mucha información, pero solo una parte será relevante para cada usuario. Es común verlos en secciones de preguntas frecuentes (FAQ) y en artículos de ayuda o soporte, donde algunos usuarios solo necesitan ver los pasos a seguir, mientras que otros prefieren consultar todos los detalles.
¿Tienes alguna pregunta o comentario?
¿Conoces alguna otra técnica de divulgación progresiva que quieras compartir, o tienes dudas sobre cómo usarla de forma más efectiva? ¡Cuéntanos en los comentarios!
Ebook gratuito: Introducción al diseño web
Domina los conceptos fundamentales del diseño web, como la tipografía, la teoría del color, el diseño visual y mucho más.
Ahora que ya dominamos las técnicas de divulgación progresiva, veamos cómo puedes crear la tuya propia en Webflow.
Puedes crear rápidamente un menú de acordeón personalizado en Webflow como este siguiendo unos pasos sencillos:
Paso 1: Añade un componente desplegable y dale estilo
Abre el panel de añadir elementos, baja hasta Componentes y arrastra un elemento desplegable (Dropdown) al lienzo. Luego, asígnale un nombre de clase a todo el componente (yo usé "dropdown class" para este ejemplo).
Después, selecciona el botón del desplegable, asígnale una clase y dale el estilo que prefieras. Yo le puse un ancho del 100% para que ocupe todo el espacio de su contenedor.
Paso 2: Añade una clase a la lista desplegable y dale estilo
Este paso es fundamental. Abre la pestaña del Navegador a la derecha, selecciona el elemento de la lista desplegable (que está dentro del componente desplegable) y asígnale un nombre de clase.
Mantén la lista desplegable en estado cerrado mientras haces estos cambios. Configura su posición como relativa, establece el desbordamiento (overflow) en oculto, y asígnale una altura de 0px.
Estás configurando el elemento con un posicionamiento relativo en lugar del absoluto predeterminado para que la lista desplegable empuje los demás elementos hacia abajo. Asegúrate de consultar esta guía sobre propiedades CSS para obtener más información sobre los estilos de posición.
Paso 3: Suaviza la interacción de apertura y cierre
Selecciona tu elemento de lista desplegable, cambia a la pestaña de Objetos Globales y crea una interacción, poniéndole un nombre fácil de recordar, como "Interacción de apertura y cierre de acordeón".
1. Configura una apariencia inicial de 0px de altura y display: none.
A continuación, añade una interacción de activador de menú desplegable y configura los estados de apertura y cierre de la siguiente manera:
Menú desplegable abierto
1. El paso 1 del estado abierto obtiene 0px de altura (cero milisegundos de retraso) y display: block (copia esta interacción para el paso 2)
2. El paso 2 obtiene altura automática (500 milisegundos de retraso) y display: block
Menú desplegable cerrado
Para este paso, simplemente ajusta tu lista desplegable a una altura de 0px y ajusta la velocidad de retraso según sea necesario.
Tus ajustes de interacción deberían verse ahora más o menos así:
Ahora ve a la pestaña de ajustes con el elemento desplegable seleccionado y añade un retraso de cierre que coincida con la velocidad de tu animación de cierre. Para esto, usé un retraso de 500ms.
Ahora, solo selecciona todo el elemento desplegable y cópialo y pégalo hasta tener todos los paneles que necesites.
¡Listo! Has creado un widget de acordeón en tu sitio.
Si tienes algún problema al montarlo, publica en la categoría de ayuda de diseño de nuestro foro con toda la información posible, y no dudes en etiquetarme (@Waldo), para que pueda echarte una mano. Asegúrate de incluir un enlace de solo lectura a tu sitio, indica el nombre de la página y la sección donde se encuentra el acordeón, e incluye capturas de pantalla y una descripción del problema.
