En la primera sección, aprendiste a crear un formulario básico. Esta sección trata sobre las prácticas recomendadas. En este módulo, obtén información sobre la experiencia del usuario (UX) y por qué una interfaz de usuario (IU) bien implementada puede marcar una gran diferencia.
Cómo crear interfaces fáciles de usar
Completar formularios puede ser lento y frustrante. Eso no tiene por qué serlo. Para garantizar una excelente UX, asegúrate de que la IU sea intuitiva. Asegúrate de proporcionar una estructura de formulario y un diseño gráfico óptimos (diseño, espaciado, tamaño y color de fuente), y una IU lógica (como la redacción de etiquetas y los tipos de entrada adecuados). Veamos cómo puedes mejorar tu formulario y facilitar su uso.
Etiquetas
¿Recuerdas para qué sirve el elemento <label>?
Una etiqueta describe un control de formulario.
Una etiqueta visible y bien escrita ayuda al usuario a comprender el propósito de un control de formulario.
Usa una etiqueta para cada control de formulario
¿Quieres agregar un control de formulario nuevo a tu formulario? Comienza por agregar la etiqueta del campo nuevo. De esta manera, no te olvides de agregarlo.
Agregar etiquetas primero también te ayuda a enfocarte en los objetivos del formulario. ¿Qué datos necesito aquí? Una vez que esto quede claro, puedes enfocarte en ayudar al usuario a ingresar datos y completar el formulario.
Texto de la etiqueta
Supongamos que deseas describir un campo de correo electrónico. Puedes hacerlo de la siguiente manera:
<label for="email">Enter your email address</label>
O podrías describirlo de la siguiente manera:
<label for="email">Email address</label>
¿Qué descripción eliges?
En nuestro ejemplo, se prefiere la frase "Dirección de correo electrónico", ya que las etiquetas cortas son más fáciles de escanear, reducen el desorden visual y ayudan a los usuarios a comprender qué datos se necesitan más rápido.
Posición de la etiqueta
Con la opción CSS, puedes posicionar una etiqueta en la parte superior, inferior, izquierda y derecha de un control de formulario. ¿Dónde lo colocas?
Las investigaciones demuestran que la práctica recomendada es colocar la etiqueta sobre el control de formulario para que el usuario pueda analizar un formulario con rapidez y ver qué etiqueta pertenece a cada control de formulario.
Diseño de formularios
Un buen diseño de formularios puede reducir significativamente los porcentajes de abandono de formularios.
Ayuda a los usuarios a ingresar datos con el elemento y el tipo de entrada adecuados. Existen varios elementos de formulario y tipos de entrada entre los que puedes elegir.
Para ofrecer la mejor UX, utiliza el elemento y el tipo de entrada más adecuados para tu caso de uso.
Si el usuario debe completar varias líneas de texto, usa el elemento <textarea>.
Cuando tengan que aceptar los términos y condiciones de tu sitio, usa <input type="checkbox">.
También debes diferenciar visualmente entre los diferentes tipos de controles de formulario. Un botón debe tener el aspecto de un botón. Una entrada como una entrada Haz que sea fácil para los usuarios reconocer el propósito de un control de formulario. Por ejemplo, si algo parece un vínculo, cuando hagas clic en él, se debería abrir una página nueva, y no se enviará un formulario.
Ayuda a los usuarios a navegar por los formularios
Un diseño extravagante puede ser divertido, pero puede impedir que se complete el formulario.
En particular, las investigaciones muestran que es mejor usar una sola columna. Los usuarios no quieren perder tiempo buscando dónde se encuentra el siguiente control de formulario. Cuando usas una columna, solo hay una dirección a seguir.
Ayuda a los usuarios a interactuar con los formularios
Para evitar toques y clics accidentales, y ayudar a los usuarios a interactuar con el formulario, haz que los botones sean lo suficientemente grandes.
El tamaño de objetivo de presión recomendado de un botón es de al menos 48 px.
También debes agregar suficiente espacio entre los controles del formulario con la propiedad de CSS margin para evitar interacciones accidentales.
El tamaño predeterminado de los controles de formularios es demasiado pequeño para poder usarlo mucho. Debes aumentar el tamaño usando padding y cambiando el font-size predeterminado.
Puedes definir diferentes tamaños para distintos dispositivos apuntadores (por ejemplo, un mouse) mediante la función de medios de CSS pointer.
// pointer device, for example, a mouse
@media (pointer: fine) {
input[type="checkbox"] {
width: 15px;
height: 15px;
}
}
// pointer device of limited accuracy, for example, a touch-based device
@media (pointer: coarse) {
input[type="checkbox"] {
width: 30px;
height: 30px;
}
}
Obtén más información sobre la función de medios de CSS pointer.
Muestra los errores donde se producen
Para que los usuarios puedan saber con facilidad qué control de formulario requiere su atención, muestra mensajes de error junto al control de formulario al que hacen referencia. Cuando muestres errores en el envío de formularios, asegúrate de navegar al primer control de formulario no válido.
Deja claro a los usuarios qué datos ingresar
Asegúrate de que los usuarios comprendan cómo ingresar datos válidos. ¿Debe ingresar al menos ocho caracteres para una contraseña? Díselo.
<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password" name="password" aria-describedby="password-minlength">
<span id="password-minlength">Enter at least eight characters</span>
Explícales a los usuarios cuáles son los campos obligatorios
<label for="name">Name (required)</label>
<input name="name" id="name" required>
Si el campo es obligatorio, deja que sea obvio. En Anatomía de los formularios accesibles, se explican las alternativas para indicar los campos obligatorios. Si la mayoría de los campos de un formulario son obligatorios, tal vez sea mejor indicar los campos opcionales.
¿Cómo puedes conectar los mensajes de error a los controles de formularios para que sean accesibles para los lectores de pantalla? Puedes obtener más información sobre este tema en el siguiente módulo.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre el diseño de formularios
¿Cómo describirías un control de formulario?
<description>.<label>.description.placeholder.¿Cuál es el tamaño del objetivo táctil recomendado?
¿Dónde deberías colocar mensajes de error?
<form>.