Principios de diseño de formularios: 13 mejores prácticas respaldadas empíricamente

Si no está siguiendo las mejores prácticas de diseño de formularios, está dejando mucho dinero sobre la mesa.

Si bien los formularios no son la parte más atractiva de la optimización de conversión, tienden a ser los más cercanos al dinero: las macroconversiones. Dedicar un poco de tiempo a optimizar formularios puede ser uno de los trabajos de optimización más importantes que puede realizar.

Por supuesto, las mejores prácticas no funcionan de la misma manera en todos los sitios. Es contextual. Pero, en general, implementar tácticas de diseño de formularios que funcionen la mayoría de las veces es una buena manera de comenzar.

Afortunadamente, no hay escasez de datos, estudios de casos, investigaciones y ejemplos sobre las mejores prácticas de diseño de formularios. Proviene de todas partes: estudios de casos de negocios, publicaciones de blog, ejemplos de pruebas A/B, investigación de usabilidad, estudios de seguimiento ocular y más.

Esta publicación describe algunas de las mejores prácticas de diseño de formularios más comunes. Si recién está comenzando con la optimización, utilícelos como referencia.

Si está trabajando en sus formularios, estas pautas deberían ayudarlo a obtener ganancias rápidas.

13 Principios de diseño de formularios y mejores prácticas

1. Menos es más (es decir, eliminar campos de formulario).

Cada campo que pides a los usuarios que llenen aumenta la fricción. Lo mejor que puede hacer para mejorar la finalización de formularios es deshacerse de tantos campos como sea posible.

En un estudio de caso, se reemplazó un formulario de contacto de 11 campos con una versión de 4 campos, y la finalización del formulario aumentó en un 160 %. (La calidad de las presentaciones se mantuvo igual).

En otra prueba, un formulario de 5 campos superó a un formulario de 9 campos en un 34 %. En este tampoco hubo una caída en los datos o en la calidad de los clientes potenciales.

La mayoría de los formularios son demasiado largos. Es el “síndrome del vendedor codicioso”: creemos que necesitamos todos los datos.

El Instituto Baymard encontró que el pago promedio contiene 14.88 campos de formulario. Pero sus pruebas de usabilidad de pago también mostraron que la mayoría de los sitios pueden lograr una reducción del 20% al 60% en la cantidad de campos de formulario que se muestran de forma predeterminada.

Esencialmente, el pago promedio muestra el doble de campos de formulario que los necesarios.

Por lo tanto, la reducción del campo de formulario es la base para la optimización de la conversión en la parte inferior del embudo. Es donde puedes obtener algunas de tus victorias más rápidas. El esfuerzo y los recursos necesarios son muy bajos, y las ganancias potenciales son enormes, especialmente a escala:

• ¿Cuántas formas tienes?
• ¿Cuántas personas los experimentan?
• ¿Qué significaría para usted un aumento del 10% en cada formulario?

Ahora, definitivamente hay preocupaciones sobre los datos, especialmente si es una empresa B2B que se dedica a la generación de clientes potenciales y los transfiere a un equipo de ventas. Desea asegurarse de que sean clientes potenciales calificados; de lo contrario, más clientes potenciales se convierten en una externalidad, lo que genera un costo en productividad desperdiciada.

Puede filtrar clientes potenciales con, por ejemplo, un sistema escalonado de presupuestos asignados. Básicamente, ¿cuánto está dispuesto a pagar el cliente potencial? Establezca la barra más baja en lo más bajo que crea que valdría la pena una ventaja valiosa, y eliminará muchos pateadores de neumáticos.

Un ejemplo de nuestra página de agencia:

Cuando esté optimizando campos de formulario, pregunte acerca de los datos: ¿Realmente los necesita? ¿ Realmente necesita el teléfono, el fax o la dirección de las personas? ¿Necesita un nombre de empresa si vende velas? Pregunte sólo lo que es relevante. Expedia eliminó el campo "Empresa" de su formulario de reserva y vio un aumento de $ 12 millones al año en ganancias.

