<\/a>Dise\u00f1o de formularios web y estructura: reglas generales<\/h2>\n#1 Usa formularios web estructurados en varias etapas (multietapa)<\/h3>\n
Los formularios web divididos en varios pasos \u2014cada uno con su propia pantalla\u2014 generalmente suelen brindar tasas de conversi\u00f3n m\u00e1s altas, independientemente del prop\u00f3sito del formulario o el sector de actividad.<\/p>\n
![\"Dise\u00f1o](\"\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/diseno-formularios-web-varias-etapas-1024x602.png\")
<\/p>\n
\u00bfPor qu\u00e9 funcionan mejor los cuestionarios en varias etapas? Hay tres razones principales:<\/p>\n
\n- Un formulario web en varias etapas es menos intimidante para el usuario, porque no todas las preguntas se muestran al mismo tiempo.<\/li>\n
- Las os datos personales (correo electr\u00f3nico, tel\u00e9fono, 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\u00e9 lo reclaman y tiene m\u00e1s confianza para facilitar sus datos de contacto en el paso final.<\/li>\n
- Mostrar una barra de progreso tiene un efecto motivador en el usuario.<\/li>\n<\/ul>\n
#2 Menos es m\u00e1s<\/em>: elimina los campos del formulario web que no sean imprescindibles<\/h3>\n\u00bfSab\u00edas que Expedia perdi\u00f3 12 millones de d\u00f3lares en un a\u00f1o<\/a> por el hecho de incluir una pregunta adicional en su formulario de reserva? No es la \u00fanica empresa que ha llegado a esa misma conclusi\u00f3n: est\u00e1 demostrado que una sola pregunta adicional puede hacer que la tasa de conversi\u00f3n del cuestionario baje. Cada pregunta que a\u00f1ades tiene un impacto negativo en la conversi\u00f3n.<\/p>\nLos formularios que convierten mejor \u2014asumiendo que el resto condiciones permanecen invariables\u2014 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\u00f3sito.<\/p>\n
![\"Rendimiento](\"\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/diseno-formularios-web-limitar-campos.jpg\")
<\/p>\n
#3 Usa campos de visualizaci\u00f3n condicionales<\/h3>\n
El uso de campos de visualizaci\u00f3n condicionales reduce el tama\u00f1o 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\u00f3n 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\u00e1 respondiendo.<\/p>\n
#4 Muestra las etiquetas de preguntas sobre los campos de texto<\/h3>\n
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\u00f3n: este dise\u00f1o requiere un movimiento de los ojos m\u00e1s corto, como se muestra en el siguiente diagrama.<\/p>\n
![\"Orden](\"\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/diseno-formularios-web-texto-alineado.jpg\")
<\/p>\n
#5 Usa formularios de una sola columna<\/h3>\n
Del mismo modo, los estudios sobre el an\u00e1lisis del movimiento ocular han demostrado que es preferible utilizar un dise\u00f1o de una sola columna que un dise\u00f1o de dos columnas. La \u00fanica excepci\u00f3n a esta regla es cuando se pregunta a los internautas por fechas (d\u00edas, meses, a\u00f1os) o periodos (horas, minutos, etc.). En este caso, puede ser pertinente colocar las preguntas una al lado de la otra.<\/p>\n
#6 Dale a la gente una raz\u00f3n para completar tu formulario<\/h3>\n
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\u00e1ndoles los beneficios que pueden obtener de \u00e9l.<\/p>\n
![\"Dise\u00f1o](\"\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/diseno-formularios-web-betting-expert.jpg\")
<\/p>\n
Betting Expert logr\u00f3 obtener un 31,54% m\u00e1s de respuestas cambiando el t\u00edtulo del formulario (\u00ab\u00danete a BettingExpert\u00bb ==> \u00abObt\u00e9n consejos para apuestas gratis\u00bb). As\u00ed que ya sabes, \u00a1recuerda elegir bien el t\u00edtulo del formulario!<\/p>\n
#7 Agrupa las preguntas relacionadas en secciones o etapas<\/h3>\n
Si est\u00e1s haciendo m\u00e1s de 6 preguntas, agrupar las preguntas de tu formulario en secciones o etapas (ver #1) ayuda a darle al formulario una estructura m\u00e1s clara y reduce el esfuerzo del usuario.<\/p>\n
<\/a>Tipos de campos y preguntas en el dise\u00f1o de formularios web<\/h2>\n#8 Minimiza la cantidad de clics necesarios<\/h3>\n
Cuantos menos clics tenga que hacer el usuario, m\u00e1s probable es que realice la acci\u00f3n deseada. Microsoft pudo corroborar esto. Antes, hac\u00eda falta tres clics para apagar la computadora PC. Ahora solo un clic es suficiente. La firma de Mountain View comprob\u00f3 que, gracias a este peque\u00f1o cambio, sus clientes apagaban sus ordenadores con mayor facilidad. Conclusi\u00f3n: trata de reducir la cantidad de clics requeridos para realizar las acciones lo m\u00e1ximo posible.<\/p>\n
![\"Apagar](\"\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/diseno-formularios-web-clics-apagar-pc.png\")
<\/p>\n
#9 Usa valores predeterminados \u00fatiles<\/h3>\n
Por ejemplo, si est\u00e1s solicitando el n\u00famero de tel\u00e9fono o el pa\u00eds, sugerir prefijos internacionales de tel\u00e9fono o pa\u00eds (o regi\u00f3n) seg\u00fan la direcci\u00f3n IP del usuario facilita completar el formulario. Facilita las respuestas lo m\u00e1ximo posible con la informaci\u00f3n que ya tienes.<\/p>\n
#10 Usa botones de radio, casillas de verificaci\u00f3n y men\u00fas desplegables cuando sea necesario<\/h3>\n
Los botones de opci\u00f3n o botones de radio deben usarse en el dise\u00f1o de formularios web cuando hay m\u00faltiples opciones de respuesta y solo se puede elegir una \u00fanica respuesta. Las casillas de verificaci\u00f3n, por el contrario, deben elegirse cuando se pueden marcar varias respuestas. En todos los casos, los botones de opci\u00f3n y las casillas son preferibles a los men\u00fas desplegables, que entorpecen la experiencia del usuario porque complican el proceso de finalizaci\u00f3n. \u00dasalos solamente cuando haya m\u00e1s de 6 o 7 opciones de respuesta posibles.<\/p>\n
#11 Alinea los botones de opci\u00f3n verticalmente<\/h3>\n
Es muy importante alinear verticalmente los botones o recuadros de opci\u00f3n y priorizar la alineaci\u00f3n vertical sobre la horizontal.<\/p>\n
![\"Alineaci\u00f3n](\"\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/diseno-formularios-web-botones-opcion-1-1024x908.png\")
<\/p>\n
#12 No uses campos separados para pedir el n\u00famero de tel\u00e9fono y la fecha de nacimiento<\/h3>\n
Los campos separados obligan a los usuarios a hacer clic o usar la tecla \u00abTAB\u00bb para pasar de un campo a otro. Lo mejor es tener un \u00fanico campo formateado correctamente para introducir datos como el tel\u00e9fono y la fecha de nacimiento.<\/p>\n
#13 Justifica con claridad las solicitudes de informaci\u00f3n confidencial<\/h3>\n
Las personas est\u00e1n cada vez m\u00e1s preocupadas por la protecci\u00f3n de la privacidad y los datos personales en Internet. Si quieres solicitar datos personales (tel\u00e9fono, correo electr\u00f3nico, salario, profesi\u00f3n, etc.), no escatimes en explicar con claridad por qu\u00e9 necesitas que faciliten este tipo de informaci\u00f3n.<\/p>\n
# 14 Usa una funci\u00f3n de autocompletar c\u00f3digo postal para solicitar la direcci\u00f3n<\/h3>\n
Cuando solicitas la direcci\u00f3n en un formulario, es recomendable integrar una funci\u00f3n de autocompletar para facilitar la inserci\u00f3n de datos. Ejemplo: proponer la ciudad cuando el internauta ha introducido su c\u00f3digo postal.<\/p>\n
# 15 Utiliza placeholders<\/em> cuando est\u00e9 justificado<\/h3>\nUn placeholder<\/em> o marcador de posici\u00f3n 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 \u00abNombre\u00bb, por ejemplo, no es necesario incluir un placeholder<\/em>.<\/p>\n![\"\"](\"\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/newsletter-sendinblue.jpg\")
<\/p>\n
#16 Muestra siempre una etiqueta delante de los campos del formulario<\/h3>\n
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\u00e1s preguntando.<\/p>\n
La captura de pantalla anterior (Brevo<\/a>) se salta esta regla usando un placeholder. Pueden hacerlo porque se trata solo un campo. Cuando hay varios, no ser\u00e1 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.<\/p>\nComo \u00faltimo recurso, puedes usar etiquetas \u00abinline\u00bb, como en el siguiente ejemplo (BounceExchange<\/a>), que es una t\u00e9cnica h\u00edbrida, a medio camino entre la etiqueta y el placeholder<\/em>.<\/p>\n![\"Dise\u00f1o](\"\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/diseno-formularios-web-etiqueta.jpg\")
<\/p>\n
#17 Integra texto predictivo de campos con muchas opciones predefinidas<\/h3>\n
Cuando le pides al internauta que seleccione su pa\u00eds, sus aficiones o cualquier otra informaci\u00f3n 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\u00f1o de formularios web ayuda al internauta a avanzar m\u00e1s r\u00e1pido.<\/p>\n
![\"Texto](\"\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/diseno-formularios-web-texto-predictivo.png\")
<\/p>\n
#18 Indica con claridad las preguntas opcionales<\/h3>\n
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\u00e1ndo se trata de una pregunta opcional para no entorpecer la experiencia de los usuarios que completan el formulario.<\/p>\n
#19 Usa im\u00e1genes para dar atractivo al formulario<\/h3>\n
Cuando tenga sentido, utiliza iconos en los que el usuario puede hacer clic para que completar el formulario web sea m\u00e1s intuitivo y f\u00e1cil. Cuando se trata de la experiencia del usuario, las im\u00e1genes allanan el camino de forma considerable.<\/p>\n
![\"Iconos](\"\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/diseno-formularios-web-imagenes.png\")
<\/p>\n
# 20 \u00bfY si dejas el n\u00famero de tel\u00e9fono opcional?<\/h3>\n
La gente es cada vez m\u00e1s reticente a facilitar su n\u00famero de tel\u00e9fono. Si no es imprescindible para ti, no lo pidas o, si lo haces, m\u00e1rcalo como campo opcional. Un estudio realizado por Clicktale<\/a> demostr\u00f3 que, al no obligar a dar el n\u00famero de tel\u00e9fono, \u00a1se reduce la tasa de abandono del formulario del 39% al 4%!<\/p>\n#21 Adapta el tama\u00f1o de los campos al de las respuestas esperadas<\/h3>\n
El tama\u00f1o de los campos de tu formulario web debe ser coherente con la cantidad de texto que esperas del usuario.<\/p>\n
<\/a>Accesibilidad y facilidad de uso en el dise\u00f1o de formularios web<\/h2>\n#22 Evita usar captchas<\/h3>\n
Un estudio de la Universidad de Stanford (descargable en pdf<\/a>) demostr\u00f3 que los captchas tienen un impacto negativo significativo en la tasa de conversi\u00f3n de los formularios web, ya que aumentan el tiempo de finalizaci\u00f3n del formulario. Si quieres evitar el spam, es mejor usar una herramienta de detecci\u00f3n autom\u00e1tica de spam como Akismet<\/a> (plugin de WordPress<\/a><\/strong>) o crear un honeypot<\/em> usando campos ocultos. Los captchas deber\u00edan ser el \u00faltimo recurso.<\/p>\n#23 No lo f\u00edes todo a los colores para comunicar un mensaje<\/h3>\n
Cuando muestres mensajes de error o validaci\u00f3n, no uses solo el color verde o el color rojo. Tambi\u00e9n necesitas un texto o un icono (una \u00abv\u00bb para mensajes de validaci\u00f3n y una cruz para mensajes de error, por ejemplo) para que tu mensaje sea claro para el usuario de Internet.<\/p>\n
#24 Aseg\u00farate de que se puede usar la tecla \u00abTAB\u00bb para navegar por el formulario<\/h3>\n
Muchas personas usan la tecla \u00abTAB\u00bb 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\u00f3n sea compatible con tus formularios.<\/p>\n
#25 Ofrece explicaciones para preguntas que puedan ser dif\u00edciles de entender<\/h3>\n
A veces necesitamos efectuar preguntas complejas en los formularios. Por ejemplo, el dise\u00f1o de formularios web de las compa\u00f1\u00edas de seguros a menudo requiere integrar informaci\u00f3n compleja. Si este tambi\u00e9n 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\u00ed tienes un ejemplo (ComparetheMarket.com<\/a>):<\/p>\n![\"Dise\u00f1o](\"\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/diseno-formularios-web-explicaciones.jpg\")
<\/p>\n
#26 Aseg\u00farate de que el formulario funciona en los principales navegadores\/dispositivos<\/h3>\n
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\u00e1s de la mitad de la navegaci\u00f3n por Internet de hoy en d\u00eda se realiza desde un dispositivo m\u00f3vil. Por tanto, recuerda verificar bien este aspecto antes de integrar el formulario en tu sitio web.<\/p>\n
#27 Aseg\u00farate de que el formulario sea legible con poca o con mucha luz<\/h3>\n
Algunos internautas posiblemente est\u00e9n en la calle cuando accedan a tu formulario, desde su dispositivo m\u00f3vil. Aseg\u00farate de que las etiquetas y los campos del formulario tengan un buen contraste con el fondo de la p\u00e1gina para que se puedan leer tanto con poca luminosidad como con mucha.<\/p>\n
#28 Comprueba que ning\u00fan elemento parpadee m\u00e1s de dos veces por segundo<\/h3>\n
Si est\u00e1s utilizando controles deslizantes intermitentes, barras de progreso animadas, gifs o cualquier otro elemento que parpadee, aseg\u00farate de que no parpadee m\u00e1s de dos veces por segundo. De lo contrario, la experiencia del usuario se ver\u00e1 da\u00f1ada de forma considerable.<\/p>\n
#29 Usa la funci\u00f3n de autocompletar<\/h3>\n
Los navegadores web como Google Chrome o Firefox tienen desde hace un tiempo funciones integradas para cubrir formularios autom\u00e1ticamente. La informaci\u00f3n cl\u00e1sica (apellido, nombre, direcci\u00f3n, correo electr\u00f3nico, etc.) se almacena en el navegador y los usuarios pueden completar los formularios con un solo clic.<\/p>\n
Para que esta funci\u00f3n funcione, las etiquetas de tus formularios deben ser claras: nombre, apellidos, direcci\u00f3n, correo electr\u00f3nico, etc. La funcionalidad de autocompletar se basa en esas etiquetas y en los marcadores de posici\u00f3n. Emplea etiquetas sencillas, f\u00e1cilmente reconocibles para los internautas\u2026 \u00a1pero tambi\u00e9n para los navegadores!<\/p>\n
![\"Autocompletar](\"\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/diseno-formularios-web-autocompletar.png\")
<\/p>\n
#30 Ofrece preguntas\/etapas adicionales para los m\u00e1s motivados<\/h3>\n
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\u00e9n puede haber usuarios que est\u00e9n dispuestos a dar m\u00e1s informaci\u00f3n: \u00bfqu\u00e9 hacer para no desaprovecharlo? Una soluci\u00f3n 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.<\/p>\n
#31 Optimiza la velocidad de carga del formulario<\/h3>\n
La velocidad de carga es uno de los elementos m\u00e1s 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\u00e1s buenas pr\u00e1cticas. Lo mismo ocurre con un formulario. Cada vez que Amazon logra aumentar su velocidad de carga en 100 milisegundos, consigue un 1% m\u00e1s de ingresos. \u00a1Para aumentar la conversi\u00f3n de tus formularios web, optimiza la velocidad de carga de tu sitio web!<\/p>\n
32. Evita usar la funci\u00f3n de \u00abavance autom\u00e1tico\u00bb<\/h3>\n
La funci\u00f3n de \u00abavance autom\u00e1tico\u00bb te permite pasar de un campo a otro autom\u00e1ticamente. Esto se usa a menudo para la fecha de nacimiento, por ejemplo: cambia autom\u00e1ticamente del d\u00eda al mes y al a\u00f1o a medida que le usuario completa los campos. Esta no suele ser una funci\u00f3n esperada por los usuarios en general, y tiende a generar confusi\u00f3n (la gente est\u00e1 acostumbrada a usar el rat\u00f3n o la tecla \u00abTAB\u00bb para pasar de un campo a otro).<\/p>\n
#33 Usa elementos visuales e iconos para que el formulario sea m\u00e1s intuitivo<\/h3>\n
Nuestro cerebro analiza las im\u00e1genes mucho m\u00e1s r\u00e1pido que los textos. Para que tus formularios web se cubran m\u00e1s r\u00e1pido, y por tanto mejore la experiencia de usuario, no est\u00e1 de m\u00e1s integrar en tus formularios se\u00f1ales visuales de colores o iconos. Aqu\u00ed tienes un ejemplo (Comparethemarket):<\/p>\n
![\"Dise\u00f1o](\"\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/diseno-formularios-web-iconos.jpg\")
<\/p>\n
<\/a>Gesti\u00f3n de errores de validaci\u00f3n y escritura en el dise\u00f1o de formularios web<\/h2>\n#34 No uses un sistema de validaci\u00f3n de preguntas demasiado r\u00edgido<\/h3>\n
Evita utilizar un sistema de validaci\u00f3n demasiado complejo. Por ejemplo, el usuario no deber\u00eda estar obligado a introducir su n\u00famero de tel\u00e9fono con prefijo internacional en el formulario (+34654545387) para que sea validado. De la misma forma, si alguien necesita introducir un n\u00famero extranjero que incluya este prefijo, tambi\u00e9n debe poder hacerlo, aunque la audiencia objetivo pertenezca a un solo pa\u00eds. Esto implica crear reglas de programaci\u00f3n flexibles, que validen varios formatos de respuesta. Como alternativa, utiliza placeholders para especificar el formato requerido de la respuesta.<\/p>\n
#35 No pidas a la gente que confirme su email o contrase\u00f1a dos veces<\/h3>\n
Esto ralentiza a los usuarios y les exige un esfuerzo adicional. Si est\u00e1s utilizando un sistema de confirmaci\u00f3n de direcci\u00f3n de correo electr\u00f3nico o contrase\u00f1a en el dise\u00f1o de formularios web, es mejor utilizar un icono o casilla de verificaci\u00f3n que permita mostrar la contrase\u00f1a para que el usuario pueda verificar que la ha escrito correctamente.<\/p>\n
![\"Contrase\u00f1a](\"\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/diseno-formularios-web-contrasena-oculta.png\")
<\/p>\n
#36 Aseg\u00farate de que la validaci\u00f3n aparezca justo a la derecha del campo<\/h3>\n
Si utilizas un sistema de validaci\u00f3n, debes asegurarte de que el mensaje de error aparezca a la derecha del campo justo despu\u00e9s<\/em>* de introducir el campo en cuesti\u00f3n. En ning\u00fan caso debes esperar a que el usuario env\u00ede el formulario para notificar el error.<\/p>\n* \u00abDespu\u00e9s\u00bb y no \u00abdurante\u00bb: el mensaje no debe mostrarse mientras el usuario est\u00e1 escribiendo el texto, sino unos microsegundos despu\u00e9s.<\/p>\n
<\/a>Confianza y credibilidad en el dise\u00f1o de formularios web<\/h2>\n#37 Usa un dise\u00f1o de calidad<\/h3>\n
Est\u00e1 probado que las personas tienen m\u00e1s confianza en los formularios web (o sitios web en general) con un buen dise\u00f1o. Cuida el dise\u00f1o y la est\u00e9tica de tu formulario web para inspirar confianza a tus usuarios y convencerlos de que lo cubran.<\/p>\n
#38 Anticipa las preguntas de los internautas al inicio del formulario<\/h3>\n
Cuando los usuarios de Internet se ven frente a un formulario, pueden surgirles varias dudas en su mente: \u00bfcu\u00e1nto tiempo tardar\u00e9 en completar el formulario?, \u00bftendr\u00e9 que introducir mis datos bancarios?, \u00bfcontactar\u00e1 un vendedor conmigo despu\u00e9s de enviar el formulario? No ignores ni disimules estas cuestiones: resp\u00f3ndelas al inicio del formulario para romper barreras y general confianza. Ejemplo (Mailjet<\/a>):<\/p>\n![\"Anticipaci\u00f3n](\"\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/diseno-formularios-web-respuestas-anticipadas.jpg\")
<\/p>\n
#39 Muestra pruebas sociales junto al formulario<\/h3>\n
Usar frases como \u00abadoptado por m\u00e1s de 50 000 usuarios\u00bb 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.<\/p>\n
#40 Utiliza los s\u00edmbolos de seguridad con precauci\u00f3n<\/h3>\n
La gente tiende a asociar los s\u00edmbolos de seguridad con los procesos de compra en l\u00ednea. Su presencia en el formulario puede desanimar a algunos usuarios, que pueden imaginar que tendr\u00e1n que efectuar alg\u00fan pago. Realiza pruebas A\/B para determinar si este tipo de s\u00edmbolos es relevante o no.<\/p>\n
![\"S\u00edmbolo](\"\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/diseno-formularios-web-simbolo-seguridad.png\")
<\/p>\n
#41 Coloca un chat en vivo o la informaci\u00f3n de contacto junto al formulario<\/h3>\n
Aunque tu formulario sea f\u00e1cil de completar y, en principio, no vaya a suponer obst\u00e1culos para los usuarios, siempre es buena idea mostrar la informaci\u00f3n de contacto cerca, para que el usuario pueda efectuar preguntas antes de enviar el formulario. Si la informaci\u00f3n solicitada en el formulario es compleja, esta t\u00e9cnica es muy potente para optimizar la conversi\u00f3n. Ejemplo (Mailfy<\/a>):<\/p>\n![\"Formulario](\"\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/mailfy-formulario-chat-1024x510.jpg\")
<\/p>\n
<\/a>Formularios en varias etapas e indicadores de progresi\u00f3n<\/h2>\n#42 Cuando se trata de un formulario en varias etapas, muestra siempre una barra de progreso<\/h3>\n
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<\/a>) aumenta a\u00fan m\u00e1s el rendimiento.<\/p>\n#43 Optimiza la velocidad de transici\u00f3n<\/h3>\n
A veces, algunos formularios pasan demasiado r\u00e1pido de un paso a otro. Los usuarios pueden hacer clic en el bot\u00f3n \u00abSiguiente\u00bb dejando informaci\u00f3n incompleta o sin darse cuenta de lo que realmente deb\u00edan responder.<\/p>\n
Parad\u00f3jicamente, esto puede resultar contraintuitivo. Es cierto que \u00aboptimizar la velocidad\u00bb significa principalmente acelerarla. Pero la experiencia prueba que pasar demasiado r\u00e1pido de una etapa a otra puede afectar negativamente a la conversi\u00f3n. Por tanto, es necesario encontrar un equilibrio \u00f3ptimo.<\/p>\n
#44 Utiliza una se\u00f1alizaci\u00f3n clara<\/h3>\n
Una barra de progreso no es suficiente por s\u00ed sola. Tambi\u00e9n debe mostrar el n\u00famero total de pasos y el paso en el que se encuentra actualmente el usuario. Ejemplo (BrokeNotes<\/a>):<\/p>\n![\"Dise\u00f1o](\"\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/diseno-formularios-web-senalizacion.png\")
<\/p>\n
<\/a>Botones y llamadas a la acci\u00f3n (CTA) en el dise\u00f1o de formularios web<\/h2>\n#45 Las llamadas a la acci\u00f3n deben generar ganas en el usuario<\/h3>\n
De forma predeterminada, muchos formularios usan llamadas a la acci\u00f3n gen\u00e9ricos, como \u00abFinalizar\u00bb o \u00abEnviar\u00bb. Evita usar este tipo de CTA y reempl\u00e1zalas por llamadas a la acci\u00f3n que correspondan con lo que el usuario quiere obtener despu\u00e9s de completar el formulario. La estructura del mensaje debe ser \u00abQuiero + CTA\u00bb, no necesariamente de forma literal, pero s\u00ed formando una oraci\u00f3n coherente. Por ejemplo: Pedir una cita, Obtener el ebook, Descargar el software, etc.<\/p>\n
#46 Las llamadas a la acci\u00f3n deben destacar<\/h3>\n
Tus llamadas a la acci\u00f3n deben resaltar para captar la atenci\u00f3n del visitante con facilidad. Para conseguirlo, debes elegir un color que contraste el color de fondo, una posici\u00f3n y una forma.<\/p>\n
#47 Utiliza llamadas a la acci\u00f3n del mismo tama\u00f1o que los campos<\/h3>\n
Es efectivo usar llamadas a la acci\u00f3n 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.<\/p>\n
Ejemplo (Sendinblue, ahora Brevo):<\/p>\n
![\"CTA](\"\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/diseno-formularios-web-ancho-cta-1024x777.jpg\")
<\/p>\n
#48 Evita usar los botones \u00abCancelar\u00bb o similares<\/h3>\n
A menudo hay un bot\u00f3n \u00abCancelar\u00bb al lado del bot\u00f3n \u00abSiguiente\u00bb. 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 \u00abCancelar\u00bb en lugar de \u00abSiguiente\u00bb y pierdan algunos de los datos que ya han introducid. Debes evitar a toda costa que esto ocurra.<\/p>\n
#49 El orden de las preguntas debe seguir una secuencia l\u00f3gica<\/h3>\n
Al solicitar informaci\u00f3n para una plataforma de pagos<\/a><\/strong>, por ejemplo, recuerda solicitar la informaci\u00f3n en el mismo orden en que aparece en la tarjeta bancaria (n\u00famero, titular, fecha de caducidad, c\u00f3digo de seguridad).<\/p>\n#50 No pongas textos legales demasiado complicados cerca de los botones de llamada a la acci\u00f3n<\/h3>\n
Mant\u00e9n los textos legales lo m\u00e1s concisos posible, un poco alejados de las CTA. En el pie de p\u00e1gina puedes enlazar el aviso legal de tu sitio web<\/a><\/strong>.<\/p>\n#51 No fuerces a los usuarios a suscribirse a tu lista de correo<\/h3>\n
Por ejemplo, verifica que la casilla \u00abQuiero suscribirme a la newsletter\u00bb no est\u00e9 marcada por defecto. Los usuarios pueden interpretar que los est\u00e1s forzando y se ver\u00e1n 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\u00e1 a\u00fan peor.<\/p>\n
#52 Explica con claridad lo que suceder\u00e1 despu\u00e9s de hacer clic en el bot\u00f3n \u00abEnviar\u00bb<\/h3>\n
\u00bfQu\u00e9 sucede despu\u00e9s de hacer clic en el bot\u00f3n \u00abEnviar\u00bb? \u00bfCu\u00e1les son los pasos que seguir? \u00bfCu\u00e1nto tiempo tendr\u00e1 que esperar el usuario antes de poder usar el servicio? \u00bfEs necesario preparar algo m\u00e1s? Debe explicar sin ambig\u00fcedades lo que suceder\u00e1 despu\u00e9s de enviar el formulario, con una frase sobre el bot\u00f3n o al lado de \u00e9l. Lo ideal es redirigir a las personas que cubrieron el formulario a una p\u00e1gina que comunique claramente los pr\u00f3ximos pasos a seguir.<\/p>\n
#53 El bot\u00f3n \u00abEnviar\u00bb solo se puede pulsar una vez<\/h3>\n
Configura el bot\u00f3n \u00abEnviar\u00bb para que solo se pueda hacer clic en \u00e9l una vez. Esto evita env\u00edos dobles y proporciona una se\u00f1al adicional al usuario de que su formulario se ha completado con \u00e9xito, lo que reforzar\u00e1 su confianza.<\/p>\n
<\/a>Dise\u00f1o de formularios web para m\u00f3viles<\/h2>\n#55 Utiliza las funciones nativas de los dispositivos m\u00f3viles (c\u00e1mara, geolocalizaci\u00f3n, etc.) para simplificar las tareas<\/h3>\n
Para facilitar la navegaci\u00f3n en el m\u00f3vil, utiliza las funcionalidades de los dispositivos m\u00f3viles como la c\u00e1mara o la geolocalizaci\u00f3n. Por ejemplo, si necesitas una foto de un documento de identidad, ofrece al usuario la posibilidad tomar una foto con su dispositivo. Esto facilitar\u00e1 la tarea y la experiencia de usuario.<\/p>\n
#56 Los campos y botones deben tener al menos 48 p\u00edxeles de alto<\/h3>\n
\u00bfPor qu\u00e9? \u00a1Para adaptarse al tama\u00f1o del dedo \u00edndice que se utiliza para tocar la pantalla!<\/p>\n
#57 La tipograf\u00eda de las etiquetas y los placeholders debe tener m\u00e1s de 16 p\u00edxeles<\/h3>\n
En este caso, esta buena pr\u00e1ctica te permite adaptarte a la vista de las personas que completan tu formulario. Por debajo de este tama\u00f1o, la lectura puede volverse dif\u00edcil, tediosa y hacer que algunos usuarios desistan.<\/p>\n
57 buenas pr\u00e1cticas\u2026 y seguro que nos dejamos alguna en el tintero. Un dise\u00f1o de formularios web \u00f3ptimo no se consigue de un d\u00eda 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\u00f3n de tu web.<\/p>\n
<\/i>Para saber m\u00e1s<\/span>
\nDescubre otros recursos de Webolto que te pueden interesar:\n\n- 10 pasos para realizar una auditor\u00eda SEO y UX de tu web<\/a><\/li>\n
- Marketing automation: gu\u00eda completa para principiantes<\/a><\/li>\n
- Qu\u00e9 es el email marketing y cu\u00e1les son sus mejores pr\u00e1cticas<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Un buen dise\u00f1o de formularios web sirve para captar leads (clientes potenciales), enriquecer tus listas de correo electr\u00f3nico y obtener datos importantes sobre tus visitantes. En definitiva, desempe\u00f1an un papel clave en la conversi\u00f3n de tu sitio web. De ah\u00ed la importancia de cuidar su dise\u00f1o y formato. VentureHarbour public\u00f3 recientemente un art\u00edculo completo sobre […]<\/p>\n","protected":false},"author":5,"featured_media":2427,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[1],"tags":[],"acf":[],"yoast_head":"\n
57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web - Webolto<\/title>\n<meta name=\"description\" content=\"Listado completo de 57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web que repercuten en una mejora de la tasa de conversi\u00f3n.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web - Webolto\" \/>\n<meta property=\"og:description\" content=\"Listado completo de 57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web que repercuten en una mejora de la tasa de conversi\u00f3n.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Webolto\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-12T06:29:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-25T11:54:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/Diseno-de-formularios-web.png\" \/>\n\t<meta property=\"og:image:width\" content=\"470\" \/>\n\t<meta property=\"og:image:height\" content=\"353\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"pablo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"pablo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"23 minutos\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web - Webolto","description":"Listado completo de 57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web que repercuten en una mejora de la tasa de conversi\u00f3n.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/","og_locale":"es_ES","og_type":"article","og_title":"57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web - Webolto","og_description":"Listado completo de 57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web que repercuten en una mejora de la tasa de conversi\u00f3n.","og_url":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/","og_site_name":"Webolto","article_published_time":"2023-08-12T06:29:17+00:00","article_modified_time":"2023-09-25T11:54:45+00:00","og_image":[{"width":470,"height":353,"url":"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/Diseno-de-formularios-web.png","type":"image\/png"}],"author":"pablo","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"pablo","Tiempo de lectura":"23 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/#article","isPartOf":{"@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/"},"author":{"name":"pablo","@id":"https:\/\/www.webolto.com\/es\/#\/schema\/person\/c3c477651d75ca8a5be6b747ca815b30"},"headline":"57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web","datePublished":"2023-08-12T06:29:17+00:00","dateModified":"2023-09-25T11:54:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/"},"wordCount":4377,"commentCount":0,"publisher":{"@id":"https:\/\/www.webolto.com\/es\/#organization"},"image":{"@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/Diseno-de-formularios-web.png","articleSection":["Uncategorized"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/","url":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/","name":"57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web - Webolto","isPartOf":{"@id":"https:\/\/www.webolto.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/#primaryimage"},"image":{"@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/Diseno-de-formularios-web.png","datePublished":"2023-08-12T06:29:17+00:00","dateModified":"2023-09-25T11:54:45+00:00","description":"Listado completo de 57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web que repercuten en una mejora de la tasa de conversi\u00f3n.","breadcrumb":{"@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/#primaryimage","url":"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/Diseno-de-formularios-web.png","contentUrl":"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/Diseno-de-formularios-web.png","width":470,"height":353},{"@type":"BreadcrumbList","@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webolto.com\/es\/"},{"@type":"ListItem","position":2,"name":"57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web"}]},{"@type":"WebSite","@id":"https:\/\/www.webolto.com\/es\/#website","url":"https:\/\/www.webolto.com\/es\/","name":"Webolto","description":"Centro de recursos para creadores de sitios web","publisher":{"@id":"https:\/\/www.webolto.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webolto.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.webolto.com\/es\/#organization","name":"Webolto","url":"https:\/\/www.webolto.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.webolto.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2020\/05\/header-logo.png","contentUrl":"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2020\/05\/header-logo.png","width":3237,"height":667,"caption":"Webolto"},"image":{"@id":"https:\/\/www.webolto.com\/es\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.webolto.com\/es\/#\/schema\/person\/c3c477651d75ca8a5be6b747ca815b30","name":"pablo","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.webolto.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/fb5b832ff0cedd06a932e4d37a43108b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fb5b832ff0cedd06a932e4d37a43108b?s=96&d=mm&r=g","caption":"pablo"}}]}},"featured_image_src":"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/Diseno-de-formularios-web.png","featured_image_src_square":"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/Diseno-de-formularios-web.png","author_info":{"display_name":"pablo","author_link":"https:\/\/www.webolto.com\/es\/blog\/author\/pablo\/"},"_links":{"self":[{"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/posts\/2415"}],"collection":[{"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/comments?post=2415"}],"version-history":[{"count":0,"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/posts\/2415\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/media\/2427"}],"wp:attachment":[{"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/media?parent=2415"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/categories?post=2415"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/tags?post=2415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\n#2 Menos es m\u00e1s<\/em>: elimina los campos del formulario web que no sean imprescindibles<\/h3>\n\u00bfSab\u00edas que Expedia perdi\u00f3 12 millones de d\u00f3lares en un a\u00f1o<\/a> por el hecho de incluir una pregunta adicional en su formulario de reserva? No es la \u00fanica empresa que ha llegado a esa misma conclusi\u00f3n: est\u00e1 demostrado que una sola pregunta adicional puede hacer que la tasa de conversi\u00f3n del cuestionario baje. Cada pregunta que a\u00f1ades tiene un impacto negativo en la conversi\u00f3n.<\/p>\nLos formularios que convierten mejor \u2014asumiendo que el resto condiciones permanecen invariables\u2014 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\u00f3sito.<\/p>\n
<\/p>\n
#3 Usa campos de visualizaci\u00f3n condicionales<\/h3>\n
El uso de campos de visualizaci\u00f3n condicionales reduce el tama\u00f1o 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\u00f3n 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\u00e1 respondiendo.<\/p>\n
#4 Muestra las etiquetas de preguntas sobre los campos de texto<\/h3>\n
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\u00f3n: este dise\u00f1o requiere un movimiento de los ojos m\u00e1s corto, como se muestra en el siguiente diagrama.<\/p>\n
<\/p>\n
#5 Usa formularios de una sola columna<\/h3>\n
Del mismo modo, los estudios sobre el an\u00e1lisis del movimiento ocular han demostrado que es preferible utilizar un dise\u00f1o de una sola columna que un dise\u00f1o de dos columnas. La \u00fanica excepci\u00f3n a esta regla es cuando se pregunta a los internautas por fechas (d\u00edas, meses, a\u00f1os) o periodos (horas, minutos, etc.). En este caso, puede ser pertinente colocar las preguntas una al lado de la otra.<\/p>\n
#6 Dale a la gente una raz\u00f3n para completar tu formulario<\/h3>\n
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\u00e1ndoles los beneficios que pueden obtener de \u00e9l.<\/p>\n
<\/p>\n
Betting Expert logr\u00f3 obtener un 31,54% m\u00e1s de respuestas cambiando el t\u00edtulo del formulario (\u00ab\u00danete a BettingExpert\u00bb ==> \u00abObt\u00e9n consejos para apuestas gratis\u00bb). As\u00ed que ya sabes, \u00a1recuerda elegir bien el t\u00edtulo del formulario!<\/p>\n
#7 Agrupa las preguntas relacionadas en secciones o etapas<\/h3>\n
Si est\u00e1s haciendo m\u00e1s de 6 preguntas, agrupar las preguntas de tu formulario en secciones o etapas (ver #1) ayuda a darle al formulario una estructura m\u00e1s clara y reduce el esfuerzo del usuario.<\/p>\n
<\/a>Tipos de campos y preguntas en el dise\u00f1o de formularios web<\/h2>\n#8 Minimiza la cantidad de clics necesarios<\/h3>\n
Cuantos menos clics tenga que hacer el usuario, m\u00e1s probable es que realice la acci\u00f3n deseada. Microsoft pudo corroborar esto. Antes, hac\u00eda falta tres clics para apagar la computadora PC. Ahora solo un clic es suficiente. La firma de Mountain View comprob\u00f3 que, gracias a este peque\u00f1o cambio, sus clientes apagaban sus ordenadores con mayor facilidad. Conclusi\u00f3n: trata de reducir la cantidad de clics requeridos para realizar las acciones lo m\u00e1ximo posible.<\/p>\n
<\/p>\n
#9 Usa valores predeterminados \u00fatiles<\/h3>\n
Por ejemplo, si est\u00e1s solicitando el n\u00famero de tel\u00e9fono o el pa\u00eds, sugerir prefijos internacionales de tel\u00e9fono o pa\u00eds (o regi\u00f3n) seg\u00fan la direcci\u00f3n IP del usuario facilita completar el formulario. Facilita las respuestas lo m\u00e1ximo posible con la informaci\u00f3n que ya tienes.<\/p>\n
#10 Usa botones de radio, casillas de verificaci\u00f3n y men\u00fas desplegables cuando sea necesario<\/h3>\n
Los botones de opci\u00f3n o botones de radio deben usarse en el dise\u00f1o de formularios web cuando hay m\u00faltiples opciones de respuesta y solo se puede elegir una \u00fanica respuesta. Las casillas de verificaci\u00f3n, por el contrario, deben elegirse cuando se pueden marcar varias respuestas. En todos los casos, los botones de opci\u00f3n y las casillas son preferibles a los men\u00fas desplegables, que entorpecen la experiencia del usuario porque complican el proceso de finalizaci\u00f3n. \u00dasalos solamente cuando haya m\u00e1s de 6 o 7 opciones de respuesta posibles.<\/p>\n
#11 Alinea los botones de opci\u00f3n verticalmente<\/h3>\n
Es muy importante alinear verticalmente los botones o recuadros de opci\u00f3n y priorizar la alineaci\u00f3n vertical sobre la horizontal.<\/p>\n
<\/p>\n
#12 No uses campos separados para pedir el n\u00famero de tel\u00e9fono y la fecha de nacimiento<\/h3>\n
Los campos separados obligan a los usuarios a hacer clic o usar la tecla \u00abTAB\u00bb para pasar de un campo a otro. Lo mejor es tener un \u00fanico campo formateado correctamente para introducir datos como el tel\u00e9fono y la fecha de nacimiento.<\/p>\n
#13 Justifica con claridad las solicitudes de informaci\u00f3n confidencial<\/h3>\n
Las personas est\u00e1n cada vez m\u00e1s preocupadas por la protecci\u00f3n de la privacidad y los datos personales en Internet. Si quieres solicitar datos personales (tel\u00e9fono, correo electr\u00f3nico, salario, profesi\u00f3n, etc.), no escatimes en explicar con claridad por qu\u00e9 necesitas que faciliten este tipo de informaci\u00f3n.<\/p>\n
# 14 Usa una funci\u00f3n de autocompletar c\u00f3digo postal para solicitar la direcci\u00f3n<\/h3>\n
Cuando solicitas la direcci\u00f3n en un formulario, es recomendable integrar una funci\u00f3n de autocompletar para facilitar la inserci\u00f3n de datos. Ejemplo: proponer la ciudad cuando el internauta ha introducido su c\u00f3digo postal.<\/p>\n
# 15 Utiliza placeholders<\/em> cuando est\u00e9 justificado<\/h3>\nUn placeholder<\/em> o marcador de posici\u00f3n 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 \u00abNombre\u00bb, por ejemplo, no es necesario incluir un placeholder<\/em>.<\/p>\n<\/p>\n
#16 Muestra siempre una etiqueta delante de los campos del formulario<\/h3>\n
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\u00e1s preguntando.<\/p>\n
La captura de pantalla anterior (Brevo<\/a>) se salta esta regla usando un placeholder. Pueden hacerlo porque se trata solo un campo. Cuando hay varios, no ser\u00e1 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.<\/p>\nComo \u00faltimo recurso, puedes usar etiquetas \u00abinline\u00bb, como en el siguiente ejemplo (BounceExchange<\/a>), que es una t\u00e9cnica h\u00edbrida, a medio camino entre la etiqueta y el placeholder<\/em>.<\/p>\n<\/p>\n
#17 Integra texto predictivo de campos con muchas opciones predefinidas<\/h3>\n
Cuando le pides al internauta que seleccione su pa\u00eds, sus aficiones o cualquier otra informaci\u00f3n 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\u00f1o de formularios web ayuda al internauta a avanzar m\u00e1s r\u00e1pido.<\/p>\n
<\/p>\n
#18 Indica con claridad las preguntas opcionales<\/h3>\n
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\u00e1ndo se trata de una pregunta opcional para no entorpecer la experiencia de los usuarios que completan el formulario.<\/p>\n
#19 Usa im\u00e1genes para dar atractivo al formulario<\/h3>\n
Cuando tenga sentido, utiliza iconos en los que el usuario puede hacer clic para que completar el formulario web sea m\u00e1s intuitivo y f\u00e1cil. Cuando se trata de la experiencia del usuario, las im\u00e1genes allanan el camino de forma considerable.<\/p>\n
<\/p>\n
# 20 \u00bfY si dejas el n\u00famero de tel\u00e9fono opcional?<\/h3>\n
La gente es cada vez m\u00e1s reticente a facilitar su n\u00famero de tel\u00e9fono. Si no es imprescindible para ti, no lo pidas o, si lo haces, m\u00e1rcalo como campo opcional. Un estudio realizado por Clicktale<\/a> demostr\u00f3 que, al no obligar a dar el n\u00famero de tel\u00e9fono, \u00a1se reduce la tasa de abandono del formulario del 39% al 4%!<\/p>\n#21 Adapta el tama\u00f1o de los campos al de las respuestas esperadas<\/h3>\n
El tama\u00f1o de los campos de tu formulario web debe ser coherente con la cantidad de texto que esperas del usuario.<\/p>\n
<\/a>Accesibilidad y facilidad de uso en el dise\u00f1o de formularios web<\/h2>\n#22 Evita usar captchas<\/h3>\n
Un estudio de la Universidad de Stanford (descargable en pdf<\/a>) demostr\u00f3 que los captchas tienen un impacto negativo significativo en la tasa de conversi\u00f3n de los formularios web, ya que aumentan el tiempo de finalizaci\u00f3n del formulario. Si quieres evitar el spam, es mejor usar una herramienta de detecci\u00f3n autom\u00e1tica de spam como Akismet<\/a> (plugin de WordPress<\/a><\/strong>) o crear un honeypot<\/em> usando campos ocultos. Los captchas deber\u00edan ser el \u00faltimo recurso.<\/p>\n#23 No lo f\u00edes todo a los colores para comunicar un mensaje<\/h3>\n
Cuando muestres mensajes de error o validaci\u00f3n, no uses solo el color verde o el color rojo. Tambi\u00e9n necesitas un texto o un icono (una \u00abv\u00bb para mensajes de validaci\u00f3n y una cruz para mensajes de error, por ejemplo) para que tu mensaje sea claro para el usuario de Internet.<\/p>\n
#24 Aseg\u00farate de que se puede usar la tecla \u00abTAB\u00bb para navegar por el formulario<\/h3>\n
Muchas personas usan la tecla \u00abTAB\u00bb 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\u00f3n sea compatible con tus formularios.<\/p>\n
#25 Ofrece explicaciones para preguntas que puedan ser dif\u00edciles de entender<\/h3>\n
A veces necesitamos efectuar preguntas complejas en los formularios. Por ejemplo, el dise\u00f1o de formularios web de las compa\u00f1\u00edas de seguros a menudo requiere integrar informaci\u00f3n compleja. Si este tambi\u00e9n 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\u00ed tienes un ejemplo (ComparetheMarket.com<\/a>):<\/p>\n<\/p>\n
#26 Aseg\u00farate de que el formulario funciona en los principales navegadores\/dispositivos<\/h3>\n
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\u00e1s de la mitad de la navegaci\u00f3n por Internet de hoy en d\u00eda se realiza desde un dispositivo m\u00f3vil. Por tanto, recuerda verificar bien este aspecto antes de integrar el formulario en tu sitio web.<\/p>\n
#27 Aseg\u00farate de que el formulario sea legible con poca o con mucha luz<\/h3>\n
Algunos internautas posiblemente est\u00e9n en la calle cuando accedan a tu formulario, desde su dispositivo m\u00f3vil. Aseg\u00farate de que las etiquetas y los campos del formulario tengan un buen contraste con el fondo de la p\u00e1gina para que se puedan leer tanto con poca luminosidad como con mucha.<\/p>\n
#28 Comprueba que ning\u00fan elemento parpadee m\u00e1s de dos veces por segundo<\/h3>\n
Si est\u00e1s utilizando controles deslizantes intermitentes, barras de progreso animadas, gifs o cualquier otro elemento que parpadee, aseg\u00farate de que no parpadee m\u00e1s de dos veces por segundo. De lo contrario, la experiencia del usuario se ver\u00e1 da\u00f1ada de forma considerable.<\/p>\n
#29 Usa la funci\u00f3n de autocompletar<\/h3>\n
Los navegadores web como Google Chrome o Firefox tienen desde hace un tiempo funciones integradas para cubrir formularios autom\u00e1ticamente. La informaci\u00f3n cl\u00e1sica (apellido, nombre, direcci\u00f3n, correo electr\u00f3nico, etc.) se almacena en el navegador y los usuarios pueden completar los formularios con un solo clic.<\/p>\n
Para que esta funci\u00f3n funcione, las etiquetas de tus formularios deben ser claras: nombre, apellidos, direcci\u00f3n, correo electr\u00f3nico, etc. La funcionalidad de autocompletar se basa en esas etiquetas y en los marcadores de posici\u00f3n. Emplea etiquetas sencillas, f\u00e1cilmente reconocibles para los internautas\u2026 \u00a1pero tambi\u00e9n para los navegadores!<\/p>\n
<\/p>\n
#30 Ofrece preguntas\/etapas adicionales para los m\u00e1s motivados<\/h3>\n
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\u00e9n puede haber usuarios que est\u00e9n dispuestos a dar m\u00e1s informaci\u00f3n: \u00bfqu\u00e9 hacer para no desaprovecharlo? Una soluci\u00f3n 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.<\/p>\n
#31 Optimiza la velocidad de carga del formulario<\/h3>\n
La velocidad de carga es uno de los elementos m\u00e1s 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\u00e1s buenas pr\u00e1cticas. Lo mismo ocurre con un formulario. Cada vez que Amazon logra aumentar su velocidad de carga en 100 milisegundos, consigue un 1% m\u00e1s de ingresos. \u00a1Para aumentar la conversi\u00f3n de tus formularios web, optimiza la velocidad de carga de tu sitio web!<\/p>\n
32. Evita usar la funci\u00f3n de \u00abavance autom\u00e1tico\u00bb<\/h3>\n
La funci\u00f3n de \u00abavance autom\u00e1tico\u00bb te permite pasar de un campo a otro autom\u00e1ticamente. Esto se usa a menudo para la fecha de nacimiento, por ejemplo: cambia autom\u00e1ticamente del d\u00eda al mes y al a\u00f1o a medida que le usuario completa los campos. Esta no suele ser una funci\u00f3n esperada por los usuarios en general, y tiende a generar confusi\u00f3n (la gente est\u00e1 acostumbrada a usar el rat\u00f3n o la tecla \u00abTAB\u00bb para pasar de un campo a otro).<\/p>\n
#33 Usa elementos visuales e iconos para que el formulario sea m\u00e1s intuitivo<\/h3>\n
Nuestro cerebro analiza las im\u00e1genes mucho m\u00e1s r\u00e1pido que los textos. Para que tus formularios web se cubran m\u00e1s r\u00e1pido, y por tanto mejore la experiencia de usuario, no est\u00e1 de m\u00e1s integrar en tus formularios se\u00f1ales visuales de colores o iconos. Aqu\u00ed tienes un ejemplo (Comparethemarket):<\/p>\n
<\/p>\n
<\/a>Gesti\u00f3n de errores de validaci\u00f3n y escritura en el dise\u00f1o de formularios web<\/h2>\n#34 No uses un sistema de validaci\u00f3n de preguntas demasiado r\u00edgido<\/h3>\n
Evita utilizar un sistema de validaci\u00f3n demasiado complejo. Por ejemplo, el usuario no deber\u00eda estar obligado a introducir su n\u00famero de tel\u00e9fono con prefijo internacional en el formulario (+34654545387) para que sea validado. De la misma forma, si alguien necesita introducir un n\u00famero extranjero que incluya este prefijo, tambi\u00e9n debe poder hacerlo, aunque la audiencia objetivo pertenezca a un solo pa\u00eds. Esto implica crear reglas de programaci\u00f3n flexibles, que validen varios formatos de respuesta. Como alternativa, utiliza placeholders para especificar el formato requerido de la respuesta.<\/p>\n
#35 No pidas a la gente que confirme su email o contrase\u00f1a dos veces<\/h3>\n
Esto ralentiza a los usuarios y les exige un esfuerzo adicional. Si est\u00e1s utilizando un sistema de confirmaci\u00f3n de direcci\u00f3n de correo electr\u00f3nico o contrase\u00f1a en el dise\u00f1o de formularios web, es mejor utilizar un icono o casilla de verificaci\u00f3n que permita mostrar la contrase\u00f1a para que el usuario pueda verificar que la ha escrito correctamente.<\/p>\n
<\/p>\n
#36 Aseg\u00farate de que la validaci\u00f3n aparezca justo a la derecha del campo<\/h3>\n
Si utilizas un sistema de validaci\u00f3n, debes asegurarte de que el mensaje de error aparezca a la derecha del campo justo despu\u00e9s<\/em>* de introducir el campo en cuesti\u00f3n. En ning\u00fan caso debes esperar a que el usuario env\u00ede el formulario para notificar el error.<\/p>\n* \u00abDespu\u00e9s\u00bb y no \u00abdurante\u00bb: el mensaje no debe mostrarse mientras el usuario est\u00e1 escribiendo el texto, sino unos microsegundos despu\u00e9s.<\/p>\n
<\/a>Confianza y credibilidad en el dise\u00f1o de formularios web<\/h2>\n#37 Usa un dise\u00f1o de calidad<\/h3>\n
Est\u00e1 probado que las personas tienen m\u00e1s confianza en los formularios web (o sitios web en general) con un buen dise\u00f1o. Cuida el dise\u00f1o y la est\u00e9tica de tu formulario web para inspirar confianza a tus usuarios y convencerlos de que lo cubran.<\/p>\n
#38 Anticipa las preguntas de los internautas al inicio del formulario<\/h3>\n
Cuando los usuarios de Internet se ven frente a un formulario, pueden surgirles varias dudas en su mente: \u00bfcu\u00e1nto tiempo tardar\u00e9 en completar el formulario?, \u00bftendr\u00e9 que introducir mis datos bancarios?, \u00bfcontactar\u00e1 un vendedor conmigo despu\u00e9s de enviar el formulario? No ignores ni disimules estas cuestiones: resp\u00f3ndelas al inicio del formulario para romper barreras y general confianza. Ejemplo (Mailjet<\/a>):<\/p>\n<\/p>\n
#39 Muestra pruebas sociales junto al formulario<\/h3>\n
Usar frases como \u00abadoptado por m\u00e1s de 50 000 usuarios\u00bb 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.<\/p>\n
#40 Utiliza los s\u00edmbolos de seguridad con precauci\u00f3n<\/h3>\n
La gente tiende a asociar los s\u00edmbolos de seguridad con los procesos de compra en l\u00ednea. Su presencia en el formulario puede desanimar a algunos usuarios, que pueden imaginar que tendr\u00e1n que efectuar alg\u00fan pago. Realiza pruebas A\/B para determinar si este tipo de s\u00edmbolos es relevante o no.<\/p>\n
<\/p>\n
#41 Coloca un chat en vivo o la informaci\u00f3n de contacto junto al formulario<\/h3>\n
Aunque tu formulario sea f\u00e1cil de completar y, en principio, no vaya a suponer obst\u00e1culos para los usuarios, siempre es buena idea mostrar la informaci\u00f3n de contacto cerca, para que el usuario pueda efectuar preguntas antes de enviar el formulario. Si la informaci\u00f3n solicitada en el formulario es compleja, esta t\u00e9cnica es muy potente para optimizar la conversi\u00f3n. Ejemplo (Mailfy<\/a>):<\/p>\n<\/p>\n
<\/a>Formularios en varias etapas e indicadores de progresi\u00f3n<\/h2>\n#42 Cuando se trata de un formulario en varias etapas, muestra siempre una barra de progreso<\/h3>\n
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<\/a>) aumenta a\u00fan m\u00e1s el rendimiento.<\/p>\n#43 Optimiza la velocidad de transici\u00f3n<\/h3>\n
A veces, algunos formularios pasan demasiado r\u00e1pido de un paso a otro. Los usuarios pueden hacer clic en el bot\u00f3n \u00abSiguiente\u00bb dejando informaci\u00f3n incompleta o sin darse cuenta de lo que realmente deb\u00edan responder.<\/p>\n
Parad\u00f3jicamente, esto puede resultar contraintuitivo. Es cierto que \u00aboptimizar la velocidad\u00bb significa principalmente acelerarla. Pero la experiencia prueba que pasar demasiado r\u00e1pido de una etapa a otra puede afectar negativamente a la conversi\u00f3n. Por tanto, es necesario encontrar un equilibrio \u00f3ptimo.<\/p>\n
#44 Utiliza una se\u00f1alizaci\u00f3n clara<\/h3>\n
Una barra de progreso no es suficiente por s\u00ed sola. Tambi\u00e9n debe mostrar el n\u00famero total de pasos y el paso en el que se encuentra actualmente el usuario. Ejemplo (BrokeNotes<\/a>):<\/p>\n<\/p>\n
<\/a>Botones y llamadas a la acci\u00f3n (CTA) en el dise\u00f1o de formularios web<\/h2>\n#45 Las llamadas a la acci\u00f3n deben generar ganas en el usuario<\/h3>\n
De forma predeterminada, muchos formularios usan llamadas a la acci\u00f3n gen\u00e9ricos, como \u00abFinalizar\u00bb o \u00abEnviar\u00bb. Evita usar este tipo de CTA y reempl\u00e1zalas por llamadas a la acci\u00f3n que correspondan con lo que el usuario quiere obtener despu\u00e9s de completar el formulario. La estructura del mensaje debe ser \u00abQuiero + CTA\u00bb, no necesariamente de forma literal, pero s\u00ed formando una oraci\u00f3n coherente. Por ejemplo: Pedir una cita, Obtener el ebook, Descargar el software, etc.<\/p>\n
#46 Las llamadas a la acci\u00f3n deben destacar<\/h3>\n
Tus llamadas a la acci\u00f3n deben resaltar para captar la atenci\u00f3n del visitante con facilidad. Para conseguirlo, debes elegir un color que contraste el color de fondo, una posici\u00f3n y una forma.<\/p>\n
#47 Utiliza llamadas a la acci\u00f3n del mismo tama\u00f1o que los campos<\/h3>\n
Es efectivo usar llamadas a la acci\u00f3n 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.<\/p>\n
Ejemplo (Sendinblue, ahora Brevo):<\/p>\n
<\/p>\n
#48 Evita usar los botones \u00abCancelar\u00bb o similares<\/h3>\n
A menudo hay un bot\u00f3n \u00abCancelar\u00bb al lado del bot\u00f3n \u00abSiguiente\u00bb. 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 \u00abCancelar\u00bb en lugar de \u00abSiguiente\u00bb y pierdan algunos de los datos que ya han introducid. Debes evitar a toda costa que esto ocurra.<\/p>\n
#49 El orden de las preguntas debe seguir una secuencia l\u00f3gica<\/h3>\n
Al solicitar informaci\u00f3n para una plataforma de pagos<\/a><\/strong>, por ejemplo, recuerda solicitar la informaci\u00f3n en el mismo orden en que aparece en la tarjeta bancaria (n\u00famero, titular, fecha de caducidad, c\u00f3digo de seguridad).<\/p>\n#50 No pongas textos legales demasiado complicados cerca de los botones de llamada a la acci\u00f3n<\/h3>\n
Mant\u00e9n los textos legales lo m\u00e1s concisos posible, un poco alejados de las CTA. En el pie de p\u00e1gina puedes enlazar el aviso legal de tu sitio web<\/a><\/strong>.<\/p>\n#51 No fuerces a los usuarios a suscribirse a tu lista de correo<\/h3>\n
Por ejemplo, verifica que la casilla \u00abQuiero suscribirme a la newsletter\u00bb no est\u00e9 marcada por defecto. Los usuarios pueden interpretar que los est\u00e1s forzando y se ver\u00e1n 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\u00e1 a\u00fan peor.<\/p>\n
#52 Explica con claridad lo que suceder\u00e1 despu\u00e9s de hacer clic en el bot\u00f3n \u00abEnviar\u00bb<\/h3>\n
\u00bfQu\u00e9 sucede despu\u00e9s de hacer clic en el bot\u00f3n \u00abEnviar\u00bb? \u00bfCu\u00e1les son los pasos que seguir? \u00bfCu\u00e1nto tiempo tendr\u00e1 que esperar el usuario antes de poder usar el servicio? \u00bfEs necesario preparar algo m\u00e1s? Debe explicar sin ambig\u00fcedades lo que suceder\u00e1 despu\u00e9s de enviar el formulario, con una frase sobre el bot\u00f3n o al lado de \u00e9l. Lo ideal es redirigir a las personas que cubrieron el formulario a una p\u00e1gina que comunique claramente los pr\u00f3ximos pasos a seguir.<\/p>\n
#53 El bot\u00f3n \u00abEnviar\u00bb solo se puede pulsar una vez<\/h3>\n
Configura el bot\u00f3n \u00abEnviar\u00bb para que solo se pueda hacer clic en \u00e9l una vez. Esto evita env\u00edos dobles y proporciona una se\u00f1al adicional al usuario de que su formulario se ha completado con \u00e9xito, lo que reforzar\u00e1 su confianza.<\/p>\n
<\/a>Dise\u00f1o de formularios web para m\u00f3viles<\/h2>\n#55 Utiliza las funciones nativas de los dispositivos m\u00f3viles (c\u00e1mara, geolocalizaci\u00f3n, etc.) para simplificar las tareas<\/h3>\n
Para facilitar la navegaci\u00f3n en el m\u00f3vil, utiliza las funcionalidades de los dispositivos m\u00f3viles como la c\u00e1mara o la geolocalizaci\u00f3n. Por ejemplo, si necesitas una foto de un documento de identidad, ofrece al usuario la posibilidad tomar una foto con su dispositivo. Esto facilitar\u00e1 la tarea y la experiencia de usuario.<\/p>\n
#56 Los campos y botones deben tener al menos 48 p\u00edxeles de alto<\/h3>\n
\u00bfPor qu\u00e9? \u00a1Para adaptarse al tama\u00f1o del dedo \u00edndice que se utiliza para tocar la pantalla!<\/p>\n
#57 La tipograf\u00eda de las etiquetas y los placeholders debe tener m\u00e1s de 16 p\u00edxeles<\/h3>\n
En este caso, esta buena pr\u00e1ctica te permite adaptarte a la vista de las personas que completan tu formulario. Por debajo de este tama\u00f1o, la lectura puede volverse dif\u00edcil, tediosa y hacer que algunos usuarios desistan.<\/p>\n
57 buenas pr\u00e1cticas\u2026 y seguro que nos dejamos alguna en el tintero. Un dise\u00f1o de formularios web \u00f3ptimo no se consigue de un d\u00eda 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\u00f3n de tu web.<\/p>\n
<\/i>Para saber m\u00e1s<\/span>
\nDescubre otros recursos de Webolto que te pueden interesar:\n\n- 10 pasos para realizar una auditor\u00eda SEO y UX de tu web<\/a><\/li>\n
- Marketing automation: gu\u00eda completa para principiantes<\/a><\/li>\n
- Qu\u00e9 es el email marketing y cu\u00e1les son sus mejores pr\u00e1cticas<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Un buen dise\u00f1o de formularios web sirve para captar leads (clientes potenciales), enriquecer tus listas de correo electr\u00f3nico y obtener datos importantes sobre tus visitantes. En definitiva, desempe\u00f1an un papel clave en la conversi\u00f3n de tu sitio web. De ah\u00ed la importancia de cuidar su dise\u00f1o y formato. VentureHarbour public\u00f3 recientemente un art\u00edculo completo sobre […]<\/p>\n","protected":false},"author":5,"featured_media":2427,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[1],"tags":[],"acf":[],"yoast_head":"\n
57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web - Webolto<\/title>\n<meta name=\"description\" content=\"Listado completo de 57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web que repercuten en una mejora de la tasa de conversi\u00f3n.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web - Webolto\" \/>\n<meta property=\"og:description\" content=\"Listado completo de 57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web que repercuten en una mejora de la tasa de conversi\u00f3n.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Webolto\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-12T06:29:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-25T11:54:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/Diseno-de-formularios-web.png\" \/>\n\t<meta property=\"og:image:width\" content=\"470\" \/>\n\t<meta property=\"og:image:height\" content=\"353\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"pablo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"pablo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"23 minutos\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web - Webolto","description":"Listado completo de 57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web que repercuten en una mejora de la tasa de conversi\u00f3n.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/","og_locale":"es_ES","og_type":"article","og_title":"57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web - Webolto","og_description":"Listado completo de 57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web que repercuten en una mejora de la tasa de conversi\u00f3n.","og_url":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/","og_site_name":"Webolto","article_published_time":"2023-08-12T06:29:17+00:00","article_modified_time":"2023-09-25T11:54:45+00:00","og_image":[{"width":470,"height":353,"url":"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/Diseno-de-formularios-web.png","type":"image\/png"}],"author":"pablo","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"pablo","Tiempo de lectura":"23 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/#article","isPartOf":{"@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/"},"author":{"name":"pablo","@id":"https:\/\/www.webolto.com\/es\/#\/schema\/person\/c3c477651d75ca8a5be6b747ca815b30"},"headline":"57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web","datePublished":"2023-08-12T06:29:17+00:00","dateModified":"2023-09-25T11:54:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/"},"wordCount":4377,"commentCount":0,"publisher":{"@id":"https:\/\/www.webolto.com\/es\/#organization"},"image":{"@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/Diseno-de-formularios-web.png","articleSection":["Uncategorized"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/","url":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/","name":"57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web - Webolto","isPartOf":{"@id":"https:\/\/www.webolto.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/#primaryimage"},"image":{"@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/Diseno-de-formularios-web.png","datePublished":"2023-08-12T06:29:17+00:00","dateModified":"2023-09-25T11:54:45+00:00","description":"Listado completo de 57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web que repercuten en una mejora de la tasa de conversi\u00f3n.","breadcrumb":{"@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/#primaryimage","url":"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/Diseno-de-formularios-web.png","contentUrl":"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/Diseno-de-formularios-web.png","width":470,"height":353},{"@type":"BreadcrumbList","@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webolto.com\/es\/"},{"@type":"ListItem","position":2,"name":"57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web"}]},{"@type":"WebSite","@id":"https:\/\/www.webolto.com\/es\/#website","url":"https:\/\/www.webolto.com\/es\/","name":"Webolto","description":"Centro de recursos para creadores de sitios web","publisher":{"@id":"https:\/\/www.webolto.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webolto.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.webolto.com\/es\/#organization","name":"Webolto","url":"https:\/\/www.webolto.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.webolto.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2020\/05\/header-logo.png","contentUrl":"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2020\/05\/header-logo.png","width":3237,"height":667,"caption":"Webolto"},"image":{"@id":"https:\/\/www.webolto.com\/es\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.webolto.com\/es\/#\/schema\/person\/c3c477651d75ca8a5be6b747ca815b30","name":"pablo","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.webolto.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/fb5b832ff0cedd06a932e4d37a43108b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fb5b832ff0cedd06a932e4d37a43108b?s=96&d=mm&r=g","caption":"pablo"}}]}},"featured_image_src":"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/Diseno-de-formularios-web.png","featured_image_src_square":"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/Diseno-de-formularios-web.png","author_info":{"display_name":"pablo","author_link":"https:\/\/www.webolto.com\/es\/blog\/author\/pablo\/"},"_links":{"self":[{"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/posts\/2415"}],"collection":[{"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/comments?post=2415"}],"version-history":[{"count":0,"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/posts\/2415\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/media\/2427"}],"wp:attachment":[{"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/media?parent=2415"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/categories?post=2415"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/tags?post=2415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Los formularios que convierten mejor \u2014asumiendo que el resto condiciones permanecen invariables\u2014 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\u00f3sito.<\/p>\n
<\/p>\n
#3 Usa campos de visualizaci\u00f3n condicionales<\/h3>\n
El uso de campos de visualizaci\u00f3n condicionales reduce el tama\u00f1o 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\u00f3n 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\u00e1 respondiendo.<\/p>\n
#4 Muestra las etiquetas de preguntas sobre los campos de texto<\/h3>\n
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\u00f3n: este dise\u00f1o requiere un movimiento de los ojos m\u00e1s corto, como se muestra en el siguiente diagrama.<\/p>\n
<\/p>\n
#5 Usa formularios de una sola columna<\/h3>\n
Del mismo modo, los estudios sobre el an\u00e1lisis del movimiento ocular han demostrado que es preferible utilizar un dise\u00f1o de una sola columna que un dise\u00f1o de dos columnas. La \u00fanica excepci\u00f3n a esta regla es cuando se pregunta a los internautas por fechas (d\u00edas, meses, a\u00f1os) o periodos (horas, minutos, etc.). En este caso, puede ser pertinente colocar las preguntas una al lado de la otra.<\/p>\n
#6 Dale a la gente una raz\u00f3n para completar tu formulario<\/h3>\n
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\u00e1ndoles los beneficios que pueden obtener de \u00e9l.<\/p>\n
<\/p>\n
Betting Expert logr\u00f3 obtener un 31,54% m\u00e1s de respuestas cambiando el t\u00edtulo del formulario (\u00ab\u00danete a BettingExpert\u00bb ==> \u00abObt\u00e9n consejos para apuestas gratis\u00bb). As\u00ed que ya sabes, \u00a1recuerda elegir bien el t\u00edtulo del formulario!<\/p>\n
#7 Agrupa las preguntas relacionadas en secciones o etapas<\/h3>\n
Si est\u00e1s haciendo m\u00e1s de 6 preguntas, agrupar las preguntas de tu formulario en secciones o etapas (ver #1) ayuda a darle al formulario una estructura m\u00e1s clara y reduce el esfuerzo del usuario.<\/p>\n
<\/a>Tipos de campos y preguntas en el dise\u00f1o de formularios web<\/h2>\n#8 Minimiza la cantidad de clics necesarios<\/h3>\n
Cuantos menos clics tenga que hacer el usuario, m\u00e1s probable es que realice la acci\u00f3n deseada. Microsoft pudo corroborar esto. Antes, hac\u00eda falta tres clics para apagar la computadora PC. Ahora solo un clic es suficiente. La firma de Mountain View comprob\u00f3 que, gracias a este peque\u00f1o cambio, sus clientes apagaban sus ordenadores con mayor facilidad. Conclusi\u00f3n: trata de reducir la cantidad de clics requeridos para realizar las acciones lo m\u00e1ximo posible.<\/p>\n
<\/p>\n
#9 Usa valores predeterminados \u00fatiles<\/h3>\n
Por ejemplo, si est\u00e1s solicitando el n\u00famero de tel\u00e9fono o el pa\u00eds, sugerir prefijos internacionales de tel\u00e9fono o pa\u00eds (o regi\u00f3n) seg\u00fan la direcci\u00f3n IP del usuario facilita completar el formulario. Facilita las respuestas lo m\u00e1ximo posible con la informaci\u00f3n que ya tienes.<\/p>\n
#10 Usa botones de radio, casillas de verificaci\u00f3n y men\u00fas desplegables cuando sea necesario<\/h3>\n
Los botones de opci\u00f3n o botones de radio deben usarse en el dise\u00f1o de formularios web cuando hay m\u00faltiples opciones de respuesta y solo se puede elegir una \u00fanica respuesta. Las casillas de verificaci\u00f3n, por el contrario, deben elegirse cuando se pueden marcar varias respuestas. En todos los casos, los botones de opci\u00f3n y las casillas son preferibles a los men\u00fas desplegables, que entorpecen la experiencia del usuario porque complican el proceso de finalizaci\u00f3n. \u00dasalos solamente cuando haya m\u00e1s de 6 o 7 opciones de respuesta posibles.<\/p>\n
#11 Alinea los botones de opci\u00f3n verticalmente<\/h3>\n
Es muy importante alinear verticalmente los botones o recuadros de opci\u00f3n y priorizar la alineaci\u00f3n vertical sobre la horizontal.<\/p>\n
<\/p>\n
#12 No uses campos separados para pedir el n\u00famero de tel\u00e9fono y la fecha de nacimiento<\/h3>\n
Los campos separados obligan a los usuarios a hacer clic o usar la tecla \u00abTAB\u00bb para pasar de un campo a otro. Lo mejor es tener un \u00fanico campo formateado correctamente para introducir datos como el tel\u00e9fono y la fecha de nacimiento.<\/p>\n
#13 Justifica con claridad las solicitudes de informaci\u00f3n confidencial<\/h3>\n
Las personas est\u00e1n cada vez m\u00e1s preocupadas por la protecci\u00f3n de la privacidad y los datos personales en Internet. Si quieres solicitar datos personales (tel\u00e9fono, correo electr\u00f3nico, salario, profesi\u00f3n, etc.), no escatimes en explicar con claridad por qu\u00e9 necesitas que faciliten este tipo de informaci\u00f3n.<\/p>\n
# 14 Usa una funci\u00f3n de autocompletar c\u00f3digo postal para solicitar la direcci\u00f3n<\/h3>\n
Cuando solicitas la direcci\u00f3n en un formulario, es recomendable integrar una funci\u00f3n de autocompletar para facilitar la inserci\u00f3n de datos. Ejemplo: proponer la ciudad cuando el internauta ha introducido su c\u00f3digo postal.<\/p>\n
# 15 Utiliza placeholders<\/em> cuando est\u00e9 justificado<\/h3>\nUn placeholder<\/em> o marcador de posici\u00f3n 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 \u00abNombre\u00bb, por ejemplo, no es necesario incluir un placeholder<\/em>.<\/p>\n<\/p>\n
#16 Muestra siempre una etiqueta delante de los campos del formulario<\/h3>\n
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\u00e1s preguntando.<\/p>\n
La captura de pantalla anterior (Brevo<\/a>) se salta esta regla usando un placeholder. Pueden hacerlo porque se trata solo un campo. Cuando hay varios, no ser\u00e1 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.<\/p>\nComo \u00faltimo recurso, puedes usar etiquetas \u00abinline\u00bb, como en el siguiente ejemplo (BounceExchange<\/a>), que es una t\u00e9cnica h\u00edbrida, a medio camino entre la etiqueta y el placeholder<\/em>.<\/p>\n<\/p>\n
#17 Integra texto predictivo de campos con muchas opciones predefinidas<\/h3>\n
Cuando le pides al internauta que seleccione su pa\u00eds, sus aficiones o cualquier otra informaci\u00f3n 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\u00f1o de formularios web ayuda al internauta a avanzar m\u00e1s r\u00e1pido.<\/p>\n
<\/p>\n
#18 Indica con claridad las preguntas opcionales<\/h3>\n
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\u00e1ndo se trata de una pregunta opcional para no entorpecer la experiencia de los usuarios que completan el formulario.<\/p>\n
#19 Usa im\u00e1genes para dar atractivo al formulario<\/h3>\n
Cuando tenga sentido, utiliza iconos en los que el usuario puede hacer clic para que completar el formulario web sea m\u00e1s intuitivo y f\u00e1cil. Cuando se trata de la experiencia del usuario, las im\u00e1genes allanan el camino de forma considerable.<\/p>\n
<\/p>\n
# 20 \u00bfY si dejas el n\u00famero de tel\u00e9fono opcional?<\/h3>\n
La gente es cada vez m\u00e1s reticente a facilitar su n\u00famero de tel\u00e9fono. Si no es imprescindible para ti, no lo pidas o, si lo haces, m\u00e1rcalo como campo opcional. Un estudio realizado por Clicktale<\/a> demostr\u00f3 que, al no obligar a dar el n\u00famero de tel\u00e9fono, \u00a1se reduce la tasa de abandono del formulario del 39% al 4%!<\/p>\n#21 Adapta el tama\u00f1o de los campos al de las respuestas esperadas<\/h3>\n
El tama\u00f1o de los campos de tu formulario web debe ser coherente con la cantidad de texto que esperas del usuario.<\/p>\n
<\/a>Accesibilidad y facilidad de uso en el dise\u00f1o de formularios web<\/h2>\n#22 Evita usar captchas<\/h3>\n
Un estudio de la Universidad de Stanford (descargable en pdf<\/a>) demostr\u00f3 que los captchas tienen un impacto negativo significativo en la tasa de conversi\u00f3n de los formularios web, ya que aumentan el tiempo de finalizaci\u00f3n del formulario. Si quieres evitar el spam, es mejor usar una herramienta de detecci\u00f3n autom\u00e1tica de spam como Akismet<\/a> (plugin de WordPress<\/a><\/strong>) o crear un honeypot<\/em> usando campos ocultos. Los captchas deber\u00edan ser el \u00faltimo recurso.<\/p>\n#23 No lo f\u00edes todo a los colores para comunicar un mensaje<\/h3>\n
Cuando muestres mensajes de error o validaci\u00f3n, no uses solo el color verde o el color rojo. Tambi\u00e9n necesitas un texto o un icono (una \u00abv\u00bb para mensajes de validaci\u00f3n y una cruz para mensajes de error, por ejemplo) para que tu mensaje sea claro para el usuario de Internet.<\/p>\n
#24 Aseg\u00farate de que se puede usar la tecla \u00abTAB\u00bb para navegar por el formulario<\/h3>\n
Muchas personas usan la tecla \u00abTAB\u00bb 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\u00f3n sea compatible con tus formularios.<\/p>\n
#25 Ofrece explicaciones para preguntas que puedan ser dif\u00edciles de entender<\/h3>\n
A veces necesitamos efectuar preguntas complejas en los formularios. Por ejemplo, el dise\u00f1o de formularios web de las compa\u00f1\u00edas de seguros a menudo requiere integrar informaci\u00f3n compleja. Si este tambi\u00e9n 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\u00ed tienes un ejemplo (ComparetheMarket.com<\/a>):<\/p>\n<\/p>\n
#26 Aseg\u00farate de que el formulario funciona en los principales navegadores\/dispositivos<\/h3>\n
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\u00e1s de la mitad de la navegaci\u00f3n por Internet de hoy en d\u00eda se realiza desde un dispositivo m\u00f3vil. Por tanto, recuerda verificar bien este aspecto antes de integrar el formulario en tu sitio web.<\/p>\n
#27 Aseg\u00farate de que el formulario sea legible con poca o con mucha luz<\/h3>\n
Algunos internautas posiblemente est\u00e9n en la calle cuando accedan a tu formulario, desde su dispositivo m\u00f3vil. Aseg\u00farate de que las etiquetas y los campos del formulario tengan un buen contraste con el fondo de la p\u00e1gina para que se puedan leer tanto con poca luminosidad como con mucha.<\/p>\n
#28 Comprueba que ning\u00fan elemento parpadee m\u00e1s de dos veces por segundo<\/h3>\n
Si est\u00e1s utilizando controles deslizantes intermitentes, barras de progreso animadas, gifs o cualquier otro elemento que parpadee, aseg\u00farate de que no parpadee m\u00e1s de dos veces por segundo. De lo contrario, la experiencia del usuario se ver\u00e1 da\u00f1ada de forma considerable.<\/p>\n
#29 Usa la funci\u00f3n de autocompletar<\/h3>\n
Los navegadores web como Google Chrome o Firefox tienen desde hace un tiempo funciones integradas para cubrir formularios autom\u00e1ticamente. La informaci\u00f3n cl\u00e1sica (apellido, nombre, direcci\u00f3n, correo electr\u00f3nico, etc.) se almacena en el navegador y los usuarios pueden completar los formularios con un solo clic.<\/p>\n
Para que esta funci\u00f3n funcione, las etiquetas de tus formularios deben ser claras: nombre, apellidos, direcci\u00f3n, correo electr\u00f3nico, etc. La funcionalidad de autocompletar se basa en esas etiquetas y en los marcadores de posici\u00f3n. Emplea etiquetas sencillas, f\u00e1cilmente reconocibles para los internautas\u2026 \u00a1pero tambi\u00e9n para los navegadores!<\/p>\n
<\/p>\n
#30 Ofrece preguntas\/etapas adicionales para los m\u00e1s motivados<\/h3>\n
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\u00e9n puede haber usuarios que est\u00e9n dispuestos a dar m\u00e1s informaci\u00f3n: \u00bfqu\u00e9 hacer para no desaprovecharlo? Una soluci\u00f3n 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.<\/p>\n
#31 Optimiza la velocidad de carga del formulario<\/h3>\n
La velocidad de carga es uno de los elementos m\u00e1s 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\u00e1s buenas pr\u00e1cticas. Lo mismo ocurre con un formulario. Cada vez que Amazon logra aumentar su velocidad de carga en 100 milisegundos, consigue un 1% m\u00e1s de ingresos. \u00a1Para aumentar la conversi\u00f3n de tus formularios web, optimiza la velocidad de carga de tu sitio web!<\/p>\n
32. Evita usar la funci\u00f3n de \u00abavance autom\u00e1tico\u00bb<\/h3>\n
La funci\u00f3n de \u00abavance autom\u00e1tico\u00bb te permite pasar de un campo a otro autom\u00e1ticamente. Esto se usa a menudo para la fecha de nacimiento, por ejemplo: cambia autom\u00e1ticamente del d\u00eda al mes y al a\u00f1o a medida que le usuario completa los campos. Esta no suele ser una funci\u00f3n esperada por los usuarios en general, y tiende a generar confusi\u00f3n (la gente est\u00e1 acostumbrada a usar el rat\u00f3n o la tecla \u00abTAB\u00bb para pasar de un campo a otro).<\/p>\n
#33 Usa elementos visuales e iconos para que el formulario sea m\u00e1s intuitivo<\/h3>\n
Nuestro cerebro analiza las im\u00e1genes mucho m\u00e1s r\u00e1pido que los textos. Para que tus formularios web se cubran m\u00e1s r\u00e1pido, y por tanto mejore la experiencia de usuario, no est\u00e1 de m\u00e1s integrar en tus formularios se\u00f1ales visuales de colores o iconos. Aqu\u00ed tienes un ejemplo (Comparethemarket):<\/p>\n
<\/p>\n
<\/a>Gesti\u00f3n de errores de validaci\u00f3n y escritura en el dise\u00f1o de formularios web<\/h2>\n#34 No uses un sistema de validaci\u00f3n de preguntas demasiado r\u00edgido<\/h3>\n
Evita utilizar un sistema de validaci\u00f3n demasiado complejo. Por ejemplo, el usuario no deber\u00eda estar obligado a introducir su n\u00famero de tel\u00e9fono con prefijo internacional en el formulario (+34654545387) para que sea validado. De la misma forma, si alguien necesita introducir un n\u00famero extranjero que incluya este prefijo, tambi\u00e9n debe poder hacerlo, aunque la audiencia objetivo pertenezca a un solo pa\u00eds. Esto implica crear reglas de programaci\u00f3n flexibles, que validen varios formatos de respuesta. Como alternativa, utiliza placeholders para especificar el formato requerido de la respuesta.<\/p>\n
#35 No pidas a la gente que confirme su email o contrase\u00f1a dos veces<\/h3>\n
Esto ralentiza a los usuarios y les exige un esfuerzo adicional. Si est\u00e1s utilizando un sistema de confirmaci\u00f3n de direcci\u00f3n de correo electr\u00f3nico o contrase\u00f1a en el dise\u00f1o de formularios web, es mejor utilizar un icono o casilla de verificaci\u00f3n que permita mostrar la contrase\u00f1a para que el usuario pueda verificar que la ha escrito correctamente.<\/p>\n
<\/p>\n
#36 Aseg\u00farate de que la validaci\u00f3n aparezca justo a la derecha del campo<\/h3>\n
Si utilizas un sistema de validaci\u00f3n, debes asegurarte de que el mensaje de error aparezca a la derecha del campo justo despu\u00e9s<\/em>* de introducir el campo en cuesti\u00f3n. En ning\u00fan caso debes esperar a que el usuario env\u00ede el formulario para notificar el error.<\/p>\n* \u00abDespu\u00e9s\u00bb y no \u00abdurante\u00bb: el mensaje no debe mostrarse mientras el usuario est\u00e1 escribiendo el texto, sino unos microsegundos despu\u00e9s.<\/p>\n
<\/a>Confianza y credibilidad en el dise\u00f1o de formularios web<\/h2>\n#37 Usa un dise\u00f1o de calidad<\/h3>\n
Est\u00e1 probado que las personas tienen m\u00e1s confianza en los formularios web (o sitios web en general) con un buen dise\u00f1o. Cuida el dise\u00f1o y la est\u00e9tica de tu formulario web para inspirar confianza a tus usuarios y convencerlos de que lo cubran.<\/p>\n
#38 Anticipa las preguntas de los internautas al inicio del formulario<\/h3>\n
Cuando los usuarios de Internet se ven frente a un formulario, pueden surgirles varias dudas en su mente: \u00bfcu\u00e1nto tiempo tardar\u00e9 en completar el formulario?, \u00bftendr\u00e9 que introducir mis datos bancarios?, \u00bfcontactar\u00e1 un vendedor conmigo despu\u00e9s de enviar el formulario? No ignores ni disimules estas cuestiones: resp\u00f3ndelas al inicio del formulario para romper barreras y general confianza. Ejemplo (Mailjet<\/a>):<\/p>\n<\/p>\n
#39 Muestra pruebas sociales junto al formulario<\/h3>\n
Usar frases como \u00abadoptado por m\u00e1s de 50 000 usuarios\u00bb 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.<\/p>\n
#40 Utiliza los s\u00edmbolos de seguridad con precauci\u00f3n<\/h3>\n
La gente tiende a asociar los s\u00edmbolos de seguridad con los procesos de compra en l\u00ednea. Su presencia en el formulario puede desanimar a algunos usuarios, que pueden imaginar que tendr\u00e1n que efectuar alg\u00fan pago. Realiza pruebas A\/B para determinar si este tipo de s\u00edmbolos es relevante o no.<\/p>\n
<\/p>\n
#41 Coloca un chat en vivo o la informaci\u00f3n de contacto junto al formulario<\/h3>\n
Aunque tu formulario sea f\u00e1cil de completar y, en principio, no vaya a suponer obst\u00e1culos para los usuarios, siempre es buena idea mostrar la informaci\u00f3n de contacto cerca, para que el usuario pueda efectuar preguntas antes de enviar el formulario. Si la informaci\u00f3n solicitada en el formulario es compleja, esta t\u00e9cnica es muy potente para optimizar la conversi\u00f3n. Ejemplo (Mailfy<\/a>):<\/p>\n<\/p>\n
<\/a>Formularios en varias etapas e indicadores de progresi\u00f3n<\/h2>\n#42 Cuando se trata de un formulario en varias etapas, muestra siempre una barra de progreso<\/h3>\n
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<\/a>) aumenta a\u00fan m\u00e1s el rendimiento.<\/p>\n#43 Optimiza la velocidad de transici\u00f3n<\/h3>\n
A veces, algunos formularios pasan demasiado r\u00e1pido de un paso a otro. Los usuarios pueden hacer clic en el bot\u00f3n \u00abSiguiente\u00bb dejando informaci\u00f3n incompleta o sin darse cuenta de lo que realmente deb\u00edan responder.<\/p>\n
Parad\u00f3jicamente, esto puede resultar contraintuitivo. Es cierto que \u00aboptimizar la velocidad\u00bb significa principalmente acelerarla. Pero la experiencia prueba que pasar demasiado r\u00e1pido de una etapa a otra puede afectar negativamente a la conversi\u00f3n. Por tanto, es necesario encontrar un equilibrio \u00f3ptimo.<\/p>\n
#44 Utiliza una se\u00f1alizaci\u00f3n clara<\/h3>\n
Una barra de progreso no es suficiente por s\u00ed sola. Tambi\u00e9n debe mostrar el n\u00famero total de pasos y el paso en el que se encuentra actualmente el usuario. Ejemplo (BrokeNotes<\/a>):<\/p>\n<\/p>\n
<\/a>Botones y llamadas a la acci\u00f3n (CTA) en el dise\u00f1o de formularios web<\/h2>\n#45 Las llamadas a la acci\u00f3n deben generar ganas en el usuario<\/h3>\n
De forma predeterminada, muchos formularios usan llamadas a la acci\u00f3n gen\u00e9ricos, como \u00abFinalizar\u00bb o \u00abEnviar\u00bb. Evita usar este tipo de CTA y reempl\u00e1zalas por llamadas a la acci\u00f3n que correspondan con lo que el usuario quiere obtener despu\u00e9s de completar el formulario. La estructura del mensaje debe ser \u00abQuiero + CTA\u00bb, no necesariamente de forma literal, pero s\u00ed formando una oraci\u00f3n coherente. Por ejemplo: Pedir una cita, Obtener el ebook, Descargar el software, etc.<\/p>\n
#46 Las llamadas a la acci\u00f3n deben destacar<\/h3>\n
Tus llamadas a la acci\u00f3n deben resaltar para captar la atenci\u00f3n del visitante con facilidad. Para conseguirlo, debes elegir un color que contraste el color de fondo, una posici\u00f3n y una forma.<\/p>\n
#47 Utiliza llamadas a la acci\u00f3n del mismo tama\u00f1o que los campos<\/h3>\n
Es efectivo usar llamadas a la acci\u00f3n 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.<\/p>\n
Ejemplo (Sendinblue, ahora Brevo):<\/p>\n
<\/p>\n
#48 Evita usar los botones \u00abCancelar\u00bb o similares<\/h3>\n
A menudo hay un bot\u00f3n \u00abCancelar\u00bb al lado del bot\u00f3n \u00abSiguiente\u00bb. 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 \u00abCancelar\u00bb en lugar de \u00abSiguiente\u00bb y pierdan algunos de los datos que ya han introducid. Debes evitar a toda costa que esto ocurra.<\/p>\n
#49 El orden de las preguntas debe seguir una secuencia l\u00f3gica<\/h3>\n
Al solicitar informaci\u00f3n para una plataforma de pagos<\/a><\/strong>, por ejemplo, recuerda solicitar la informaci\u00f3n en el mismo orden en que aparece en la tarjeta bancaria (n\u00famero, titular, fecha de caducidad, c\u00f3digo de seguridad).<\/p>\n#50 No pongas textos legales demasiado complicados cerca de los botones de llamada a la acci\u00f3n<\/h3>\n
Mant\u00e9n los textos legales lo m\u00e1s concisos posible, un poco alejados de las CTA. En el pie de p\u00e1gina puedes enlazar el aviso legal de tu sitio web<\/a><\/strong>.<\/p>\n#51 No fuerces a los usuarios a suscribirse a tu lista de correo<\/h3>\n
Por ejemplo, verifica que la casilla \u00abQuiero suscribirme a la newsletter\u00bb no est\u00e9 marcada por defecto. Los usuarios pueden interpretar que los est\u00e1s forzando y se ver\u00e1n 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\u00e1 a\u00fan peor.<\/p>\n
#52 Explica con claridad lo que suceder\u00e1 despu\u00e9s de hacer clic en el bot\u00f3n \u00abEnviar\u00bb<\/h3>\n
\u00bfQu\u00e9 sucede despu\u00e9s de hacer clic en el bot\u00f3n \u00abEnviar\u00bb? \u00bfCu\u00e1les son los pasos que seguir? \u00bfCu\u00e1nto tiempo tendr\u00e1 que esperar el usuario antes de poder usar el servicio? \u00bfEs necesario preparar algo m\u00e1s? Debe explicar sin ambig\u00fcedades lo que suceder\u00e1 despu\u00e9s de enviar el formulario, con una frase sobre el bot\u00f3n o al lado de \u00e9l. Lo ideal es redirigir a las personas que cubrieron el formulario a una p\u00e1gina que comunique claramente los pr\u00f3ximos pasos a seguir.<\/p>\n
#53 El bot\u00f3n \u00abEnviar\u00bb solo se puede pulsar una vez<\/h3>\n
Configura el bot\u00f3n \u00abEnviar\u00bb para que solo se pueda hacer clic en \u00e9l una vez. Esto evita env\u00edos dobles y proporciona una se\u00f1al adicional al usuario de que su formulario se ha completado con \u00e9xito, lo que reforzar\u00e1 su confianza.<\/p>\n
<\/a>Dise\u00f1o de formularios web para m\u00f3viles<\/h2>\n#55 Utiliza las funciones nativas de los dispositivos m\u00f3viles (c\u00e1mara, geolocalizaci\u00f3n, etc.) para simplificar las tareas<\/h3>\n
Para facilitar la navegaci\u00f3n en el m\u00f3vil, utiliza las funcionalidades de los dispositivos m\u00f3viles como la c\u00e1mara o la geolocalizaci\u00f3n. Por ejemplo, si necesitas una foto de un documento de identidad, ofrece al usuario la posibilidad tomar una foto con su dispositivo. Esto facilitar\u00e1 la tarea y la experiencia de usuario.<\/p>\n
#56 Los campos y botones deben tener al menos 48 p\u00edxeles de alto<\/h3>\n
\u00bfPor qu\u00e9? \u00a1Para adaptarse al tama\u00f1o del dedo \u00edndice que se utiliza para tocar la pantalla!<\/p>\n
#57 La tipograf\u00eda de las etiquetas y los placeholders debe tener m\u00e1s de 16 p\u00edxeles<\/h3>\n
En este caso, esta buena pr\u00e1ctica te permite adaptarte a la vista de las personas que completan tu formulario. Por debajo de este tama\u00f1o, la lectura puede volverse dif\u00edcil, tediosa y hacer que algunos usuarios desistan.<\/p>\n
57 buenas pr\u00e1cticas\u2026 y seguro que nos dejamos alguna en el tintero. Un dise\u00f1o de formularios web \u00f3ptimo no se consigue de un d\u00eda 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\u00f3n de tu web.<\/p>\n
<\/i>Para saber m\u00e1s<\/span>
\nDescubre otros recursos de Webolto que te pueden interesar:\n\n- 10 pasos para realizar una auditor\u00eda SEO y UX de tu web<\/a><\/li>\n
- Marketing automation: gu\u00eda completa para principiantes<\/a><\/li>\n
- Qu\u00e9 es el email marketing y cu\u00e1les son sus mejores pr\u00e1cticas<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Un buen dise\u00f1o de formularios web sirve para captar leads (clientes potenciales), enriquecer tus listas de correo electr\u00f3nico y obtener datos importantes sobre tus visitantes. En definitiva, desempe\u00f1an un papel clave en la conversi\u00f3n de tu sitio web. De ah\u00ed la importancia de cuidar su dise\u00f1o y formato. VentureHarbour public\u00f3 recientemente un art\u00edculo completo sobre […]<\/p>\n","protected":false},"author":5,"featured_media":2427,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[1],"tags":[],"acf":[],"yoast_head":"\n
57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web - Webolto<\/title>\n<meta name=\"description\" content=\"Listado completo de 57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web que repercuten en una mejora de la tasa de conversi\u00f3n.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web - Webolto\" \/>\n<meta property=\"og:description\" content=\"Listado completo de 57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web que repercuten en una mejora de la tasa de conversi\u00f3n.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Webolto\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-12T06:29:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-25T11:54:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/Diseno-de-formularios-web.png\" \/>\n\t<meta property=\"og:image:width\" content=\"470\" \/>\n\t<meta property=\"og:image:height\" content=\"353\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"pablo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"pablo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"23 minutos\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web - Webolto","description":"Listado completo de 57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web que repercuten en una mejora de la tasa de conversi\u00f3n.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/","og_locale":"es_ES","og_type":"article","og_title":"57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web - Webolto","og_description":"Listado completo de 57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web que repercuten en una mejora de la tasa de conversi\u00f3n.","og_url":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/","og_site_name":"Webolto","article_published_time":"2023-08-12T06:29:17+00:00","article_modified_time":"2023-09-25T11:54:45+00:00","og_image":[{"width":470,"height":353,"url":"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/Diseno-de-formularios-web.png","type":"image\/png"}],"author":"pablo","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"pablo","Tiempo de lectura":"23 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/#article","isPartOf":{"@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/"},"author":{"name":"pablo","@id":"https:\/\/www.webolto.com\/es\/#\/schema\/person\/c3c477651d75ca8a5be6b747ca815b30"},"headline":"57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web","datePublished":"2023-08-12T06:29:17+00:00","dateModified":"2023-09-25T11:54:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/"},"wordCount":4377,"commentCount":0,"publisher":{"@id":"https:\/\/www.webolto.com\/es\/#organization"},"image":{"@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/Diseno-de-formularios-web.png","articleSection":["Uncategorized"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/","url":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/","name":"57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web - Webolto","isPartOf":{"@id":"https:\/\/www.webolto.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/#primaryimage"},"image":{"@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/Diseno-de-formularios-web.png","datePublished":"2023-08-12T06:29:17+00:00","dateModified":"2023-09-25T11:54:45+00:00","description":"Listado completo de 57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web que repercuten en una mejora de la tasa de conversi\u00f3n.","breadcrumb":{"@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/#primaryimage","url":"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/Diseno-de-formularios-web.png","contentUrl":"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/Diseno-de-formularios-web.png","width":470,"height":353},{"@type":"BreadcrumbList","@id":"https:\/\/www.webolto.com\/es\/blog\/diseno-formularios-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webolto.com\/es\/"},{"@type":"ListItem","position":2,"name":"57 buenas pr\u00e1cticas para el dise\u00f1o de formularios web"}]},{"@type":"WebSite","@id":"https:\/\/www.webolto.com\/es\/#website","url":"https:\/\/www.webolto.com\/es\/","name":"Webolto","description":"Centro de recursos para creadores de sitios web","publisher":{"@id":"https:\/\/www.webolto.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webolto.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.webolto.com\/es\/#organization","name":"Webolto","url":"https:\/\/www.webolto.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.webolto.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2020\/05\/header-logo.png","contentUrl":"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2020\/05\/header-logo.png","width":3237,"height":667,"caption":"Webolto"},"image":{"@id":"https:\/\/www.webolto.com\/es\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.webolto.com\/es\/#\/schema\/person\/c3c477651d75ca8a5be6b747ca815b30","name":"pablo","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.webolto.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/fb5b832ff0cedd06a932e4d37a43108b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fb5b832ff0cedd06a932e4d37a43108b?s=96&d=mm&r=g","caption":"pablo"}}]}},"featured_image_src":"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/Diseno-de-formularios-web.png","featured_image_src_square":"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2022\/06\/Diseno-de-formularios-web.png","author_info":{"display_name":"pablo","author_link":"https:\/\/www.webolto.com\/es\/blog\/author\/pablo\/"},"_links":{"self":[{"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/posts\/2415"}],"collection":[{"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/comments?post=2415"}],"version-history":[{"count":0,"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/posts\/2415\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/media\/2427"}],"wp:attachment":[{"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/media?parent=2415"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/categories?post=2415"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webolto.com\/es\/wp-json\/wp\/v2\/tags?post=2415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\n<\/p>\nUn placeholder<\/em> o marcador de posici\u00f3n 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 \u00abNombre\u00bb, por ejemplo, no es necesario incluir un placeholder<\/em>.<\/p>\n 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\u00e1s preguntando.<\/p>\n La captura de pantalla anterior (Brevo<\/a>) se salta esta regla usando un placeholder. Pueden hacerlo porque se trata solo un campo. Cuando hay varios, no ser\u00e1 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.<\/p>\n Como \u00faltimo recurso, puedes usar etiquetas \u00abinline\u00bb, como en el siguiente ejemplo (BounceExchange<\/a>), que es una t\u00e9cnica h\u00edbrida, a medio camino entre la etiqueta y el placeholder<\/em>.<\/p>\n Cuando le pides al internauta que seleccione su pa\u00eds, sus aficiones o cualquier otra informaci\u00f3n 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\u00f1o de formularios web ayuda al internauta a avanzar m\u00e1s r\u00e1pido.<\/p>\n 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\u00e1ndo se trata de una pregunta opcional para no entorpecer la experiencia de los usuarios que completan el formulario.<\/p>\n Cuando tenga sentido, utiliza iconos en los que el usuario puede hacer clic para que completar el formulario web sea m\u00e1s intuitivo y f\u00e1cil. Cuando se trata de la experiencia del usuario, las im\u00e1genes allanan el camino de forma considerable.<\/p>\n La gente es cada vez m\u00e1s reticente a facilitar su n\u00famero de tel\u00e9fono. Si no es imprescindible para ti, no lo pidas o, si lo haces, m\u00e1rcalo como campo opcional. Un estudio realizado por Clicktale<\/a> demostr\u00f3 que, al no obligar a dar el n\u00famero de tel\u00e9fono, \u00a1se reduce la tasa de abandono del formulario del 39% al 4%!<\/p>\n El tama\u00f1o de los campos de tu formulario web debe ser coherente con la cantidad de texto que esperas del usuario.<\/p>\n Un estudio de la Universidad de Stanford (descargable en pdf<\/a>) demostr\u00f3 que los captchas tienen un impacto negativo significativo en la tasa de conversi\u00f3n de los formularios web, ya que aumentan el tiempo de finalizaci\u00f3n del formulario. Si quieres evitar el spam, es mejor usar una herramienta de detecci\u00f3n autom\u00e1tica de spam como Akismet<\/a> (plugin de WordPress<\/a><\/strong>) o crear un honeypot<\/em> usando campos ocultos. Los captchas deber\u00edan ser el \u00faltimo recurso.<\/p>\n Cuando muestres mensajes de error o validaci\u00f3n, no uses solo el color verde o el color rojo. Tambi\u00e9n necesitas un texto o un icono (una \u00abv\u00bb para mensajes de validaci\u00f3n y una cruz para mensajes de error, por ejemplo) para que tu mensaje sea claro para el usuario de Internet.<\/p>\n Muchas personas usan la tecla \u00abTAB\u00bb 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\u00f3n sea compatible con tus formularios.<\/p>\n A veces necesitamos efectuar preguntas complejas en los formularios. Por ejemplo, el dise\u00f1o de formularios web de las compa\u00f1\u00edas de seguros a menudo requiere integrar informaci\u00f3n compleja. Si este tambi\u00e9n 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\u00ed tienes un ejemplo (ComparetheMarket.com<\/a>):<\/p>\n 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\u00e1s de la mitad de la navegaci\u00f3n por Internet de hoy en d\u00eda se realiza desde un dispositivo m\u00f3vil. Por tanto, recuerda verificar bien este aspecto antes de integrar el formulario en tu sitio web.<\/p>\n Algunos internautas posiblemente est\u00e9n en la calle cuando accedan a tu formulario, desde su dispositivo m\u00f3vil. Aseg\u00farate de que las etiquetas y los campos del formulario tengan un buen contraste con el fondo de la p\u00e1gina para que se puedan leer tanto con poca luminosidad como con mucha.<\/p>\n Si est\u00e1s utilizando controles deslizantes intermitentes, barras de progreso animadas, gifs o cualquier otro elemento que parpadee, aseg\u00farate de que no parpadee m\u00e1s de dos veces por segundo. De lo contrario, la experiencia del usuario se ver\u00e1 da\u00f1ada de forma considerable.<\/p>\n Los navegadores web como Google Chrome o Firefox tienen desde hace un tiempo funciones integradas para cubrir formularios autom\u00e1ticamente. La informaci\u00f3n cl\u00e1sica (apellido, nombre, direcci\u00f3n, correo electr\u00f3nico, etc.) se almacena en el navegador y los usuarios pueden completar los formularios con un solo clic.<\/p>\n Para que esta funci\u00f3n funcione, las etiquetas de tus formularios deben ser claras: nombre, apellidos, direcci\u00f3n, correo electr\u00f3nico, etc. La funcionalidad de autocompletar se basa en esas etiquetas y en los marcadores de posici\u00f3n. Emplea etiquetas sencillas, f\u00e1cilmente reconocibles para los internautas\u2026 \u00a1pero tambi\u00e9n para los navegadores!<\/p>\n 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\u00e9n puede haber usuarios que est\u00e9n dispuestos a dar m\u00e1s informaci\u00f3n: \u00bfqu\u00e9 hacer para no desaprovecharlo? Una soluci\u00f3n 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.<\/p>\n La velocidad de carga es uno de los elementos m\u00e1s 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\u00e1s buenas pr\u00e1cticas. Lo mismo ocurre con un formulario. Cada vez que Amazon logra aumentar su velocidad de carga en 100 milisegundos, consigue un 1% m\u00e1s de ingresos. \u00a1Para aumentar la conversi\u00f3n de tus formularios web, optimiza la velocidad de carga de tu sitio web!<\/p>\n La funci\u00f3n de \u00abavance autom\u00e1tico\u00bb te permite pasar de un campo a otro autom\u00e1ticamente. Esto se usa a menudo para la fecha de nacimiento, por ejemplo: cambia autom\u00e1ticamente del d\u00eda al mes y al a\u00f1o a medida que le usuario completa los campos. Esta no suele ser una funci\u00f3n esperada por los usuarios en general, y tiende a generar confusi\u00f3n (la gente est\u00e1 acostumbrada a usar el rat\u00f3n o la tecla \u00abTAB\u00bb para pasar de un campo a otro).<\/p>\n Nuestro cerebro analiza las im\u00e1genes mucho m\u00e1s r\u00e1pido que los textos. Para que tus formularios web se cubran m\u00e1s r\u00e1pido, y por tanto mejore la experiencia de usuario, no est\u00e1 de m\u00e1s integrar en tus formularios se\u00f1ales visuales de colores o iconos. Aqu\u00ed tienes un ejemplo (Comparethemarket):<\/p>\n Evita utilizar un sistema de validaci\u00f3n demasiado complejo. Por ejemplo, el usuario no deber\u00eda estar obligado a introducir su n\u00famero de tel\u00e9fono con prefijo internacional en el formulario (+34654545387) para que sea validado. De la misma forma, si alguien necesita introducir un n\u00famero extranjero que incluya este prefijo, tambi\u00e9n debe poder hacerlo, aunque la audiencia objetivo pertenezca a un solo pa\u00eds. Esto implica crear reglas de programaci\u00f3n flexibles, que validen varios formatos de respuesta. Como alternativa, utiliza placeholders para especificar el formato requerido de la respuesta.<\/p>\n Esto ralentiza a los usuarios y les exige un esfuerzo adicional. Si est\u00e1s utilizando un sistema de confirmaci\u00f3n de direcci\u00f3n de correo electr\u00f3nico o contrase\u00f1a en el dise\u00f1o de formularios web, es mejor utilizar un icono o casilla de verificaci\u00f3n que permita mostrar la contrase\u00f1a para que el usuario pueda verificar que la ha escrito correctamente.<\/p>\n Si utilizas un sistema de validaci\u00f3n, debes asegurarte de que el mensaje de error aparezca a la derecha del campo justo despu\u00e9s<\/em>* de introducir el campo en cuesti\u00f3n. En ning\u00fan caso debes esperar a que el usuario env\u00ede el formulario para notificar el error.<\/p>\n * \u00abDespu\u00e9s\u00bb y no \u00abdurante\u00bb: el mensaje no debe mostrarse mientras el usuario est\u00e1 escribiendo el texto, sino unos microsegundos despu\u00e9s.<\/p>\n Est\u00e1 probado que las personas tienen m\u00e1s confianza en los formularios web (o sitios web en general) con un buen dise\u00f1o. Cuida el dise\u00f1o y la est\u00e9tica de tu formulario web para inspirar confianza a tus usuarios y convencerlos de que lo cubran.<\/p>\n Cuando los usuarios de Internet se ven frente a un formulario, pueden surgirles varias dudas en su mente: \u00bfcu\u00e1nto tiempo tardar\u00e9 en completar el formulario?, \u00bftendr\u00e9 que introducir mis datos bancarios?, \u00bfcontactar\u00e1 un vendedor conmigo despu\u00e9s de enviar el formulario? No ignores ni disimules estas cuestiones: resp\u00f3ndelas al inicio del formulario para romper barreras y general confianza. Ejemplo (Mailjet<\/a>):<\/p>\n Usar frases como \u00abadoptado por m\u00e1s de 50 000 usuarios\u00bb 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.<\/p>\n La gente tiende a asociar los s\u00edmbolos de seguridad con los procesos de compra en l\u00ednea. Su presencia en el formulario puede desanimar a algunos usuarios, que pueden imaginar que tendr\u00e1n que efectuar alg\u00fan pago. Realiza pruebas A\/B para determinar si este tipo de s\u00edmbolos es relevante o no.<\/p>\n Aunque tu formulario sea f\u00e1cil de completar y, en principio, no vaya a suponer obst\u00e1culos para los usuarios, siempre es buena idea mostrar la informaci\u00f3n de contacto cerca, para que el usuario pueda efectuar preguntas antes de enviar el formulario. Si la informaci\u00f3n solicitada en el formulario es compleja, esta t\u00e9cnica es muy potente para optimizar la conversi\u00f3n. Ejemplo (Mailfy<\/a>):<\/p>\n 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<\/a>) aumenta a\u00fan m\u00e1s el rendimiento.<\/p>\n A veces, algunos formularios pasan demasiado r\u00e1pido de un paso a otro. Los usuarios pueden hacer clic en el bot\u00f3n \u00abSiguiente\u00bb dejando informaci\u00f3n incompleta o sin darse cuenta de lo que realmente deb\u00edan responder.<\/p>\n Parad\u00f3jicamente, esto puede resultar contraintuitivo. Es cierto que \u00aboptimizar la velocidad\u00bb significa principalmente acelerarla. Pero la experiencia prueba que pasar demasiado r\u00e1pido de una etapa a otra puede afectar negativamente a la conversi\u00f3n. Por tanto, es necesario encontrar un equilibrio \u00f3ptimo.<\/p>\n Una barra de progreso no es suficiente por s\u00ed sola. Tambi\u00e9n debe mostrar el n\u00famero total de pasos y el paso en el que se encuentra actualmente el usuario. Ejemplo (BrokeNotes<\/a>):<\/p>\n De forma predeterminada, muchos formularios usan llamadas a la acci\u00f3n gen\u00e9ricos, como \u00abFinalizar\u00bb o \u00abEnviar\u00bb. Evita usar este tipo de CTA y reempl\u00e1zalas por llamadas a la acci\u00f3n que correspondan con lo que el usuario quiere obtener despu\u00e9s de completar el formulario. La estructura del mensaje debe ser \u00abQuiero + CTA\u00bb, no necesariamente de forma literal, pero s\u00ed formando una oraci\u00f3n coherente. Por ejemplo: Pedir una cita, Obtener el ebook, Descargar el software, etc.<\/p>\n Tus llamadas a la acci\u00f3n deben resaltar para captar la atenci\u00f3n del visitante con facilidad. Para conseguirlo, debes elegir un color que contraste el color de fondo, una posici\u00f3n y una forma.<\/p>\n Es efectivo usar llamadas a la acci\u00f3n 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.<\/p>\n Ejemplo (Sendinblue, ahora Brevo):<\/p>\n A menudo hay un bot\u00f3n \u00abCancelar\u00bb al lado del bot\u00f3n \u00abSiguiente\u00bb. 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 \u00abCancelar\u00bb en lugar de \u00abSiguiente\u00bb y pierdan algunos de los datos que ya han introducid. Debes evitar a toda costa que esto ocurra.<\/p>\n Al solicitar informaci\u00f3n para una plataforma de pagos<\/a><\/strong>, por ejemplo, recuerda solicitar la informaci\u00f3n en el mismo orden en que aparece en la tarjeta bancaria (n\u00famero, titular, fecha de caducidad, c\u00f3digo de seguridad).<\/p>\n Mant\u00e9n los textos legales lo m\u00e1s concisos posible, un poco alejados de las CTA. En el pie de p\u00e1gina puedes enlazar el aviso legal de tu sitio web<\/a><\/strong>.<\/p>\n Por ejemplo, verifica que la casilla \u00abQuiero suscribirme a la newsletter\u00bb no est\u00e9 marcada por defecto. Los usuarios pueden interpretar que los est\u00e1s forzando y se ver\u00e1n 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\u00e1 a\u00fan peor.<\/p>\n \u00bfQu\u00e9 sucede despu\u00e9s de hacer clic en el bot\u00f3n \u00abEnviar\u00bb? \u00bfCu\u00e1les son los pasos que seguir? \u00bfCu\u00e1nto tiempo tendr\u00e1 que esperar el usuario antes de poder usar el servicio? \u00bfEs necesario preparar algo m\u00e1s? Debe explicar sin ambig\u00fcedades lo que suceder\u00e1 despu\u00e9s de enviar el formulario, con una frase sobre el bot\u00f3n o al lado de \u00e9l. Lo ideal es redirigir a las personas que cubrieron el formulario a una p\u00e1gina que comunique claramente los pr\u00f3ximos pasos a seguir.<\/p>\n Configura el bot\u00f3n \u00abEnviar\u00bb para que solo se pueda hacer clic en \u00e9l una vez. Esto evita env\u00edos dobles y proporciona una se\u00f1al adicional al usuario de que su formulario se ha completado con \u00e9xito, lo que reforzar\u00e1 su confianza.<\/p>\n Para facilitar la navegaci\u00f3n en el m\u00f3vil, utiliza las funcionalidades de los dispositivos m\u00f3viles como la c\u00e1mara o la geolocalizaci\u00f3n. Por ejemplo, si necesitas una foto de un documento de identidad, ofrece al usuario la posibilidad tomar una foto con su dispositivo. Esto facilitar\u00e1 la tarea y la experiencia de usuario.<\/p>\n \u00bfPor qu\u00e9? \u00a1Para adaptarse al tama\u00f1o del dedo \u00edndice que se utiliza para tocar la pantalla!<\/p>\n En este caso, esta buena pr\u00e1ctica te permite adaptarte a la vista de las personas que completan tu formulario. Por debajo de este tama\u00f1o, la lectura puede volverse dif\u00edcil, tediosa y hacer que algunos usuarios desistan.<\/p>\n 57 buenas pr\u00e1cticas\u2026 y seguro que nos dejamos alguna en el tintero. Un dise\u00f1o de formularios web \u00f3ptimo no se consigue de un d\u00eda 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\u00f3n de tu web.<\/p>\n Un buen dise\u00f1o de formularios web sirve para captar leads (clientes potenciales), enriquecer tus listas de correo electr\u00f3nico y obtener datos importantes sobre tus visitantes. En definitiva, desempe\u00f1an un papel clave en la conversi\u00f3n de tu sitio web. De ah\u00ed la importancia de cuidar su dise\u00f1o y formato. VentureHarbour public\u00f3 recientemente un art\u00edculo completo sobre […]<\/p>\n","protected":false},"author":5,"featured_media":2427,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[1],"tags":[],"acf":[],"yoast_head":"\n<\/p>\n#16 Muestra siempre una etiqueta delante de los campos del formulario<\/h3>\n
<\/p>\n#17 Integra texto predictivo de campos con muchas opciones predefinidas<\/h3>\n
<\/p>\n#18 Indica con claridad las preguntas opcionales<\/h3>\n
#19 Usa im\u00e1genes para dar atractivo al formulario<\/h3>\n
<\/p>\n# 20 \u00bfY si dejas el n\u00famero de tel\u00e9fono opcional?<\/h3>\n
#21 Adapta el tama\u00f1o de los campos al de las respuestas esperadas<\/h3>\n
<\/a>Accesibilidad y facilidad de uso en el dise\u00f1o de formularios web<\/h2>\n
#22 Evita usar captchas<\/h3>\n
#23 No lo f\u00edes todo a los colores para comunicar un mensaje<\/h3>\n
#24 Aseg\u00farate de que se puede usar la tecla \u00abTAB\u00bb para navegar por el formulario<\/h3>\n
#25 Ofrece explicaciones para preguntas que puedan ser dif\u00edciles de entender<\/h3>\n
<\/p>\n#26 Aseg\u00farate de que el formulario funciona en los principales navegadores\/dispositivos<\/h3>\n
#27 Aseg\u00farate de que el formulario sea legible con poca o con mucha luz<\/h3>\n
#28 Comprueba que ning\u00fan elemento parpadee m\u00e1s de dos veces por segundo<\/h3>\n
#29 Usa la funci\u00f3n de autocompletar<\/h3>\n
<\/p>\n#30 Ofrece preguntas\/etapas adicionales para los m\u00e1s motivados<\/h3>\n
#31 Optimiza la velocidad de carga del formulario<\/h3>\n
32. Evita usar la funci\u00f3n de \u00abavance autom\u00e1tico\u00bb<\/h3>\n
#33 Usa elementos visuales e iconos para que el formulario sea m\u00e1s intuitivo<\/h3>\n
<\/p>\n<\/a>Gesti\u00f3n de errores de validaci\u00f3n y escritura en el dise\u00f1o de formularios web<\/h2>\n
#34 No uses un sistema de validaci\u00f3n de preguntas demasiado r\u00edgido<\/h3>\n
#35 No pidas a la gente que confirme su email o contrase\u00f1a dos veces<\/h3>\n
<\/p>\n#36 Aseg\u00farate de que la validaci\u00f3n aparezca justo a la derecha del campo<\/h3>\n
<\/a>Confianza y credibilidad en el dise\u00f1o de formularios web<\/h2>\n
#37 Usa un dise\u00f1o de calidad<\/h3>\n
#38 Anticipa las preguntas de los internautas al inicio del formulario<\/h3>\n
<\/p>\n#39 Muestra pruebas sociales junto al formulario<\/h3>\n
#40 Utiliza los s\u00edmbolos de seguridad con precauci\u00f3n<\/h3>\n
<\/p>\n#41 Coloca un chat en vivo o la informaci\u00f3n de contacto junto al formulario<\/h3>\n
<\/p>\n<\/a>Formularios en varias etapas e indicadores de progresi\u00f3n<\/h2>\n
#42 Cuando se trata de un formulario en varias etapas, muestra siempre una barra de progreso<\/h3>\n
#43 Optimiza la velocidad de transici\u00f3n<\/h3>\n
#44 Utiliza una se\u00f1alizaci\u00f3n clara<\/h3>\n
<\/p>\n<\/a>Botones y llamadas a la acci\u00f3n (CTA) en el dise\u00f1o de formularios web<\/h2>\n
#45 Las llamadas a la acci\u00f3n deben generar ganas en el usuario<\/h3>\n
#46 Las llamadas a la acci\u00f3n deben destacar<\/h3>\n
#47 Utiliza llamadas a la acci\u00f3n del mismo tama\u00f1o que los campos<\/h3>\n
<\/p>\n#48 Evita usar los botones \u00abCancelar\u00bb o similares<\/h3>\n
#49 El orden de las preguntas debe seguir una secuencia l\u00f3gica<\/h3>\n
#50 No pongas textos legales demasiado complicados cerca de los botones de llamada a la acci\u00f3n<\/h3>\n
#51 No fuerces a los usuarios a suscribirse a tu lista de correo<\/h3>\n
#52 Explica con claridad lo que suceder\u00e1 despu\u00e9s de hacer clic en el bot\u00f3n \u00abEnviar\u00bb<\/h3>\n
#53 El bot\u00f3n \u00abEnviar\u00bb solo se puede pulsar una vez<\/h3>\n
<\/a>Dise\u00f1o de formularios web para m\u00f3viles<\/h2>\n
#55 Utiliza las funciones nativas de los dispositivos m\u00f3viles (c\u00e1mara, geolocalizaci\u00f3n, etc.) para simplificar las tareas<\/h3>\n
#56 Los campos y botones deben tener al menos 48 p\u00edxeles de alto<\/h3>\n
#57 La tipograf\u00eda de las etiquetas y los placeholders debe tener m\u00e1s de 16 p\u00edxeles<\/h3>\n
\nDescubre otros recursos de Webolto que te pueden interesar:\n\n