Go to Top

Cómo mejorar la Usabilidad de los Formularios de tu Web

formularios usabilidad portada

Si estás preocupado por mejorar la conversión en tu sitio web, te recomiendo que mires tus formularios de contratación de productos o servicios. Los formularios, en la mayoría de los casos son la herramienta de conversión que tenemos en nuestra web y por tanto, donde culminan nuestros objetivos. Hay zonas importantes en una web cuyo objetivo es la generación de leads, y uno de ellos sin duda, son los formularios.

Los formularios son el medio de interacción por excelencia en una página web, a través de los cuales podemos llevar a cabo acciones tales como compras, registros, reservas, altas, descargar, suscripciones, pedidos etc.

Muchos sitios web no poseen buenos ratios de conversión por culpa de la creación de formularios antiusables y pocos persuasivos. En multitud de ocasiones, están mal estructurados e inducen a cometer errores por parte del usuario.

formulario usabilidad errores

Debemos ofrecer a nuestros visitantes web un formulario sencillo de entender y rellena. En definitiva, debe ser usable. Si no tienes claro en qué consiste la usabilidad, te lo diré con un argumento sencillo… Debemos lograr que el usuario menos espabilado, rellene cómodamente y correctamente el formulario.

He realizado una recopilación de los principales puntos de usabilidad web a tomar en cuenta a la hora de maquetar un formulario de contratación de un producto o servicio.

Indicar si los campos son obligatorios o no

Siempre debemos indicar en un formulario qué campos son obligatorios y que campos son opcionales. Esto puede provocar confusión en el usuario.

Recomendamos indicar en cada campo si es obligatorio u opcional. Ejemplos: “Nombre (Obligatorio), Apellidos (Opcional):” Si bien parece más útil indicarlo con un texto existe la convención de indicarlo con un asterisco  (*) Qué campos no convienen ser obligatorios

imagen destacada usabilidad formulario registro I

formularios usabilidad que alguien le diga

No pasarse con el número de campos en el formulario

Mientras más campos tenga el formulario, más incómodo para el usuario. Solo pedir la información realmente necesaria. Cualquier campo del formulario que involucre pedir datos sensibles (DNI, edad, dirección teléfono, etc) es un campo que debemos pensar bien si vale la pena solicitarlo. Hay usuarios que no desean dar estos dos datos en una primera toma de contacto. Si se desea dichos datos, recomendamos añadirlos como opcionales e indicar al usuario que no son obligatorios.

formulario usabilidad menos campos poner

 No poner distintas acciones en una misma pestaña

Para acciones distintas, como por ejemplo,  “Hacer una reserva” o “Modificar o cancelar una reserva”, conviene colocarlas en pestañas distintas. De esta manera, estaremos dando visibilidad a las dos opciones y facilitando la comprensión al usuario.

formulario usable varias pestañas

 Diseño Sencillo… Menos es más

El aspecto y rellenado del formulario debe ser una tarea sencilla para el usuario. Por lo que conviene reducirlo y simplificarlo en la medida de lo posible, evitando datos innecesarios. Además, resulta interesante mantener una alineación de los elementos y una coherencia en cuanto a color de las tipografías para de esta manera mejorar la jerarquía y dirección de lectura mejorando así la comprensión del usuario y evitando que abandone el formulario.

formulario diseño sencillo

Anchos de los campos

Los espacios para rellenar los datos en un campo deben ofrecer el espacio suficiente para poder introducir cómodamente los datos. Se recomiendan como mínimo 20 caracteres sin acortarlo visualmente.

Por supuesto, hay campos que suelen ser pequeños: código postal, teléfono, códigos, fechas de nacimiento, etc.

Mejor 1 sola columna

El flujo de cumplimentación del formulario debe ser claro. La facilidad que transmita este es un punto clave para la satisfacción en el uso del usuario. Debemos evitar los desplazamientos innecesarios por el formulario. Se aconseja mantener un flujo de lectura vertical, evitando el flujo horizontal o con el menor posible. Para esto, recomienda en la medida de lo posible, crear una única columna alineando todos los elementos a la izquierda para generar un flujo vertical.

El “formulario de tres columnas” actual presenta varios desplazamientos de mirada, tanto verticales como horizontales, debido a la disposición en tres columnas y el uso de diferentes alineaciones tal. Por ello, evitar estos desplazamientos de la mirada por el formulario, ayuda a mejorar la satisfacción del usuario y en consecuencia a aumentar el nivel de conversión.

El flujo más recomendado para cumplimentar un formulario es que se rellene de manera vertical sin desplazamientos horizontales o con el mínimo posible.

