Optimización y análisis de formularios

Hay que cuidar con mucho mimo los formularios que tengamos en nuestra web. Sea cual sea el objetivo del formulario (conseguir leads, registros, ventas, sugerencias …)  hay que intentar optimizar la conversión y la experiencia del usuario con la interacción del mismo.

¿Qué aspectos tienes que tener en cuenta?

  • Genera confianza

> En comercio electrónico es importante que dejes visibles los certificados de seguridades en transacciones electrónicas

> Indica que se va a hacer con los datos de información personal del usuario y  da acceso a la política seguida en materia de protección de datos

> Muestra  al usuario la confirmación/verificación de que el formulario se ha enviado. Indica claramente que el formulario ha sido enviado correctamente, el tiempo estimado que tardará en recibir una respuesta y señala el procedimiento que va a seguirse tras su solicitud. También es aconsejable enviar vía email una confirmación del correcto envío del formulario

  • Usabilidad

> Campos y estructura del formulario

- Da un título al formulario que exprese perfectamente su objetivo

– Intenta que el formulario sea lo más breve posible: no incluyas campos que sean accesorios y que no te vayan a ofrecer una información útil.

– Utiliza una sola columna (véase por ejemplo el  estudio de eyetracking de cxpartners)

– Alineación de los campos a la izquierda

– Titulares/etiquetas de los campos por encima de éstos: es lo más aconsejable en la mayoría de los casos. Los usuarios no estarán obligados a mirar por separado la etiqueta y el campo. En los casos en los que se pretenda que el usuario atienda especialmente a la etiqueta (los datos no nos resultan familiares o son complejos ) se aconseja incluir el título a la izquierda del campo. Si queréis profundizar más en este aspecto recomiendo el artículo: Label Placement in Forms

– Se generoso con el tamaño de la fuente y las cajas de texto,  fija un repertorio finito de anchuras estándar para las cajas de texto a rellenar y utiliza un alto suficiente para que visualmente sean espaciosas como nos aconseja Daniel Rodriguez en 12 Trucos para el diseño de formularios web

– Utiliza radiobuttons y menú desplegable para elegir una sola opción y checkboxes si ofreces varias opciones. La ventaja del radiobutton vs. el drop-down menu es la visibilidad de las opciones posibles (y esto  supone  una mayor rapidez de elección) por otro lado, con el uso de drop-down menu se ahorra espacio. Es recomendable el uso de radiobutton para el uso de hasta 4 posibles respuestas, a partir de 4 posibilidades de respuesta se recomienda el uso del menu desplegable (véase  Should I use a drop-down? Four steps for choosing form elements on the Web)

– Si utilizas radio buttons selecciona siempre una opción por defecto, asegurándote de que sea la más probable y fíjate en que todas las opciones son claramente excluyentes (véase Formularios usables: 60 Directrices de Usabilidad)

– Checkboxes o list boxes: En un interesante estudio de usuarios sobre la selección múltiple en formularios realizado con 106 participantes se observó que los participantes elegían la misma cantidad de opciones con ambos métodos pero eran más rápidos y resultaba más satisfactoria la experiencia con el uso de checkboxes.

– Facilita la introducción de datos: por ejemplo con la sugerencias predictivas según el texto que empiece a introducir el usuario.

– Formateo de campos por parte del sistema: por ejemplo para campo tipo fechas, muestra calendarios gráficos para facilitar la selección de fechas

– Agrupación de campos lógica: realiza la agrupación de campos por tipo de contenido. La distinción de dichos grupos no debe introducir ruido visual.

> Errores, orientación e iformación adicional en formularios

– Guia al usuario: para formulario extensos con varios pasos estructúralo en diferentes páginas (cada página que corresponda con un tema/objetivo del formulario) y sitúa al usuario en que paso se encuentra del proceso.

– Errores: El mensaje de error debe indicarse tras haber cumplimentado erroneamente el campo. Debes indicar el error de forma clara y familiar, lo más amigable posible y explicar cómo subsanarlo. Utiliza el color rojo para escribir y marcar el error. Por otra parte es aconsejable indicar también la validación para los campos que son sensibles de poder cometer errores.

– Comunica los límites: resulta útil para el usuario ser informado si algún campo tiene algún tipo de limitación (por ejem en campo de texto libre si se tiene un límite de caracteres es necesario indicarlo y añadir un contador de los mismos)

