20 claves UI para diseñar buenos formularios
Los formularios son uno de los elementos más comunes y esenciales con los que tenemos que lidiar cuando creamos productos digitales. A través de ellos los usuarios crean cuentas, envían información, dan su consentimiento para recibir nuestros correos, entre otras muchas funciones.
Siendo un elemento tan fundamental, todavía sorprende la cantidad de errores que se cometen al diseñar formularios. Hoy queremos compartir 20 claves para diseñar buenos formularios que nosotros aplicamos en el Estudio y que están inspiradas en el contenido de Dann Petty.
1. Crea el espacio adecuado
Un formulario debe invitar al usuario a escribir en él, por esto es fundamental que los campos de textos tengan el espacio adecuado. Es muy común encontrar campos demasiado estrechos o demasiado grandes, cuando lo que necesitamos es un campo proporcionado y con el padding adecuado al tamaño de fuente que estamos utilizando.
2. Añade un título a tus campos de texto
Aunque añadir un título o label puede ser prescindible cuando tenemos tan sólo uno o dos campos de texto, cuando se trata de formularios largos es muy conveniente para dar contexto y jerarquía. No confíes únicamente en el texto de placeholder, que por lo general suele tener un contraste muy bajo, y añade un título que denomine cada campo.
Además, esto también es una buena práctica para la accesibilidad, ya que los lectores identifican los títulos asociados a cada campo.
3. Organízalos verticalmente
La alineación vertical sigue siendo la mejor cuando organizamos los campos de nuestro formulario. Aunque en determinados campos como "Ciudad" "Provincia/Estado" pueden alinearse de forma horizontal, por lo general es recomendable ofrecer al usuario una única dirección para evitar que tenga que estar yendo atrás y adelante constantemente.
4. Si no hay espacio suficiente prueba con esto
En algunos casos no es posible situar el título sobre el campo de texto. En estos casos podemos probar otras combinaciones como alinearlo horizontalmente, incorporarlo dentro del propio campo de texto o convertir el placeholder en un label interno como hace Material Design.
5. Juega con el color/peso en lugar del tamaño del texto
En muchas ocasiones se recurre al tamaño de la fuente para generar contraste y jerarquía entre distintos elementos. Muchas veces todo lo que se necesita es modificar el peso y color de la fuente para generar esa diferencia.
En este caso, vemos cómo conseguimos un formulario mucho más cohesionado utilizando simplemente un peso superior y un color con mayor contraste en el título.
6. Sitúa el título cerca del campo de texto respectivo
Para generar asociación es importante que el título se sitúe cerca de su campo respectivo. Si empleamos la misma regla de espaciado para separar el título de su campo que para separar los campos entre sí, creamos confusión en el usuario sobre qué título corresponde a cada campo.
7. Destaca el campo seleccionado para crear foco
En formularios largos es espacialmente importante indicar al usuario sobre el campo que está rellenando en cada momento. Por eso, no debemos olvidarnos de diseñar un estado "focused" de nuestros campos.
8. Añade borde y sombra para generar contraste
Controlar el contraste es fundamental en diseño de producto, especialmente en los formularios donde lo que nos interesa es que el usuario sepa dónde tiene que pulsar para introducir la información.
Puede resultar tentador diseñar campos donde únicamente se delimita su área con un gris claro, pero esto nos puede llevar a problemas de contraste y accesibilidad. Lo recomendable es utilizar un borde acompañado de una sombre externa o interna para resaltar el campo del resto de la interfaz.
9. Adapta la longitud del campo de texto a su contenido
No pasa nada por tener espacios en blanco en un formulario. Muchas veces creemos que esto es un error y acabamos diseñando formularios donde cada campo tiene la misma longitud. Conceptualmente, esto puede transmitir la sensación al usuario de que cada campo requiere la misma información cuando esto no es así.
Por ejemplo, campos como el de número de teléfono o código postal necesitan una longitud mucho menos que el de dirección o correo electrónico.
10. Sitúa el código postal primero para autocompletar el resto de campos
Una función que mejora increíblemente la experiencia de usuario cuando rellenamos formularios donde solicitamos datos relativos a la dirección física como en el checkout de un carrito, es utilizar la función de autocompletado a partir del código postal.
Situando el código postal primero, podemos utilizar APIs como la de Google para evitar que el usuario tenga que seguir introduciendo información como la la provincia, el estado o la ciudad.
11. Si el campo no es obligatorio considera no incluirlo
Cuando un campo no es obligatorio muchas veces no es necesario. Cada campo que añadimos a nuestro formulario incrementa la fatiga del usuario a la hora de completarlo, así que considera muy bien qué campos son fundamentales y, si no lo son, quizá no sea necesario incluirlos o se puedan conseguir esa información más adelante.
En cualquier caso, si necesitas incluirlos, marca únicamente aquellos campos que sean opcionales y no ambos.
12. Agrupa los campos de texto por secciones
Para formularios largos también es recomendable organizar los campos en secciones. Esto permitirá al usuario escanear rápidamente el formulario y entender qué información estamos solicitando.
13. Muestra los errores en su contexto + añade un mensaje global
Cuando se produzca algún error con el formulario debemos mostrarlo en su contexto, es decir, marcando aquel campo donde se ha producido para que el usuario entienda qué debe modificar. Además, también es recomendable incluir un mensaje de error global donde podemos aprovechar para introducir alguna frase divertida que se alinee con nuestro branding y quite peso al asunto.
14. Añade detalles que sorprendan y diviertan
Los formularios son por lo general aburridos, a nadie le gusta completarlos. Si introducimos algún detalle inesperado y divertido en los primeros momentos de la interacción del usuario con nuestro formulario, conseguiremos su simpatía y con suerte una mayor predisposición para completarlo.
15. Si solicitas información sensible explica el motivo
Cuando pedimos algún tipo de dato sensible como el número de teléfono o la tarjeta de crédito, y quizá no resulta muy evidente para que lo necesitamos en nuestro producto, es recomendable incluir un pequeño enlace junto al campo en cuestión donde expliquemos por qué lo necesitamos y ganar la confianza del usuario.
16. Considera mostrar feedback instantáneo al escribir
La validación de los campos puede hacerse durante o en el envío del formulario. Si introducimos la validación mientras el usuario rellena los campos podremos prevenir errores antes de que el usuario complete el resto del formulario.
Por ejemplo, es muy habitual introducir esta validación en el campo de email para asegurarnos de que el formato es el adecuado. Sin embargo, tenemos que tener cuidado con abusar de esta función, pues mostrar demasiados errores prematuramente puede llegar a saturar al usuario.
17. Cuando sea posible utiliza un campo para nombre y apellidos
Como norma, siempre es mejor utilizar un campo que dos. En el caso del nombre y apellido es muy común encontrarnos un campo para cada uno de ellos, aunque la mayoría de las veces tan sólo necesitamos uno.
Normalmente esto se debe a un motivo técnico, ya que muchas veces se necesita guardar el nombre y el apellido como campos distintos en la base de datos. Si este es el motivo, no pasa absolutamente nada por utilizar dos campos, pero siempre que sea posible es mejor optimizar nuestros formularios al máximo.
18. Utiliza las mayúsculas con cuidado
El abuso de las mayúsculas es arriesgado como regla general en el diseño de interfaces ya que en grandes cantidades dificulta el escaneo y velocidad de lectura. En los formularios sucede lo mismo y, aunque podemos utilizarlas en los títulos de los campos, tenemos que ir con cuidado.
19. Crea CTA descriptivos
El microcopy también es importante en los formularios, por lo que debemos huir de CTA genéricos y utilizar CTA más descriptivos para la acción asociada al formulario en cuestión. Por ejemplo, si se trata de un formulario de registro, utilizar "Crear mi cuenta" es mucho mejor que "Enviar".
20. Desactiva el botón hasta que todos los campos estén completos
Por último, desactivando el botón de envío de formulario -que no haciéndolo desaparecer-, evitaremos que el usuario pueda pensar que puede pulsarse antes de tiempo. Siempre es recomendable acompañar al botón en su estado desactivado de un pequeño texto que explique cómo podemos activarlo.
Como habéis visto, existen muchas pequeñas acciones que podemos incorporar en el diseño de nuestros formularios que nos permitirán crear una mejor experiencia para el usuario y convertir un proceso generalmente tedioso en algo más llevadero.