23 mejores prácticas de diseño de formularios para aumentar las presentaciones

Todas las empresas pueden beneficiarse de más envíos de formularios. Probablemente lo hayas visto antes: la mayoría del tráfico sale antes de llenar un formulario, y de los que se quedan, no todos lo completan.

Si menos del 100% de sus visitantes completan su formulario, tiene una oportunidad.

Los formularios juegan un papel integral en los negocios. Formularios de registro, formularios de inicio de sesión, formularios de pedido, formularios de pago, formularios de comentarios, formularios de pacientes, formularios de contacto: ¡formularios en abundancia! Necesitamos formularios web para generar clientes potenciales, aumentar el compromiso y expandirse.

Los formularios son el puente entre los visitantes de su sitio web y usted, pero se convierten en barreras si no se optimizan.

A menos que el formulario se llene y envíe, no ha hecho su trabajo. Y a menos que la empresa haga un buen uso de los datos del formulario que recibe (p. ej., respondiendo a tiempo, enviando boletines informativos, enriqueciendo los datos del formulario para la generación de clientes potenciales), el formulario se desperdicia.

Crear cualquier formulario antiguo es fácil; crear un gran formulario requiere saber qué frena a los usuarios. Un gran diseño de formulario web requiere comprender cómo usar de manera efectiva todos los elementos del formulario: encabezado, subcopia, campos de formulario, etiquetas de campo, botones de acción y comentarios tanto correctivos como afirmativos.

Administre eso y cosechará las recompensas de un formulario de alta conversión. Obtendrá más clientes potenciales con la misma cantidad de tráfico, ahorrará dinero en esfuerzos de marketing y alcanzará los objetivos comerciales relacionados más rápido.

Entonces, ¿por dónde empezar?

Pregúntese: ¿Debo usar un formulario?

Comience por decidir si debe usar un formulario en primer lugar. Si el formulario no proporciona suficiente valor para usted o sus usuarios, es mejor no tenerlo en absoluto. Incluso puede haber una forma más sencilla de obtener la información que desea.

Las opciones de registro e inicio de sesión en las redes sociales se han convertido en un sustituto popular de estos formularios porque evitan que los usuarios creen otra contraseña. Su comodidad aumenta la posibilidad de que un visitante realice la acción en cuestión y permanezca en su sitio.

Si decide que vale la pena usar un formulario, use los siguientes consejos para informar su estrategia y revise su formulario usando nuestra Lista de verificación definitiva de formularios web para asegurarse de que sea lo más efectivo posible:

Deja clara la motivación

Cuando los usuarios sienten que obtienen algo valioso de un formulario, es mucho más probable que lo completen. Es una cuestión de análisis de costo-beneficio: ¿qué obtendrán por dedicar tiempo y esfuerzo?

Las mejores prácticas de diseño de formularios en este artículo harán que sus formularios sean más atractivos, agradables y fáciles de usar, reduciendo el costo percibido de completarlos. Aún así, puede enfatizar el valor o el propósito de su formulario para aumentar las presentaciones. ¿Crearán una cuenta que les permita hacer X, obtener una prueba gratuita o recibir ayuda? Independientemente de lo que el usuario obtenga del intercambio, déjelo en claro.

Un título poderoso, una copia orientada a los beneficios y una llamada directa a la acción (CTA) pueden ayudar. No olvide que la persuasión todavía está en juego.

Si desea que los visitantes se suscriban a su boletín informativo, explique los puntos de venta. "Actualizaciones" no es convincente. ¿Actualizaciones sobre qué? ¿Consiguen algo más? Dígales por qué debería importarles.

También es una buena práctica mostrar cuánto tiempo es su formulario. Si es corto, muestra todos los campos a la vez con el botón CTA presente, para que sepan qué tan rápido será. Si se trata de un formulario más largo con varias páginas, incluya una barra de progreso, para que se sientan acercándose a la línea de meta. Estarán menos inclinados a renunciar y desperdiciar su progreso.