Los formularios de 1 sola columna, solo ofrecen un orden posible, el orden descendente.

formulario usabilidad 1 sola columna

Colores que mejoren la legibilidad de los textos

Los títulos texto y etiquetas deben tener colores que sean legibles con facilidad, sobre todo si pensamos en usuarios con problemas de visión. El color de la tipografía siempre ha de resaltar sobre el fondo. Se recomiendo fondo claro y tipografía oscura. Debemos evitar utilizar el color rojo en títulos y etiquetas, pues es un color utilizado para comunicar peligro o error, por lo que podemos inducir confusión al usuario.

 Poniendo la cosas cómodas con los checkbox

Para reducir la complejidad del formulario y evitar incluir información innecesaria, podemos hacer uso de checkbox. Esto podemos hacerlo si el porcentaje de personas que utilizarán el checkbox es bajo. Por ejemplo, en el caso de alquiler de coches, normalmente el coche se devuelve en la misma oficina, entonces utilizaremos el checkbox para el usuario que necesite devolver el coche en una oficina diferente.

formulario checkbox mejor la usabilidad

Ojo con los títulos que ponemos en los campos

Para una mejor comprensión del usuario, debemos llevar cuidado con los títulos que ponemos a los diferentes campos. El usuario debe comprender sin mucho esfuerzo, cuál es la información que le estamos pidiendo. Por ejemplo, es más clarificador decir “Fecha de recogida” que “Día”. Es importante eliminar ambigüedades para aumenta el nivel de conversión.

Menos tareas para el usuario

Debemos evitar que el usuario tenga que realizar más de una acción para una misma tarea. Cuantos menos datos se soliciten y menos  acciones tenga que realizar el usuario, más rápida será la cumplimentación del formulario. Un error muy común en formularios que requieren por ejemplo una reserva, es mostrar un calendario con únicamente el mes actual. Podemos predecir que el usuario tenga que buscar una fecha más adelantada en el tiempo, y que por lo tanto pertenezca al mes posterior. Sería bueno adelantarnos y ofrecerle de primeras, el mes actual  y el posterior, evitando que tenga que realizar más acciones de las estrictamente necesarias. También se recomienda deshabilitar los días pasados para evitar errores.

Si vas a poner muchas opciones a elegir, hazlo con coherencia

Es importante los elementas tengan una coherencia, para facilitar al máximo la tarea al usuario. Por ejemplo, las opciones que arrojan los selectores, deben estar ordenados bajo algún criterio de coherencia para que la opción se encuentre rápidamente. Es habitual ordenar alfabéticamente, pero también puede ser interesante por calidad, precio etc.

formulario usabilidad listado de opciones

Un botón de enviar bien hecho

El botón de llamada a la acción es donde concluyen nuestros objetivos de conversión, por lo tanto debe resaltar en el diseño del formulario.  Es una buena práctica que el botón de acción tenga mucha visibilidad, que se vea de forma destacada. Por ello, es conveniente que sea de un tamaño grande, aislado, y con un color notorio. Además, es necesario que el texto incorporado en el botón incite a la acción y que sea lo suficientemente descriptivo para que el usuario sepa lo que va ha hacer con solo mirar el botón.

formlario botón enviar

Avisando de los errores en el rellenado

Cuando el usuario ha cometido algún error en la cumplimentación del formulario, debemos mostrárselo en la misma página en la que se encuentra y en el entorno donde se introduce la información. Cuando el cliente ha insertado la información y hace clic en el botón de acción y le lleva a otra página espera obtener resultados y no errores. La información de errores, se aconseja que aparezcan en el principio del formulario y en un color que resalte para que los usuario puedan identificarlos y corregirlos.  Además, no debemos mostrar el mismo error en varios lugares de la página para que el usuario no pueda pensar que se trata de problemas distintos.

usabilidad formularios mensaje de error

No siempre es bueno poner ofertas al lado de un formulario

La presencia de ofertas o elementos distractores puede provocar que el usuario abandone la acción que está realizando. Debemos pues reducir al mínimo este tipo de elementos en el caso de ser innecesarios.

Dime bien lo que necesitas de mí

Es una buena práctica también informar al usuario de posibles datos que vaya a necesitar y que en ese momento puede ser que no recuerde, para que pueda recopilarlos con anterioridad y así evitar la interrupción de la cumplimentación del formulario. Si se exige un esfuerzo extra al usuario, como por ejemplo colgar fotografías, es necesario indicar los beneficios de hacerlo. Esto sirve como incentivo e incita a la acción.

