Tips de diseño y experiencia de usuario para mejorar tus formularios web

¿Te has visto alguna vez, como usuario, maldiciendo a quien diseñó el proceso de llenado de un formulario en un sitio web? Lo más probable es que te hayas molestado porque te obligaron a completar demasiados datos para registrarte o poder comprar un producto. La verdad es que yo muchas he pasado por lo mismo.

En este blog ya hemos tratado diversos aspectos de UX y usabilidad en la web, pero no habíamos dedicado un artículo para revisar las particularidades de los formularios.

Y, por simples que parezcan como herramientas, los formularios son un elemento tremendamente importante en la vida útil de un proyecto web y con un impacto relevante en la conversión, si se trata de una tienda de eCommerce.

En este sentido, hay aspectos de diseño y experiencia de usuario que vale la pena revisar y testear para evaluar si es necesario cambiar por completo tus formularios.

Por ello, a continuación te enseñamos algunos elementos a considerar para ayudarte a mejorar las conversiones y la captura de leads en tu sitio web.

Destaca tu formulario

Para esto utiliza los recursos del diseño, los colores y una ubicación destacada para facilitar que las personas encuentren tu formulario.

Es decir, haz que este espacio de contacto destaque del resto del sitio y acompañe en los momentos más relevantes al usuario.

Simplicidad

Acá aplica el concepto de menos es más, muy recurrente al hablar de diseño y experiencia de usuario en la web.

Cabe señalar que un estudio realizado por la Universidad de Columbia demostró que ofrecer demasiadas opciones a la gente provoca indecisión y, finalmente, no elegirán ninguna por miedo a equivocarse [1].

En algunos casos, pequeños cambios para hacer más simples nuestros formularios y procesos de checkout pueden tener gran impacto sobre la tasa de conversión.

Título llamativo

El texto que acompañe al formulario deberá ser atractivo y su misión será resolver una pregunta tácita y fundamental del usuario: ¿Cuál es la recompensa por entregar mis datos?

Lo importante es que indiques la ventaja o el beneficio que obtiene la persona si se registra.

Otra alternativa es que en los títulos utilices imperativos o preguntas.

Para el primer caso, le estás dando un llamado a la acción al usuario y en el segundo, generarás una duda razonable que lo invite a leer lo que se encuentra debajo de ese título.

Más orden, menos ruido visual

Al igual que con los contenidos en general, cuando hablamos de usabilidad en la web, en un formulario los textos y los campos asociados deben estar alineados de una manera que facilite la lectura.

Un buen alineamiento de los campos y las etiquetas de un formulario es determinante para la percepción de orden, y ayudará a disminuir la carga cognitiva.

Dicho de forma más simple, un formulario ordenado tiene mayor posibilidad de inspirar confianza y hacer que el usuario lo llene, versus un formulario desordenado frente al cual habitualmente el usuario se siente perdido y tiende a abandonar la tarea.

El siguiente formulario, si bien puede parecer que no tiene una gran cantidad de campos, no deja una sensación de orden visual; todo lo contrario, el usuario se puede sentir mareado:

Fuente formulario: falabella.com

Campos obligatorios claros

Estos son los campos que recogen los datos que son indispensables para poder realizar la transacción con tu formulario.

Por ejemplo, lo mínimo para una suscripción serían el email y el nombre. Pero para una compra necesitarás más información, como la dirección de envío completa.

Entonces, los campos obligatorios deben estar claramente identificados para que la persona sepa de antemano que no podrá concretar el proceso si no los llena correctamente.

La forma más usual es advertir al inicio del formulario que los campos marcados, por ejemplo con un asterisco rojo, son los considerados obligatorios. Y, obviamente, cada uno de estos campos obligatorios deberá llevar esta marca de forma muy clara.

Fuente formulario: paris.cl

 

No a los datos innecesarios

Para esto, simplemente ponte en el lugar del usuario / cliente y también hazte la pregunta tú mismo: ¿De verdad es fundamental saber la edad o el teléfono de esa persona?

