it-swarm-es.com

¿Cuál es la mejor manera de resaltar un campo Requerido en un formulario web antes de enviarlo?

Esto parece subjetivo, y lo es; un cliente mío quisiera que resalte los campos requeridos en los formularios web en su aplicación con un asterisco rojo, y estoy buscando una alternativa ya que los asteriscos rojos generalmente significan que hay un error para mí.

¿Cómo le hago saber al usuario qué campos son obligatorios? (Uno por respuesta, por favor)

ACTUALIZACIÓN: Esto es para indicar qué campos son obligatorios antes de que ocurra la validación/devolución .

46
Ryan Shripat

Dado que el 95% de todos los campos son obligatorios en techinsurance.com, mi decisión fue simplemente usar negrita para indicar que se requiere un campo y escribir la Palabra (opcional) al lado de los campos opcionales para reducir el desorden.

p.ej.

Nombre

Apellido

Número de teléfono de la empresa

Número de móvil (opcional)

Y quizás igual de importantes son los propios mensajes de error. Los hice lo más obvio posible ...

campo requerido ...

alt text

con error ...

alt text

Estas decisiones se tomaron después de años de tener un sitio web con los asteriscos rojos semi-tradicionales para indicar un campo obligatorio. Estos asteriscos funcionaron la mayor parte del tiempo. El problema fue cuando hubo un error de validación. Algunas de nuestras páginas pueden ser bastante largas y los errores de validación roja simplemente no se destacarían en la página lo suficiente cuando ya estaba llena de asteriscos rojos. Sé esto porque ocasionalmente la gente se frustraría lo suficiente como para llamarnos al respecto. Pero todas las indicaciones muestran que el nuevo diseño (arriba) solucionó el problema.

57
Steve Wortham

Creo que la mejor manera de hacerlo es deletrear la palabra "requerida" después del campo de entrada. Este sentimiento también se refleja en el diseño de formularios web de Luke Wroblewski: http://www.lukew.com/ff/entry.asp?725

Si bien el enlace de ejemplo habla de campos opcionales en lugar de campos obligatorios, creo que el principal sigue siendo el mismo: los usuarios prefieren que se les escriba por escrito en lugar de incluir indicadores visuales.

Además, algo a tener en cuenta puede estar indicando los campos que son opciones en lugar de los campos obligatorios. Para mí, cualquiera que sea la excepción es la que debe tenerse en cuenta. Por ejemplo, si tiene 10 campos y se requieren 8 de ellos, en lugar de escribir "Obligatorio" para 8 campos, escriba "Opcional" para las 2 excepciones. Pero si solo se requieren 2, escriba "Requerido" por esos 2, ya que son la excepción.

9
RussellUresti

Esta pregunta puede ser más problemática de lo que podrías imaginar primero.

Por ejemplo, algunos carteles han sugerido usar un asterisco para indicar "requerido", el problema con esto es que algunos sitios web realmente usan el reverso y ponen un asterisco al lado de los campos que son opcionales. Los usuarios no saben explícitamente si un asterisco es un campo "requerido" o un campo opcional al mirar, y tienen que investigar más a fondo, interrumpir su flujo, frustrarlos sobre el proceso del formulario y, en algunos casos, puede conducir al abandono del formulario. juntos.

La respuesta de RussellUresti reiterando que la investigación de Luke Wroblewski en "Diseño de formularios web" para escribir simplemente "requerido" al lado de los campos obligatorios también ha sido (en mi experiencia de 10 años) el enfoque que ha producido el mayor rendimiento en formularios y ha generado la menor confusión.

Relacionado y algo más a considerar, si un campo de formulario es opcional, ¿puede usar la lógica usted mismo para obtener la respuesta sin preguntar al usuario?

Por ejemplo, si necesita saber si el usuario es Masculino o Femenino, puede inferir una respuesta en algunos casos por el título que elija para su nombre (miss, mrs, etc. implica femenino) y elimina la pregunta del usuario.

Otro punto a considerar es para cosas como los campos de dirección, si puede solicitar el código postal y realizar una búsqueda de código postal, mostrando solo los campos de dirección si el usuario opta por ingresar manualmente la dirección o si la búsqueda del código postal falla, puede evitar una gran cantidad de datos opcionales eso puede hacer que el formulario se vea más largo de lo que realmente es y hacer que el usuario se vaya.