formularios usabilidad explicar los datos que vas a pedir

 

Informando del resultado final

Una vez realizada la compra, debemos informar al usuario sobre aspectos como el resultado final, tiempo de entrega, si hay algún paso más que realizar etc.

Informando tu política de privacidad

Es importante en un formulario donde el usuario introduce datos personales, informarle sobre el aviso legal o política de privacidad para que lo haga con total confianza.

formulario usabilidad politica de privacidad

Cuidado con abusar de los Captcha

Hay muchos formularios que poseen implementado un sistema de seguridad captcha. La típica pregunta que nos obliga a escribir una frase a mano para poder finalmente enviar el formulario. Cuidado con esto, porque en algunos casos, estos captcha generan una negativa experiencia de usuario, es decir, echan para atrás a los usuarios.

El sentido de usar estos sistemas de seguridad, es el bloquear en gran medida el envío de spam a través del formulario. Recomiendo NO poner sistemas captcha en el formulario. Si al cabo de x tiempo comienza a recibir correos de Spam de forma significativa, entonces ya comenzamos en pensar en poner un captcha en nuestro formulario web.

Las causas por las que los usuarios o no obtienen una buena experiencia frente a formularios con captchas suelen ser:

  • Los usuarios no siempre entienden lo que tienen que hacer, no lo deducen.
  • Al usuario, le es complejo visualizar e interpretar el código captcha. A veces están tan distorsionadas los caracteres propuestos que es  imposible transcribirlo
  • En ocasiones, se desconocen su utilidad

formulario usabilidad captcha

Comparto con vosotros los resultados de un interesante estudio sobre los tipos de sistemas captcha donde los usuarios aciertan más o menos.

formularios con captcha estudioBotones de Continuar

Cuando tienes un formulario con varios pasos o niveles, se suelen usar botones de “Siguiente” y “Anterior”

Se le debería dar un mayor protagonismo al botón “Siguiente” para evitar que la gente pulse por error el botón Anterior y vuelvan a la página anterior. Adicionalmete se debería colocar el botón “Anterior” a la izquierda.

formulario usable boton siguiente

Y Ojo con poner un botón de Cancelar al lado de Enviar y con el mismo color.

La conversión web se mejora en los detalles

Comencemos mejorando el ratio de conversión de nuestro sitio web con nuestros formularios de contacto, reserva, contratación, compra, etc. Con pequeños cambios se pueden conseguir grandes resultados. También recordemos que podemos medir todo, podemos medir el % de conversión de nuestro formulario actual y compararlo con los registros obtenidos después de hacer los cambios. De esa forma valoraremos si las modificaciones efectuadas han sido correctas y no meras hipótesis sin comprobación.

excelente

Share on Facebook52Tweet about this on TwitterShare on Google+0Share on LinkedIn33
,

7 Responses to "Cómo mejorar la Usabilidad de los Formularios de tu Web"

  • Victor
    noviembre 28, 2014 - 1:06 pm Reply

    Muy buen artículo Javier! Los formularios son los grandes descuidados en usabilidad.

    • Javier Gosende
      noviembre 28, 2014 - 1:14 pm Reply

      Gracias Victor

      Algunos de estos consejos los aprendí de tus informes de usabilidad.

      Un abrazo 🙂

      • Victor
        noviembre 30, 2014 - 6:37 pm Reply

        Gracias Javier!

    • Javier Gosende
      noviembre 26, 2014 - 10:09 pm Reply

      Son cosas ligeramente distintas.

      La accesibilidad se puede medir con herramientas, la usabilidad se analizar con test heurísticos. La accesibilidad son las normas que debe tener una web para que sea accesible por el usuario en los distintos dispositivos. La usabilidad tiene que ver con que la navegación del usuario sea cómoda.

  • Javier Gosende
    noviembre 26, 2014 - 10:46 am Reply

    Hola David, coincido contigo. Comienza poniendo el formulario en tu web sin el código captcha. Si comienzas a tener problemas graves de Spam, pues lo pones.

    Muchos lo ponen desde de principio. El captcha es una solución para un problema, por lo tanto, esperemos a tener el problema primero para activar esta solución

    Gracias por tu comentario

  • David
    noviembre 26, 2014 - 10:09 am Reply

    Buen repaso de usabilidad. Hace poco tuve que sacar el formulario de página principal (no tenía captcha) por problemas de spam. Un formulario similar (con otro plugin pero sin captcha) en otra página no da problemas. Yo me inclino a no ponerlo si se puede evitar, pero el SPAM (cuando es) es un problema.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *