Los 10 mandamientos para lograr que se complete un formulario

Los formularios juegan un papel muy importante en el uso de las páginas web, y los test de usuario son fundamentales para optimizarlos. Aquí van algunos consejos para que el proceso de cumplimentación del formulario sea lo más amigable posible.

1. Destacar claramente los campos obligatorios

Es bastante molesto para un usuario el hacer clic en el botón de aceptar de un formulario y darse cuenta en ese momento que le falta algún campo obligatorio por rellenar, y no digamos ya, si no se indica donde esta el error. Un convencionalismo habitual es la de destacar los campos obligatorios con un asterisco (*) al lado de su etiqueta. Indicar explícitamente que campos son obligatorios y cuales son optativos es menos efectivo que el uso del asterisco, por lo que no hay que complicarse intentando ser los más sofisticados.

Aunque la mayoría entendemos que cuando hay asterisco es un campo obligatorio y sin asterisco es opcional, indicarlo explícitamente nunca esta de más, sobretodo para los usuarios novatos o distraídos.

2. Mostrar mensajes de error amigables y explicativos

Estoy convencido que no os gusta que cuando cometéis un error al cumplimentar un formulario web os indique simplemente que hay un error, sin más, con una frase del estilo “Debéis rellenar todos los campos obligatorios”. Ya sea porque no habéis indicado el email, el teléfono o vuestro apellido, siempre os lanza el mismo mensaje de error. Sería más amigable y útil, el mostrar un mensaje de error más específico “Falta indicar la dirección de correo electrónico”, ¿no creéis?.

La validación en tiempo real de los datos indicados por el usuario es una buena alternativa o complemento a los mensajes de error ambiguos. Por ejemplo, tras haber rellenado el campo de email, el formulario web debe verificar si esta en el formato adecuado o no, siendo informado el usuario de forma inmediata a través de un mensaje asociado.

3. Utilizar la validación del formato de datos

El uso de JavaScript para validar los datos permite economizar el tiempo de uso y, así reducir la cantidad de trabajo que el servidor web debe realizar para tramitar las solicitudes de entrada de formularios web. Ante un error de validación por parte del cliente, se le puede informar inmediatamente del error sin esperar a que haya enviado el formulario. Este consejo es válido para todos los campos de entrada que no requieran ser validados contra en la base de datos, como por ejemplo: ¿la dirección de correo electrónico aportada esta en el formato adecuado o el número de teléfono no contiene números?…

4. Poder destacar visualmente el campo del formulario en el que se encuentra en ese momento el usuario

Asegurarse de que los campos de entrada de datos tienen un estilo diferente en el momento en que se está procediendo a completar. Se puede hacer usando CSS asociados.

Intentar al menos que el campo que se esta completando tenga un contorno de otro color. Normalmente los navegadores web lo hacen por defecto, pero nunca esta de más asegurarse de que el color que se usa es distinto a color de concepción del website. En el caso de arriba si el color de web site fuera de tonos amarillos o anaranjados, el destacado del campo no se vería a penas.

5. Integrar una barra de progresión clara

Si el formulario es extenso y ocupa varias páginas y/o se compone de varias etapas, hay que asegurarse de ofrecer al usuario una retroalimentación permanente sobre los procesos ya cumplidos para que sepan cuanto les queda para finalizar el formulario. Esto lo podemos encontrar en proceso de compra online o en una encuesta online. Es suficiente con poner “etapa 4 de 5” o algo similar. Si el usuario solo ve “siguiente” sin tener claro en que momento del proceso se encuentra o cuanto le queda para finalizar el formulario, es muy probable que más de uno abandone.

El proceso de pedido de Amazon son 4 páginas. El formulario os indica en que momento del proceso nos encontramos y cuanto nos queda por rellenar.  Aunque la mejor solución, si es posible, es reducir al máximo el formulario web.

6. Guardar periódicamente los formularios en cache