Observa a los que vinieron antes que tú

Todos tienen una idea de cómo se ve el formulario de un sitio web, y estas ideas son relativamente consistentes. Esto se debe a que la mayoría de los formularios web cumplen con las pautas generales que los hacen parecer similares. No es por casualidad.

Los formularios web están en todas partes, y debido a la similitud en estilo y campos, la gente tiene expectativas. Cumplir con estas expectativas crea una sensación de familiaridad, seguridad y tranquilidad.

Si cree que un nuevo diseño de campo o formulario funcionará, puede ser un poco creativo. Pero si se desvía demasiado de la norma, sepa que algunos usuarios pueden confundirse y abandonar el formulario.

Prepárate para ser juzgado

Ya sea que sean conscientes de ello o no, la gente juzga por su apariencia. Las empresas no pueden escapar de esta verdad, por lo que es aún más importante que su sitio web y sus formularios sean atractivos y profesionales. Siempre es útil considerar cómo encajará su formulario web con el estilo de la página y el sitio web.

Dos consejos estilísticos de introducción a tener en cuenta son el espacio y la legibilidad.

Espacio: simplifique la navegación manteniendo una cantidad razonable de espacio entre los elementos. Debe quedar claro qué etiquetas van con qué campos de entrada. Agregar espacio también evita una apariencia abarrotada que puede hacer que las formas parezcan más complejas.

Legibilidad: el espacio ayuda con la legibilidad, pero los diseñadores de formularios también deben considerar las opciones de texto, incluidas fuentes fáciles de leer y de tamaño razonable. Siempre elimine todos los detalles innecesarios y escriba a un nivel de lectura que el usuario promedio comprenda. El uso de mayúsculas y minúsculas también mejora la legibilidad.

Que sea breve

Es fácil comprender cada pequeño detalle sobre el cliente potencial que está adquiriendo, pero solo debe preguntar lo que necesita saber. Cuanto más pregunte, más largo será el formulario, y cuanto más largo sea el formulario, menos envíos recibirá. El tiempo es valioso, así que respeta el de ellos.

Si hay campos que no necesita pero que están configurados para mantener, indique cuáles son obligatorios. La mayoría de las empresas indican los campos necesarios con un asterisco. Los usuarios a los que no les importe rellenarán todos los campos, pero aquellos que no estén interesados ​​en responder a campos adicionales o proporcionar tanta información personal pueden reducir el tiempo de finalización.

También puede hacer que los formularios parezcan más cortos condensando campos donde tenga sentido. Por ejemplo, puede usar un campo para nombres completos en lugar de dos para nombres y apellidos.

Formas de estructura con lógica

El diseño efectivo de formularios web fluye como una conversación. Al estructurar su formulario, imagine que está hablando con su cliente potencial. Siga un orden lógico y agrupe las preguntas similares.

Una vez agrupados, organice los campos del más fácil al más difícil. Las personas prefieren completar primero la información fácil, y una vez que se han comprometido a completar la mayor parte del formulario, es más probable que lo completen.

Reduzca el movimiento de los ojos y la confusión con un buen diseño de formas

Limitar cuánto tienen que moverse los ojos de un usuario hace que su formulario sea más fácil de seguir y reduce los errores y el abandono de formularios.

Comience por hacer que sea fácil saber qué partes del formulario van juntas. Las etiquetas de los campos de formulario deben estar justo al lado del campo o encima, nunca debajo. Las etiquetas también deben estar lo más cerca posible de su campo respectivo en lugar de estar igualmente entre dos campos. Esto ayuda a los usuarios a discernir rápidamente qué información va a dónde.

Use una columna en lugar de dos para que el formulario se vea más limpio y evite que los usuarios zigzagueen de un lado a otro. Luego alinee el texto a la izquierda para que sea más natural de leer.

Sugerencias útiles de diseño

Hay indicaciones visuales útiles que puede incorporar en el diseño de su formulario para ayudar a guiar a los usuarios hacia la finalización.

