¿Cómo hacer un formulario usable?

En un anterior post, ya vimos cómo diseñar un formulario. En esta ocasión vamos a profundizar un poco más en el funcionamiento.

Seguramente el formulario es la página que más peligro tiene en una web. Hay veces que enfrentarse a él produce tanto cansancio que preferimos irnos y abandonar en nuestro empeño de registrarnos. Es muy importante hacer que un formulario sea usable, de ello dependerá en gran medida el éxito de nuestro negocio.

Estas son algunas de las claves fundamentales para que un formulario sea usable:

DISEÑO GENERAL:

  • Pide la información estrictamente necesaria. Cuanta más información haya que rellenar más posibilidades de abandono tendremos.
  • No pidas el sexo!!!. Si necesitamos establecer este campo para luego distinguir entre sexos, es mucho más sutil poner dos checkbox con Sr – Sra. o bien D. – Dña. De ese modo parece que lo vamos a usar para dirigirnos a ellos y nadie podrá acusarnos de sexistas (parece broma pero yo ya he tenido ese problema en grandes portales).
  • Simplifiquemos. En lugar de usar provincia y población, sólo con el código postal podemos ahorrarnos esa información.
  • No pedir una misma información dos veces. Si ha rellenado un nombre o una dirección no es necesario volver a pedir un nombre o dirección de envío.

TEXTOS Y AYUDAS EN EL FORMULARIO:

  • Cada formulario tiene que tener un titular que lo identifique claramente.
  • Los textos de las cajas y opciones tienen que ser cortos y concisos. No puede haber lugar a la duda.
  • Si necesitan instrucciones tenemos dos opciones. La primera meter una descripción breve con una letra más pequeña e incluso con un color más claro, de forma que jerárquicamente se distinga perfectamente del nombre de la caja. Si podemos metemos un icono de ayuda y que abra una capa flotante con la ayuda.
  • Nunca poner opciones en pasiva (no deseo recibir información adicional).
  • Si hay que meter una fecha es mejor que esta se introduzca a través de un calendario, ya que además de facilitar la tarea impedirá que se introduzca en un formato no correcto.

ARQUITECTURA DEL FORMULARIO

  • Al mirar el formulario, todo el conjunto debe de ser homogéneo, procurando que todas las filas ocupen el mismo ancho independientemente del número de cajas que lleven. Un diseño anárquico hace que parezca todo aún más difícil.
  • Dado que los textos no suelen tener la misma longitud, yo recomiendo colocarlos encima de las cajas y no al lado.
  • Organizar los datos en grupos lógicos. Datos personales, datos de envío,…
  • El blanco es nuestro aliado, dejemos suficiente «aire» al formulario para que sea más legible y menos agobiante.
  • Señalicemos suficientemente los datos obligatorios y a ser posible coloquémoslos al principio del formulario.
  • Comprueba que has hecho los campos suficientemente grandes como para que quepa la información. No hay nada más frustrante que una pequeña casilla para meter un mail y no ver si lo ha cogido entero.
  • Evita los combos que recargan la página. Y en caso de que sea imprescindible recargar, no hagas que el cursor vuelva al principio del formulario y que el usuario tenga que buscar dónde se encontraba.
  • El aviso legal siempre ha de estar desactivado y antes que el botón enviar.
  • El botón enviar debe de estar claramente al final del formulario bajo y alineado a la derecha.
  • Botones como volver atrás o limpiar formulario en caso de tener que existir (yo prefiero no verlos) deben de estar más a la izquierda y deben de distinguirse jerárquicamente del botón principal «Enviar».
  • El texto del botón puede ser más conciso que «Enviar», podemos poner «Solicitar presupuesto» o lo que sea necesario para dejar evidencia sobre lo que el usuario va a realizar.

PROGRAMACIÓN DEL FORMULARIO

  • Si el usuario ha olvidado marcar una casilla o rellenar un campo, el error que le mostremos debe de ser muy claro, no hagamos mensajes genéricos en los que luego el usuario es incapaz de saber qué es lo que ha fallado.
  • Si ha ocurrido un error por omisión de un campo, no le hagamos volver a rellenar otra vez todos los campos.
  • En la medida de lo posible usemos Ajax para que no se tenga que recargar todo el formulario cuando establece una opción.
  • Si todo ha sido correcto, lancemos un mensaje diciéndole al usuario que sus datos han sido capturados correctamente y que en breve tendrá noticias nuestras (si es el caso).
  • Si todo ha sido correcto, no le podemos dejar en una vía muerta, tenemos que hacerle ver cómo volver al lugar en el que se encontraba, volver a la home o lo que proceda.
  • No está de más el enviar un mail al usuario con la confirmación de su solicitud.

AVISO LEGAL

  • Cada vez que solicitamos datos personales a un usuario, estamos en la obligación de hacerle aprobar las condiciones de uso del sitio web, antes de que se pulse el botón «enviar». En el aviso legal debe de estar todo perfectamente claro, os recomiendo que os asesoren sobre qué tipo de aviso colocar o echadle un vistazo a alguna web con servicios similares a los vuestros para ver qué poner. Os puedo asegurar que las denuncias son muy habituales y las multas muy cuantiosas.