– Ofrece información de ayuda si es necesario: en principio hay que intentar minimizar la ayuda necesaria para completar el formulario. Si la ayuda es precisa en algún campo es mejor ofrecerla de foma visible.  También es recomendable mostrar un contacto cerca del formulario por si el usuario pudiera necesitar ayuda.

– “Opcional” y “Necesario”: cuando más de la mitad de los campos son obligatorios u opcionales sólo habría que indicar con dicha información  los campos de dicha minoría (véase Bests practices for form design) Por ejemplo, si tenemos 6 campos y sólo 2 de ellos son obligatorios, no es necesario incluir “opcional” en los campos que no son obligatorios. Es recomendable utilizar texto en vez de asterisco para indicar la obligatoriedad. Por otro lado, resulta más amigable usar términos como “necesario” en vez de “obligatorio”.

– Informa al usuario si la información requerida para completar el formulario es difícil de obtener antes de llevarle al formulario

> Botón de envío

– Alineación izquierda: si hemos alineado a la izquierda los campos de formulario también es aconsejable alinear a la izquierda el botón de envío de formulario

- Apariencia pulsable: que tenga una apariencia que lleve a la acción. Por ejemplo se puede dar un estilo 3D al botón

– Copy descriptivo: el texto del botón de explicar la consecución de pulsarlo

– Diseño atractivo: también es importante para persuadir al usuario que el botón tenga una estética cuidada y que resulte atractivo visualmente.

– Evita botones de cancelar/borrado: da lugar a que se lo “piensen dos veces”, se equivoquen o se distraigan. Si es necesario el uso de “Cancelar” hay que reflejarlo como una acción secundaria

  • Mide y analiza

Disponemos de diversas herramientas que nos ayudarán a optimizar y medir el éxito de nuestro formulario

> Cliktale: ofrece la posibilidad de analizar los siguientes aspectos:

– Embudo de consecución de objetivo (envío de formulario): nº visitantes que han aterrizado en la página de formulario, nº de visitantes que han interactuado con el formulario, nº de visitantes que han intentado enviar el formulario y nº de visitantes que finalmente han enviado el formulario.

– Porcentaje de visitantes que han abanadonado el formulario y en qué campos lo han hecho

– Tiempo medio en completar el formulario

– Campos que se han dejado en blano

– Porcentaje de visitantes que han vuelto a rellenar cada campo del formulario

> Google analytics: el uso de los embudos de conversión nos ayudará a medir la eficacia de los diferentes pasos en un formulario, por ejemplo podemos detectar en qué paso los usuarios caen y no pasan al siguiente paso y por tanto tendremos que focalizar nuestros esfuerzos en su optimización. El objetivo final del embudo para un formulario puede ser una url de confirmación o la  acción de enviar formulario mediante botón de enviar (marcando el botón como evento)

> Google website optimizer: tras detectar las debilidades de tu formulario con las herramientas anteriormente mencionadas puedes introducir cambios en el mismo según las hipótesis que hayas planteado. Por ejemplo puedes hacer un cambio en el copy de una etiqueta y comprobar con la herramienta si resulta más entendible a los usuarios o hacer diferentes versiones del botón del formulario para averiguar cual consigue mejores tasas de conversión

  • Ejemplos de formularios que me gustan :)

 

En: idealista.com

 

En: 18870.com

En: iwannagothere.com

zaida @zai

Zaida Santiago

“Estudié Documentación en la Universidad Carlos III de Madrid y estoy realizando el Master en Web Analytics por la Universidad Bristish Columbia.
Soy responsable de Marketing Online de Rentalia.com, la web de alquiler
vacacional de idealista.com y lidio en diferentes áreas (SEO, Analítica
web, CRO…)

Twitter LinkedIn 

3 Responses to Optimización y análisis de formularios

  1. Christian Oliveira julio 21, 2011 at 4:30 pm #

    Genial post! Sobre todo medir, que nos puede dar muchas pistas :)

    Dejo un post de TheOatmeal muy gracioso en relación al tema: http://theoatmeal.com/comics/shopping_cart

    Saludos!

  2. zaida julio 21, 2011 at 6:33 pm #

    jeje muy bueno!

    Gracias :)

  3. Manuel julio 23, 2011 at 9:16 am #

    Muy completo el artículo.

    Un detalle importante que se podría añadir sobre los formularios es que cuanto menos campos haya que rellenar, más probabilidades habrá de que un usuario lo rellene.

Hecho con cariño desde Madrid por las Madrid Geek Girls.