57 buenas prácticas para el diseño de formularios web

Un buen diseño de formularios web sirve para captar leads (clientes potenciales), enriquecer tus listas de correo electrónico y obtener datos importantes sobre tus visitantes. En definitiva, desempeñan un papel clave en la conversión de tu sitio web. De ahí la importancia de cuidar su diseño y formato.

VentureHarbour publicó recientemente un artículo completo sobre las mejores prácticas para diseñar formularios web, incluyendo ejemplos. Nos hemos inspirado en él para ofrecerte una lista de las 57 mejores prácticas de diseño de formularios web. La hemos agrupado según distintos criterios que podrás consultar en el índice. ¡Vamos allá!

Diseño de formularios web y estructura: reglas generales

#1 Usa formularios web estructurados en varias etapas (multietapa)

Los formularios web divididos en varios pasos —cada uno con su propia pantalla— generalmente suelen brindar tasas de conversión más altas, independientemente del propósito del formulario o el sector de actividad.

¿Por qué funcionan mejor los cuestionarios en varias etapas? Hay tres razones principales:

• Un formulario web en varias etapas es menos intimidante para el usuario, porque no todas las preguntas se muestran al mismo tiempo.
• Las os datos personales (correo electrónico, teléfono, etc.) no se piden hasta el final del cuestionario. Cuando el usuario ha respondido las preguntas de los primeros dos o tres pasos, ya sabe para qué lo reclaman y tiene más confianza para facilitar sus datos de contacto en el paso final.
• Mostrar una barra de progreso tiene un efecto motivador en el usuario.

#2 Menos es más: elimina los campos del formulario web que no sean imprescindibles

¿Sabías que Expedia perdió 12 millones de dólares en un año por el hecho de incluir una pregunta adicional en su formulario de reserva? No es la única empresa que ha llegado a esa misma conclusión: está demostrado que una sola pregunta adicional puede hacer que la tasa de conversión del cuestionario baje. Cada pregunta que añades tiene un impacto negativo en la conversión.

Los formularios que convierten mejor —asumiendo que el resto condiciones permanecen invariables— son los que tienen menos campos. Por tanto, debes tratar de limitar la cantidad de campos en la medida de lo posible, suprimiendo aquellos que no sean esenciales para tu propósito.

#3 Usa campos de visualización condicionales

El uso de campos de visualización condicionales reduce el tamaño de los formularios y la cantidad de campos que se muestran al mismo tiempo, lo que tiene un impacto positivo en el usuario y mejora la conversión de los formularios web. Un campo condicional solo se muestra si el usuario ha completado un campo principal o respondido de una determinada manera una pregunta. Los campos condicionales permiten que solo se muestren las preguntas relevantes para el usuario que está respondiendo.

#4 Muestra las etiquetas de preguntas sobre los campos de texto

Los expertos de Google UX han descubierto que alinear las etiquetas de las preguntas con los campos de respuesta aumenta la velocidad con la que se cubren los formularios. Por una sencilla razón: este diseño requiere un movimiento de los ojos más corto, como se muestra en el siguiente diagrama.

#5 Usa formularios de una sola columna

Del mismo modo, los estudios sobre el análisis del movimiento ocular han demostrado que es preferible utilizar un diseño de una sola columna que un diseño de dos columnas. La única excepción a esta regla es cuando se pregunta a los internautas por fechas (días, meses, años) o periodos (horas, minutos, etc.). En este caso, puede ser pertinente colocar las preguntas una al lado de la otra.

#6 Dale a la gente una razón para completar tu formulario

Imagina que sabes que vas a tardar una hora en cubrir un formulario… Seguramente no lo hagas… a no ser que te ofrezcan un Ferrari a cambio. La moraleja de este ejemplo exagerado es que, para animar a los internautas a completar tu formulario, debes darles razones para hacerlo. Debes motivarlos a completar su cuestionario explicándoles los beneficios que pueden obtener de él.

Betting Expert logró obtener un 31,54% más de respuestas cambiando el título del formulario («Únete a BettingExpert» ==> «Obtén consejos para apuestas gratis»). Así que ya sabes, ¡recuerda elegir bien el título del formulario!