Los formularios que se componen de varias páginas son más susceptibles de errores por parte de los usuarios. Para evitar la pérdida de los datos ya añadidos hay que buscar la forma de guardarlos ya sea a través de una sesión o una cookie. Esto hace que el usuario sea más tolerante a los fallos y aumenta las posibilidades de el formulario sea completado, por ejemplo, cuando un usuario abandona por error un formulario a medias porque error. Tener que volver a rellenar un formulario web puede desanimar al usuario.

7. Cambiar el texto “enviar” o “aceptar” del boton click to action para mejorar la cumplimentación del formulario

En lugar de tener un botón de validación del formulario web que ponga “enviar” o “aceptar”, es mejor recordar al usuario que es lo que está haciendo al hacer clic en el botón final del formulario, poniendo un texto como “pedir cita” o “suscribirse”. Incluso, se puede informar al usuario de las ventajas de completar el formulario.

8. Evitar las fuentes de distracción como el botón “anular”

Si estuvierais en una tienda para compraros una camisa nueva y el vendedor os preguntara “¿realmente está usted seguro de querer comprarse esta camisa?” o “¿esta convencido de querer seguir comprado la camisa?”, vuestra primera reacción sería “al final no gracias, solo estoy mirando”. Trasladado al mundo online, este tipo de situaciones son fuente de distracción pero sobretodo de generación de dudas que reducen drásticamente la tasa de cumplimentación de formularios.

En un formulario web, el tener un botón de “anular” muy visible puede hacer que el usuario se lo piense dos veces antes de hacer clic en validar y finalmente perdamos el lead.

9. Indicar a los usuarios los formatos de introducción de datos adecuados

Si solicitamos a los usuarios que introduzcan los datos en un formato específico, por ejemplo un número de teléfono o un número de tarjeta de crédito, debemos indicarles explícitamente como deben introducirlos. Si una password debe tener un número concreto de caracteres o debe tener una combinación determinada de cifras y letras, debemos indicarlo claramente. Esto permite minimizar las ambigüedades y completar el formulario más rápidamente.

10. Poner el formulario en una sola columna vertical

Según los resultados de diferentes tests de usuario, la mejor manera de estructurar un formulario es de izquierda a derecha, ya que reduce el número de movimientos de los ojos. Aunque a veces es difícil de poner en práctica, lo mejor es estructurar el formulario en una sola columna vertical.

Ejemplo de formulario en columna simple

Ejemplo de formulario multicolumna

Un formulario multicolumna requiere mayor movimiento ocular por parte de los usuarios.

Un ejemplo de formulario multicolumna es el formulario de inscripción de Ebay. Los usuarios deben completar el formulario de arriba a bajo y de izquierda a derecha, lo que requiere mayor movimiento ocular de los usuarios. Se que puede parecer un simple detalle, pero detalle a detalle, podemos complicar tanto al usuario que al final decida marcharse si rellenar el formulario. Debemos intentar en la medida de lo posible allanar el camino el internauta, recurriendo al título del libro de Steve Krug, “no le hagas pensar”.

Ejemplos de buenos formularios

Para inspiraros, aquí tenéis algunos formularios web con buena nota a nivel de test de usuario:

• El formulario web de Alexandru Cohaniuc es perfecto en lo que respecta a diseño y funcionalidad. Permite saber con claridad si esta disponible para trabajar de freelance, las etiquetas son fáciles de leer y los campos a completar son claros y legibles.

• Grip’d permite saber exactamente en que etapa del proceso nos encontramos, con botones grandes que llaman a la atención del usuario web y permiten continuar a través del proceso de generación de una pestalla personalizada en Facebook.

• Este formulario es un excelente ejemplo de concepción de formulario con validación en JavaScript. Que permite saber en ese mismo momento si se ha cometido algún error al completar un formulario.

• El formulario de Apple connexion MobileMe es un excelente ejemplo de concepción de formulario. El boton de clic to action es claro y el estilo de campo de formulario es claramente visible.

Related posts:

Los 10 mandamientos de Experiencia de Usuario según Google Cómo crear un formulario web ergonómico UX: Chequea la ergonomia de tu web (para dummies) 50 consejos para mejorar la usabilidad de tu website Consejos para mejorar el embudo de conversión de tu site