En mi experiencia, muchas veces, si un campo es opcional, hay un gran caso para eliminarlo por completo. Obviamente, esto no es práctico todo el tiempo, pero en algunos casos puede ser y ayudará a reducir el desorden visual, para cualquier enfoque que decida adoptar.

4
Vincent Pickering

Otra solución es dividir el formulario en dos secciones, unir todos los campos obligatorios y luego etiquetar la sección completa como "Obligatorio".

3
Chase Seibert

La mejor manera que he encontrado es poner un asterisco dentro y alineado a la derecha.

Example of UX

3
Nijikokun

Este es seguramente el lugar equivocado para publicar esto, pero no pase por alto una definición extendida de "exigencia", es decir, cuando la exigencia de un elemento está condicionada al uso (selección, llenado, etc.) de otro elemento.

Ejemplo, el campo A es opcional. Sin embargo, si el usuario final llena el campo A, entonces se requiere el campo B.

¿Cómo anotaríamos o agruparíamos los campos de elementos para indicar eso? ¿Deberíamos?

PD. Recuerde que el color solo es un canal poco confiable para transmitir información. Algunos de nosotros no podemos distinguir fácilmente entre rojo y verde, y el rojo puede transmitir cosas diferentes a personas de diferentes culturas.

3
CSSian

Los asteriscos rojos a menudo se usan según sea necesario, por lo que su cliente realmente no está equivocado. Si elige otro color, como naranja o algo que se ajuste al diseño del sitio, debería estar bien.

2
James Buckley

Soy parcial a la filosofía del asterisco simple.

En una nota relacionada tangencialmente, aquí hay una publicación que escribí hace un tiempo con un ejemplo de creación de marcadores de error personalizados para los campos que fueron obligatorios y no se completaron. Es bastante específico de la tecnología (Rails, Formtastic, jQuery), pero el concepto es fácilmente adaptable.

http://thestrake.com/post/459205965/show-n-tell-friday-custom-form-error-markers

1
blackant

En primer lugar, como supongo que usted es el experto en UX, su cliente no debería estar diciéndole cómo resolver los problemas de UX, deberían acudir a usted con el problema a resolver, no la solución.

Pensando en ello desde la perspectiva de un usuario, no podemos suponer que el usuario sepa lo que significa un asterisco. En caso de duda, explíquelo con la mayor claridad posible utilizando un lenguaje escrito. He visto que el asterisco se usa cada vez menos en la web y, a menudo, es seguido de una explicación en la parte inferior de una página. Una explicación más simple es usar 'Requerido'. Los lectores de pantalla también recogerán esto y hará que su sitio sea más accesible.

¿También ha pensado en aplicar principios de divulgación progresiva en este escenario? ¿Deberían los campos que no son obligatorios estar incluso en la pantalla? ¿Pueden ocultarse o mostrarse al usuario en una etapa posterior? De esta manera, hay menos sobrecarga de información y se presentan todos los campos necesarios, por lo que se elimina la necesidad de un 'requerido'. Más información sobre la psicología detrás de esta explicación: https://www.nngroup.com/articles/progressive-disclosure/

0
lg365

He visto estándares de usabilidad que dictan lo contrario: que todos los campos son obligatorios, a menos que estén marcados con el texto (optional). Si los campos obligatorios no se completan después de intentar sumar, deben marcarse con un texto que explique qué está mal.

0
awe

Como la mayoría de los temas de usabilidad, realmente depende, principalmente de cuántos campos se incluyen en su formulario y la frecuencia de los campos obligatorios en su formulario

Generalmente prefiero un asterisco rojo simple adyacente a cada campo requerido y luego una nota al pie "* - campo requerido".

Además, me gusta resaltar el borde del campo en rojo si el campo permanece vacío o no es válido después de un evento onBlur(). El mismo resaltado si el usuario intenta enviar el formulario sin completar todos los campos obligatorios. El resaltado de bordes desaparece en un evento javascript onFocus().

0
wnathanlee