Una de estas señales es un enfoque de campo. Ayuda a los usuarios a saber dónde se encuentran en todo momento indicando la casilla que está seleccionada. Puede lograr esto resaltando el cuadro con bordes en negrita, color u otros efectos. También puede resaltar el primer campo desde el principio para que los usuarios entiendan lo que significa el efecto.

Otra señal visual común es un indicador de seguridad de la contraseña. Si está diseñando un formulario de registro o creación de cuenta, use este indicador para mostrar a los clientes la seguridad de su contraseña mientras la crean.

Si tiene una idea para una nueva sugerencia de diseño que hará que su formulario sea más atractivo y fácil de navegar, pruébelo. Dé la bienvenida a la innovación, pero esté dispuesto a eliminarla si no funciona.

Aproveche las funciones automáticas y de llenado previo

El llenado automático, el autocompletado, el autocompletado y el formato automático pueden reducir el tiempo de finalización del formulario al mismo tiempo que facilitan el seguimiento del formulario y reducen los errores.

Prefill es cuando llena campos de formulario con respuestas de muestra. El texto suele ser de color más claro para indicar que es un ejemplo. Proporcionar respuestas de muestra puede aclarar lo que se incluye en el campo y el formato en el que los usuarios deben ingresarlo. Hagas lo que hagas, no coloques la etiqueta del campo en el campo mismo. Una vez que el usuario selecciona el campo, el texto desaparecerá y puede ser difícil para los usuarios recordar lo que tienen que ingresar.

Autocompletar utiliza los datos del usuario almacenados en el navegador del usuario para completar los campos del formulario automáticamente. Esto puede reducir la cantidad de campos que un usuario debe completar, pero también puede ser frustrante si completa la información incorrecta. Autocompletar, por otro lado, completa automáticamente la respuesta de un usuario en función de lo que comienza a escribir. Para aprovechar estas funciones, asegúrese de optimizar sus formularios para usar el autocompletado.

También hay valores predeterminados inteligentes que puede implementar. Estos valores predeterminados autocompletan la información en función de los datos de las respuestas anteriores del usuario. Por ejemplo, si un usuario ingresa su ciudad, el formulario puede autocompletar el código postal correspondiente.

Otra función automática es el formateo automático. Cuando se hace correctamente, puede minimizar la necesidad de copiar instrucciones o respuestas de muestra. El formato automático es cuando el campo formatea la entrada del usuario a medida que escribe, por lo que el usuario no tiene que pensar si lo escribió de la manera correcta. Esto es valioso para las variables que a menudo adoptan diferentes espacios o formatos, como fechas, números de teléfono y números de tarjetas de crédito.

Usar lógica condicional

A veces, las preguntas de formulario son irrelevantes para ciertos segmentos de audiencia y les hacen perder el tiempo. No hay nada peor que completar un formulario y tener que responder u omitir varias preguntas que no se aplican a usted.

Si esta es una posibilidad, considere usar lógica condicional. Un formulario con lógica condicional basa las preguntas que muestra a un usuario determinado en las respuestas iniciales del usuario. De esta manera, brinda a los usuarios una experiencia personalizada con solo preguntas relevantes.

Use los controles de entrada correctos

Al diseñar formularios, hay una variedad de controles de entrada que puede usar: botones de archivos adjuntos, casillas de verificación, menús desplegables, botones de opción y más. Es importante usar los controles de entrada correctos para cada propósito.

Las casillas de verificación y los botones de radio a menudo se confunden. Use una casilla de verificación cuando el usuario pueda seleccionar varias opciones de una variedad de opciones o cuando le pida a un usuario que se suscriba o acepte una declaración. Utilice los botones de radio cuando un usuario pueda seleccionar solo una opción.

Al agregar controles de entrada, asegúrese de usarlos teniendo en cuenta la ética. El uso de casillas premarcadas o interruptores que confundan a los usuarios o que sean fáciles de pasar por alto puede ser poco ético. En algunos casos, es ilegal.

