El primer y más importante consejo para tener en cuenta a la hora de diseñar formularios puede parecer una obviedad: los formularios deben parecer formularios.
Aunque pueda parecer una perogrullada, no está de más empezar por este consejo de diseño, ya que no es raro que caigamos en la tentación de querer innovar en el diseño de los formularios. Y no es una buena idea. Fundamentalmente porque atenta contra el principio de consistencia y requerirá un esfuerzo cognitivo mayor por parte de los usuarios e incrementa las posibilidades de errores en su uso.
Continuando con las obviedades, el segundo consejo de diseño en orden de importancia es que los botones deben parecer botones.
La justificación de esta segunda consideración es la misma que la de la primera.
El resto de los consejos de diseño puede que no te resulten tan evidentes:
- La anchura del campo de texto debe reflejar el tamaño esperado del contenido a introducir. Puedes encontrar otras recomendaciones sobre los campos de texto en un post que dediqué en exclusiva a cómo mejorar su usabilidad.
- Ubica el botón principal del formulario donde a los usuarios les resulte más cómodo encontrarlo. Típicamente en el borde inferior izquierdo del formulario, debajo del último campo. Puedes consultar el post que escribí sobre la alineación de los botones de los formularios para averiguar los motivos.
- El texto del botón debe describir de la manera más precisa posible la acción que realiza. Preferiblemente mediante un verbo simple. Como “Guardar”, “Continuar”, “Aceptar”, etc.
- Utiliza la capitalización tipo oración (sólo la primera palabra se inicia con mayúscula) para las etiquetas (labels), sugerencias y mensajes de error. Es más legible y es más fácil destacar los sustantivos.
- Las etiquetas de los campos (labels), mejor por encima. Si te interesa conocer los motivos, tienes todos los detalles en un post que publiqué hace unos años.
- Muestra el mensaje de error justo encima del campo, en color rojo y acompañados por un icono de alerta. Puedes consultar los motivos para estos consejos y algunas indicaciones más sobre la usabilidad de los mensajes de error en un post que publiqué el mes pasado.
- No utilices el atributo
placeholder. ¿Te sorprende este consejo? Hay un post en el que explico los múltiples motivos que lo justifican.
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.