Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML & CSS

Crear formularios web más amigables y "conversacionales"

by
Length:LongLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Los formularios web son constantemente un tema candente cuando se trata de diseño web e interacción con el usuario. Las razones de esto son amplias, pero una de las más obvias es que los formularios son la forma más básica en la que un usuario introduce información en tu aplicación. En este artículo, discutiremos algunas técnicas que permiten que los formularios respondan a los inputs del usuario, al tiempo que ayudaremos a ocultar elementos innecesariamente confusos o abrumadores.

¡Empecemos!

Los formularios son como conversaciones

Concibe un formulario como si fuese una conversación que estás manteniendo con tu usuario. En una conversación, hay una sensación de que se da una ida y vuelta, donde cada parte pide a la otra parte que proporcione una respuesta. Por ejemplo, supongamos que el usuario viene a registrarse o a iniciar sesión. En ambos casos, necesitas su correo electrónico, así que conversacionalmente, ¿por qué no empezar con eso?

Dame tu correo electrónico, y comprobaré si tienes una cuenta. Si es así, te pediré tu contraseña, de lo contrario te dejaré proporcionarme una nueva y que luego tendrás que confirmarme.

Así que cuando el usuario llega a la página con el formulario, encuentran un mensaje muy claro: "¿Cuál es tu dirección de correo electrónico?"

El tipo molesto de la fiesta

Todos conocemos a ese tipo. Es el tipo que evitas porque habla incesantemente, y realmente no parece escuchar lo que tú tienes que decir. Francamente, ese tipo es realmente abrumador, y no estoy seguro de que a nadie le guste eso. No seas ese tipo.

En tus formularios, aprende una lección de él. En lugar de confrontar al usuario con una excesiva cantidad de campos de entrada, considera la posibilidad de reducir la carga de trabajo de inputs del usuario mediante la creación de entradas reactivas.

Echemos un vistazo a un ejemplo simple.

Formulario de inicio de sesión

El proceso de inicio de sesión es similar a esto: Introduzco mi dirección de correo electrónico, luego introduzco mi contraseña, y por último presiono intro. En este ejemplo, aprenderás a mostrar cada uno de estos campos sólo después de que se haya completado el campo anterior, utilizando solo HTML y CSS. Vamos a construir esto, y luego una versión modificada.

Comencemos con una primera toma en el marcado.

Si eso se ve un poco intimidante, no te preocupes, te explicaré cada fragmento. Empecemos con el campo de entrada para el correo electrónico. Vemos algunos atributos añadidos a la etiqueta más allá del simple nombre. En primer lugar, el tipo de entrada se establece en "correo electrónico"; este es un tipo relativamente nuevo de entrada que nos da un comportamiento especial en los navegadores que los soportan. Por ejemplo, en el iPhone, aparecerá el símbolo de la tecla "@" en el teclado principal.

Otra característica de los tipos de entrada es que los formularios HTML5 tienen capacidades de validación a nivel de navegador. ¡Esto significa que no tienes que escribir JavaScript para realizar la validación en elementos de formulario básicos! Ten en cuenta que tenemos un atributo "required" en los elementos de correo electrónico y contraseña. Una vez que estos dos elementos con cumplimentados y sus valores son considerados válidos por el navegador, puedes incluso apuntar a ellos con el pseudo selector :valid.

Territorio regex

Esto es increíble, pero podríamos hacerlo mejor. Por ejemplo, el navegador acepta "a@b" como un correo electrónico aceptable. El motivo de esto es porque una dirección de correo electrónico podría configurarse para ir a algo como "something@localhost". Nuestra contraseña puede ser cualquier cosa que introduzcamos, por lo que una contraseña de un solo carácter como "a" se consideraría válida. Vamos a añadir algunas expresiones regulares para solucionar estos problemas.

