¿Marcar los campos obligatorios o esconder los opcionales?

Aprende a marcar los campos obligatorios y a ocultar los opcionales para reducir el abandono y aumentar los envíos sin perder los datos que necesitas.

Borrador

Cada campo que añades a un formulario es una decisión. Los estudios muestran que cada campo obligatorio adicional reduce las tasas de finalización entre un 10% y un 15%. Pero pedir menos datos también significa recibir menos datos. La clave para mover la aguja de la conversión no es eliminar campos sin más. Es ser estratégico sobre qué campos marcas como obligatorios, cuáles como opcionales y cuáles ocultas hasta que sean relevantes.

Qué hacen realmente los campos obligatorios con las tasas de conversión

Cuando alguien llega a tu formulario, lo escanea en segundos. No palabra por palabra. Mira cuántos campos hay, cuánto tendrá que hacer scroll y si lo que se le pide parece razonable.

Los campos obligatorios envían una señal. Cada uno transmite el mensaje "necesito esto de ti". Dos o tres campos obligatorios parecen asumibles. Siete campos obligatorios parecen una solicitud de empleo. La diferencia en las tasas de abandono no es pequeña.

Mira cualquier pago en una tienda online y lo verás en acción. Si el campo del código postal está marcado como opcional pero la dirección de envío como obligatoria, los clientes se quedan. Si ambos son obligatorios y no están claramente marcados, el abandono del carrito se dispara. La psicología es simple. Los visitantes que dudan se van.

La regla de marcar a la minoría: cuándo marcar obligatorio y cuándo opcional

La mayoría de los formularios están desequilibrados. Un formulario de contacto puede tener cinco campos obligatorios y uno opcional. Un formulario de registro puede tener ocho campos obligatorios y dos opcionales. En estos casos, marcar cada campo obligatorio malgasta espacio y carga mental.

El mejor enfoque es marcar solo a la minoría. Si el 80% de tus campos son obligatorios, marca solo los opcionales con la palabra "(opcional)" junto a la etiqueta. Se dará por hecho que los campos sin marcar son obligatorios. Así se reduce el desorden visual y el formulario parece más corto.

Por otro lado, fíjate en los formularios complejos en los que los campos obligatorios están repartidos por todas partes. Las solicitudes de seguros, los formularios de préstamos y las encuestas de varias páginas suelen mezclar campos obligatorios y opcionales. Cuando eso ocurre, marca ambos. Usa un asterisco (*) para los campos obligatorios y "(opcional)" para los opcionales. Una etiqueta clara vale más que una convención implícita.

La regla es sencilla. Marca a la minoría, sea cual sea.

Cómo etiquetar los campos obligatorios para que la gente se fije

Un asterisco por sí solo no basta. Los usuarios de lectores de pantalla no pueden oír un asterisco. Quienes no son nativos del idioma pueden no reconocer la convención. Los usuarios que hacen scroll rápido pueden pasar por alto un símbolo pequeño.

La solución es etiquetar por capas. Necesitas el asterisco y la palabra "obligatorio", y que ambos sean claros tanto a la vista como en el código.

Usa un asterisco y acompáñalo de la palabra obligatorio

Los estudios muestran que acompañar un asterisco rojo (*) con el texto "obligatorio" en la etiqueta elimina la confusión. El asterisco llama la atención. La palabra "obligatorio" confirma lo que significa. Juntos funcionan para usuarios que ven, usuarios de lectores de pantalla y personas con discapacidades cognitivas.

Prueba con Email * (Obligatorio) o con Teléfono * seguido de un texto que diga "Los campos marcados con asterisco son obligatorios". Este formato funciona bien.

Añade una leyenda que explique qué significa obligatorio

Antes de que empiecen los campos del formulario, incluye una línea sencilla que diga "* = campo obligatorio" o "Los campos marcados con un asterisco (*) son obligatorios". Esta frase ocupa cinco palabras y evita que los usuarios tengan que interpretar el símbolo por su cuenta.

