¿Alguna vez has rellenado un formulario en el móvil y has visto que los campos no paran de llegar? Respondes una pregunta, tocas siguiente y aparece otra. Y otra. Después de la quinta o sexta pantalla sin un final a la vista, te vas. No terminas el formulario. Buscas a otro que te lo ponga más fácil. Esto pasa constantemente con formularios de varios pasos mal diseñados. Pero cuando un formulario de varios pasos está bien hecho, ocurre otra cosa. Los usuarios lo recorren sin esfuerzo. Lo completan más rápido que un formulario largo de una sola página. La tasa de conversión sube un 86 por ciento frente a preguntarlo todo en una sola página.
Este capítulo explica cómo funcionan los formularios de varios pasos, cuándo usarlos (y cuándo no), cómo ordenar los pasos para que más gente los complete y qué separa un buen formulario tipo asistente de uno que pierde usuarios a mitad de camino. Si tienes un formulario con más de siete campos o un recorrido complejo con distintas necesidades de datos en cada etapa, esta es tu guía para hacerlo bien.
¿Qué es un formulario de varios pasos?
Un formulario de varios pasos es un formulario dividido en varias pantallas o páginas. En lugar de mostrar todos los campos a la vez, muestra un subconjunto de campos por paso. El visitante rellena la primera pantalla, hace clic en siguiente, ve la segunda pantalla y sigue hasta terminar. También se llama formulario paso a paso, formulario tipo asistente (wizard) o formulario progresivo, aunque estos términos significan cosas algo distintas según cómo esté construido el formulario.
El término formulario tipo asistente se refiere a un formulario en el que los pasos son secuenciales y obligatorios. El paso 1 lleva al paso 2, el paso 2 lleva al paso 3 y no se puede saltar ninguno. Esto funciona bien en procesos de solicitud, flujos de bienvenida o calificación de contactos donde cada paso se apoya en el anterior. Un formulario progresivo es distinto. Muestra campos de forma dinámica según las respuestas anteriores en la misma pantalla, o carga campos de forma condicional sin pasar a una página nueva. Algunos formularios progresivos se ramifican en caminos distintos según lo que escriba el visitante, de modo que dos visitantes pueden ver pasos totalmente diferentes según sus respuestas.
En este capítulo tratamos los formularios de varios pasos y los de tipo asistente como lo mismo, para simplificar. El principio clave es que el formulario se divide en varias pantallas, cada una con un subconjunto de campos. El visitante avanza por los pasos en orden, solo hacia delante o con la posibilidad de volver atrás y editar sus respuestas.
¿Cuándo usar un formulario de varios pasos y cuándo uno de una sola página?
La sabiduría convencional dice que los formularios de varios pasos siempre convierten mejor. No es del todo cierto. Los formularios de varios pasos convierten mejor cuando hay muchos datos que recoger o un recorrido de cliente complejo. Pero si tienes un formulario sencillo que cabe en una pantalla sin desplazarse, dividirlo en pasos suele arruinar las conversiones en lugar de mejorarlas.
Usa un formulario de varios pasos si tu formulario tiene más de siete campos. Si tienes siete campos o menos y caben todos en una pantalla sin desplazarse, déjalo en una sola página. La carga extra de varios pasos (cargas de página, complejidad, dudas sobre el progreso) no compensa la ganancia marginal. Pero si tienes diez, quince o veinte campos, un formulario de varios pasos casi siempre es mejor. El caso de una empresa de generación de contactos financieros lo muestra con claridad. Un formulario que pasó de una sola página con muchas preguntas a cuatro pasos enfocados subió su conversión del once por ciento al cuarenta y seis por ciento. Ese es el poder de los formularios de varios pasos, pero solo funciona cuando el formulario es lo bastante largo para justificar los pasos.
Usa un formulario de varios pasos si tu formulario reúne distintos tipos de información en distintas etapas. Un formulario de solicitud puede pedir primero datos básicos (nombre, email), luego detalles de la situación (a qué se postula, por qué) y después detalles sensibles (referencias, historial salarial). Dividirlos en pasos agrupa las preguntas relacionadas, lo que resulta más natural que mezclarlas en una sola página.
Evita los formularios de varios pasos si tu público tiene alta intención y está listo para actuar. Un cliente que ya ha decidido comprar tu producto y quiere avanzar rápido se irritará con un formulario de compra de tres pasos. Quiere completar la compra de la forma más rápida posible. Por eso las transacciones B2B de alto valor suelen usar formularios de una sola página. El cliente sabe lo que quiere y no necesita que el formulario lo lleve de la mano por pasos.
Evita los formularios de varios pasos para acciones simples y transaccionales. Una suscripción a una newsletter no necesita pasos. Restablecer una contraseña no necesita pasos. Un formulario de "contáctanos" con cuatro campos no necesita pasos. Si el formulario es sencillo y todos los campos caben en una pantalla, un paso es mejor. No añadas pasos solo porque puedes.
¿Cuántos pasos debe tener un formulario de varios pasos?
La respuesta no es un número mágico. El número correcto de pasos depende de un principio. Cada paso debe representar una tarea mental distinta, no una agrupación arbitraria de campos. No dividas un formulario en pasos solo para reducir el número de campos visibles. Divídelo cuando el visitante necesite cambiar mentalmente de contexto.
En la mayoría de los formularios, entre tres y cinco pasos es lo óptimo. Con dos pasos es como si pudieras usar una sola página. Con siete o más, aparece el cansancio de finalización. Los usuarios empiezan a preguntarse cuántas pantallas más les quedan. Cuanto más largo el camino, más gente abandona. Mantente entre tres y cinco, salvo que tu formulario tenga una estructura muy específica que requiera más.
¿Qué cuenta como un paso? Un paso es una tarea mental. Un paso donde reúnes la situación de la persona (datos básicos, datos de contacto, cargo) es una tarea. Un paso donde conoces su problema es una tarea. Un paso donde describe su solución actual es una tarea. Un paso donde indica su presupuesto y su plazo es una tarea. Cada uno es un contexto mental distinto, por eso dividirlos en pasos separados resulta natural en lugar de abrumador.
Por qué importa la lógica condicional en los formularios de varios pasos
No todos los visitantes necesitan ver todos los pasos. Un visitante que solicita un préstamo no necesita las mismas preguntas que uno que pide una demo. Un visitante que compra un plan básico no necesita los mismos pasos que uno que compra un plan para empresas. Aquí la lógica condicional se vuelve crítica. La lógica condicional te permite mostrar pasos distintos según lo que responda el visitante. Reduce el total de pasos que ve y hace que el formulario parezca personalizado en lugar de genérico.
Sin lógica condicional, obligas a todos a seguir el mismo camino. Un visitante responde que no a "necesito esto", pero igualmente tiene que ver y saltarse los cinco campos siguientes. Esa fricción se acumula. Con lógica condicional, lo llevas directamente al paso relevante. El formulario se adapta a sus necesidades. Por eso la lógica condicional no es solo una función agradable. Es esencial en cualquier formulario de varios pasos con caminos ramificados o distintos casos de uso.
El principio clave de la lógica condicional es la claridad. Si saltas a un visitante del paso dos directamente al paso cinco, necesita entender por qué y qué pasó. Si la lógica está rota o confunde, los visitantes abandonan porque se sienten perdidos. No saben si se equivocaron al responder una pregunta o si el formulario está roto. Prueba siempre a fondo las ramas condicionales antes del lanzamiento. Asegúrate de que cada posible camino de respuesta lleva al paso correcto.
¿Cómo estructurar y ordenar los pasos de un formulario de varios pasos?
El orden en que presentas la información importa mucho más que el número de pasos. Hay un principio psicológico en juego. Cuando alguien invierte esfuerzo en tu formulario al rellenar un paso, es más probable que continúe con el siguiente. Cuanto más tiempo se queda contigo, más probable es que complete el formulario. Así que el primer paso no es solo un paso. Es el punto de compromiso en el que los usuarios deciden si siguen o abandonan todo el formulario.
Primer paso: empieza con preguntas fáciles y no sensibles
El primer paso de un formulario de varios pasos debe tener la barrera de entrada más baja posible. Pide el nombre, el email o una preferencia simple. No empieces pidiendo teléfono, presupuesto, referencias ni nada que exija confianza o reflexión profunda. El visitante ve el primer paso y decide al instante. Si le parece fácil y rápido, lo completa. Si le parece invasivo o complejo, se va.
La psicología aquí se llama efecto de progreso dotado. Cuando alguien empieza tu formulario, ya ha invertido. Ha decidido interactuar contigo. El siguiente paso resulta menos intimidante porque ya ha invertido en el primero. Por eso tu primer paso debe ser el más fácil. Haz que la gente sienta que avanza desde el primer momento. Tras completar el paso uno, el 90 por ciento de quienes empezaron pasará al paso dos. Tras completar el paso dos, el 85 por ciento continuará al paso tres. Pero si el paso uno es difícil y complejo, nunca llegas al paso dos.
Pasos intermedios: agrupa información relacionada y retrasa las preguntas sensibles
Los pasos intermedios son donde reúnes la mayor parte de tus datos. Aquí preguntas por el problema del cliente, su situación, su solución actual y sus limitaciones. Agrupa los campos relacionados. Un paso puede cubrir su situación y sus puntos de dolor. Otro cubre su plazo y presupuesto. Un tercero cubre su equipo y su proceso de decisión.
Este es el principio clave. No pidas información sensible en los primeros pasos, aunque sea relevante. Retrasa las preguntas de presupuesto, los teléfonos y todo lo que requiera revelar datos personales hasta el paso tres o cuatro. ¿Por qué? Porque en el paso tres el visitante ya ha invertido. Ha rellenado dos pasos de información. El coste ya hundido crea un compromiso psicológico. Está más dispuesto a responder preguntas sensibles porque abandonar ahora parece desperdiciar el trabajo ya hecho. Este principio se llama efecto de "poner algo en juego". Cuanto más invertido está un visitante, más dispuesto está a dar información que normalmente dudaría en compartir.
Último paso: confirmación, pago y datos sensibles
El último paso debe incluir todo lo que completa la transacción o fija el compromiso. Si recoges un pago, aquí va el campo de pago. Si necesitas una firma o un consentimiento, este es el último paso. Si tienes preguntas sensibles sobre presupuesto o datos personales que evitaste en pasos anteriores, aquí es donde van. En el último paso, el visitante ha completado la mayor parte del formulario. Está comprometido. Es mucho más probable que responda las preguntas y complete todo el proceso.
El último paso también puede incluir una pantalla de confirmación que muestre al visitante lo que ha escrito. Deja que revise sus respuestas antes del envío final. Esto mejora la exactitud y da confianza de que su información es correcta. También funciona como señal de progreso. Ve una pantalla de confirmación y sabe que el formulario casi ha terminado. Este cierre psicológico aumenta las tasas de finalización.
Indicadores de progreso y navegación
Sin un indicador de progreso, los visitantes no saben cuánto durará el formulario. Empiezan, rellenan un paso, hacen clic en siguiente y se preguntan si les quedan diez pasos más. La incertidumbre provoca abandono. Algunos visitantes se irán porque no quieren comprometerse con un número desconocido de pasos. Un indicador de progreso lo resuelve mostrando dónde están y cuántos pasos quedan.
Hay tres estilos habituales. Los pasos numerados muestran "paso dos de cuatro" en texto o como indicadores de pasos arriba. Las barras de porcentaje muestran un relleno visual que crece a medida que el visitante avanza. Los indicadores de puntos muestran qué paso está activo con una línea o conexión visual entre ellos. Cualquiera funciona, pero la investigación indica que los pasos numerados y las barras de porcentaje son algo más eficaces que los puntos porque comunican el total con claridad. Cuando alguien ve paso uno de cuatro, sabe que quedan tres más. Cuando ve una barra rellena al dos por ciento, no obtiene esa misma claridad.
El propio indicador de progreso tiene un efecto psicológico. Mostrar el progreso en un formulario aumenta de verdad la finalización. Un formulario que indica que llevas un cuarenta por ciento consigue más finalizaciones que uno sin indicador, aunque el esfuerzo total sea idéntico. Es de nuevo el efecto de progreso dotado. Los visitantes sienten que avanzan, y eso los motiva a continuar.
Incluye siempre un botón de volver atrás que permita a los visitantes editar sus respuestas anteriores. Un visitante puede darse cuenta de que respondió algo mal o querer cambiar una respuesta anterior. Si lo obligas a avanzar sin posibilidad de volver, se siente atrapado. Los usuarios atrapados abandonan. Los usuarios que pueden navegar libremente completan más porque sienten que tienen el control. El botón de volver también mejora la calidad de los datos. Si un visitante puede volver y corregir errores, recoges información más exacta.
Estrategia de campos dentro de cada paso
Ahora que hemos visto la estructura general de los pasos, vamos a ver de cerca los campos de cada paso. ¿Cuántos campos van en cada pantalla? ¿Qué diseño funciona mejor? ¿Cómo gestionas la validación y los mensajes de error?
Limita cada paso a tres a cinco campos como máximo. No es una regla estricta, pero sí una pauta práctica. Un paso con uno o dos campos da la sensación de apenas avanzar. Un paso con ocho campos resulta abrumador. Apunta a tres o cuatro campos por paso de media. Así tienes espacio suficiente para reunir información útil sin que ningún paso parezca una carga.
Usa un diseño de una sola columna para todos los campos. Nunca uses diseños de varias columnas dentro de un paso. Suena obvio, pero muchos equipos intentan meter más campos en pantalla usando dos o tres columnas. Lo que ocurre en realidad es que los usuarios se saltan campos porque se rompe el flujo visual. Un usuario que lee una página sigue el patrón natural de arriba abajo. Cuando los campos están en columnas, los usuarios se dejan campos. Un instituto de investigación de usabilidad lo ha probado a fondo. Los formularios de una sola columna tienen una finalización notablemente mayor que los de varias columnas con exactamente los mismos campos.
Coloca las etiquetas encima de los campos, nunca al lado. Cuando las etiquetas están a la izquierda de un campo, ocupan espacio horizontal y empujan los campos hacia abajo en la página. Cuando las etiquetas están encima, están justo ahí cuando el usuario se centra en el campo. Más importante aún, las etiquetas que están dentro del campo como texto de ejemplo desaparecen cuando el usuario hace clic en él. Las etiquetas encima de los campos siguen visibles, así que el usuario nunca olvida qué está rellenando.
Valida los campos cuando el usuario sale del campo, nunca mientras escribe. Si validas mientras escribe, los usuarios se frustran. Ven mensajes de error antes de haber terminado de introducir los datos. Parece que el formulario los juzga o critica lo que escriben. Valida cuando pasen al siguiente campo. Así les das tiempo para terminar y tienes la oportunidad de revisar su trabajo sin interrumpir su flujo. Un visitante que escribe un teléfono no necesita ver un error mientras todavía está tecleando. Deja que termine y luego comprueba si es válido.
Minimiza los campos de texto abierto. Los campos de texto abierto obligan a escribir párrafos. Reducen bastante la finalización porque escribir lleva tiempo y esfuerzo. Limita tu formulario a no más de dos campos de texto abierto en total. Para todo lo demás, usa desplegables, botones de opción, casillas o escalas de valoración. Un desplegable que pregunta en qué sector trabajas es más rápido que pedir que escriban su sector. Un botón de opción con el tamaño de la empresa (pequeña, mediana, grande, corporativa) es más rápido que pedir que escriban el tamaño de su empresa. Usa entradas estructuradas siempre que puedas.
Errores comunes que arruinan la finalización de los formularios de varios pasos
Puedes seguir a la perfección todos los principios de este capítulo y aun así arruinar tus tasas de finalización si cometes alguno de estos errores.
No pidas información sensible demasiado pronto. Si tu primer paso pide el teléfono o los ingresos anuales, perderás visitantes antes de que estén lo bastante implicados para confiarte datos sensibles. Déjalos para el paso tres o más adelante.
Nunca quites el botón de volver atrás. Algunos formularios solo permiten avanzar. No lo hagas. Los usuarios se quedan atascados, se sienten atrapados y abandonan. Un formulario con navegación hacia atrás siempre rinde más que uno sin ella.
No valides mientras los usuarios escriben. Genera una retroalimentación constante y frustración. Espera a que pasen al siguiente campo.
No uses indicadores de progreso que desaparezcan o cambien de forma inesperada. Si tu barra de progreso muestra que estás en el paso dos de cinco y de repente pasa al paso dos de seis, los visitantes pierden la confianza. Sienten que el formulario les oculta información. Mantén constante el número total de pasos durante todo el formulario.
No uses diseños de campos en varias columnas. Perderás finalizaciones de campos porque los usuarios se saltan los campos que no ven en el flujo natural de lectura.
No dejes de guardar el progreso entre pasos. Si un visitante rellena tres pasos y luego se va a otra página, su trabajo debería guardarse. Si vuelve al formulario, los datos que ya introdujo deberían seguir ahí. Cuando se pierden los datos, los visitantes tienen que volver a escribirlo todo o abandonan. Eso arruina las conversiones. Algunos creadores de formularios usan el almacenamiento local para guardar el progreso, de modo que si un visitante cierra el navegador y vuelve más tarde, sus datos siguen ahí. Es un gran impulsor de la finalización.
No uses una lógica condicional rota que lleve a la gente a pasos equivocados. Si un visitante responde la pregunta tres con la opción A y tu lógica debería saltarlo al paso cinco pero le muestra el paso seis, abandonará. Prueba siempre que tu ramificación condicional funciona bien antes del lanzamiento.
Cómo te ayuda WEMASY a crear formularios de varios pasos
El creador de formularios de WEMASY te permite crear formularios de varios pasos con lógica condicional, seguimiento automático del progreso y estadísticas integradas. Crea un formulario de captación de contactos de cinco pasos y mira en qué paso hay más abandono. Dirige a distintos visitantes a distintos pasos según sus respuestas. Guarda el progreso del visitante para que, si cierra el navegador y vuelve más tarde, sus datos estén intactos. Todos los envíos llegan a tu panel, donde puedes ver las respuestas, exportar datos y conectar los envíos con tu CRM. También puedes seguir métricas de rendimiento del formulario como las tasas de finalización por paso, el tiempo en cada página y los puntos de abandono. Para más contexto sobre cómo los formularios generan resultados de negocio y encajan en la estrategia general de tu web, consulta nuestra guía sobre los formularios web y su importancia.