it-swarm.it

Convalida campo obbligatoria

Come deve essere gestita visivamente la convalida del campo richiesta?

Nota: presuppone che l'asterisco sia rosso

*Name:[_______________]

o

Name:*[_______________]

o

Name: [_______________]*

o

Name: [____red bg____  ]

o

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

o

Dimmi un modo migliore!

16
rick schott

Non c'è mai una risposta giusta o sbagliata con questo tipo di domande e molto dipende dalle persone dei tuoi utenti (ingegneri contro utenti esperti contro zia Alice che non hanno mai usato un computer) e dal contesto.

Una regola generale è usare

label [input   ] [validation       ] 

Utilizzo dell'area di convalida per un asterisco rosso per indicare un campo obbligatorio o un messaggio di errore dopo aver convalidato il modulo (o entrambi).

Il sito web Simply Accessible ha una buona e concisa scrittura sui campi dei moduli richiesti qui: http://simplyaccessible.com/article/required-form-fields

11
Bil Simser

Dipende molto da vari fattori.

  1. Come regola generale: ci dovrebbe essere un indicazione di testo (asterisco) e un'indicazione visiva, come ad esempio dare uno sguardo di 1 secondo al modulo, devi essere in grado di capire quali campi sono richiesti. Ad esempio, puoi aggiungere un asterisco sul lato dell'etichetta (meglio se formattato in modo leggermente diverso dall'etichetta stessa) e aggiungere un bordo più intenso ai campi obbligatori.
  2. Come seconda regola generale, prova molto a vedere se puoi semplificare un modulo: molto spesso ci sono modi per minimizzare i moduli ed evitare in tutti i campi opzionali. Ad esempio, i moduli di registrazione minimalisti potrebbero richiedere solo l'e-mail e lasciare tutto il resto a follow-up e widget come "Il tuo profilo è completo al 90%".
  3. Sii coerente in tutto il sito Web, questo è davvero importante, perché non obbliga l'utente a imparare ogni volta.
  4. Nota che se gli asterisco sono allineati insieme sulla stessa colonna è leggermente meglio (ma leggermente, di solito si evita di rendere il modulo più bello, i moduli Nice hanno prestazioni migliori di quelli peggiori).
  5. Se la maggior parte degli elementi nel modulo sono obbligatori, probabilmente è meglio contrassegnare quelli facoltativi.

Trabocchetti:

  1. Non fare affidamento solo sui colori (problematico se non riesci a leggere bene i colori).
  2. Non fare affidamento solo sull'asterisco (costringi l'utente a pensare a cosa è obbligatorio e cosa no).
  3. Non frantumare il modulo in giro: sebbene sembri al di fuori dell'ambito di questa domanda, spesso un modulo lucido, allineato verticalmente con etichette chiare aiuta molto nella comprensione dei campi obbligatori: poiché una singola scansione verticale è più facile, è anche più facile rilevare campi obbligatori.
6
Folletto

Ho pensato che potresti essere interessato alle ultime ricerche di Baymards: http://baymard.com/blog/required-optional-form-fields

Il riassunto è che:

  • Quando si confrontano i primi 100 processi di checkout negli Stati Uniti, solo il 9% dei siti ha contrassegnato esplicitamente entrambi i tipi di campo
  • Denotando esplicitamente sia i campi opzionali che quelli obbligatori, l'utente non è obbligato a dedurre nulla e può rimanere concentrato solo sul campo che sta compilando e, di conseguenza, è in grado di progredire senza soluzione di continuità in tutto il modulo campo per campo senza alcun ritorno scansione di campi precedenti.
  • L'errore più comune - commesso dal 63% delle prime 100 casse di e-commerce - è quello di indicare solo uno dei tipi
  • Durante i test di checkout mobili, il 75% dei soggetti del test ha riscontrato gravi problemi di usabilità dei moduli su siti che non sono riusciti a contrassegnare chiaramente sia i campi obbligatori che quelli opzionali.

E la loro raccomandazione:

enter image description here

2
DLM

Mantenere l'asterisco potrebbe essere utile piuttosto che semplicemente un indicatore basato sul colore (+1 per l'accessibilità). Inserisci anche un attributo del titolo sull'asterisco, ad es. <span title = "Campo obbligatorio"> * </span>

Ciò è probabilmente necessario comunque per modellarlo in modo appropriato

Non credo che la posizione dell'asterisco sia fondamentale: sii coerente!

0
cbosco

Penso di aver fatto tutto questo in un punto o nell'altro. Ciò di cui sono caduto più di recente è qualcosa che richiede più lavoro ma penso che sia meglio per l'utente. Fondamentalmente, dai una piccola scatola rossa con una freccia tozza che punta verso il campo in questione, dicendo loro che è un campo obbligatorio. Visualizzandolo sopra il campo con un colore brillante, penso che riesca a capire bene senza alterare il flusso del resto del documento con il contenuto inserito o il testo in grassetto.

Diventa più complicato se hai più errori a quel punto visualizzare più popover è molto disordinato, quindi o decidi di visualizzare solo il primo errore o visualizzare solo un errore alla volta e una volta che uno dei conflitti è stato risolto visualizza l'errore successivo .

0
user306