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

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.

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.

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

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

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.

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.

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

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/

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.

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().