it-swarm.it

Qual è il modo migliore per evidenziare un campo obbligatorio in un modulo Web prima dell'invio?

Questo sembra soggettivo, ed è; un mio cliente vorrebbe che evidenziassi i campi obbligatori sui moduli Web nella loro applicazione con un asterisco rosso e sto cercando un'alternativa poiché gli asterischi rossi di solito indicano che c'è un errore per me.

Come faccio a far sapere a un utente quali campi sono obbligatori? (Uno per risposta, per favore.)

AGGIORNAMENTO: Questo indica quali campi sono richiesti prima che si verifichi la validazione/postback.

46
Ryan Shripat

Dato che il 95% di tutti i campi è richiesto su techinsurance.com, la mia decisione è stata semplicemente quella di usare il grassetto per indicare che un campo è obbligatorio e scrivere la parola (opzionale) accanto ai campi opzionali per ridurre il disordine.

per esempio.

Nome

Cognome

Numero di telefono aziendale

Numero di cellulare (opzionale)

E forse altrettanto importanti sono i messaggi di errore stessi. Li ho resi il più ovvi possibile ...

campo obbligatorio ...

alt text

con errore ...

alt text

Queste decisioni sono state prese dopo anni di avere un sito Web con gli asterischi rossi semi-tradizionali per indicare un campo obbligatorio. Questi asterischi hanno funzionato la maggior parte del tempo. Il problema era quando si verificava un errore di convalida. Alcune delle nostre pagine possono essere piuttosto lunghe e gli errori di convalida in rosso non risaltano abbastanza sulla pagina quando era già ingombra di asterischi rossi. Lo so perché a volte le persone si frustrano abbastanza da chiamarci a riguardo. Ma tutte le indicazioni mostrano che il nuovo design (sopra) ha risolto il problema.

57
Steve Wortham

Sento che il modo migliore per farlo è in realtà precisare la parola "richiesto" dopo il campo di input. Questo sentimento si riflette anche nel Web Form Design di Luke Wroblewski: http://www.lukew.com/ff/entry.asp?725

Mentre il collegamento di esempio parla di campi opzionali anziché di campi obbligatori, credo che il principale rimanga lo stesso: gli utenti preferiscono che sia scritto per loro anziché includere indicatori visivi.

Inoltre, qualcosa da guardare potrebbe indicare i campi che sono opzioni anziché i campi richiesti. Per me, qualunque sia l'eccezione è quella che dovrebbe essere notato. Ad esempio, se hai 10 campi e ne sono richiesti 8, invece di scrivere "Richiesto" per 8 campi, scrivi "Opzionale" per le 2 eccezioni. Ma se sono richiesti solo 2, scrivi "Richiesto" da quei 2, poiché sono l'eccezione.

9
RussellUresti

Questa domanda può essere più problematica di quanto tu possa immaginare.

Ad esempio, alcuni poster hanno suggerito di utilizzare l'asterisco per indicare "obbligatorio", il problema è che alcuni siti Web utilizzano effettivamente il contrario e mettono un asterisco accanto ai campi che sono opzionali. Gli utenti non sanno esplicitamente se un asterisco è un campo "obbligatorio" o un campo facoltativo dando un'occhiata e devono indagare ulteriormente, interrompere il loro flusso, frustrarli sul processo del modulo e in alcuni casi può portare all'abbandono del modulo tutto insieme.

La risposta di RussellUresti che ribadisce la ricerca di Luke Wroblewski nel "Web Form Design" per scrivere semplicemente "obbligatorio" accanto ai campi obbligatori è stata (nella mia esperienza di 10 anni) l'approccio che ha prodotto la massima produttività sui moduli e ha creato la minima confusione.

Correlati e qualcos'altro da considerare, se un campo modulo è facoltativo, puoi usare tu stesso la logica per ottenere la risposta senza chiedere all'utente?

Ad esempio, se devi sapere se l'utente è maschio o femmina, in alcuni casi puoi dedurre una risposta dal titolo che scelgono per il loro nome (signorina, signora ecc. Implica femmina) e rimuove la domanda dall'utente.

Un altro punto da considerare è per cose come i campi indirizzo, se puoi chiedere il codice postale ed eseguire una ricerca del codice postale, mostrando solo i campi indirizzo se l'utente sceglie di inserire manualmente l'indirizzo o se la ricerca del codice postale fallisce, puoi evitare molti dati opzionali ciò potrebbe rendere il modulo più lungo di quanto non sia in realtà e causare la partenza dell'utente.

