TeaCup Lab Logo

Guía de Mejores Prácticas para Campos Obligatorios en Formularios Web

Mónica Bohigas
16 enero, 2024

Los formularios web son una parte fundamental de la experiencia online del usuario. Desde la creación de cuentas hasta la finalización de compras, los formularios son una herramienta crucial para recopilar información. Sin embargo, es esencial diseñarlos de manera clara y efectiva, especialmente al indicar qué campos son obligatorios y cuáles no. Este aspecto puede marcar la diferencia entre una experiencia de usuario fluida y una frustrante.

En esta guía, exploraremos las buenas y malas prácticas para indicar campos obligatorios en formularios web, considerando los principios de la Experiencia de Usuario (UX).

Importancia de Indicar Campos Obligatorios

Antes de sumergirnos en las prácticas específicas, es crucial entender por qué es vital indicar los campos obligatorios en un formulario.

Esencialmente, la indicación clara de campos obligatorios en un formulario contribuye significativamente a la eficiencia de la recogida de datos y en la satisfacción del usuario de las siguientes maneras:

  1. Eficiencia en la Entrada de Datos: la señalización de campos obligatorios permite a los usuarios concentrarse directamente en proporcionar la información esencial, agilizando el proceso de entrada de datos. Esto no solo beneficia al usuario al ahorrar tiempo, sino que también mejora la eficiencia general del formulario.
  2. Prevención de Errores: la claridad sobre qué campos son obligatorios reduce las posibilidades de cometer errores al completar el formulario. Al evitar la omisión de información vital, se minimiza la necesidad de correcciones posteriores, optimizando así la precisión de los datos recopilados.
  3. Alineación con Expectativas del Usuario: los usuarios suelen tener expectativas claras sobre qué información se requiere para completar una acción o proceso. La indicación de campos obligatorios alinea el diseño del formulario con esas expectativas, generando confianza y facilitando la interacción fluida con la interfaz.
  4. Facilita la Toma de Decisiones: cuando los usuarios comprenden claramente qué información es crucial, pueden tomar decisiones informadas sobre la relevancia de proporcionar ciertos datos. Esto puede ser especialmente valioso en formularios extensos o complejos, donde la claridad ayuda a los usuarios a priorizar la información necesaria.
  5. Reducción de la Tasa de Abandono: la falta de indicación sobre campos obligatorios puede resultar en frustración y confusión para los usuarios. Esto podría llevar a abandonar el formulario antes de completarlo. Una interfaz transparente y fácil de entender disminuye la probabilidad de deserción, aumentando así la tasa de finalización de formularios.
  6. Cumplimiento Normativo: en algunos casos, la indicación de campos obligatorios puede ser un requisito normativo o legal. Garantizar el cumplimiento con estas regulaciones no solo evita posibles consecuencias legales, sino que también demuestra el compromiso de la empresa con prácticas éticas y transparentes.

En resumen, la claridad en la indicación de campos obligatorios no solo es una práctica de diseño amigable, sino que también conlleva beneficios tangibles para la experiencia del usuario, la eficiencia operativa y el cumplimiento normativo.

Buenas Prácticas para Indicar Campos Obligatorios

1. Símbolos universales

Utilizar símbolos reconocidos universalmente, como un asterisco (*), junto a los campos obligatorios. Esto permite una rápida identificación y es ampliamente entendido por los usuarios.

Hay otras formas más sutiles para informar de un campo obligatorio como, no activar el botón de continuar hasta que no se completa el formulario. En formularios de uno o hasta 3 campos, esto podría funcionar. Sin embargo, no es recomendable en formularios más largos ya que podría generar dudas e incluso bloquear el avance de un usuario por su incomprensión.

Ejemplo: Atida utiliza el sencillo pero efectivo asterisco para marcar los campos obligatorio. Se trata de un asterisco visible y claro.

Carrefour por ejemplo, utiliza el color y copy del botón para informar al usuario que el campo que no ha rellenado es obligatorio. Se trata de un diseño más sutil, aunque informativo. No obstante, deja más margen para la aparición de dudas y bloqueos en los usuarios.

2. Texto Explicativo:

Acompañar los campos obligatorios con un texto explicativo cercano al campo o al inicio del formulario. Por ejemplo, "Los campos marcados con * son obligatorios" o "Por favor, complete todos los campos marcados con *".