Sepa también que, especialmente para B2B, existen empresas de enriquecimiento de datos como Clearbit. Si recopila un correo electrónico y tal vez un nombre, generalmente pueden enriquecer el resto de los datos (nombre de la empresa, tamaño, identificador de Twitter, etc.).

Piénsalo de esta manera: cada campo adicional te hace perder una cantidad de prospectos. ¿Vale la pena perder a esas personas por la información adicional que obtiene del campo? ¿Pierdes algo si no obtienes todos los datos de inmediato?

El mejor formulario de registro es breve:

Como siempre, hay excepciones. Reducir los campos del formulario no siempre aumenta las conversiones. Además, cuanta más información recopiles sobre un usuario, más efectivo será el marketing y la orientación que puedas usar (por lo general).

Sin embargo, en general, es seguro seguir esta heurística: elimine los campos de formulario inútiles o superfluos.

2. Las formas de una sola columna superan a las de varias columnas.

Esto ha sido bien investigado en estudios de seguimiento ocular (incluido el nuestro), estudios de casos y pruebas A/B. Cuando esté decidiendo entre un diseño de formulario de una sola columna o de varias columnas, utilice de forma predeterminada la columna única.

En el estudio CXL, los participantes de la encuesta completaron el formulario lineal de una sola columna (n = 356) un promedio de 15,4 segundos más rápido que el formulario de varias columnas (n = 346). Esto fue significativamente más rápido a un nivel de confianza del 95%.

Esta directriz no es nueva. De hecho, ha existido durante años, pero hasta nuestro estudio, no había mucha evidencia cuantitativa al respecto. Aún así, aquellos en la optimización de conversión sin duda habrán visto docenas de pruebas de usuario convincentes, así como pruebas A/B, que muestran que las columnas individuales son más útiles.

Estoy seguro de que hay excepciones a esta regla (como con cualquiera), pero no he encontrado ningún apoyo empírico.

3. Comunicar los errores con claridad.

Los usuarios cometerán errores. Es inevitable. Incluso si utiliza todas las mejores prácticas de diseño de formularios, los usuarios seguirán recibiendo mensajes de error. La forma en que maneja los mensajes de error es importante.

El diseño de mensajes de error tiene que ver con limitar la frustración que sienten los usuarios con su formulario. Cuando los usuarios se sienten frustrados, se estresan. El cortisol comienza a acumularse. Si alcanza cierto umbral, los usuarios se dan por vencidos y van al sitio de su competidor.

Entonces, sí, investigue la usabilidad usted mismo, pero comience con estas mejores prácticas de mensajes de error:

• No culpes al usuario.
• Escribe como un humano, no como un robot.
• Asegúrese de que los errores sean claros y que los mensajes estén colocados en una ubicación intuitiva.
• Asegúrese de que los usuarios sepan cómo corregir dichos errores.
• No incluya todos los errores en la parte superior de la página. La validación en línea es una buena solución.

4. Utilice la validación de campos de formulario en línea.

También relacionado con los mensajes de error está la forma en que le comunica a un usuario si su envío está bien. La validación de formularios es un tema completo en sí mismo, pero podemos cubrir algunos aspectos aquí.

La validación en línea es una hermosa manera de encontrar, alertar y corregir errores en tiempo real. En lugar de esperar hasta que los usuarios presionen "enviar", aprenden de inmediato qué salió mal.

Aquí hay un gran ejemplo de validación en línea:

Hay mucho apoyo empírico para la validación en línea. En 2009, Luke Wroblewski probó la validación en línea con un control (validación posterior al envío) y, aunque la muestra era pequeña, encontró los siguientes resultados con la versión en línea:

• 22% de aumento en las tasas de éxito;
• 22% de disminución de errores cometidos;
• aumento del 31 % en el índice de satisfacción;
• 42% de disminución en los tiempos de finalización;
• Disminución del 47% en el número de fijaciones oculares.

