Diseño de formularios web que la gente realmente completa

Imagine a persona en la puerta de una tienda, con la cartera en la mano, lista para comprar. Entonces un dependiente le entrega un portapapeles y le dice: "Primero rellene esto". Tres páginas. Segundo nombre obligatorio. Una pregunta sobre cómo se enteró de usted. La mayoría de la gente dejaría el portapapeles y se iría. Sin embargo, eso es exactamente lo que hace un formulario web torpe a un visitante que llegó listo para actuar.

Los formularios son donde la intención se convierte en acción: un registro, una consulta, una reserva, una compra. También son el lugar donde esa intención se disipa silenciosamente. En esta guía, veremos por qué los formularios pierden gente, las pequeñas decisiones de diseño que los recuperan y una sencilla lista de verificación que puedes aplicar a cualquier formulario. Nada de esto es técnico. Se trata principalmente de respetar el tiempo y la atención de tu visitante.

Por qué los formularios son la parte más infravalorada de un sitio web

Puedes pasar meses en una hermosa página de inicio, escribir textos persuasivos y generar mucho tráfico, y aun así perder la venta en el último obstáculo. El formulario es ese obstáculo. Se encuentra en el momento exacto de mayor intención, lo que hace que cada fricción sea costosa. Un diseño confuso o una pregunta innecesaria pueden deshacer todo el trabajo anterior.

Es por eso que los formularios merecen el mismo cuidado que le das a tu sección principal o a tus páginas de destino. Un formulario no es una formalidad añadida al final. Es una herramienta de conversión por derecho propio, y pequeños cambios en él a menudo mueven la aguja más que un rediseño de todo lo que lo rodea.

La regla de oro: pide menos

Si recuerdas una cosa, que sea esta. Cada campo que añades es una pequeña solicitud de esfuerzo, y el esfuerzo es exactamente lo que hace que la gente abandone. La forma más fiable de aumentar la finalización es eliminar campos, no rediseñarlos.

Revisa tu formulario y desafía cada campo con una pregunta directa: ¿realmente necesitamos esto para dar el siguiente paso? Un número de teléfono para registrarse en un boletín casi nunca pasa esa prueba. Tampoco lo hace el "tamaño de la empresa" en un formulario de contacto simple. Si solo usas una parte de la información de vez en cuando, no la necesitas ahora; puedes preguntar más tarde, una vez que exista una relación.

Requerido vs. opcional

Marca solo los campos verdaderamente esenciales como obligatorios y mantén esa lista corta. Algunos equipos añaden campos opcionales "por si acaso es útil", pero cada línea extra en la página sigue añadiendo peso visual y dudas, incluso cuando no es obligatoria. En caso de duda, omítela. Un formulario más corto que se completa es mejor que un formulario exhaustivo que se abandona.

Opciones de diseño que ayudan discretamente

Una vez que tienes el conjunto de campos más corto posible, el diseño hace el resto del trabajo. El objetivo es que el formulario parezca sencillo, casi invisible. Unos pocos principios fiables te ayudarán a conseguirlo en la mayoría de los casos.

Apila los campos en una sola columna. Los ojos recorren una página con mucha más comodidad de lo que zigzaguean por ella, y una sola columna hace que el camino sea obvio. Coloca cada etiqueta directamente encima de su campo en lugar de al lado, para que la conexión sea inconfundible y el formulario funcione bien en un teléfono. Un espaciado generoso también ayuda; los formularios apretados parecen trabajo, y el espacio en blanco bien pensado los hace sentir ligeros.

Una nota sobre los marcadores de posición

Es tentador poner la etiqueta dentro del campo como texto gris de marcador de posición para ahorrar espacio. Resista. En el momento en que alguien empieza a escribir, esa pista desaparece y ya no puede comprobar qué pedía el campo. A mitad de un formulario más largo, la gente realmente lo olvida. Mantenga las etiquetas visibles en todo momento; la pequeña cantidad de espacio que ahorra nunca vale la confusión que causa.

Redacción: el formulario es una conversación

Cada palabra en un formulario es parte de una conversación con una persona real que está decidiendo si confiar en ti. Un lenguaje frío y de estilo de sistema ("Introducir datos", "Entrada no válida") hace que el intercambio parezca rellenar una declaración de impuestos. Un lenguaje cálido y sencillo hace que parezca hablar con un humano servicial.

Las etiquetas deben ser cortas y humanas: "Su nombre", "Correo electrónico", "¿En qué podemos ayudarle?". Cuando un campo pueda causar dudas, añada una pequeña línea de tranquilidad debajo. Junto a un número de teléfono, "Solo si desea que le llamemos" elimina la preocupación de que le acosen. Este es el mismo tono amigable que hace que una buena página de contacto parezca accesible en lugar de corporativa.

