Buenas prácticas para el diseño de formularios

Los formularios seguramente son uno de los sistemas de interacción hombre-máquina más usados y aunque son omnipresentes, muchas veces nos encontramos con formularios mal diseñados que al final no hacen otra cosa que dificultar la tarea para la que están pensados.

¿Qué son y para que se usan los formularios?

Según wikipedia, la definición de formulario es:

Se llama formulario a una plantilla o página con espacios vacíos que han de ser rellenados con alguna finalidad.

Y ahora que ya tenemos claro que es un formulario y para que se usa, vamos a ver unas guidelines o buenas prácticas que tenemos que tener en mente cuando nos enfrentemos a la tarea de diseñar o implementar elementos de este tipo.

Seguramente estas guidelines ya las conozcas ya que son evidentes, pero siempre está bien recordarlas. Y ahora vamos a ver estas buenas prácticas.

Pide únicamente la información necesaria.

Los formularios no son eternos, es decir, son elementos finitos y además tenemos que pedir únicamente la información estrictamente necesaria ya que cuanta más información tenga que rellenar el usuario, más tedioso va a ser el proceso y vamos a tener más posibilidades de abandono.
Nunca pidas la misma información varias veces.

Esto parece evidente, pero en la práctica no siempre ocurre. Supón que trabajas / trabajabas en una agencia online de viajes (como www.nomaders.com en mi caso ;-)). Cuando compras un billete de avión, hotel, actividad etc… tienes que pedir los datos del comprador y en  muchas ocasiones el comprador no es la misma persona que el titular de la reserva. Dado que los datos del comprador siempre se van a tener que insertar pon un check que indique que el titular de la reserva y el comprador es la misma persona, así al usuario le puedes evitar un paso.

El formulario tiene que tener un título

Pues sí, tenemos que asignar un título SIEMPRE. Este le ayudara al usuario a comprender la función del formulario.

Instrucciones sencillas

Cuando quieras indicarle algo al usuario, tienes que hacerlo de forma breve y sencilla, de manera que sea fácilmente comprensible para el usuario.

Agrupa los campos de forma lógica

Procura agrupar los distintos campos del formulario de forma lógica de manera que de un vistazo pueda comprender que hay información relacionada entre sí.

Por ejemplo, nombre y apellidos, puede ser una agrupación lógica o país, provincia, ciudad, calle, código postal también (que dos clásicos).

Formulario de alta de usuario en 11870.com donde se muestran agrupaciones lógicas de campos.

Nomenclatura clara y familiar

No utilices tecnicismos ni palabras complejas, procura que los textos que muestres sean comprensibles, claros y familiares.

Y usa las mismas palabras para los mismos conceptos, es decir, no hables de población y ciudad, puedes hablar de población y puedes hablar de ciudad pero de ambos nunca.

Ten cuidado con la voz que usas

Aunque no lo parezca es importante, procura hablar en voz activa y siempre en afirmativo, ya que como vimos anteriormente, esto facilita la comprensión al usuario.

Aspecto ordenado y limpio

El aspecto del formulario, tiene que ser ordenado, limpio, cuidado y trabajado. Cuanto más ordenado y limpio este más fácil va a serle al usuario comprender que información le estamos pidiendo y además si esta cuidado y trabajado (me refiero al aspecto visual) la sensación es que el sitio es fiable.

Mejor una columna que dos o más

Intenta organizar los campos en una columna, ya es más fácil que un usuario pase por alto un campo que está en un formulario de varias columnas.

Marca los campos obligatorios

De un primer vistazo, el usuario tiene que saber que campos son obligatorios y cuáles no, así que ya sabes, marca los campos obligatorios como tal y procura agruparlos (generalmente al principio del formulario).

No fragmentes la información

Si no es estrictamente necesario no fragmentes demasiado la información ya que a nosotros no nos va a aportar nada y al usuario lo único que le aporta es un proceso más tedioso.

Por ejemplo, si es suficiente con saber la dirección con un campo de texto, no generes un campo para el tipo de vía, nombre de la vía, número, piso y puerta.

Movimiento con entre campos por medio de tabulaciones

Procura que el usuario pueda moverse de forma cómoda por los campos del formulario y permite siempre que lo pueda hacer con tabulaciones y teclado.

Validaciones inmediatas

Intenta que las validaciones de los campos sean inmediatas, de manera que pueda corregir la información conforme la va insertando.

Validaciones inmediatas en el sitio de Microsoft Live

Intenta comunicarte con el usuario y explicarle que está haciendo

Indícale al usuario que está haciendo en cada momento de manera que se va a sentir más confiado y seguro de la información que nos da.
Si haces esto, con muy poco esfuerzo vamos a conseguir grandes resultados.

Homogeniza el tamaño de los campos

Procura que todos los campos tengan el mismo tamaño, siendo este dependiente del contenido que se va a insertar. Es decir, el tamaño de un campo fecha o teléfono no tiene que ser el mismo que el de una dirección, pero el de dirección y apellidos sí que debería ser el mismo.

Define claramente la siguiente opción

Pues sí, tiene que quedarle claro al usuario que es lo siguiente que tiene que hacer, así que defínelo claramente.

Y hasta aquí lo básico. Josep Casanovas, escribió un post en alzado.org muy interesante que hablaba del tema y en el blog de Olga Carreras hay un post muy completo (el más completo que he encontrado aunque orientado a la web) donde define 60 directrices.