Tomaré esos resultados. (He visto resultados similares de pruebas A/B ejecutadas en muchos sitios de comercio electrónico).

Se trata de expectativas claras y comunicación. Un usuario no debería tener que adivinar qué funcionará y qué no. Cuanto más fácil pueda hacer que comprenda las expectativas, menos errores cometerá la gente y más completaciones de formularios logrará.

5. Ordene los campos del más fácil al más difícil de completar.

El principio de “compromiso y consistencia” de Robert Cialdini establece que cuando alguien toma una pequeña acción o da un paso hacia algo, se siente obligado a terminar. Por esta razón, es una buena práctica de diseño de formulario poner primero las cosas más fáciles.

Espere hasta más tarde para introducir fricción (por ejemplo, información de facturación o algo demasiado personal). Permita que las personas completen la información de envío antes de facturar. (A menudo son los mismos, por lo que no tendrán que volver a escribirlos).

No hagas esto:

6. Facilite la escritura.

El principio general de las mejores prácticas de diseño de formularios sigue apareciendo: simplificar las cosas para el usuario (especialmente para formularios móviles).

Limite la cantidad de escritura que los usuarios deben hacer para completar un formulario. Una forma es automatizar tanto como sea posible con funciones como autocompletar.

Al decidir sobre autocompletar, aquí hay algunas buenas preguntas para reflexionar:

• ¿Tiene buenos valores predeterminados para este campo?
• ¿Cuál es el historial disponible?
• ¿Tiene algún valor de uso común?
• ¿Puede usar el navegador de funciones o configuraciones móviles para completar el campo?
• ¿Puedes calcular el campo? (por ejemplo, autocompletar el estado según el código postal)

El formato automático también es increíblemente importante (y frustrantemente infrautilizado). Permita que los usuarios ingresen datos (particularmente campos como código postal, número de teléfono y tarjeta de crédito) de la forma que deseen. Se necesitan unas pocas líneas de código para corregir el formato después de ingresarlo. No dejes que tu pereza arruine la experiencia del usuario.

Así que no hagas esto:

7. Indique si cada campo es obligatorio u opcional (a menos que sean todos obligatorios).

Primero, pregunte si necesita incluir esos campos opcionales. La mayoría de las veces, son innecesarios. Por ejemplo, ¿quién necesita mi título o segundo nombre? ¿Por qué convertir un campo en cuatro?

Concéntrese en la información que necesita de los usuarios para que puedan comenzar. No querrás que un usuario se siente en casa pensando: "¿Por qué necesitan esto?"

Indique si cada campo es obligatorio u opcional, a menos que todos sean obligatorios.

8. Los campos de nombre y número de teléfono deben ser un solo campo.

En lugar de un campo de nombre y apellido, solo tenga un campo que diga "nombre completo". En lugar de tres campos para un número de teléfono, utilice uno.

El problema con los campos múltiples son los problemas de interacción. En general, una mejor práctica de diseño de formularios es "cuantos menos campos, mejor".

Imagínese usar su dispositivo móvil y tener que tocar cinco campos para el nombre y el número (dos para el nombre, tres para el número) en lugar de solo dos. Fricción innecesaria.

9. Ofrezca botones de radio en lugar de cuadros desplegables.

UX Movement argumentó que los formularios con menús seleccionados a menudo se abandonan porque "toman más tiempo y esfuerzo para completarse".

Más específicamente, afirmaron que ralentizaban a los usuarios al interrumpir el flujo de usuarios, ser difíciles de leer y requerir maniobras diestras con el mouse. No proporcionaron datos de apoyo.

Bueno, es fácil de probar. Así lo hicimos. Estábamos lanzando una gran encuesta sobre la percepción de confianza en línea, por lo que tuvimos la oportunidad de manipular un formulario de encuesta y hacer las mismas preguntas a diferentes personas en diferentes formatos (selección múltiple versus botones de opción).

