it-swarm-es.com

Validación de campo requerida

¿Cómo debe manejarse visualmente la validación de campo requerida?

Nota: asume que el asterisco es rojo

*Name:[_______________]

o

Name:*[_______________]

o

Name: [_______________]*

o

Name: [____red bg____  ]

o

Name(<- font color red): [_______________]

o

¡Me dices una mejor manera!

16
rick schott

Nunca hay una respuesta correcta o incorrecta con este tipo de preguntas y muchas de ellas dependen de las personas de sus usuarios (ingenieros versus usuarios avanzados versus tía Alice que nunca usaron una computadora) y el contexto.

Una regla general es usar

label [input   ] [validation       ] 

Usar el área de validación para un asterisco rojo para indicar un campo requerido o un mensaje de error después de validar el formulario (o ambos).

El sitio web de Simply Accessible tiene una redacción buena y concisa en los campos de formulario requeridos aquí: http://simplyaccessible.com/article/required-form-fields

11
Bil Simser

Depende mucho de varios factores.

  1. Como regla general: debe haber un indicación de texto (asterisco) y una indicación visual, como tener solo un segundo vistazo al formulario, debe poder comprender qué campos se requieren. Por ejemplo, puede agregar un asterisco al costado de la etiqueta (mejor si está formateado de manera ligeramente diferente a la etiqueta misma) y agregar un borde más intenso a los campos que son obligatorios.
  2. Como segunda regla general, trate de ver si puede simplificar un formulario: muy a menudo hay formas de minimizar los formularios y evitarlos en todos los campos opcionales. Por ejemplo, los formularios de registro minimalistas podrían solicitar solo el correo electrónico y dejar todo lo demás a seguimientos y widgets como "Su perfil está 90% completo".
  3. Ser consistente en todo el sitio web, eso es realmente importante, porque no obliga al usuario a aprender todo el tiempo.
  4. Tenga en cuenta que si el asterisco está alineado juntos en la misma columna, es un poco mejor (pero un poco, por lo general, se evita hacer que el formulario sea más agradable, los formularios Nice funcionan mejor que los peores).
  5. Si la mayoría de los elementos en el formulario son obligatorios, entonces probablemente sea mejor marcar los opcional unos.

Gotchas:

  1. No confíe solo en los colores (problemático si no puede leer bien los colores).
  2. No confíe solo en el asterisco (obliga al usuario a pensar qué es obligatorio y qué no).
  3. No rompa el formulario: si bien parece estar fuera del alcance de esta pregunta, a menudo un formulario pulido y alineado verticalmente con etiquetas claras ayuda mucho en la comprensión de los campos obligatorios: dado que un solo escaneo vertical es más fácil, también es más fácil detectar campos obligatorios.
6
Folletto

Pensé que podría estar interesado en la última investigación de Baymards: http://baymard.com/blog/required-optional-form-fields

El resumen es que:

  • Al comparar los 100 principales procesos de pago en los EE. UU., Solo el 9% de los sitios marcó explícitamente ambos tipos de campo
  • Al denotar explícitamente los campos opcionales y obligatorios, el usuario no está obligado a inferir nada y puede concentrarse solo en el campo que está completando y, en consecuencia, puede progresar sin problemas en todo el formulario campo por campo sin ningún tipo de ida y vuelta escaneo de campos anteriores.
  • El error más común, cometido por el 63% de los 100 principales pagos de comercio electrónico, es denotar solo uno de los tipos
  • Al probar los pagos móviles, el 75% de los sujetos de prueba experimentaron graves problemas de usabilidad de forma en sitios que no pudieron marcar claramente los campos obligatorios y opcionales.

Y su recomendación:

enter image description here

2
DLM

Mantener el asterisco podría ser útil en lugar de simplemente un indicador basado en el color (+1 para accesibilidad). Agregue también un atributo de título en el asterisco, p. <span title = "Campo obligatorio"> * </span>

Esto es probablemente necesario de todos modos para darle un estilo apropiado

No creo que la posición del asterisco sea crítica, ¡solo sé consistente!

0
cbosco

Creo que he hecho todo eso en un momento u otro. En lo que he caído más recientemente es algo que requiere más trabajo, pero creo que es mejor para el usuario. Básicamente, le das una pequeña caja roja de popover con una flecha rechoncha apuntando hacia el campo en cuestión, diciéndoles que es un campo obligatorio. Si lo visualizo sobre el campo en un color brillante, creo que capta bien el punto sin alterar el flujo del resto del documento con contenido insertado o texto en negrita.

Se vuelve más complicado si tiene múltiples errores, en cuyo punto mostrar múltiples popovers es muy complicado, por lo que decide mostrar solo el primer error o solo mostrar un error a la vez y una vez que uno de los conflictos se ha resuelto, muestre el siguiente error .

0
user306