Diseño UX y Usabilidad en formularios Web

Un formulario web usable es aquel que pide solo los datos necesarios, los ordena de forma lógica, los explica con etiquetas claras, cierra con un botón que dice lo que ocurrirá y avisa de inmediato cuando algo falla. Diseñarlo con criterios de experiencia de usuario (UX) importa porque es el punto exacto donde el interés de una persona se convierte, o no, en un contacto comercial.

Imagine la reunión semanal de resultados digitales de una aseguradora que vende seguros empresariales. La directora de mercadeo informa que la campaña trajo miles de visitas a la página de cotización y que la inversión se agotó dentro del presupuesto. El director comercial pregunta por qué entraron tan pocas solicitudes, y el equipo de analítica abre el recorrido. La mayoría de las personas llegó al formulario, escribió su nombre, y se fue al ver que debía completar diecisiete campos, tres de ellos sobre datos que no tenía a la mano. Nadie criticó el producto ni el precio. La venta se perdió en una pantalla que ninguno de los presentes consideraba parte de la estrategia.

Esa escena se repite en empresas de todos los sectores, y su causa es siempre la misma. Se trata el formulario como un trámite técnico y no como una decisión de negocio. Cuando una persona entra a un sitio web tiene un objetivo específico, ya sea obtener información, descargar un recurso o comprar un producto. Para alcanzarlo suele tener que rellenar un formulario, que nunca es su objetivo principal sino un paso que no necesariamente le agrada. Por eso el proceso debe estar optimizado para recolectar la información de forma efectiva.

¿Por qué un formulario puede decidir el resultado de una estrategia digital?

Los formularios pueden resultar tediosos para los clientes, pero son indispensables para que la empresa recolecte su información. En la metodología de Inbound Marketing, obtener el correo electrónico de quien visita el sitio es el paso que permite acompañarlo por todo el Buyer Journey y generar conversiones. La lógica del método es ofrecer contenido de valor a cambio de los datos del visitante, y el medio para recolectarlos es el formulario.

El problema es que el formulario, tal como se diseña con frecuencia, anula el valor que se ofrece. Si es confuso, muy largo o no genera confianza, la experiencia de usuario se deteriora por más valiosa que sea la oferta, y lo más probable es que la persona abandone y vaya a otro sitio. En el mundo digital, todo está a un clic de distancia. La inversión en publicidad, en contenido y en posicionamiento se concentra en llevar a alguien hasta ese punto, y es allí donde se pierde la parte decisiva de la conversión.

La evidencia disponible apunta en la misma dirección. En el comercio electrónico, donde el formulario de pago es el más estudiado, el Baymard Institute destaca en su análisis sobre los campos del formulario de compra que el número promedio de campos en el pago es de 11,3 y que 22% de los usuarios ha abandonado alguna vez una compra por la complejidad del proceso. Se trata de formularios de compra y no de captación de leads, pero la enseñanza se traslada: cada campo adicional es una oportunidad de abandono, y la dirección debería poder justificar por qué existe cada uno.

>> Diseño UX vs Diseño UI <<

¿Cómo se optimiza un formulario web desde la experiencia de usuario?

La pregunta que se hacen muchas empresas es cómo conseguir que las personas no abandonen en el último paso y sí generen conversiones. La respuesta es sencilla de enunciar y exigente de ejecutar, y consiste en diseñar los formularios pensando en la experiencia de usuario (UX) y en la usabilidad. Para ordenar el análisis conviene descomponer el formulario en sus cinco elementos comunes, que son la estructura, los campos, las etiquetas, los botones y la retroalimentación. Cada uno tiene su propia lógica y sus propios errores habituales.

Que este enfoque funcione no es una cuestión de opinión. Un experimento controlado con seguimiento ocular publicado en las actas de la conferencia CHI 2014 por Mirjam Seckler y sus coautores, Designing Usable Web Forms, Empirical Evaluation of Web Form Improvement Guidelines, aplicó veinte pautas de usabilidad a formularios reales de sitios corporativos y comparó su desempeño con el de las versiones originales en 65 participantes. Los formularios mejorados se completaron más rápido, requirieron menos intentos de envío y generaron mayor satisfacción. Para una dirección comercial, eso se traduce en menos prospectos perdidos en la última pantalla sin gastar un peso más en tráfico.

