En la primera sección, aprendiste a crear un formulario básico. En esta sección, se explican las prácticas recomendadas. En este módulo, aprenderás sobre la experiencia del usuario (UX) y por qué una interfaz de usuario (IU) bien implementada puede marcar una gran diferencia.
Crea interfaces fáciles de usar
Completar formularios puede ser frustrante y llevar mucho tiempo, pero no tiene por qué ser así. Para crear una experiencia del usuario óptima, asegúrate de que la interfaz sea intuitiva. Asegúrate de ofrecer una estructura de formulario y un diseño gráfico óptimos (diseño, espaciado, tamaño y color de la fuente), y una IU lógica (como la redacción de las etiquetas y los tipos de entrada adecuados). Descubre 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 nuevo control de formulario? Comienza por agregar la etiqueta del campo nuevo. De esta manera, no olvidarás agregarla.
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
Di que quieres describir un campo de correo electrónico. Puedes hacerlo de la siguiente manera:
<label for="email">Enter your email address</label>
También puedes describirlo de la siguiente manera:
<label for="email">Email address</label>
¿Qué descripción elegirías?
En nuestro ejemplo, se prefiere la redacción "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 más rápido qué datos se necesitan.
Posición de la etiqueta
Con CSS, puedes colocar 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 del formulario, de modo que el usuario pueda analizar un formulario rápidamente y ver a qué control del formulario pertenece cada etiqueta.
Diseña formularios
Un buen diseño de formularios puede reducir significativamente las tasas de abandono de formularios.
Ayuda a los usuarios a ingresar datos con el elemento y el tipo de entrada adecuados.
Puedes elegir entre varios elementos de formulario y tipos de entrada.
Para ofrecer la mejor UX, usa 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 deban aceptar los términos y condiciones de tu sitio, usa <input type="checkbox">.
También debes diferenciar visualmente los distintos tipos de controles de formulario. Un botón debe parecer un botón. Una entrada como una entrada. Facilita a los usuarios el reconocimiento del propósito de un control de formulario. Por ejemplo, si algo parece un vínculo, hacer clic en él debería abrir una página nueva y no enviar un formulario.
Ayuda a los usuarios a navegar por los formularios
Un diseño extravagante puede ser divertido, pero puede dificultar el proceso de completar un formulario.
En particular, las investigaciones demuestran que es mejor usar solo una columna. Los usuarios no quieren perder tiempo buscando dónde está el siguiente control de formulario. Si se usa una sola columna, solo hay una dirección que seguir.
Ayuda a los usuarios a interactuar con formularios
Para evitar toques y clics accidentales, y ayudar a los usuarios a interactuar con tu formulario, haz que los botones sean lo suficientemente grandes. El tamaño recomendado del objetivo táctil 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 formulario es demasiado pequeño para ser realmente utilizable. Debes aumentar el tamaño con padding y cambiar el valor predeterminado de font-size.
Puedes definir diferentes tamaños para diferentes dispositivos apuntadores, por ejemplo, un mouse, con la función de medios 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 pointer función de medios de CSS.
Mostrar los errores donde ocurren
Para que los usuarios puedan saber fácilmente qué control de formulario requiere su atención, muestra los mensajes de error junto al control de formulario al que se refieren. Cuando se muestren errores en el envío del formulario, asegúrate de navegar al primer control de formulario no válido.
Indica claramente a los usuarios qué datos deben ingresar
Asegúrate de que los usuarios comprendan cómo ingresar datos válidos. ¿Deben 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>
Indica claramente a los usuarios qué campos son obligatorios
<label for="name">Name (required)</label>
<input name="name" id="name" required>
Si un campo es obligatorio, haz que sea evidente. The Anatomy of Accessible Forms explica alternativas para indicar 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 formulario para que sean accesibles para los lectores de pantalla? Puedes obtener más información sobre este tema en el módulo de Accesibilidad.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre el diseño de formularios
¿Cómo se describe un control de formulario?
<description>.<label>.description.placeholder.¿Cuál es el tamaño recomendado para el objetivo de toque?
¿Dónde debes colocar los mensajes de error?
<form>