#7 Agrupa las preguntas relacionadas en secciones o etapas

Si estás haciendo más de 6 preguntas, agrupar las preguntas de tu formulario en secciones o etapas (ver #1) ayuda a darle al formulario una estructura más clara y reduce el esfuerzo del usuario.

Tipos de campos y preguntas en el diseño de formularios web

#8 Minimiza la cantidad de clics necesarios

Cuantos menos clics tenga que hacer el usuario, más probable es que realice la acción deseada. Microsoft pudo corroborar esto. Antes, hacía falta tres clics para apagar la computadora PC. Ahora solo un clic es suficiente. La firma de Mountain View comprobó que, gracias a este pequeño cambio, sus clientes apagaban sus ordenadores con mayor facilidad. Conclusión: trata de reducir la cantidad de clics requeridos para realizar las acciones lo máximo posible.

#9 Usa valores predeterminados útiles

Por ejemplo, si estás solicitando el número de teléfono o el país, sugerir prefijos internacionales de teléfono o país (o región) según la dirección IP del usuario facilita completar el formulario. Facilita las respuestas lo máximo posible con la información que ya tienes.

#10 Usa botones de radio, casillas de verificación y menús desplegables cuando sea necesario

Los botones de opción o botones de radio deben usarse en el diseño de formularios web cuando hay múltiples opciones de respuesta y solo se puede elegir una única respuesta. Las casillas de verificación, por el contrario, deben elegirse cuando se pueden marcar varias respuestas. En todos los casos, los botones de opción y las casillas son preferibles a los menús desplegables, que entorpecen la experiencia del usuario porque complican el proceso de finalización. Úsalos solamente cuando haya más de 6 o 7 opciones de respuesta posibles.

#11 Alinea los botones de opción verticalmente

Es muy importante alinear verticalmente los botones o recuadros de opción y priorizar la alineación vertical sobre la horizontal.

#12 No uses campos separados para pedir el número de teléfono y la fecha de nacimiento

Los campos separados obligan a los usuarios a hacer clic o usar la tecla «TAB» para pasar de un campo a otro. Lo mejor es tener un único campo formateado correctamente para introducir datos como el teléfono y la fecha de nacimiento.

#13 Justifica con claridad las solicitudes de información confidencial

Las personas están cada vez más preocupadas por la protección de la privacidad y los datos personales en Internet. Si quieres solicitar datos personales (teléfono, correo electrónico, salario, profesión, etc.), no escatimes en explicar con claridad por qué necesitas que faciliten este tipo de información.

# 14 Usa una función de autocompletar código postal para solicitar la dirección

Cuando solicitas la dirección en un formulario, es recomendable integrar una función de autocompletar para facilitar la inserción de datos. Ejemplo: proponer la ciudad cuando el internauta ha introducido su código postal.

# 15 Utiliza placeholders cuando esté justificado

Un placeholder o marcador de posición es un texto que se muestra en el campo con un color atenuado y que tiene como objetivo dar indicaciones sobre lo que hay que introducir el campo. Facilitan que se cubra el formulario, pero solo deben utilizarse cuando sea de verdad necesario. Para el campo «Nombre», por ejemplo, no es necesario incluir un placeholder.

#16 Muestra siempre una etiqueta delante de los campos del formulario

La etiqueta es el texto, a veces en forma de pregunta, que se muestra encima o al lado del campo. Te aconsejamos poner siempre etiquetas que identifiquen los campos de tu formulario, para que el usuario sepa de inmediato lo que le estás preguntando.

La captura de pantalla anterior (Brevo) se salta esta regla usando un placeholder. Pueden hacerlo porque se trata solo un campo. Cuando hay varios, no será la mejor idea porque el placeholder desaparece cuando comienzas a escribir texto en el campo. Esto obliga a los internautas a trabajar la memoria y, por tanto, a esforzarse.

Como último recurso, puedes usar etiquetas «inline», como en el siguiente ejemplo (BounceExchange), que es una técnica híbrida, a medio camino entre la etiqueta y el placeholder.

#17 Integra texto predictivo de campos con muchas opciones predefinidas

Cuando le pides al internauta que seleccione su país, sus aficiones o cualquier otra información que implique una gran cantidad de opciones, es buena idea ofrecer una herramienta de texto predictivo que ofrece sugerencias para completar el texto introducido. De esta forma, el diseño de formularios web ayuda al internauta a avanzar más rápido.

#18 Indica con claridad las preguntas opcionales

Las preguntas opcionales deben resaltarse claramente como lo que son: preguntas opcionales, a las que no es obligatorio dar una respuesta. Especifica con claridad cuándo se trata de una pregunta opcional para no entorpecer la experiencia de los usuarios que completan el formulario.

#19 Usa imágenes para dar atractivo al formulario

Cuando tenga sentido, utiliza iconos en los que el usuario puede hacer clic para que completar el formulario web sea más intuitivo y fácil. Cuando se trata de la experiencia del usuario, las imágenes allanan el camino de forma considerable.

# 20 ¿Y si dejas el número de teléfono opcional?

La gente es cada vez más reticente a facilitar su número de teléfono. Si no es imprescindible para ti, no lo pidas o, si lo haces, márcalo como campo opcional. Un estudio realizado por Clicktale demostró que, al no obligar a dar el número de teléfono, ¡se reduce la tasa de abandono del formulario del 39% al 4%!

#21 Adapta el tamaño de los campos al de las respuestas esperadas

El tamaño de los campos de tu formulario web debe ser coherente con la cantidad de texto que esperas del usuario.

Accesibilidad y facilidad de uso en el diseño de formularios web

#22 Evita usar captchas

Un estudio de la Universidad de Stanford (descargable en pdf) demostró que los captchas tienen un impacto negativo significativo en la tasa de conversión de los formularios web, ya que aumentan el tiempo de finalización del formulario. Si quieres evitar el spam, es mejor usar una herramienta de detección automática de spam como Akismet (plugin de WordPress) o crear un honeypot usando campos ocultos. Los captchas deberían ser el último recurso.

#23 No lo fíes todo a los colores para comunicar un mensaje

Cuando muestres mensajes de error o validación, no uses solo el color verde o el color rojo. También necesitas un texto o un icono (una «v» para mensajes de validación y una cruz para mensajes de error, por ejemplo) para que tu mensaje sea claro para el usuario de Internet.

#24 Asegúrate de que se puede usar la tecla «TAB» para navegar por el formulario

Muchas personas usan la tecla «TAB» en el teclado de su computadora para navegar por el formulario, en lugar de hacer clic para pasar de un campo a otro. Verifica que esta función sea compatible con tus formularios.

#25 Ofrece explicaciones para preguntas que puedan ser difíciles de entender

A veces necesitamos efectuar preguntas complejas en los formularios. Por ejemplo, el diseño de formularios web de las compañías de seguros a menudo requiere integrar información compleja. Si este también es tu caso, recuerda dar suficientes explicaciones para que los internautas puedan completar tus formularios con mayor facilidad posible, integrando un bloque de texto junto a cada campo. No des por hecho que vaya a sobreentender nada. Aquí tienes un ejemplo (ComparetheMarket.com):

#26 Asegúrate de que el formulario funciona en los principales navegadores/dispositivos

Es importante que tus formularios web se muestren correctamente en los diferentes dispositivos: ordenadores, tabletas y smartphones. Sobre todo, si tenemos en cuenta que más de la mitad de la navegación por Internet de hoy en día se realiza desde un dispositivo móvil. Por tanto, recuerda verificar bien este aspecto antes de integrar el formulario en tu sitio web.

#27 Asegúrate de que el formulario sea legible con poca o con mucha luz

Algunos internautas posiblemente estén en la calle cuando accedan a tu formulario, desde su dispositivo móvil. Asegúrate de que las etiquetas y los campos del formulario tengan un buen contraste con el fondo de la página para que se puedan leer tanto con poca luminosidad como con mucha.

#28 Comprueba que ningún elemento parpadee más de dos veces por segundo

Si estás utilizando controles deslizantes intermitentes, barras de progreso animadas, gifs o cualquier otro elemento que parpadee, asegúrate de que no parpadee más de dos veces por segundo. De lo contrario, la experiencia del usuario se verá dañada de forma considerable.

#29 Usa la función de autocompletar

Los navegadores web como Google Chrome o Firefox tienen desde hace un tiempo funciones integradas para cubrir formularios automáticamente. La información clásica (apellido, nombre, dirección, correo electrónico, etc.) se almacena en el navegador y los usuarios pueden completar los formularios con un solo clic.

Para que esta función funcione, las etiquetas de tus formularios deben ser claras: nombre, apellidos, dirección, correo electrónico, etc. La funcionalidad de autocompletar se basa en esas etiquetas y en los marcadores de posición. Emplea etiquetas sencillas, fácilmente reconocibles para los internautas… ¡pero también para los navegadores!

#30 Ofrece preguntas/etapas adicionales para los más motivados

Ya hemos visto que tu formulario web debe contener la menor cantidad de campos posible. Debes ir a lo esencial, directo al grano. Sin embargo, también puede haber usuarios que estén dispuestos a dar más información: ¿qué hacer para no desaprovecharlo? Una solución es ofrece pasos opcionales en el formulario, lo que por supuesto implica optar por un formulario en varias etapas. La idea es sencilla: ofrecer a los internautas que lo deseen uno o dos pasos adicionales.

#31 Optimiza la velocidad de carga del formulario

La velocidad de carga es uno de los elementos más importantes de la experiencia del usuario. Un sitio que sea demasiado lento para cargar no puede proporcionar una buena experiencia de usuario, por mucho que se apliquen todas las demás buenas prácticas. Lo mismo ocurre con un formulario. Cada vez que Amazon logra aumentar su velocidad de carga en 100 milisegundos, consigue un 1% más de ingresos. ¡Para aumentar la conversión de tus formularios web, optimiza la velocidad de carga de tu sitio web!

32. Evita usar la función de «avance automático»

La función de «avance automático» te permite pasar de un campo a otro automáticamente. Esto se usa a menudo para la fecha de nacimiento, por ejemplo: cambia automáticamente del día al mes y al año a medida que le usuario completa los campos. Esta no suele ser una función esperada por los usuarios en general, y tiende a generar confusión (la gente está acostumbrada a usar el ratón o la tecla «TAB» para pasar de un campo a otro).

#33 Usa elementos visuales e iconos para que el formulario sea más intuitivo

Nuestro cerebro analiza las imágenes mucho más rápido que los textos. Para que tus formularios web se cubran más rápido, y por tanto mejore la experiencia de usuario, no está de más integrar en tus formularios señales visuales de colores o iconos. Aquí tienes un ejemplo (Comparethemarket):

Gestión de errores de validación y escritura en el diseño de formularios web

#34 No uses un sistema de validación de preguntas demasiado rígido

Evita utilizar un sistema de validación demasiado complejo. Por ejemplo, el usuario no debería estar obligado a introducir su número de teléfono con prefijo internacional en el formulario (+34654545387) para que sea validado. De la misma forma, si alguien necesita introducir un número extranjero que incluya este prefijo, también debe poder hacerlo, aunque la audiencia objetivo pertenezca a un solo país. Esto implica crear reglas de programación flexibles, que validen varios formatos de respuesta. Como alternativa, utiliza placeholders para especificar el formato requerido de la respuesta.

#35 No pidas a la gente que confirme su email o contraseña dos veces

Esto ralentiza a los usuarios y les exige un esfuerzo adicional. Si estás utilizando un sistema de confirmación de dirección de correo electrónico o contraseña en el diseño de formularios web, es mejor utilizar un icono o casilla de verificación que permita mostrar la contraseña para que el usuario pueda verificar que la ha escrito correctamente.

#36 Asegúrate de que la validación aparezca justo a la derecha del campo

Si utilizas un sistema de validación, debes asegurarte de que el mensaje de error aparezca a la derecha del campo justo después* de introducir el campo en cuestión. En ningún caso debes esperar a que el usuario envíe el formulario para notificar el error.

* «Después» y no «durante»: el mensaje no debe mostrarse mientras el usuario está escribiendo el texto, sino unos microsegundos después.

Confianza y credibilidad en el diseño de formularios web

#37 Usa un diseño de calidad

Está probado que las personas tienen más confianza en los formularios web (o sitios web en general) con un buen diseño. Cuida el diseño y la estética de tu formulario web para inspirar confianza a tus usuarios y convencerlos de que lo cubran.

#38 Anticipa las preguntas de los internautas al inicio del formulario

Cuando los usuarios de Internet se ven frente a un formulario, pueden surgirles varias dudas en su mente: ¿cuánto tiempo tardaré en completar el formulario?, ¿tendré que introducir mis datos bancarios?, ¿contactará un vendedor conmigo después de enviar el formulario? No ignores ni disimules estas cuestiones: respóndelas al inicio del formulario para romper barreras y general confianza. Ejemplo (Mailjet):

#39 Muestra pruebas sociales junto al formulario

Usar frases como «adoptado por más de 50 000 usuarios» o resaltar los testimonios de los clientes junto al formulario tiene un poder persuasivo muy fuerte, genera confianza y ayuda a convencer a los prospectos para que completen tu formulario.

#40 Utiliza los símbolos de seguridad con precaución

La gente tiende a asociar los símbolos de seguridad con los procesos de compra en línea. Su presencia en el formulario puede desanimar a algunos usuarios, que pueden imaginar que tendrán que efectuar algún pago. Realiza pruebas A/B para determinar si este tipo de símbolos es relevante o no.

#41 Coloca un chat en vivo o la información de contacto junto al formulario

Aunque tu formulario sea fácil de completar y, en principio, no vaya a suponer obstáculos para los usuarios, siempre es buena idea mostrar la información de contacto cerca, para que el usuario pueda efectuar preguntas antes de enviar el formulario. Si la información solicitada en el formulario es compleja, esta técnica es muy potente para optimizar la conversión. Ejemplo (Mailfy):

Formularios en varias etapas e indicadores de progresión

#42 Cuando se trata de un formulario en varias etapas, muestra siempre una barra de progreso

La barra de progreso anima a los usuarios a completar el formulario y les permite tener una idea clara de la longitud del formulario. El uso de una barra de progreso animada (como en el sitio de Leadformly) aumenta aún más el rendimiento.

#43 Optimiza la velocidad de transición

A veces, algunos formularios pasan demasiado rápido de un paso a otro. Los usuarios pueden hacer clic en el botón «Siguiente» dejando información incompleta o sin darse cuenta de lo que realmente debían responder.

Paradójicamente, esto puede resultar contraintuitivo. Es cierto que «optimizar la velocidad» significa principalmente acelerarla. Pero la experiencia prueba que pasar demasiado rápido de una etapa a otra puede afectar negativamente a la conversión. Por tanto, es necesario encontrar un equilibrio óptimo.

#44 Utiliza una señalización clara

Una barra de progreso no es suficiente por sí sola. También debe mostrar el número total de pasos y el paso en el que se encuentra actualmente el usuario. Ejemplo (BrokeNotes):

Botones y llamadas a la acción (CTA) en el diseño de formularios web

#45 Las llamadas a la acción deben generar ganas en el usuario

De forma predeterminada, muchos formularios usan llamadas a la acción genéricos, como «Finalizar» o «Enviar». Evita usar este tipo de CTA y reemplázalas por llamadas a la acción que correspondan con lo que el usuario quiere obtener después de completar el formulario. La estructura del mensaje debe ser «Quiero + CTA», no necesariamente de forma literal, pero sí formando una oración coherente. Por ejemplo: Pedir una cita, Obtener el ebook, Descargar el software, etc.

#46 Las llamadas a la acción deben destacar

Tus llamadas a la acción deben resaltar para captar la atención del visitante con facilidad. Para conseguirlo, debes elegir un color que contraste el color de fondo, una posición y una forma.

#47 Utiliza llamadas a la acción del mismo tamaño que los campos

Es efectivo usar llamadas a la acción que replican el mismo ancho que los campos de tu formulario, pero usan un color que contrasta fuertemente con ellos. Esto le permite resaltar mejor los CTA y aumentar la superficie de clic.

Ejemplo (Sendinblue, ahora Brevo):

#48 Evita usar los botones «Cancelar» o similares

A menudo hay un botón «Cancelar» al lado del botón «Siguiente». Debes tener cuidado al usarlos o situarlos, ya pueden contribuir a que los usuarios abandonen el formulario, o incluso corres el riesgo de que los usuarios hagan clic por error en «Cancelar» en lugar de «Siguiente» y pierdan algunos de los datos que ya han introducid. Debes evitar a toda costa que esto ocurra.

#49 El orden de las preguntas debe seguir una secuencia lógica

Al solicitar información para una plataforma de pagos, por ejemplo, recuerda solicitar la información en el mismo orden en que aparece en la tarjeta bancaria (número, titular, fecha de caducidad, código de seguridad).

#50 No pongas textos legales demasiado complicados cerca de los botones de llamada a la acción

Mantén los textos legales lo más concisos posible, un poco alejados de las CTA. En el pie de página puedes enlazar el aviso legal de tu sitio web.

#51 No fuerces a los usuarios a suscribirse a tu lista de correo

Por ejemplo, verifica que la casilla «Quiero suscribirme a la newsletter» no esté marcada por defecto. Los usuarios pueden interpretar que los estás forzando y se verán obligados a desmarcar la casilla si no desean suscribirse a tu lista de correo. Si la dejan marcada sin darse cuenta y empiezan a recibir tus emails sin haberlo solicitado, la experiencia del usuario con tu marca será aún peor.

#52 Explica con claridad lo que sucederá después de hacer clic en el botón «Enviar»

¿Qué sucede después de hacer clic en el botón «Enviar»? ¿Cuáles son los pasos que seguir? ¿Cuánto tiempo tendrá que esperar el usuario antes de poder usar el servicio? ¿Es necesario preparar algo más? Debe explicar sin ambigüedades lo que sucederá después de enviar el formulario, con una frase sobre el botón o al lado de él. Lo ideal es redirigir a las personas que cubrieron el formulario a una página que comunique claramente los próximos pasos a seguir.

#53 El botón «Enviar» solo se puede pulsar una vez

Configura el botón «Enviar» para que solo se pueda hacer clic en él una vez. Esto evita envíos dobles y proporciona una señal adicional al usuario de que su formulario se ha completado con éxito, lo que reforzará su confianza.

Diseño de formularios web para móviles

#55 Utiliza las funciones nativas de los dispositivos móviles (cámara, geolocalización, etc.) para simplificar las tareas

Para facilitar la navegación en el móvil, utiliza las funcionalidades de los dispositivos móviles como la cámara o la geolocalización. Por ejemplo, si necesitas una foto de un documento de identidad, ofrece al usuario la posibilidad tomar una foto con su dispositivo. Esto facilitará la tarea y la experiencia de usuario.

#56 Los campos y botones deben tener al menos 48 píxeles de alto

¿Por qué? ¡Para adaptarse al tamaño del dedo índice que se utiliza para tocar la pantalla!

#57 La tipografía de las etiquetas y los placeholders debe tener más de 16 píxeles

En este caso, esta buena práctica te permite adaptarte a la vista de las personas que completan tu formulario. Por debajo de este tamaño, la lectura puede volverse difícil, tediosa y hacer que algunos usuarios desistan.

57 buenas prácticas… y seguro que nos dejamos alguna en el tintero. Un diseño de formularios web óptimo no se consigue de un día para otro: se trata de un proceso continuo de mejora. Trabajar bien tus formularios web siempre ha de formar parte de tu lista de prioridades, porque de ellos depende en gran medida la tasa de conversión de tu web.