¿Cómo debe organizarse la estructura de un formulario?

La estructura se refiere a cómo se organizan los campos, a las conexiones lógicas entre los elementos y al diseño general del formulario. Una estructura bien resuelta permite que el usuario entienda lo que se le pide y lo complete correctamente sin esfuerzo. La primera regla es no preguntar de más. Antes de diseñar hay que establecer cómo y para qué se usará la información, de modo que se pregunte solo lo que realmente se necesita. Un formulario largo agobia, y además muchas preguntas pueden ser de difícil respuesta para el visitante, que terminará abandonando el sitio.

La segunda regla es ordenar las preguntas de manera lógica y familiar. Casi nunca veremos un formulario que pregunte el número de teléfono antes que el nombre, y esa costumbre compartida facilita el proceso porque el usuario reconoce el patrón. La tercera es agrupar la información en bloques, como datos personales y datos de la empresa, para que cada sección tenga un propósito evidente. La cuarta es el número de columnas. Lo más recomendable es una sola, porque la lectura es más rápida. Si se usan dos, deben considerarse muchos más elementos para que no se convierta en un obstáculo entender el flujo de lectura. Esta recomendación coincide con la guía de Smashing Magazine sobre formularios eficientes, que explica que los campos colocados uno al lado del otro obligan a leer en zigzag y ralentizan la comprensión, mientras que una columna única ofrece una línea recta hacia la finalización.

>> Google Analytics: cómo y por qué es importante en UX <<

¿Qué campos debe incluir y cuáles conviene eliminar?

Los campos son los espacios donde el usuario escribe o selecciona sus datos, e incluyen cajas de texto, casillas de verificación, botones de opción, listas desplegables y contraseñas. El principio central es minimizar la cantidad. Cuando una persona ve un formulario extenso, lo más probable es que no lo complete, así que hay que limitar la información que se pide. Pero reducir no es solo eliminar, también es combinar. Para pedir una fecha, por ejemplo, en lugar de tres campos para día, mes y año basta un solo campo con acceso a un calendario, que se ve mucho menos pesado.

Los campos opcionales merecen una reflexión aparte. Si un campo es opcional, probablemente no es información de tanta relevancia, o es información que incomoda contestar, y con frecuencia genera abandono porque la persona no advierte que podía omitirlo. Si se decide incluirlos, deben identificarse con claridad para evitar confusiones. El mismo Baymard Institute ha documentado, en un estudio de 2018, que solo 14% de los comercios electrónicos marca de forma explícita tanto los campos obligatorios como los opcionales, lo que indica cuán extendido está el problema.

Otras dos prácticas dan resultado. Las opciones predefinidas ayudan a completar el formulario y, además, mantienen el orden en la base de datos porque limitan las variantes que las personas pueden escribir, un detalle que agradece quien después debe segmentar o analizar la información. Indicar con claridad el campo activo evita que se llene un dato en el lugar equivocado. Para quien dirige una operación comercial, la calidad de esos datos importa tanto como su volumen, porque una base con nombres de empresa escritos de veinte maneras distintas deteriora todo lo que se construye sobre ella.

¿Cómo escribir y ubicar las etiquetas de los campos?

Las etiquetas son los textos que especifican qué información debe escribirse en cada campo, y una etiqueta clara facilita el proceso. Lo mejor son expresiones cortas y descriptivas, que permiten visualizar de inmediato qué se está pidiendo. En cuanto a su ubicación, la mejor opción suele ser arriba del campo, porque sigue el flujo de lectura y los usuarios la perciben con más rapidez. Colocarlas a la izquierda puede ser beneficioso si se quiere que los campos se revisen con más detenimiento, y ninguna de las dos posiciones genera confusión. El análisis de Smashing Magazine recoge una lectura similar: las etiquetas superiores favorecen un llenado rápido, mientras que las laterales se asocian con una lectura cuidadosa y con datos sensibles, aunque son más lentas de completar.

Conviene además que las etiquetas estén fuera del campo de escritura. Cuando el texto explicativo vive dentro del campo, desaparece apenas el usuario empieza a escribir, y es fácil que pierda de vista qué se esperaba allí y cometa errores. La misma guía señala que el texto de marcador puede confundirse con datos ya completados y que lo recomendable es mantener una etiqueta visible. Es un detalle que suele sacrificarse por estética, y que cuesta conversiones.