¿Los resultados? El formulario con botón de opción fue más rápido de completar. Los participantes de la encuesta completaron el formulario de botones de opción (n = 354) un promedio de 2,5 segundos más rápido que el formulario con botones de selección múltiple (n = 354). Esto fue significativamente más rápido a un nivel del 95%.

10. No destaque los campos de código de cupón.

Cuando las personas ven el campo "Ingrese el código de cupón aquí", se sienten menos especiales. Ellos piensan, “¿Por qué no tengo uno?” Obtienen FOMO.

Muchos van a Google para buscar un cupón. Algunos encuentran cupones en sitios de terceros, lo que reduce sus ganancias. Muchos nunca regresan.

Salir del sitio para buscar cupones es una razón común para el abandono del carrito de compras.

Así que esto no es una buena idea:

En lugar de una pancarta grande, tenga un enlace de texto que diga: "¿Tienes un cupón?" (o algo similar). Si el usuario hace clic en el enlace, debería abrir un campo de entrada. Los enlaces de texto no son visualmente prominentes, por lo que menos personas prestarán atención.

Los clientes que ya tienen un código de cupón buscarán una forma de ingresarlo, por lo que, a menos que lo ocultes (demasiado) bien, aún podrán aplicar su cupón. Y si un cliente ha recibido un cupón (por correo electrónico), aplícalo automáticamente y muestra el descuento.

11. Evite el botón "borrar campos".

Nadie que rellene tu formulario quiere borrar los campos. Si no quieren llenarlo, simplemente pueden irse.

Si rellenan el formulario y borran los campos por accidente , es muy probable que no empiecen de nuevo.

Prácticas recomendadas de diseño de formularios específicos para dispositivos móviles

Si bien la mayor parte de lo anterior también se puede aplicar a dispositivos móviles, hay algunos problemas específicos a tener en cuenta con pantallas más pequeñas. Los usuarios móviles son menos pacientes y usar un teléfono inteligente es más difícil que usar una computadora de escritorio.

Tenemos una publicación completa sobre el tema, así que profundice allí. Pero si desea un par de puntos de partida, siga estas pautas.

12. Enfoque de campo de oferta.

Si tiene un formulario con varios campos, no querrá que los usuarios se pierdan en el formulario. Esto es especialmente importante en los dispositivos móviles: la pantalla más pequeña permite un menor control visual sobre el formulario.

Haga que el campo de entrada que se está editando sea destacado y enfocado.

13. No enmascare las contraseñas.

Si bien puede parecer un problema de seguridad mostrar la contraseña a medida que el usuario la ingresa, es mucho mejor para la experiencia del usuario.

Como NN/g resumido:

La usabilidad sufre cuando los usuarios escriben contraseñas y la única respuesta que reciben es una fila de viñetas. Por lo general, enmascarar las contraseñas ni siquiera aumenta la seguridad, pero le cuesta a su negocio debido a las fallas de inicio de sesión.

Advertencia: Ejecute sus propios experimentos.

El hecho de que algo sea una "mejor práctica" no significa que sea siempre la solución óptima. A veces, las mejores prácticas fallan.

Los sitios web son contextuales. Lo que funciona en un sitio puede no funcionar en otro.

Además, su contexto empresarial puede ser diferente. Quién sabe, tal vez realmente necesite ese segundo nombre como dato. ¿Quien soy yo para juzgar?

Así que tómalo todo con pinzas. Sepa que todo ha sido probado y estudiado, pero al final del día, todo lo que importa es cómo funciona en su sitio y en su contexto comercial.

Estas son pautas, no mandatos.

Conclusión

Los buenos principios de diseño de formularios pueden funcionar la mayoría de las veces, pero no son universales. No hay soluciones mágicas: tienes que probar esto por ti mismo.

Pero si está comenzando desde cero, estas mejores prácticas de diseño de formularios son una buena línea de base: un lugar para comenzar, pero no donde terminará.

¿Trabajando en algo relacionado con esto? ¡Publique un comentario en la comunidad CXL !