Ejemplo: en el registro de Renfe.com, se muestra el mensaje “*Campos obligatorios” junto al propio registro a modo de leyenda para dar a entender a los usuarios lo que el “*” significa.

3. Colores y Estilos Visuales (aunque nunca como único recurso):

Podemos emplear colores o estilos visuales que diferencien notoriamente los campos obligatorios de los opcionales. Por ejemplo, utilizar un borde rojo o un fondo resaltado para los campos obligatorios.

Es importante que estos recursos visuales no sean la única indicación de un campo obligatorio, ya que el propio recurso visual puede ser insuficiente (pasa desapercibido, podría no respetar las buenas practicas para la accesibilidad, etc.) y abierto a una interpretación subjetiva.

4. Justificar o explicar la obligatoriedad:

Es posible que estemos obligando a un usuario a darnos una información que no quiere o no querría proporcionar. Por ello, debemos informar al usuario del por qué, para qué y cómo se pide esa información. Ayudemos a que el usuario confíe en nosotros.

Ejemplo: Spotify no señala qué campos son obligatorios de ninguna forma pero sí informa al usuario sobre el uso y el por qué se solicitan dichos datos (“¿Por qué necesitamos tu fecha de nacimiento?”)

Malas Prácticas a Evitar

1. Ocultar la Indicación:

Evitar ocultar la indicación de campos obligatorios, ya sea haciendo que los asteriscos sean apenas visibles, colocándolos en un lugar poco visible o sencillamente no señalizandolo de ninguna forma. Esto genera confusión y dificulta la identificación de qué campos son obligatorios.

En los últimos años, hemos visto como los formularios, especialmente en mobile, utilizaban un diseño de “un campo por pantalla”. En estos casos, es evidente que el campo que se muestra es obligatorio. Es el caso de pantallas de login o registro, en los que solo vemos el campo de email/usuario y el de contraseña. En estos casos, es evidente que el campo es obligatorio y por ello, no es tan clave señalizar la obligatoriedad de forma visual.

Ejemplo: El País plantea unos * en sus campos obligatorios que apenas se ven, lo que podría hacer que los usuarios no rellenen el campo.

2. Pedir demasiados datos:

Evitar hacer demasiados campos obligatorios, ya que esto puede abrumar al usuario. Es crucial equilibrar la necesidad de información con la experiencia del usuario.

Ejemplo: Hipercor solicita datos personales sensibles en su opción de “compra sin registro”. Esto podría interrumpir negativamente la experiencia de muchos usuarios que pretendían hacer un checkout rápido y sin necesidad de Registro/aportar datos. Adicionalmente, no se indica visualmente que estos campos son obligatorios. Solo cuando se envía el formulario incompleto aparece el mensaje de error.

3. Falta de Consistencia:

Mantener la consistencia en la indicación de campos obligatorios a lo largo de diferentes secciones o formularios en el sitio web. La falta de coherencia puede confundir a los usuarios.

Ejemplo: En diferentes secciones de un sitio web de la web de atida.com, se utilizan * para marcar los campos obligatorios. Sin embargo hay otras pantallas en las que no se usa ninguna indicación o simbolización, como es el caso del formulario de método de pago. Esta inconsistencia podría llevar a error a sus usuarios.

4. Depender Solo de los Colores:

No depender únicamente del color para indicar campos obligatorios, ya que algunos usuarios pueden tener dificultades con la percepción del color. Es esencial utilizar múltiples señales visuales.

Conclusion

En conclusión, la claridad y la simplicidad son pilares fundamentales en el diseño de formularios web. Al indicar los campos obligatorios de manera clara y efectiva, se mejora significativamente la experiencia del usuario y se reduce la probabilidad de errores. Siguiendo estas buenas prácticas y evitando los errores comunes, se puede crear un entorno en línea más accesible y amigable para todos los usuarios.

¡Recuerda siempre poner al usuario en el centro del diseño!

¿Listo para mejorar la experiencia de tus usuarios? ¡Hablemos!
Las respuestas que buscas, a tan solo un clic.
Contáctanos ->
TeaCup Lab Logo
TeaCup Lab is a user experience consultancy agency founded in Madrid in 2016. We specialize in User Research & User testing for global brands.
Copyright 2019-2023 TeaCup Consulting SL

Contact us

TeaCup Lab 
Calle Jaén 2, 1ºG
28020, Madrid, Spain
+34 910 59 21 36
hola@teacuplab.com