¿Qué hace que un botón de formulario convierta mejor?

El botón es el llamado a la acción del formulario: a partir del clic se completa o continúa el proceso, por lo que es un elemento decisivo. Su aspecto visual debe hacerlo reconocible como botón y ofrecer retroalimentación cuando el cursor pasa por encima y cuando se hace clic. Debe, además, llamar la atención sobre el resto de los elementos, porque es el que completa el proceso. La posición también cuenta: el botón va al final, que es el último paso, y sin un espacio excesivo respecto del formulario, para que el clic ocurra inmediatamente después de terminar de llenarlo.

El nombre del botón es una decisión de comunicación. Los nombres genéricos transmiten la sensación de que todo el formulario lo es y no describen lo que el usuario obtendrá al hacer clic. Es preferible especificar el resultado, con expresiones como «Obtener la plantilla» o «Suscribirme al blog». La guía de Smashing Magazine coincide al recomendar evitar «Enviar» y nombrar la acción concreta. Finalmente, debe existir un único botón principal, el que cumple el objetivo del formulario, y cualquier otro, como regresar o borrar, debe tener una jerarquía visual menor para que nadie lo confunda con la acción principal.

>> Beneficios de la Experiencia de Usuario <<

¿Cómo dar retroalimentación útil mientras alguien llena el formulario?

La retroalimentación son los mensajes que aparecen cuando algo se completó correctamente, y también cuando algo es incorrecto: avisan del error, lo aclaran y sugieren una solución. Su calidad separa a un formulario que acompaña de uno que castiga. Los códigos de color ayudan a comunicar el estado de las acciones: verde para la información correcta, rojo para la errónea, amarillo para advertir, por ejemplo, que una contraseña es débil. Lo mejor es validar los campos conforme se rellenan, para que el usuario corrija de inmediato y no tenga que volver atrás. El color no debería ser, sin embargo, el único indicador, porque algunas personas no distinguen bien los colores, y conviene acompañarlo de texto o de un ícono.

Cuando haya un error, debe indicarse específicamente cuál es, para que se pueda solucionar con facilidad. Un mensaje que diga «Datos inválidos» obliga al usuario a adivinar, mientras que uno que diga «El teléfono debe incluir el código de país» le permite resolverlo en segundos. La guía de Smashing Magazine insiste en esa misma idea: el principio central es decirle al usuario qué está mal, y validar apenas se ingresan los datos, sin esperar a que presione el botón de envío. Si se incluye un botón de ayuda en algún campo, debe ser muy visible, de lo contrario no cumple su objetivo.

Tres industrias, tres formularios que cuestan o ganan clientes

Retome el caso de la aseguradora. Un formulario de cotización de diecisiete campos puede reducirse a un primer paso de cuatro o cinco, nombre, empresa, correo, tipo de cobertura y teléfono, y dejar el resto para una conversación con el asesor o para una segunda pantalla ya con el interés confirmado. El mismo contenido, presentado en etapas, pasa de ser una barrera a ser un diálogo. Para el área comercial, el beneficio no es solo más solicitudes: son solicitudes con datos de calidad suficiente para que el asesor llame preparado.

En una empresa manufacturera que vende a distribuidores, el formulario de solicitud de cuenta suele pedir información fiscal, referencias comerciales y volúmenes esperados. Aquí los campos con opciones predefinidas para el tipo de industria y el tamaño de la empresa evitan que el área de ventas dedique horas a limpiar datos, y los mensajes de error específicos reducen las llamadas a soporte. En una clínica privada que permite reservar citas en línea, el botón con un nombre concreto, como «Reservar mi cita», y la validación inmediata del número de teléfono marcan la diferencia entre una agenda llena y una página visitada pero no utilizada. En los tres casos el diseño del formulario afecta directamente los ingresos, aunque nunca figure en un plan estratégico.

Qué significa para la alta dirección

Para la dirección general y comercial, el formulario es el punto de conversión más barato de optimizar, porque no requiere más tráfico sino aprovechar mejor el que ya se pagó. Una mejora modesta en la proporción de visitantes que completa el formulario equivale, en la práctica, a bajar el costo de adquisición de cada lead, sin cambiar el presupuesto de campañas. Por eso conviene que alguien responda por el desempeño de los formularios con la misma seriedad con que se responde por una campaña, con indicadores propios: tasa de inicio, tasa de finalización, campos donde se abandona y calidad de los datos obtenidos.

