Recientemente tuvimos la suerte de leer aquí en SiloCreativo un genial artículo de Félix Ortega sobre UX titulado «Descubrimiento Progresivo: Buscando lo Simple en lo Complejo», con buenos ejemplos reales para comprender mejor esta técnica de progressive disclosure y cómo aplicarla a nuestros trabajos.
En diseño web podemos encontrar muchos puntos donde aplicar esta técnica supondría una mejora en la Experiencia de Usuario, pero quizás el ejemplo que se nos viene primero a la cabeza son los formularios, esos puntos donde el usuario actúa de forma directa con la aplicación.
Hemos hablado varias veces sobre los formularios y sobre qué mejoras podemos aplicar a los mismos. Hoy vamos a ejecutar algunas acciones de descubrimiento progresivo en un formulario con la particularidad de que solo vamos a aplicar CSS, nada de JS ni librerías o frameworks, como ya hicimos con la demo de la barra de progreso del tiempo de lectura.
Formulario Progressive Disclosure con CSS-only
Para esta demo hemos optado por un formulario muy sencillo, con tres campos input (Nombre, Apellido y email) y un textarea para que el usuario pueda dejar su comentario. Pudiera valer como un formulario de contacto para cualquier web.
La aplicación del descubrimiento progresivo en esta demo es algo extrema, pues solo mostramos un campo a la vez, siendo necesario completar adecuadamente el mismo para que el siguiente campo se muestre, pero nos vale para ver el funcionamiento en vivo.
Pseudo selectores :valid e :invalid para pasar al siguiente paso
De partida, todos los elementos del formulario estarán ocultos, excepto el primer input (:first-of-type). Al completar dicho input, podemos usar dos pseudo selectores para definir si el contenido es valido (:valid) y pasar al siguiente campo o no válido (:invalid) para avisar al usuario que los datos introducidos no son correctos (no cumplen con el pattern o la longitud no es la correcta). La validación de formularios tiene una compatibilidad prácticamente completa.
Para poder aplicar esto correctamente necesitamos que todos los campos sean obligatorios, es decir, tengan en el html el atributo required, ya que de otra forma todos los campos serán válidos sin necesidad de rellenar ningún dato y no podremos utilizar el siguiente CSS:
#form input:valid + label + input,
#form input:valid + label + textarea,
#form textarea:valid + label + input,
#form textarea:valid + label + textarea {
display: block;
}Indicador de pasos y progreso con la etiqueta label
La etiqueta HTML label es fundamental en un formulario. Cada uno de los label va ligado a un elemento del form, por ejemplo a un input o textarea, indicando cierta información relativa al mismo. Aunque gracias al atributo placeholder podemos indicar dentro del input la información que necesitamos (Nombre, Apellidos, email…), es importante que la etiqueta label esté presente para los lectores de pantallas.
Por tanto, ya que tenemos a nuestra disposición este elemento, vamos a usarlo para crear una barra de progreso visual gracias a los pseudoelementos CSS :after y :before. Hubiera sido más limpio asociar dichos pseudoelementos a los inputs y textarea, pero estos elementos HTML no son contenedores, por lo que no es posible definirlos sobre ellos.
#form input:focus + label:after,
#form textarea:focus + label:after {
content: "";
width: 100%;
height: 6px;
background: linear-gradient(to right, #d8d8d8 0%,#d8d8d8 24%,transparent 24%,transparent 25%,#d8d8d8 25%,#d8d8d8 49%,transparent 49%,transparent 50%,#d8d8d8 50%, #d8d8d8 74%,transparent 74%,transparent 75%,#d8d8d8 75%,#d8d8d8 100%);
display: block;
margin: 0 auto;
}
La barra de progreso en cuestión solo se mostrará sobre el campo que estemos rellenado, de ahí que usemos la pseudo-clase :focus para identificar el input o textarea sobre el que estamos trabajando. Pero es importante que el usuario sepa donde está y cuánto falta para terminar.
Exprimiendo HTML5 y CSS3 para mejorar UX
Éste es solo un sencillo ejemplo de cómo podemos mejorar nuestras aplicaciones webs utilizando las herramientas que tenemos disponibles (HTML5 y CSS3) y sin necesidad de contar con aparatosos plugins o librerías externas que aumentan el tiempo de carga y terminan jugando en contra de la Experiencia de Usuario. Ya vimos otros casos parecidos con los ejemplos de zoom en imágenes con CSS-only o las animaciones CSS del icono hamburguesa.
El ejemplo de hoy es un poco extremo, cuatro campos pueden mostrarse perfectamente y a la vez sin que el usuario se sienta abrumado por tanta información, pero nos sirve para ilustrar cómo trabajar el descubrimiento progresivo de una forma sencilla con elementos compatibles con la totalidad de navegadores. Espero que te sirva para inspirarte!
