Creando mejores formularios

Es muy probable que las personas deban completar un formulario cuando intentan alcanzar algún objetivo mientras navegan por internet, como comprar un producto o ver su película favorita. Sin embargo, esta tarea no es muy divertida de realizar y en ocasiones puede ser frustrante. Según The Manifest, el 81% de las personas ha abandonado un formulario en línea después de comenzar a llenarlo.

En este artículo compartiré algunas recomendaciones que he ido aprendiendo de cómo podemos crear formularios que sean más fáciles y rápidos de completar. Así que, vamos a ello.

Nombres accesibles

Los formularios deben de tener un nombre accesible que ayude a comunicar su propósito para las personas que usan tecnologías asistivas, como lectores de pantalla. Esto se puede lograr haciendo uso del atributo aria-labelledby, donde se referencie a un elemento de encabezado visible (h1 - h6) que contenga el nombre del formulario. Otras maneras manera de definir un nombre es haciendo uso de aria-label o title.

<h2 id="producto">Comprar producto</h2>
<form aria-labelledby="producto"></form>

Etiqueta label

Cada campo de un formulario debe estar asociado a una etiqueta label. Así, los lectores de pantallas pueden enunciar la etiqueta cuando el usuario se sitúe en el campo. Otro beneficio es que esto amplía el área de clic, ya que al hacer clic en la etiqueta se hace foco en el campo correspondiente.

<label for="email">Email</label> <input id="email" name="email" />

Al hacer clic en las etiquetas del formulario de registro de amazon, se hace foco en el campo correspondiente.

Autocompletado

Los navegadores pueden ayudar a completar los campos de un formulario automáticamente, dando sugerencias basadas en atributos como name, type y id del campo. A veces, esta información no es suficiente para que el navegador pueda ofrecer las mejores sugerencias, en este caso, podemos ayudar al navegador haciendo uso del atributo autocomplete. Este puede tomar varios valores dependiendo del tipo de información que se requiera.

<label for="email">Email</label>
<input id="email" name="email" autocomplete="email" />

En GetYourGuide utilizan autocomplete="email" para dar sugerencias basadas en valores de tipo email que se habían ingresado previamente.

Otra situación similar es donde podemos utilizar valores por defectos en los campos haciendo uso de la información que tenemos disponible en ese momento o implementando una API. Airbnb detecta automáticamente el país y el código telefónico, haciendo mucho más rápido y fácil el llenado del formulario.

Teclado apropiado

Cuando estás trabajando campos como código postal, número de tarjeta o un número de cuenta, es probable que pienses en usar el atributo type="number" en el campo, esto hace que aparezcan unas flechas para aumentar o disminuir el valor introducido, lo cual no tiene mucho sentido para estos casos. Si queremos evitar este comportamiento, pero mostrar un teclado adecuado en los dispositivos móviles, podemos usar el atributo inputmode="numeric" y dejar type="text".

En el lado izquierdo, usamos type="number". A la derecha, inputmode="numeric" y type="text" para eliminar las flechas y mostrar el teclado virtual apropiado.

Además, podemos mejorar la experiencia de usuario con el atributo enterkeyhint, que nos permite personalizar la tecla enter del teclado virtual con las acciones más comunes, como: buscar, enviar, añadir nueva línea, etc.

Placeholder como etiquetas

No uses el atributo placeholder para indicar el tipo de información que se espera en un campo. Este desaparece cuando el usuario empieza a escribir, lo que puede causar confusión o dificultad para recordar lo que se debe ingresar. Además, suele tener un color gris claro que no cumple con los estándares de accesibilidad para el contraste de color. Algunos lectores de pantalla tampoco leen su valor. Por eso, es mejor usar una etiqueta label visible para cada campo de entrada.

En el Banco Bancaribe usan el placeholder como etiqueta. Si el usuario se distrae después de escribir en el primer campo, cuando lo retome, ¿que se supone que estaba escribiendo? ¿el usuario? ¿el nombre? la única manera de saberlo es borrando lo que escribió para poder visualizar el valor del placeholder de nuevo. Frustrante, ¿no?

Visibilidad de la información

Si hay información que el usuario debe de conocer para completar el formulario con éxito, esta debe de ser siempre visible.

En MercadoLibre, algunos de los requisitos para crear una contraseña se encuentran ocultos en un tooltip, este puede activarse, pero desaparece cuando se empieza a llenar el campo, esto obliga a los usuarios a tener que recordar cada uno de los requisitos aumentando la carga cognitiva.

Una mejor opción es que los requisitos sean siempre visibles, como lo hace TripAdvisor, que indica que la contraseña debe de tener al menos 10 caracteres y uno de ellos especial.

Esta información también debe ser accesible, puedes usar aria-describedby para asociar el campo a un elemento que explique cómo debe ser ingresada la información.

<label for="password">Contraseña</label>
<input
  required
  minlength="8"
  type="password"
  id="password"
  name="password"
  aria-describedby="password-length"
/>
<span id="password-length">Debe ingresar al menos 8 caracteres</span>

Validar cuando hace sentido

Para evitar que los usuarios se frustren o cometan errores al llenar un formulario, es importante elegir el momento adecuado para mostrar los mensajes de validación. Lo ideal es que estos aparezcan cuando los usuarios han terminado de escribir en un campo y se muevan al siguiente. Esto se puede lograr usando el evento blur en el campo.

Un ejemplo de este tipo de validación lo encontramos en Stripe, que espera a que el usuario salga del campo para mostrar el mensaje correspondiente

Sin embargo, hay casos en los que puede ser útil mostrar las validaciones mientras los usuarios están escribiendo. Por ejemplo, Hotjar válida inmediatamente si la contraseña cumple con los requisitos del sistema ayudando a prevenir errores.

Navegación mediante teclado

Muchas personas navegan por internet haciendo uso del teclado, por lo que es importante crear formularios que sean accesibles para estas personas. Debemos tener en cuenta dos aspectos: usar los elementos HTML apropiados y mostrar el indicador de foco.

Los elementos como input, select y button reciben foco con el teclado por defecto, pero otros elementos como div o span no. Por eso, es mejor usar los primeros para crear formularios. Si en lugar de los elementos nativos vas a crear tus propios componentes, es importante que los pruebes para garantizar que sean accesibles.

El indicador de foco es una señal visual que muestra dónde está el cursor del teclado en la página. Algunos sitios web eliminan el indicador porque no les gusta cómo se ve, pero esto dificulta la navegación con el teclado. Lo recomendable es personalizar el indicador con la pseudoclase :focus para que haga sentido con el diseño del sitio.

Cuando navegamos por Twitter usando la tecla tab el indicador de foco nos muestra donde nos encontramos.

Conclusión

Hay muchas cosas que podemos hacer para mejorar los formularios, desde cambios a nivel visual hasta su implementación en código. Siguiendo las recomendaciones que te he dado, espero puedas crear formularios que sean mucho más claros, fáciles y accesibles para las personas.