Para quien responde por mercadeo, la decisión de qué datos pedir es una decisión de estrategia, no de diseño. Cada campo debe justificarse por el uso que se le dará, y si nadie en la organización utiliza un dato, no hay razón para solicitarlo. Para el responsable de servicio y de experiencia del cliente, los formularios son una parte del recorrido que el cliente recuerda, y un trámite agradable refuerza la percepción de una empresa fácil de contratar. Y para el responsable de tecnología y datos, la calidad de lo que entra por los formularios determina la calidad de todo lo que viene después, desde la segmentación hasta la analítica.

Cómo empezar el lunes por la mañana

Abra su formulario más importante, el que más contactos debería generar, y complételo usted mismo desde un teléfono móvil, con un cronómetro. Anote cada vez que dude, cada campo cuyo uso no pueda explicar y cada mensaje de error que no le ayude. Ese ejercicio de quince minutos suele revelar más que un informe de analítica. Luego pida a analítica los datos de abandono por campo, o instale la medición si no existe, y compare el comportamiento con lo que observó.

Con esa información, cambie una sola cosa a la vez. Quite los campos que nadie use, renombre el botón con un verbo y un resultado concretos, mueva las etiquetas fuera del campo y cree mensajes de error específicos. Mida durante dos o tres semanas el efecto de cada cambio antes de pasar al siguiente. Si su sitio tiene varios formularios, priorice por volumen de tráfico y por valor comercial del contacto. Y si necesita una evaluación más completa, un análisis de usabilidad por expertos permite revisar el formulario contra criterios reconocidos antes de invertir en pruebas con usuarios, como se explica en el artículo sobre pruebas de usabilidad en el diseño UX.

Cómo le ayuda ICX

ICX Consulting trata los formularios como parte del recorrido comercial y no como una pieza aislada de la web. Desde nuestra práctica de consultoría en experiencia de usuario revisamos los puntos de conversión a partir de datos reales, y con los servicios de optimización UX y de usabilidad y accesibilidad proponemos y probamos mejoras. Cuando el objetivo es mejorar la calidad de los leads, trabajamos en conjunto con nuestra analítica UX para identificar dónde se pierde el interés y cuánto cuesta.

Como punto de partida, el kit de pruebas heurísticas le permite evaluar sus formularios con criterios de usabilidad antes de intervenirlos. Y si desea que un consultor revise con usted sus formularios más importantes, solicite un diagnóstico con un consultor de ICX. Para profundizar en la mejora de la conversión, también le recomendamos nuestra guía sobre optimización de landing pages y la visión de ICX sobre la experiencia de usuario en su conjunto.

Preguntas frecuentes

¿Cuántos campos debería tener un formulario de captación de leads?

No hay un número universal. La regla práctica es pedir solo lo que se usará en el primer contacto: nombre, correo y un dato que permita calificar al lead. El resto puede obtenerse más adelante mediante conversaciones o formularios progresivos, conforme crece la confianza del visitante.

¿Es mejor un formulario en una sola página o en varios pasos?

Depende de la longitud y de la sensibilidad de los datos. Los formularios cortos funcionan bien en una sola pantalla, mientras que los largos suelen mejorar al dividirse en pasos con un indicador de avance. Lo recomendable es probar ambas versiones con el mismo tráfico y comparar la tasa de finalización.

¿Con qué frecuencia conviene revisar los formularios del sitio?

Al menos una vez por trimestre para los formularios de mayor volumen, y siempre que cambien la oferta, el proceso comercial o las campañas que los alimentan. Un formulario que se diseñó para otra oferta suele pedir datos que ya nadie utiliza.

¿Qué indicadores permiten saber si un formulario funciona?

Los principales son la tasa de inicio, la tasa de finalización, el abandono por campo, el tiempo de llenado y la calidad de los leads que entrega, medida por su avance comercial. Los tres primeros salen de la analítica web y el último, del CRM.

Un formulario bien diseñado casi no se nota, y esa es su mayor virtud, porque la persona completa lo que necesita y sigue adelante. Si quiere que cada visita que llega a su sitio tenga una oportunidad real de convertirse en una conversación comercial, converse con un consultor de ICX y revisemos juntos los formularios que hoy deciden sus resultados.