Nota: si no estás familiarizado con regex, ¡no pasa nada! Aquí cubrimos una pequeña cantidad para mostrar cómo puedes abordarlo para tareas habituales en la validación de formularios HTML5, pero puedes continuar utilizando las implementaciones del navegador y aún así seguir el tutorial. ¡Simplemente sáltate esta sección y sigue adelante!

Otra nota: también puedes echar un vistazo a Regular Expressions for Dummies: Screencast Series (Expresiones regulares para dummies: Serie de grabaciones) de Jeffrey Way.

Vamos a recorrer cada parte de estos patrones. Las expresiones regulares son una forma de describir y comparar el formato de una cadena.

Comenzaremos con el patrón de correo electrónico.

  • [^ @]* - coincide con cualquier cantidad de caracteres que no sea un signo @ o un espacio.
  • @ - un signo @ literal
  • \. - un literal .
  • [a-zA-Z] - cualquier letra, tanto en mayúsculas como en minúsculas
  • [a-zA-Z]{2,} - cualquier combinación de dos o más letras

Al poner todo esto junto, podemos ver que esta expresión dice que un correo electrónico es cualquier conjunto de caracteres, a excepción de un signo @, seguido de un signo @, seguido de cualquier conjunto de caracteres excepto el signo @, seguido de un punto, al que le siguen después al menos dos letras.

Podemos aplicar un regex mucho más simple si queremos hacer una validación basada sólo en la longitud del valor:

El . significa "cualquier carácter", y el {5,} indica que deben haber al menos 5.

Con estos patrones en su sitio, el elemento no se considerará válido hasta que se introduzca un valor que satisfaga dicho patrón.

Completaremos el marcado con un poco de pulido extra y algunos elementos más que no sean elementos de formulario.

Algo de magia con CSS :valid

Ahora que tenemos algo de marcado para nuestro formulario de inicio de sesión, veamos qué podemos hacer con CSS para responder a la entrada del usuario.

Queremos mostrar el siguiente elemento de formulario cuando el actual sea válido. Comencemos ocultando los propios elementos del formulario, de una manera accesible, para que los lectores de pantalla sigan viendo el formulario completo, y para que autocompletar pueda cumplimentar los valores. (Chris Coyier explica aquí por qué no usar display:none en este tipo de situaciones.) Usaremos el método visuallyhidden descrito en el artículo de Chris.

Empezaremos con algunos estilos básicos.

conversational-form-base-all

Esto nos da un formulario de inicio de sesión centrado y sencillo. Tomemos el concepto visualmente oculto y aplícalo a los elementos que queremos ocultar.

conversational-form-base

Vamos a estar ejecutando alguna animación, por lo que hemos ampliado la clase un poco para incluir también la opacidad, hemos eliminado el posicionamiento absoluto y añadido la definición de transición.

Nota: no estamos incluyendo los prefijos del proveedor para la transición, ¡pero deberías hacerlo!

Ahora vamos a mostrarlos cuándo les toque hacerlo, usando el pseudoselector :valid y el selector + para los elementos hermanos.

conversational-form-animation-all

Una nota sobre las prácticas recomendadas

Es importante tener en cuenta los objetivos y las expectativas del usuario en relación a un formulario web. A veces, ocultar completamente las entradas del usuario proporciona una solución suficiente. Sin embargo, en algunos casos, esto puede tener un efecto adverso, haciendo que el usuario sienta que no hay una hoja de ruta clara para el proceso de cumplimentación del formulario, y que es posible que esto último les lleve más tiempo del que están dispuestos a renunciar.

Una solución a este problema sería utilizar algún tipo de oscurecimiento sin ocultar completamente los campos de entrada que ayudan a crear el enfoque de retroalimentación narrativa a los formularios que tienen un claro objetivo y expectativas relativamente predecibles. Esta es una versión modificada que utiliza el escalado, el filtro de desenfoque de webkit, la opacidad y los eventos del puntero (pointer-events:none) para "presentar" los campos de entradas al usuario a medida que están disponibles. También necesitamos asegurarnos de que los eventos del puntero se restauran cuando las entradas están disponibles, para que el usuario pueda hacer clic en ellas.