Nella mia esperienza molto spesso se un campo è facoltativo, c'è un grande caso per rimuovere del tutto il campo. Ovviamente questo non è sempre pratico, ma in alcuni casi può essere e aiuterà a ridurre il disordine visivo, per qualsiasi approccio tu decida di adottare.

4

Un'altra soluzione è quella di dividere il modulo in due sezioni, riunendo tutti i campi richiesti e quindi etichettando l'intera sezione "Richiesto".

3
Chase Seibert

Il modo migliore che ho trovato è quello di mettere un asterisco all'interno e allineato a destra.

Example of UX

3
Nijikokun

Questo è sicuramente il posto sbagliato per pubblicarlo, ma non trascurare una definizione estesa di "requisito", ovvero quando la necessità di un elemento è subordinata all'uso (selezione, riempimento, ecc.) Di un altro elemento.

Esempio, il campo A è facoltativo. Tuttavia, se il campo A è effettivamente compilato dall'utente finale, è necessario il campo B.

Come potremmo annotare o raggruppare i campi degli elementi per indicarlo? Dovremmo?

PS. Ricorda che il solo colore è un canale inaffidabile per trasmettere informazioni. Alcuni di noi non sono in grado di distinguere facilmente tra rosso e verde e il rosso può trasmettere cose diverse a persone di culture diverse.

3
CSSian

Gli asterischi rossi vengono spesso utilizzati come richiesto, quindi il tuo cliente non ha davvero torto. Se scegli un altro colore, come l'arancione o qualcosa che si adatta al design del sito, dovrebbe andare bene.

2
James Buckley

Sono parziale alla semplice filosofia dell'asterisco.

In una nota tangenzialmente correlata, ecco un post che ho scritto qualche tempo fa con un esempio di creazione di marcatori di errore personalizzati per i campi richiesti e non compilati. È piuttosto specifico per la tecnologia (Rails, Formtastic, jQuery), ma il concetto è facilmente adattabile.

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

1
blackant

In primo luogo, dato che suppongo che tu sia l'esperto di UX, il tuo cliente non dovrebbe dirti come risolvere i problemi di UX, dovrebbero venire da te con il problema da risolvere, non con la soluzione.

Pensandolo dal punto di vista dell'utente, non possiamo supporre che l'utente sappia cosa significa un asterisco. In caso di dubbio, precisalo il più chiaramente possibile usando il linguaggio scritto. Ho visto l'asterisco usato sempre meno attraverso il web ed è comunemente seguito da una spiegazione in fondo a una pagina quando usato. Una spiegazione più semplice è usare semplicemente "Richiesto". Anche gli screen reader lo prenderanno e renderà il tuo sito più accessibile.

Hai anche pensato di applicare principi di divulgazione progressiva in questo scenario? I campi che non sono obbligatori dovrebbero essere anche sullo schermo: possono essere nascosti o mostrati all'utente in un secondo momento? In questo modo, vi è un minore sovraccarico di informazioni e vengono presentati tutti i campi necessari, eliminando quindi la necessità di un "obbligatorio". Alcune ulteriori informazioni sulla psicologia alla base di questa spiegazione: https://www.nngroup.com/articles/progressive-disclosure/

0
lg365

Ho visto stadards di usabilità che dettano l'opposto - che tutti i campi sono obbligatori, a meno che non siano contrassegnati con il testo (optional). Se i campi obbligatori non vengono compilati dopo il tentativo di riepilogo, devono essere contrassegnati con un testo che spiega cosa non va.

0
awe

Come la maggior parte degli argomenti di usabilità, dipende davvero - principalmente da quanti campi sono inclusi nel modulo e dalla frequenza dei campi richiesti nel modulo

Di solito preferisco un semplice asterisco rosso adiacente a ciascun campo obbligatorio e quindi una nota a piè di pagina "* - campo obbligatorio".

Inoltre, mi piace evidenziare il bordo del campo in rosso se il campo rimane vuoto o non valido dopo un evento onBlur(). Stesso evidenziando se l'utente tenta di inviare il modulo senza compilare tutti i campi richiesti. L'evidenziazione dei bordi scompare in un evento javascript onFocus().

0
wnathanlee