Hacer lo correcto con los botones de formulario

Los botones son elementos críticos de navegación. Son la clave para enviar el formulario o pasar al siguiente conjunto de preguntas. A veces ayudan a los usuarios a cambiar al formulario correcto, como cuando están en el formulario de inicio de sesión pero necesitan el formulario de registro. Los botones guían a los usuarios en la dirección correcta.

Los botones deben ser visibles, captar la atención y tener claro su propósito, o aumentan las posibilidades de abandono del formulario. Los botones de llamada a la acción deben ser lo suficientemente grandes para que se vean, pero no tanto como para que parezcan spam. Algunas formas usan color o sombras paralelas para ayudar a que los botones se destaquen.

Hay dos botones vitales para un formulario: los botones principal y secundario. El botón principal fomenta la acción principal deseada y siempre está presente. No todos los formularios tienen un botón secundario, pero a menudo se usa para ofrecer soporte cuando lo tienen.

También puede utilizar micro animaciones o copiar afirmaciones para mostrar a los usuarios que el sistema registró la pulsación de un botón.

Haga que los errores sean claros y fáciles de corregir

Notificar a los usuarios de un error sin ofrecer ayuda es frustrante. Los mensajes de error fáciles de usar brindan soluciones.

Siempre diseñe formularios para mostrar qué cuadro contiene el error, para que los usuarios no tengan que escanear todo el formulario nuevamente. Los mensajes de error en línea y las validaciones funcionan mejor. Esto es cuando aparece un mensaje justo al lado del error en sí. También puede resaltar el cuadro o mover el cursor hacia él.

Si puede, sea específico sobre el error, para que los usuarios no tengan que adivinar de qué se trata. ¿La información no coincide con sus registros? ¿Se debe a un error tipográfico o un símbolo que no está permitido? Tal vez están creando una contraseña y no cumplió con los requisitos de longitud. Sea lo que sea, díselo.

Cuando haya un error, comparta su presencia de inmediato. Es más una decepción para los usuarios cuando finalmente presionan enviar y no se produce el resultado que esperaban.

Guardar datos de caché

¿Alguna vez has comenzado a llenar un formulario pero te interrumpieron? ¿Quizás tu WiFi se apagó, la página se recargó o accidentalmente saliste del sitio web?

El almacenamiento de datos en caché evita que los usuarios vuelvan a iniciar el formulario cuando ocurren este tipo de eventos. Los protege de la frustración del punto de partida y aumenta las posibilidades de completar el formulario.

Hazte amigo del diseño receptivo ya

Si aún no lo ha hecho, es hora de adoptar el diseño receptivo. Esto se aplica a todas las áreas de su sitio web, incluidos sus formularios.

El diseño receptivo se adapta al dispositivo en el que se encuentra el usuario, lo que garantiza que su sitio web siempre se vea bien y funcione. Ahora que más del 90 % de la población mundial de Internet utiliza dispositivos móviles para conectarse, es fundamental que la usabilidad de los formularios se mantenga constante en estos dispositivos.

Sí, la accesibilidad también se aplica aquí

Estamos hablando de eso nuevamente, no solo porque es excelente para los negocios y legalmente requerido, sino porque es lo correcto. Todos los sitios web y las características de esos sitios deben ser accesibles. Significa crear formularios a los que todos, incluidas las personas con discapacidades, puedan acceder y completar.

Los formularios accesibles funcionan bien con lectores de pantalla y no dependen del color. Usar el color rojo solo para indicar un error de forma, por ejemplo, podría ser difícil de ver para los usuarios daltónicos.

Para obtener más consejos, consulte nuestra guía sobre diseño accesible para usuarios con discapacidades.

Hacer. Que. Copiar. Trabajar.

Los formularios no son todos cuadros y entradas de usuario. Una buena escritura de UX es esencial para guiar a los usuarios de manera eficiente a través de cualquier formulario. La copia de Form UX está presente en mensajes de error y microcopias como botones, marcadores de posición y etiquetas.