conversational-form-animation-modified
Echa un vistazo a la demo

Un error rápido a señalar: cuando un usuario presione la pestaña, introducirá el siguiente elemento de formulario. Evitamos hacer clic en el siguiente elemento de formulario con pointer-events:none, pero no existe un atributo "focusable" en CSS. En su lugar, tendríamos que controlar este comportamiento con un toque de JavaScript (con sabor a jQuery).

Este JavaScript observa las entradas de nuestro formulario y las deshabilita o habilita basándose en el estado ":válido" de su hermano anterior. Esto no nos permitirá enfocar el elemento. pointer-events: none todavía funciona para evitar que nuestro input de envío reciba el estado "hover".

Otros casos de uso

Imagine un formulario que tenga varias "pistas", como en nuestro ejemplo de "Iniciar sesión o registrarse". Un usuario puede estar seleccionando varias opciones que requerirían una nueva selección de elementos de formulario, como la selección de un estado para un envío o un intervalo de tiempo para la reserva de una cena. En estos casos, la validación simple puede no ser suficiente, y en su lugar usaríamos una solución basada en JavaScript.

Tomemos, por ejemplo, el ejemplo de "iniciar sesión" frente a "registrarse". Para resolver esto, debemos preguntar al servidor si existe un usuario que coincida con el correo electrónico proporcionado en el inicio de sesión.

En el anterior JavaScript, enviamos la dirección de correo electrónico al servidor en la url "/check_for_user". El servidor devolvería una respuesta JSON sencilla, similar a la siguiente.

En función de este valor, añadimos una clase a la entrada y cambiamos el punto de conexión del formulario. También establecemos las contraseñas relevantes que se requieren. Entonces podríamos usar CSS en una variedad de formas para definir lo que sucede a continuación. Por ejemplo, podríamos usar un enfoque similar al mencionado anteriormente para mostrar u ocultar entradas.

Si estás registrándote para obtener una nueva cuenta, es posible que tengamos que mostrar el campo de contraseña de registro (en lugar del campo de contraseña de inicio de sesión). Para ello, se utilizaría el selector ~, que es el selector general para elementos hermanos, y que nos permite "saltar" sobre elementos irrelevantes con el mismo hermano.

Soluciones alternativas

Cuando impulsamos nuevas técnicas en el desarrollo front-end, no van a funcionar siempre, en todos los navegadores. Afortunadamente, gestionar esto es muy sencillo si en esta situación usamos una buena solución alternativa. Estamos cubiertos por la mayoría de los principales navegadores, pero esta selección por desgracia no incluye iOS 7 o Android. Para los navegadores que no son compatibles, simplemente volveremos al comportamiento predeterminado del formulario.

Para ello, podríamos usar Modernizr para detectar si el navegador admite o no la validación de elementos de formulario. Es recomendable usar Modernizr para este tipo de detección de características, pero de momento también podemos escribir una función rápida. "Non-Core Detects" o "detecciones no principales" de Modernizr incluyen una opción para la "validación de formularios", por lo que tendrá que crear una descarga personalizada. Una vez que hayas configurado esto, los exploradores compatibles recibirán la clase form validation en el elemento html. Puedes dirigirte a esta clase formvalidation para mejorar el formulario en los exploradores compatibles.

Dado que los pseudo elementos :valid y :invalid sólo funcionarán en navegadores compatibles, el CSS que oculta los campos de entrada es el único CSS con el que necesitamos utilizar la mejora progresiva. Las entradas actuarán con su función predeterminada en navegadores no compatibles.

¡Eso es todo!

Ahora tienes algunas interesantes formas de llevar tus formularios a un nuevo nivel de modelado de conversaciones interactivas con tus usuarios. ¿Qué otras cosas poderosas has imaginado en las que podríamos usar las pseudoclases :valid y :invalid? ¡Cuéntanoslo a través de un comentarios!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.