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, 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 llevar mucho tiempo y ser frustrante. No tiene por qué serlo. Para garantizar una experiencia del usuario excelente, asegúrate de que la IU sea intuitiva. Asegúrate de ofrecer una estructura y un diseño gráfico óptimos (diseño, espaciado, tamaño de fuente y color). 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
¿Deseas agregar un nuevo control de formulario a tu formulario? Comienza por agregar la etiqueta para el campo nuevo. De esta manera, no te olvides de agregarla.
Agregar etiquetas primero también te ayuda a enfocarte en los objetivos del formulario, ¿qué datos necesito aquí? Una vez que 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 así:
<label for="email">Email address</label>
¿Qué descripción eliges?
Para nuestro ejemplo, la frase “dirección de correo electrónico” del proveedor de servicios en la nube, ya que las etiquetas cortas son más fáciles de escanear, reducen el desorden visual, y ayudar a los usuarios a entender qué datos se necesitan más rápido.
Posición de la etiqueta
Con CSS, puedes hacer lo siguiente: Puedes colocar una etiqueta en la parte superior, inferior, izquierda y derecha de los controles de formularios. ¿Dónde lo colocarás?
La investigación demuestra la mejor práctica es posicionar la etiqueta sobre el control de formulario para que el usuario pueda escanear rápidamente un formulario y ver qué etiqueta pertenece a cada control de formularios.
Cómo diseñar formularios
Un buen diseño de forma
a 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 tipos
elementos de formulario y tipos de entrada entre los que puedes elegir.
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 el usuario deba aceptar los Términos y Condiciones de tu sitio, usa <input type="checkbox">.
También debes diferenciar visualmente los diferentes tipos de controles de formularios. Un botón debe parecerse a un botón. Una entrada, como una entrada. Haz que sea más fácil para los usuarios reconocer el propósito de un control de formularios. Por ejemplo, si algo parece un vínculo, cuando se hace clic en él, se abre una página nueva. y no envíen un formulario.
Ayudar a los usuarios a navegar por los formularios
Un diseño extravagante puede ser divertido, pero puede obstaculizar la realización de un formulario.
En particular, la investigación demuestra que es mejor usar una sola columna. Los usuarios no quieren perder tiempo buscando dónde está el siguiente control de formulario. Cuando se usa 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 ayuda a los usuarios a interactuar con el formulario.
Los botones deben ser lo suficientemente grandes.
Lo recomendado
el tamaño 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 el margin.
propiedad de CSS para evitar interacciones accidentales.
El tamaño predeterminado de los controles de formulario es demasiado pequeño para poder usarse realmente. Para aumentar el tamaño, usa padding y cambia el valor predeterminado de font-size.
Puedes definir distintos tamaños
para distintos dispositivos apuntadores
Por ejemplo, un mouse que use la función multimedia pointer de CSS.
// 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 de pointer.
Cómo mostrar errores donde ocurren
Para que los usuarios puedan descubrir con facilidad qué control de formularios requiere su atención, Mostrar 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 formularios no válidos.
Deje claro a los usuarios qué datos ingresar
Asegúrate de que los usuarios sepan 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 qué campos son obligatorios
<label for="name">Name (required)</label>
<input name="name" id="name" required>
Si un campo es obligatorio, hazlo obvio. En La anatomía de los formularios accesibles, se explican las alternativas para indicar campos obligatorios. Si la mayoría de los campos de un formulario son obligatorios, puede ser mejor indicar campos opcionales.
¿Cómo puedes conectar los mensajes de error con los controles de forma que sean accesibles para los lectores de pantalla? Puedes obtener 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 describes un control de formulario?
<description>.<label>.descriptionplaceholder¿Cuál es el tamaño recomendado para el objetivo táctil?
¿Dónde debes colocar los mensajes de error?
<form>.