Errores: corrígelos amablemente

Nada frustra más rápido a la gente que rellenar un formulario, pulsar el botón y ser devuelto a una pared de texto rojo sin saber qué salió mal. Una buena gestión de errores es suave e inmediata.

Valida los campos a medida que la persona los termina, de modo que un correo electrónico mal escrito se señale en el momento en que se pasa al siguiente, y no minutos después al enviar. Cuando señales un problema, di exactamente qué hay que corregir y cómo: "A este correo electrónico le falta un símbolo @" es mejor que "Entrada no válida". Y nunca borres todo lo que alguien escribió por un error. Hacer que una persona vuelva a introducir un mensaje largo porque un solo campo falló es una forma rápida de perderla para siempre.

El botón de enviar importa más de lo que crees

El botón es lo último entre un visitante y un formulario completado, así que piénsalo bien. Hazlo grande, de alto contraste e imposible de pasar por alto. Luego, etiquétalo con la acción que realiza, no con la palabra mecánica "Enviar". "Enviar mi consulta", "Obtener mi presupuesto" o "Reservar mi llamada" le dicen a la persona exactamente lo que sucederá a continuación y reafirman suavemente el valor de hacerlo. La creación de estos botones es un tema completo en sí mismo, cubierto en nuestra guía de diseño de botones de llamada a la acción.

Formularios largos: divídelos en pasos

A veces, realmente se necesita mucha información, como una solicitud de presupuesto detallada o una solicitud de varias partes. Dejar caer veinte campos en una página interminable es desalentador; la gente ve la barra de desplazamiento y pierde el ánimo. La solución es dividir el formulario en unos pocos pasos cortos y lógicos con un simple indicador de progreso en la parte superior.

Cada paso debe sentirse como una tarea pequeña y alcanzable. Agrupe las preguntas relacionadas, como los datos de contacto en un paso y los detalles del proyecto en el siguiente. Un "Paso 2 de 3" visible da una sensación de progreso y una meta, lo que mantiene a la gente en movimiento. Es la diferencia entre un maratón y una serie de carreras cortas y manejables.

Confianza, accesibilidad y la letra pequeña

La gente entrega datos personales solo cuando se siente segura. Algunas señales discretas marcan una diferencia real: una breve nota sobre lo que harás con sus datos, una señal de seguridad reconocible cerca de los campos de pago y la ausencia de cualquier cosa que parezca una trampa. Si un formulario pide mucho más de lo que la tarea parece justificar, la gente lo percibe y se retira.

La accesibilidad también es importante aquí. Los formularios deben funcionar para las personas que usan un teclado en lugar de un ratón, y para aquellos que dependen de lectores de pantalla. Las etiquetas correctamente vinculadas, los contornos de enfoque claros y un contraste de color adecuado no son detalles opcionales; deciden si una parte de tu audiencia puede usar el formulario en absoluto. Nuestra descripción general de los conceptos básicos de accesibilidad web profundiza más, y la recompensa es amplia: un formulario accesible es simplemente un formulario más claro para todos.

Prueba, observa y sigue recortando

Ningún formulario es perfecto en el primer intento. Los equipos con los mejores formularios son aquellos que observan cómo los usa la gente real. Incluso la observación informal, como pedirle a un amigo que complete tu formulario mientras permaneces en silencio, saca a la luz problemas que dejaste de notar hace mucho tiempo. ¿Dónde se detienen? ¿Qué campo los hace entrecerrar los ojos? Esa vacilación es tu lista de tareas pendientes.

Los formularios también son uno de los lugares más claros donde los pequeños cambios se acumulan en todo tu sitio. Un formulario que convierte un poco mejor alimenta cada campaña que ejecutas, de forma muy parecida a los principios más amplios de lo que hace que un sitio web convierta. Mantén el formulario corto, el texto humano, los errores amables y el botón claro, y discretamente convertirás a más de tus visitantes existentes en consultas y clientes. Si deseas una segunda opinión sobre un formulario que tiene un rendimiento inferior, siempre puedes ponerte en contacto.

Preguntas frecuentes

Referencias

1. Baymard Institute. "Optimización del pago: Minimizar los campos del formulario." baymard.com.
2. Nielsen Norman Group. "Usabilidad de los formularios de sitios web." nngroup.com.
3. W3C Web Accessibility Initiative. "Tutorial de formularios." w3.org.