La copia del formulario debe ser corta, instructiva y fácil de entender.

Cuando escriba etiquetas de formulario, use solo el sustantivo y elimine el verbo (por ejemplo, "Nombre" en lugar de "Ingrese un nombre"). Es más sencillo y estándar. Para los botones, haga microcopias orientadas a los resultados, para que los usuarios sepan exactamente lo que están haciendo (p. ej., "Suscribirse al boletín informativo" u "Obtener el PDF" en lugar de "Enviar").

Siempre que sea breve y tenga un propósito, la copia del formulario también puede proporcionar detalles útiles. Reemplazar "Nombre" con "Nombre como en la tarjeta" o "Nombre del destinatario del regalo" puede resolver la incertidumbre del usuario y evitar errores.

Otra opción es agregar una microcopia que explique por qué está solicitando información personal si parece fuera de lugar. Puede compartir por qué está solicitando un número de teléfono o código postal y cómo lo usará si aún no es evidente.

Las palabras y frases negativas tienden a hacer que las personas se detengan y piensen, y las palabras positivas son más amigables. Evite palabras con connotaciones negativas, como "spam", incluso si está diciendo que no enviará spam a nadie.

El texto también contribuye al sabor de un formulario al hacerlo sentir acogedor y acorde con la marca. Si bien los campos de los formularios deben seguir siendo instructivos, los encabezados de los formularios y otros textos pueden divertirse con los mensajes de la marca siempre que se transmita el mensaje.

Hablar de privacidad

Las preocupaciones sobre la privacidad frenan muchos formularios, especialmente a medida que los usuarios aprenden más sobre las amenazas de compartir información personal en línea. Se debe educar a los usuarios y los formularios deben tener esto en cuenta.

Alrededor del 29 % de las personas citan preocupaciones de seguridad como motivo para abandonar un formulario. Si tiene una política de privacidad que protege la confidencialidad de los datos de los usuarios, hágaselo saber. Sea comprensivo y calme las preocupaciones para que aquellos en el 29% se sientan seguros compartiendo con usted.

mira los numeros

Si está rediseñando un formulario, tiene la herramienta más valiosa de todas: los datos.

Revisa el historial de los usuarios con tu formulario y busca patrones. ¿Dónde y por qué abandonaron los usuarios? Cuando los usuarios optaron por irse puede revelar un problema, si un campo específico causó el abandono o si no tenían claro dónde estaba un botón. A veces, arreglar un elemento confuso es todo lo que se necesita, como fue el caso de Expedia.

Al revisar los datos de su formulario, Expedia notó que un campo de formulario específico interfería en las conversiones. Las personas ingresaban la información incorrecta y luego no se les permitía continuar con el siguiente paso. Así que eliminaron el campo.

Ese año, obtuvieron 12 millones de ganancias de la forma.

Diseños de formularios de prueba A/B

Las empresas no solo deben mirar el historial del usuario con formularios; deberían realizar pruebas para seguir mejorando. Las pruebas A/B, en particular, son una excelente manera de seguir actualizando sus formularios web.

Para probar un formulario A/B, cree dos iteraciones exactas del formulario en cuestión, pero cambie un factor. Puede ser un encabezado, una pieza de microcopia, el color de un CTA o la eliminación de uno de los campos. Use ambos durante un período de tiempo específico y evalúe cuál funcionó mejor.

Probar ideas por sí mismo es una buena regla general porque lo que funciona para una empresa no siempre funciona para la siguiente. Por ejemplo, algunos dicen que eliminar el campo del número de teléfono en un formulario aumenta las conversiones. La única forma de saber si obtendrá los mismos resultados con su audiencia única es probándolo.

Decidir: formularios de un solo paso o de varios pasos

Los formularios de un solo paso son los formularios estándar que enumeran todos los campos de una sola vez. Los formularios de varios pasos dividen las preguntas en más de una página. Cuando el usuario completa el primero, pasa al siguiente.