Combínalo con atributos HTML en el código. En el código de tu formulario, añade required o aria-required="true" a cada campo obligatorio. Así el navegador y el lector de pantalla saben que el campo es obligatorio sin depender solo del diseño visual.

El color importa menos que el contraste y la posición

Los asteriscos rojos son lo habitual, pero el verdadero problema es el contraste. Si tu asterisco es de un gris tenue o se funde con la etiqueta, los usuarios con baja visión no lo verán. Pon el asterisco en negrita y asegúrate de que tenga un contraste fuerte con el fondo.

La posición también importa. Coloca el asterisco justo después del texto de la etiqueta, no flotando aparte. Así la señal de "obligatorio" queda unida visualmente al nombre del campo y se escanea de izquierda a derecha.

Cuándo ocultar los campos opcionales es mejor que marcarlos

Algunos formularios se benefician de un enfoque distinto llamado revelación progresiva. Oculta los campos opcionales hasta que sean relevantes. Funciona cuando tu formulario tiene un camino principal claro y los campos opcionales solo se aplican a ciertos usuarios.

Piensa en un formulario de reserva. "Nombre de la marca" puede ser obligatorio para clientes corporativos pero opcional para particulares. En lugar de marcarlo como opcional y desordenar el camino principal, muéstralo solo cuando el usuario elija "tipo de reserva" como "empresa". Nunca ven el campo a menos que les corresponda.

La revelación progresiva hace que los formularios parezcan más cortos

Los formularios que ocultan los campos opcionales hasta que hacen falta convierten mejor que los que lo muestran todo desde el principio. El motivo es la percepción. Un formulario que muestra 12 campos (aunque 3 sean opcionales) parece más largo que uno que muestra 9 campos y revela 3 más según las respuestas del usuario.

La lógica condicional revela campos según las respuestas anteriores

Los creadores de formularios modernos lo admiten de forma nativa. Cuando un usuario elige cierta opción, aparece un campo nuevo. Cuando cambia esa opción, el campo desaparece. El formulario se adapta a sus necesidades en tiempo real.

Aquí es donde brilla la lógica condicional de WEMASY. Puedes definir reglas como "si el sector es sanidad, mostrar el campo de cumplimiento de HIPAA" o "si el presupuesto es inferior a $1000, mostrar opciones de pago para planes pequeños". El usuario solo ve las preguntas que le importan.

Campos obligatorios condicionales: obligatorios solo cuando tiene sentido

El diseño avanzado de formularios da un paso más. Algunos campos son opcionales por defecto pero pasan a ser obligatorios según las respuestas anteriores del usuario. Es el punto ideal entre la recogida de datos y la experiencia de usuario.

Imagina que "Cuéntanos sobre tu marca" es opcional en un registro gratuito. Pero si el usuario elige "Soy el dueño de una marca" en un desplegable, ese mismo campo pasa a ser obligatorio. El formulario cambia el requisito sobre la marcha.

Muestra la transición con claridad

Cuando un campo pasa de opcional a obligatorio, el usuario necesita saberlo. Lo mejor es añadir el asterisco y la etiqueta "(Obligatorio)" en cuanto el campo pasa a ser obligatorio. Algunos creadores de formularios resaltan el cambio del campo con una animación sutil o un cambio de color. Así se señala que algo ha cambiado sin resultar brusco.

Errores que reducen en silencio tus tasas de finalización

Incluso con las reglas correctas, los pequeños errores se acumulan y aumentan el abandono. Cuidado con estos.

Mezclar símbolos sin leyenda

Usar un asterisco en unos campos y el texto "(obligatorio)" en otros crea confusión. Elige un enfoque y mantenlo. La coherencia en toda tu marca importa más que el símbolo concreto que elijas.

Marcar campos opcionales como obligatorios por accidente

Es habitual en formularios migrados de sistemas antiguos o cuando los requisitos cambian a mitad de proyecto. Un campo se etiqueta como opcional pero el servidor lo exige, o al revés. Los usuarios rellenan un campo que creían opcional, envían el formulario y reciben un error. Abandonan.

