En circunstancias ideales, nuestros formularios deberían ser tan fáciles de usar que las posibilidades de que el usuario cometa errores debería ser mínima. Aún así, en el mundo real, todos sabemos que por problemas de usabilidad o por despistes del usuario, los errores se producen.
El primer grupo de consejos que te proporciono va encaminado a reducir la posibilidad de que el error se produzca:
- Reduce el número de campos de los formularios.
- Emplea valores por defecto útiles en los formularios.
- No utilices el atributo placeholder.
- Utiliza campos diferentes para el día, mes y año. Habitualmente es la manera más rápida para el usuario de rellenar un campo de fecha.
Si a pesar de todas nuestras precauciones el usuario comente algún error, te aconsejo lo siguiente:
- No utilices la validación inline. Es decir, aquella que se produce desde que el campo toma el foco y el usuario comienza a escribir. No sólo resulta muy molesto, hay otros muchos motivos que lo desaconsejan. Pero mejor que yo, te los explica Adam Silver en su blog.
- No utilices la validación nativa de HTML5. Muestra unos mensajes que no son controlables por el desarrollador (ni en aspecto ni en contenido) porque la implementación del estándar de la W3C la realiza cada navegador web a su manera. Con lo cual perderás control y consistencia en tu aplicación. Además, presenta importantes problemas de accesibilidad. Como los que explica de manera detallada Adrian Roselli en su blog.
- Muestra el mensaje de error justo encima del campo. Al estar próximo al campo (principio de proximidad), el usuario identifica claramente a qué campo corresponde cada error. El motivo de mostrarlo por encima y no por debajo del campo es que no quede oculto por las cajas de autocompletado que muestran los navegadores y/o por el teclado de los móviles y tabletas. En el blog de Adrian Roselli hay una buena colección de capturas de pantalla que ilustran este problema.
- Los textos de error deberán ir en color rojo y mostrar un icono de alerta. Esto último es para no transmitir al usuario información sólo mediante el color; lo cual atenta contra la accesibilidad.
- Los mensajes de error deben ser claros, concisos, específicos, consistentes y escritos en un lenguaje directo que evite innecesarias fórmulas de cortesía (como “por favor”). En el sistema de diseño de GOV.UK tienen un apartado que explica en detalle esta recomendación.
- Y finalmente, respeta el principio de protección del trabajo de los usuarios. Se debe asegurar que los usuarios nunca pierden su trabajo como consecuencia de un error.
Nota: este post se irá actualizando a medida que mis criterios sobre usabilidad de los formularios vayan evolucionando o los vaya enlazando a posts que desarrollan cada consejo. La fecha de publicación que figura en la cabecera se corresponde a la del post inicial.