Tal vez no sea totalmente necesario en la mayoría de los casos para concretar la transacción. Esta es otra decisión más de diseño y experiencia de usuario.

Entonces, solicita este tipo de datos como opcionales o no obligatorios, y permite que cualquiera pueda llenar tu formulario con solo su correo y nombre.

Si es realmente necesario solicitar una gran cantidad de datos, es recomendable agrupar los campos del formulario en grupos coherentes, de manera de facilitar la lectura.

Es más fácil para el cerebro procesar la información en bloques que en un mar de datos.

A continuación un ejemplo en este sentido, desde un proceso de registro:

Fuente formulario: easy.cl

Manejo y control de errores

Este es un aspecto muy importante para cuidar la experiencia del usuario a nivel general cuando evaluamos la usabilidad en la web.

Por eso, en el caso de un formulario, asegúrate de que quede claro por qué no puede ser enviado cuando la persona no ha hecho algo adecuadamente.

Por ejemplo, ¿faltó completar un campo que era obligatorio?, ¿alguna información no tiene el formato correcto?

Comunícalo de forma clara y explícita a través de los mensajes de validación y error.

Esto hará que la persona entienda cuál es el problema y corrija la información necesaria, en vez de sentirse frustrada y abandonar tu formulario… y que, de paso, deje tu sitio web.

Por otra parte, valida que los mensajes no hagan del formulario una experiencia poco amigable:

Fuente formulario: falabella.com

Una forma de evitar los errores en el llenado de los campos es indicar con ejemplos cómo se debe ingresar la información.

Si es un número telefónico, poner dentro del campo o inmediatamente arriba un número ficticio que muestre cuál es el formato (+88 998989898). Si es el número de documento de identificación, lo mismo (9.999.999-9).

Botones y llamados a la acción claros

Algo muy básico en usabilidad y experiencia de usuario es que los botones deben ser fáciles de distinguir entre todo el contenido.

Es decir, tener una forma reconocible y un color contrastante que llame la atención.

A eso agrega el detalle de que su color debe ser coherente con la acción que está proponiendo. Por ejemplo, un botón ENVIAR debería ser verde o azul, pero jamás rojo porque este color indica detenerse, cancelar o no realizar algo.

Asimismo, el llamado (el texto) debe ser relevante y coherente para la acción que representa. Es recomendable usar verbos de acción: ENVIAR, COMPRAR AHORA, SUSCRIBIRME HOY.

También es importante la ubicación de los botones. Por ejemplo, el botón debería estar al final del formulario y centrado.

Y, aunque parezca extraño, evita colocar un botón de cancelar la acción cerca del botón CONTINUAR o ENVIAR.

Solo preocúpate de que el usuario complete la acción sin distracciones y ayúdalo a encontrar de forma rápida el botón ENVIAR.

Uso de la tecla TAB

La idea es que los formularios sean fáciles y rápidos de llenar. Por esto, deben permitir que al pulsar la tecla TAB se pueda pasar de un campo al otro.

El objetivo es evitar que para ir al siguiente campo el usuario deba recurrir al ratón, alejando su mano derecha del teclado. Con esto estarás mejorando la usabilidad y la experiencia de usuario en tu formulario.

¿Qué te parecen estos consejos? Revisa los formularios de tu sitio web y verifica si cumplen con estos preceptos de diseño y experiencia de usuario.

Referencia:

[1] Recursos y estudios de la Universidad de Columbia.

Para leer:

TV Gets Social: Evaluating Social Media Data To Explain Variability Among Nielsen TV Ratings.

Para ver:

Luke Wroblewski, uno de los grandes en el mundo del diseño de interfaces de usuario y usabilidad te entrega consejos respecto a cómo optimizar correctamente tus formularios: How to Increase Form Conversion | Intel Software.

Sigue leyendo en FREED

• Test de usabilidad web: cómo evaluar tu sitio eCommerce
• Mejorar la UX en un eCommerce: 10 tips esenciales
• Mejora hoy la experiencia de usuario (UX) en tu eCommerce
• 7 Errores de usabilidad que debes evitar en tu sitio eCommerce