Ocultar información que los usuarios necesitan ver

La revelación progresiva funciona cuando el campo oculto es de verdad opcional o de verdad condicional. Sale mal cuando ocultas campos obligatorios tras una lógica compleja. Si un campo es esencial, muéstralo. No hagas que los usuarios se pregunten si tienen que rellenarlo.

Usar asteriscos sin texto explicativo

Un asterisco a solas es un misterio para quien nunca ha visto esa convención. Sin leyenda, algunos usuarios se saltarán el campo pensando que es opcional. Añade la leyenda. Una línea arriba del todo. Cinco palabras. Evita el abandono.

Cambiar el estado de obligatorio a mitad del formulario

Si un campo es obligatorio, mantenlo obligatorio. Si necesitas hacerlo opcional más adelante porque cambian las necesidades de la marca, haz una revisión completa. No cambies en silencio un campo de obligatorio a opcional esperando que nadie lo note. Los usuarios lo notarán y se confundirán.

Cómo te ayuda WEMASY con los campos obligatorios y opcionales

El creador de formularios de WEMASY te da control total sobre los requisitos de los campos sin tocar código. Define cualquier campo como obligatorio u opcional desde el editor. Añade lógica condicional que haga un campo obligatorio solo cuando se cumplan condiciones concretas. Añade leyendas personalizadas para explicar los símbolos de tus campos obligatorios.

También puedes ver datos en tiempo real sobre qué campos causan más abandono. Si un campo opcional concreto frena tus conversiones, puedes ocultarlo con revelación progresiva. Si los usuarios se confunden con un campo obligatorio, puedes pasar a marcar solo los opcionales y ver qué enfoque convierte mejor.

Preguntas frecuentes

¿Tengo que marcar los campos opcionales si la mayor parte de mi formulario es opcional?
No. Usa la regla de marcar a la minoría. Si el 80% de tus campos son opcionales, marca solo los obligatorios. Si el 80% son obligatorios, marca solo los opcionales. Así tu formulario se mantiene limpio. Con el creador de webs de WEMASY, puedes configurarlo directamente en tu web.
¿Puedo usar solo asteriscos sin la palabra obligatorio?
Puedes, pero no es lo ideal para la accesibilidad. Los lectores de pantalla no anuncian los asteriscos. Quienes no son nativos del idioma pueden no reconocer la convención. La mejor práctica es acompañar el asterisco con la palabra obligatorio o con "obligatorio" entre paréntesis.
¿De qué color debe ser mi asterisco?
El rojo es la convención en la web y los usuarios lo esperan. La clave es el contraste. Asegúrate de que el asterisco sea lo bastante oscuro y grueso para que lo vean los usuarios con baja visión. Los asteriscos de gris pálido son invisibles.
Si un campo es opcional, ¿debo ocultarlo o marcarlo como opcional?
Ocúltalo si solo se aplica a algunos usuarios y está relacionado con sus respuestas anteriores. Márcalo como opcional si está disponible para todos. Usa la lógica condicional para decidir qué enfoque encaja mejor con tu formulario.
¿Puedo hacer que un campo sea obligatorio solo para ciertos usuarios?
Sí. Se llaman campos obligatorios condicionales. Usa la lógica condicional de tu creador de formularios para que un campo sea obligatorio solo cuando se cumplan condiciones concretas. Por ejemplo, un campo podría ser obligatorio solo si el usuario eligió antes una opción determinada.
¿Ocultar los campos opcionales mejora de verdad las tasas de conversión?
Sí. Los formularios que ocultan los campos opcionales hasta que hacen falta parecen más cortos y menos intimidantes. Los usuarios ven menos campos al principio, perciben menos esfuerzo y es más probable que empiecen a rellenar el formulario. La contrapartida es que necesitas lógica condicional para decidir qué mostrar y cuándo.

Ponlo en práctica
en tu propia web.

Empieza gratis con WEMASY y crea tu web en pocos minutos.