Un estudio que comparó un formulario de uno y dos pasos mostró que un 14% más de personas completaron el formulario de dos pasos. Otros estudios también afirman que los formularios de varios pasos se convierten mejor, pero la verdad es que lo que funcione mejor para usted dependerá de por qué está usando el formulario en primer lugar.

Los formularios de un solo paso son los mejores para recopilar información básica y aumentar las presentaciones. Es menos probable que asusten a nuevos usuarios o visitantes, por lo que a menudo se utilizan para formularios de contacto, soporte o inicio de sesión.

Los formularios de varios pasos son mejores para recopilar varios campos de información. Distribuir las preguntas hace que el formulario se vea menos abrumador y más atractivo. Este tipo de formulario funciona particularmente bien cuando un usuario ya está comprometido con un proceso, como comprar un producto. Al realizar un pedido en línea, tiene sentido colocar los pasos de facturación en la página siguiente.

Al crear un formulario de varios pasos, no desea que el formulario continúe infinitamente. Agrupe algunas preguntas en cada página, para que no haya un número excesivo de páginas. La creación de un formulario de varios pasos es una excelente oportunidad para utilizar la lógica condicional.

Independientemente del formulario que elija, implemente los consejos de diseño y copia que se analizan en este artículo.

Decidir: Chatbot vs formulario web

Los chatbots están creciendo en popularidad y pueden ser una forma divertida de involucrar a los usuarios y mejorar la experiencia del usuario. Vienen con beneficios como una mayor personalización y tiempos de respuesta más rápidos, y algunas empresas han comenzado a usarlos en lugar de formularios web.

Pero si un chatbot o un formulario web funcionarán mejor para usted depende de su negocio y usuarios. Debe abrazar el futuro pero no seguir ciegamente las tendencias. Intente realizar una prueba para confirmar si desea usar un chatbot antes de sumergirse, especialmente porque los chatbots no son una inversión pequeña.

Discutimos los pros y los contras de los chatbots y formularios y cuándo usarlos en nuestra guía: ¿Los chatbots se convierten mejor que los formularios web?

Opción secreta tres: Formas de lenguaje natural

Anteriormente, mencionamos que todos tienen una idea similar de cómo se ven los formularios web debido a sus similitudes de larga data. Bueno, eso no es del todo cierto para la rara forma de lenguaje natural.

Las formas de lenguaje natural, o formas de estilo Mad Libs, se escriben como oraciones con opciones para completar espacios en blanco. Los estudios revelan que la conversión aumenta con estos formularios, pero al igual que con otras opciones de formulario, querrá probarlo usted mismo para ver qué funciona dentro de su contexto.

Las ventajas de las formas de lenguaje natural son que están diseñadas para sentirse más naturales, atractivas y personales. Toman prestado de la familiaridad de la conversación y la escritura cotidianas.

Pero hay varias preocupaciones. El formato de los formularios en lenguaje natural ralentiza el escaneo y no es lo que la mayoría de los usuarios esperan cuando manejan un formulario. También puede crear problemas con la alfabetización y la confusión al traducir entre idiomas.

Ejemplo de una forma de lenguaje natural tomada de The Theme Foundry.

Transforme sus formularios en una experiencia

Este encabezado es un nombre inapropiado porque todas las formas son una experiencia. Pero no todas las formas son buenas, y ese es el objetivo.

Tener un formulario ya no es suficiente. Un formulario debe ser persuasivo, atractivo y fácil de completar. El hecho de que un usuario quiera lo que ofrece su formulario, ya sea un documento técnico o una cuenta, no significa que lo completará. Si un formulario es confuso o requiere más esfuerzo del que vale, se abandonará.

De ahí los consejos de este artículo. Úselos para crear un excelente diseño de formulario web con microcopias motivadoras y observe cómo aumentan sus conversiones.

¿Tiene preguntas sobre nuestras sugerencias o quiere hablar de formas? Alcanzar.