risposta-alla-domanda-sullo-sviluppo-web-bd.com

Qual è la migliore pratica per la progettazione di messaggi di errore del modulo?

Ho visto molte ricerche sulla progettazione di moduli, ma finora non ho trovato studi sulle migliori pratiche di progettazione dei messaggi di errore. L'unico consiglio sembra essere che ogni errore dovrebbe essere chiaramente associato al campo del modulo non valido che intende correggere. C'è stata qualche ricerca su questo?

Ho alcuni problemi specifici che sto provando a risolvere e apprezzerei qualsiasi intuizione o risorse.

Posizione del messaggio di errore

Quando si dispone della convalida del modulo live, dove dovrebbe apparire un messaggio di errore (o di successo) in relazione all'elemento del modulo?

Alcune opzioni:


A destra dell'ingresso

mockup

download bmml source - Wireframe creati con Balsamiq Mockups


A destra dell'etichetta

mockup

scarica la fonte bmml


Sopra l'etichetta

mockup

scarica la fonte bmml


Sotto l'etichetta

mockup

scarica la fonte bmml


Sotto l'input

mockup

scarica la fonte bmml


Ci sono alcuni problemi spinosi che devono anche essere presi in considerazione per quanto riguarda la posizione:

  • Come vengono visualizzati gli errori per i gruppi radio o checkbox?
  • Quanto è largo il messaggio di errore?
  • Il messaggio di errore è multilinea?

Visibilità del messaggio di errore

Oltre alla posizione, sono anche interessato al modo in cui la visibilità del messaggio di errore influisce sulla sua usabilità. Importa o è rigorosamente una decisione estetica? Considera le seguenti 3 opzioni:

mockup

scarica la fonte bmml

Modifica : finora ci sono stati alcuni punti eccellenti sull'accessibilità in alcune delle risposte, così come alcuni esempi interessanti. Tuttavia, mi piacerebbe davvero vedere alcuni dati da studi reali, se possibile. Inoltre, nessuna delle risposte finora ha veramente affrontato le due domande che avevo sopra:

  • Dove dovrebbe trovarsi l'errore in relazione all'input e all'etichetta?
  • In che modo il design e la visibilità del messaggio di errore stesso influiscono sulla sua usabilità?

Per quanto riguarda l'accessibilità dei moduli, mi sembra che potrebbero esserci due casi d'uso potenzialmente in conflitto, convalida live e convalida lato server (che richiederebbe il ricaricamento della pagina). Se la pagina viene ricaricata e l'utente si avvia nuovamente nella parte superiore del modulo, un riepilogo degli errori ha senso, soprattutto dal punto di vista dell'accessibilità. Tuttavia, nel caso della convalida live, il riepilogo degli errori nella parte superiore ha molto meno senso, sia per la progettazione dei moduli sia per scopi di accessibilità.

Considera come un utente potrebbe effettivamente utilizzare un modulo con convalida live:

La convalida si verifica sull'evento di sfocatura. Di solito, il focus di sarà sul prossimo elemento del modulo, non sull'elenco in alto. A quanto mi risulta, gli screen reader non avrebbero alcun motivo per tornare all'inizio del modulo per leggere l'elenco degli errori. Per gli utenti che non utilizzano i programmi di lettura dello schermo, l'elenco degli errori in alto spinge l'intero modulo verso il basso, doppiamente, quindi se l'errore occupa spazio verticale anche vicino al campo del modulo. Nelle forme più lunghe, questo è un problema di usabilità poiché il riepilogo degli errori potrebbe non essere visibile. Nei moduli più brevi con errori per campo, come un login, il riepilogo degli errori sembra eccessivo. Per tutti i moduli, l'interfaccia verrebbe spostata verso il basso, creando un'esperienza utente scadente.

Per la convalida live, se vuoi davvero rendere accessibili gli errori del modulo, penso che usare ARIA Live Regions potrebbe essere la soluzione preferita.

152
Virtuosi Media

I flag incapsulati sono l'unica soluzione che ho trovato per raggiungere tutti i casi Edge. Puntare la bandiera sull'etichetta anziché sull'ingresso consente la coerenza con i pulsanti di opzione e i gruppi di segni di spunta o ingressi strani come cursori o selezionatori.

È anche utile evidenziare il campo con il rosso, ma non sempre è possibile. Esempi di utilizzo di seguito.

mockup

download bmml source - Wireframe creati con Balsamiq Mockups

mockup

scarica la fonte bmml

mockup

scarica la fonte bmml

Nel leggere la risposta di @ jonW, non potrei essere più d'accordo con i suoi pensieri sugli screen reader, e la mia soluzione può essere altrettanto efficace a seconda dell'implementazione. Puoi posizionare i flag appena a nord sugli input nel markup e usare aria per ottenere la stessa accessibilità


La sezione "Eventi di convalida in linea e convalida" in questa pagina sembra ideale: http://semantic-ui.com/modules/form.html

61
Fresheyeball

Sembra che tu sia già contrassegnando i campi del modulo facoltativo al posto di quelli richiesti . Sembra che non ci siano indicatori "obbligatori", ma nemmeno indicatori "opzionali", quindi ho voluto menzionarlo.

Quello che mi piace fare sui moduli è "micro-gamificarli": per ogni campo del modulo fornire un "indicatore di validazione". Per semplicità, diciamo che è solo un piccolo cerchio. Questo inizia in una posizione neutra: un cerchio grigio con un punto interrogativo. Per i campi opzionali, è un cerchio grigio con un segno di spunta. Ogni volta che l'utente lascia un campo modulo, viene convalidato dal vivo e accadono le seguenti cose:

  1. l'indicatore cambia in "successo", ad es. cerchio verde + segno di spunta o "errore" (ad es. cerchio rosso + punto esclamativo)

  2. se si è verificato un errore, il campo è evidenziato

  3. in caso di errore, il pulsante di invio diventerà grigio (facendo clic su di esso funzionerà comunque, ma porterà solo l'utente al primo errore) e sopra di esso verrà visualizzato un messaggio di informazioni generali.

Se stai scrivendo buoni suggerimenti, dovrebbe essere sufficiente evidenziare il campo e il suggerimento. Se ritieni di aver bisogno di un messaggio di errore separato, è probabile che i tuoi suggerimenti possano usare del lavoro. Nella mia esperienza è quasi sempre possibile coprire gli errori di input dell'utente con buoni suggerimenti.

enter image description here

All'utente non piace tornare mentalmente in un modulo. Viene elaborato campo per campo, l'utente si concentra su di esso campo per campo e passa attraverso una lista di controllo mentale. Indicando gli errori che si verificano supportiamo questa modalità e non indichiamo l'utente a tornare "più tardi". È una pausa nel flusso dell'utente e un fastidio fare clic su "Invia" e quindi essere "bloccato" e "rispedito". È un'esperienza molto più fluida se i problemi vengono appena evidenziati e quindi possono essere corretti, non appena si verificano.

44
Christian

Il messaggio di errore dovrebbe apparire prima del campo del modulo stesso (almeno nel markup stesso, ma idealmente mostrato anche in questo modo sullo schermo) in modo che quando qualcuno sta leggendo il modulo legga che il campo ha sbagliato prima di leggere il campo in questione - in questo modo l'utente è preparato mentalmente che "il contenuto di questo campo che sto per leggere non è corretto e quindi devo modificarlo".

Questo è ancora più importante per la creazione di moduli accessibili . Se qualcuno sta leggendo il modulo tramite screen reader, è necessario presentare l'errore prima che il campo del modulo venga letto per lo stesso motivo descritto sopra. (Non vogliono tornare indietro dopo aver ascoltato il contenuto di un campo e allora gli è stato detto che quel campo aveva un errore). Questo è il motivo per cui è l'etichetta del modulo stesso che deve contenere il testo dell'errore, e non solo essere un popup o un avviso con script perché non puoi garantire che i lettori di schermo o i browser più vecchi saranno in grado di rilevare questo testo.

Inoltre, se è un modulo lungo o se l'utente sta navigando tramite tastiera e utilizzando il pulsante Tab potrebbero esistere diversi campi sotto la piega, quindi se si abbassa il modulo si potrebbe non notare che un campo è in errore fino a quando non si sono quindi passati a quello successivo (il campo scorrerà in vista ma se il messaggio di errore è sotto di esso, l'errore potrebbe essere visualizzato fuori dallo schermo).

Infine, c'è un percorso aggiuntivo che probabilmente dovresti prendere per i tuoi messaggi di errore:

Dovresti riassumere gli errori proprio all'inizio del modulo in modo che l'utente sappia quanti errori ci sono, e che cosa questi errori sono. In realtà questi dovrebbero essere collegamenti che ti portano ai campi errati in questione (ancora un'altra ragione per cui il messaggio di errore contro quei campi dovrebbe essere prima del campo stesso)

Molte di queste informazioni sono disponibili nel articolo WebAIM: convalida dei moduli utilizzabili e accessibili e recupero degli errori

Ecco un esempio Gli errori vengono visualizzati all'inizio del modulo e sono anche collegamenti in modo che l'utente possa navigare facilmente nei campi in questione, dove viene visualizzato anche il testo dell'errore:


mockup

download bmml source - Wireframe creati con Balsamiq Mockups

30
JonW

C'è un vecchio white paper (2007) presentato da Human Factors International che contiene alcuni dati sui messaggi di errore. La conclusione che arrivarono allora fu:

... la maggior parte degli utenti passa attraverso una fase di completamento — in cui l'obiettivo è il completamento del modulo — seguito da una fase di correzione o revisione, in cui gli errori vengono corretti ... errori immediati sono stati in gran parte ignorati fino al completamento del modulo.

Pertanto, dei sei modi possibili per presentare messaggi di errore, questi tre si sono dimostrati più efficaci degli altri.

  1. Presenta in seguito gli errori, integrati nel modulo, tutti in una volta
  2. Presenta gli errori in seguito, incorporati nel modulo, uno per uno
  3. Presentare successivamente gli errori, nei dialoghi, uno per uno

Ovviamente non faremmo più il numero 3. Il libro bianco si chiama "Quello che abbiamo imparato: guardando indietro al 2007." Puoi scaricarlo dal loro sito, dopo aver compilato un modulo . :)

In realtà non si tratta di posizionare i messaggi di errore, ad eccezione della finestra di dialogo vesus incorporata, quindi non sono sicuro che sia davvero utile.

10
Julia D

Quello che sto per suggerire è semplicemente quello che mi è venuto in mente come una soluzione che userei quando ho letto la tua domanda, quindi chiaramente potresti non trovare alcuna ricerca o materiale correlato per sostenerlo.

Mi rivolgo in modo specifico alla domanda "Quando si dispone della convalida del modulo live, dove dovrebbe apparire un messaggio di errore (o di successo) in relazione all'elemento del modulo?"

E se mostrassimo qualcosa di simile al messaggio anziché all'etichetta stessa

enter image description here

Come e quando gli errori vengono risolti (considerando che si tratta delle convalide lato client a livello di modulo) è possibile tornare alla vista originale delle etichette, aiutando l'utente a tenere traccia di quelle rimanenti.

Affinché questo approccio al lavoro possa essere utile, devi esprimere con attenzione i tuoi messaggi per comunicare completamente ciò che l'utente deve fare con il minor numero di parole possibile. Se i messaggi sono lunghi, puoi avvolgerli per la lunghezza dei campi.

4
roni

Appena sopra il pulsante di invio, potrebbe esserci un elenco di elementi obbligatori sotto forma di tag. Ogni tag deve essere collegato ipertestualmente al rispettivo campo. Quando l'utente inizia a compilare il modulo dall'alto, i tag continuano a scomparire. Prima che l'utente prema il pulsante di invio, può verificare se tutti i campi obbligatori sono stati compilati o meno. Se ha perso qualche elemento, può facilmente tornare al campo premendo il tag appropriato.

4
Rutvij Kotecha

Poiché la domanda riguarda i risultati di studi reali, ecco un link a studio del 2009 su diverse varianti dei messaggi di validazione di Luke Wroblewski (autore di Fill in the Blanks).

Fornisce informazioni molto interessanti sul modo migliore per visualizzare i messaggi di convalida, alcuni dei quali potrebbero interessarti. Per esempio,

IL METODO [ON BLUR] AIUTA GLI UTENTI A COMPLETARE PIÙ RAPIDAMENTE LE FORME Quando abbiamo usato il metodo "after" ([on blur]) ..., i partecipanti hanno completato il modulo da sette a dieci secondi più velocemente di quando abbiamo usato il "while" ([on tasto]] e “prima e mentre” rispettivamente.

Per quanto riguarda la posizione del messaggio di errore, lo studio lo rivela

NON EFFETTUATO LONTANO — MANTENERE I MESSAGGI DI SUCCESSO PROMINENTI CAMPI DEL MODULO ESTERNI La visualizzazione della convalida all'interno dei campi del modulo non ha prodotto alcun vantaggio sostanziale. Il posizionamento di questi messaggi era - necessariamente - incoerente. (Sebbene sia possibile far apparire i messaggi di convalida all'interno dei campi del modulo, è molto più difficile visualizzarli all'interno di elenchi a discesa standard, quindi li abbiamo visualizzati al di fuori di questi elementi.) La convalida sul campo non era più evidente dei messaggi visualizzati all'esterno i campi.

2- Per quanto riguarda la visibilità dei messaggi (colore, ecc.), Ecco n altro articolo che suggerisce a UX Designers di attenuare la gravità di quei messaggi e di far sentire gli utenti a proprio agio sui loro progressi (e non frustrati per i loro nessun progresso)

Tra le altre cose, in sostanza dice che dovremmo usare il colore arancione/arancione per i messaggi di errore del modulo: abbastanza allarmante quando gli utenti lo vedono ma meno stimolante fisicamente come rosso (probabilmente causano il panico).

3
Son Do Lenh

Non ho incontrato nessuno studio su dove sia il posto migliore dove inserire i messaggi di validazione. Tuttavia, dal punto di vista pratico, penso che le linee guida dell'interfaccia utente siano abbastanza vicine. È noto che Microsoft ha svolto molte ricerche di prima mano nei propri laboratori di usabilità per le informazioni contenute nelle linee guida. Per quanto a tutti noi piace scegliere Microsoft per alcune cattive pratiche dell'interfaccia utente, in genere tali pratiche non hanno seguito le linee guida per la progettazione dell'interfaccia utente :)

Quindi ... Microsoft Windows User Experience Interaction Guidelines sceglie essenzialmente un asterisco a sinistra dell'etichetta e una descrizione comando con il messaggio :

mockup

download bmml source - Wireframe creati con Balsamiq Mockups

Le linee guida fanno anche alcuni punti perspicaci, che ho riassunto di seguito:

  • Se la maggior parte dei controlli è facoltativa, non indicare nulla (Gestire l'input richiesto mancante con messaggi di errore. Questo approccio riduce il disordine.)
  • Se la maggior parte dei controlli richiede input, indica gli input opzionali con "(opzionale)" dopo l'etichetta.
  • Se tutti i controlli richiedono input, inserisci "Tutti gli input richiesti" nella parte superiore dell'area contenuto.
  • Convalida l'input in anticipo, mostra gli errori vicino al punto di input.
  • Usa i popup popup per errori di input dell'utente che possono essere rilevati immediatamente . * I palloncini non richiedono spazio disponibile sullo schermo o il layout dinamico necessario per visualizzare i messaggi sul posto.
  • Visualizza solo un singolo fumetto alla volta.
  • Utilizza errori sul posto per il rilevamento ritardato degli errori (ad es. Dopo aver inviato un modulo).

È interessante notare che non ci sono molti dettagli in Apple Human Interface Guidelines su questo argomento, ma di seguito è un riepilogo dei punti rilevanti che ho trovato:

  • Convalida input in anticipo
  • Evita la convalida dell'input dopo ogni pressione di un tasto. La frequente convalida è fastidiosa.

Ancora una volta, mentre mi rendo conto che questi non sono "studi sulle migliori pratiche di progettazione dei messaggi di errore", sono certo che la ricerca è andata nella formazione di queste linee guida e come strumento pratico sono un ottimo punto di riferimento per questo argomento.

2
Scott Willeke

Contrassegnare i campi obbligatori con * o contrassegnare quali campi sono opzionali con (facoltativo), il che dipende meglio dal punto di ribaltamento nel modulo.

Se hai una forma lunga - diciamo 40 campi (per esagerare - Non sto suggerendo che un modulo dovrebbe avere 40 campi su una schermata) e di questi 40, 36 sono obbligatori, quindi contrassegnare 36 con * è entrambi rumoroso e diventa ridondante.

È molto più semplice fare una dichiarazione in alto che "tutti i campi sono obbligatori tranne quelli contrassegnati come facoltativi". Al contrario, un modulo con relativamente pochi campi obbligatori dovrebbe indicare quelli obbligatori.

In altre parole, quali dobbiamo evidenziare come eccezioni.

La tendenza verso i moduli web rivolti al pubblico è solo quella di chiedere le informazioni richieste per ridurre le percentuali di abbandono, quindi il passaggio verso la marcatura facoltativa piuttosto che richiesta in quanto tutti tendono ad essere richiesti. Questo non è sempre il caso dei sistemi aziendali/aziendali, sebbene esistano forme legittime in profondità che contengano campi facoltativi e obbligatori legittimi.

Per quanto riguarda la domanda principale sul posizionamento del messaggio di errore:
Dipende dal layout di progettazione del modulo per quanto riguarda i campi etichetta->.
Supponendo che l'etichetta si trovi sul campo, metterei il messaggio di errore a destra del campo e fornire il maggior numero possibile di segnali visivi, ad esempio evidenziando il bordo del campo in rosso e il "questo campo è obbligatorio" in rosso.

Motivi:
1) posizionamento prossimale del messaggio di errore sul campo
2) non interrompe la vicinanza e l'associazione dell'etichetta (che metterebbe l'errore tra l'etichetta e il campo)
3) il tuo messaggio di errore agisce come un segnale per ciò che deve essere riparato (il testo indica come). In questo senso, vuoi che il tuo cartello sia una freccia che indica la cosa reale su cui l'utente deve agire, che è il campo, non l'etichetta.
4) La messaggistica di tipo tooltip non è una convenzione ben consolidata e, come qualcun altro ha sottolineato, corre il rischio o copre elementi (è improbabile che un vero tooltip in cui l'utente intraprenda un'azione per farlo) - è anche è improbabile che sia buono per l'accessibilità.

La mia impressione iniziale delle icone di stile del viso + evidenziazione + messaggio è che il suo sovraccarico sensoriale. Non sono sicuro dove il mio occhio dovrebbe concentrarsi per ottenere le informazioni. Il campo è ciò che deve essere risolto nel mezzo, ma ci sono informazioni visive che attirano la mia attenzione prima e dopo questo, il che significa un sacco di movimenti oculari e sforzi per l'utente di digerire il significato (Ipotesi pura, non ho mai eseguito test utente su un modulo impostato lo stesso)

2
GlenFinch

Dopo aver letto Web Form Design: riempire gli spazi vuoti e aver fatto ricerche su questo sul web ho scoperto che i migliori si trovano sotto l'input o a destra dell'input.

Anche la presunzione che * = Richiesto non è sempre corretta, alcune persone non lo sanno. Il modo più popolare di farlo è avere una spiegazione di cosa * è in cima al modulo. O il mio preferito è sbarazzarsi di tutti i campi non richiesti e avere "tutti i campi richiesti" o qualcosa di simile nella parte superiore del modulo.

2
Igor-G

Sono stati fatti buoni suggerimenti riguardo al riepilogo dei campi obbligatori sopra il modulo come richiamo.

Direi che il primo esempio mostrato qui è piuttosto buono (messaggio di errore accanto al file stesso). Potresti anche evidenziare il campo in rosso, ma non è stato dimostrato che sia più efficace.

Ora per quanto riguarda il problema dei pulsanti di opzione, direi che se hai bisogno di un tale messaggio di errore per un pulsante di opzione, significa che il pulsante di opzione non è la giusta opzione di progettazione in prima persona: in effetti, in sostanza, un il pulsante di opzione DEVE avere e DOVREBBE SOLO una singola opzione selezionata per impostazione predefinita. Ciò significa che un pulsante di opzione deve sempre presentare un'opzione predefinita selezionata, sia essa un'opzione "nessuna". In ogni altro caso, dovresti prendere in considerazione l'uso di qualsiasi altra opzione di design che soddisfi le tue esigenze (ad esempio: caselle di controllo se è possibile selezionare più opzioni, menu a discesa o altro).

2
Ivan

Messaggi di errore allarmanti possono rendere gli utenti ansiosi. L'ansia dell'utente può indurre gli utenti ad abbandonare il modulo. Non è necessario sottolineare quanto l'utente abbia sbagliato per convincerlo a risolverlo.

Messaggi di errore rassicuranti farà sentire gli utenti più a loro agio nel correggere i propri errori. L'obiettivo è quello di richiamare la loro attenzione e guidarli a correggere i propri errori, non impressionarli perché hanno commesso un errore enorme.

1
Relvid

Sfortunatamente, non sembra esserci un modo "standard" di visualizzare un errore per un da, che era la domanda originale.

Ho provato a cercare una risposta più dettagliata, ma penso che non ci sia una soluzione definitiva perché ci sono così tanti stili diversi di forme. I moduli visualizzati su un desktop avranno generalmente più spazio per il testo dell'errore rispetto a un modulo su un dispositivo mobile. Recentemente, devi anche pensare a quale sistema operativo stai progettando per ora che lo stile moderno di Windows 8 (formalmente Metro) ha linee guida di stile specifiche per IE. Aggiungi il fatto che ogni browser moderno ha il suo stile per la convalida dei moduli HTML5 e la standardizzazione diventa un casino.

Il massimo che ho trovato è stato un insieme di linee guida di Jakob Nielsen ( http://www.useit.com/alertbox/20010624.html ). Queste linee guida sono molto ampie, con l'unica regola esplicita che non si può fare affidamento solo sul colore (trasformare il testo per il campo in rosso) perché ciò può rendere difficile la lettura per gli utenti con disabilità. Gli utenti daltonici o quelli che usano gli screen reader non sarebbero in grado di differenziare il testo.

Questa è l'unica prenotazione che ho con la soluzione callout pubblicata anche qui. Gli utenti con disabilità sarebbero in grado di leggerlo?

Una soluzione potrebbe essere quella di adattare uno stile utilizzato dalla maggior parte dei tuoi utenti target (Microsoft, Google o Apple) e procedere con quello.

1
Kevin G

condividendo uno degli approcci che ho progettato per un progetto ad alta intensità di modulo ed è stato apprezzato dal team, ma a causa di alcuni vincoli non siamo riusciti a costruirlo.

Interazione: nel momento in cui sposti l'interfaccia utente del cursore, verrà visualizzato il messaggio di istruzioni lato client per correggerlo prima di attivare il pulsante di invio.

enter image description here

1
Rajesh R. Nair

Penso che Google abbia una soluzione semplice per i messaggi di errore nel loro modulo di iscrizione; cambia il bordo in rosso per evidenziare il campo e un semplice messaggio sottostante con un messaggio in rosso.

Questo è facile quando si ridimensiona un progetto su un piccolo dispositivo ed è chiaro e conciso.

0
Jay

Penso che il modo in cui Facebook mostra i messaggi di errore sia più efficiente e facile da usare. Controlla lo screenshot. Questo non sta consumando spazio extra. L'utente ottiene ciò che è sbagliato e anche per sapere più in dettaglio, può semplicemente passare il mouse sul campo per sapere perché il campo è obbligatorio . enter image description here

0
Parag Bandewar

Concordo con gli altri sul fatto che dovrebbe esserci un riassunto. Che si tratti di un account specifico o "Qualcosa non ha funzionato qui. Esamina le voci evidenziate, apporta le modifiche necessarie e invia nuovamente il modulo. Grazie."

Questo messaggio potrebbe essere in alto o in basso nel modulo di invio, ma deve solo essere visibile e distinguersi per l'utente, senza scorrere, immediatamente. Quindi, se javascript magic può mantenere la pagina in basso con il pulsante di invio, fantastico. Ecco dove si trovava l'utente, quindi meno pagine si spostano/lampeggiano.

Quindi, penso che la convenzione più semplice sarà la versione "Below the label", dai tuoi esempi. L'etichetta è il modo in cui l'utente si orienterà per primo, e avere il testo dell'errore appena sotto ha un buon senso, con un posto praticabile (il campo), appena sotto.

Mi piacciono gli esempi di "scatola rossa" e le bolle al passaggio del mouse, ma la mia interfaccia utente preferita per questo sarebbe quella in cui i campi in questione sono:

  • Contrassegnato con un testo di errore che appare diverso oltre il colore. Il corsivo o il grassetto con il colore sono migliori del solo colore. Il colore unico (con il rosso di serie) è buono, ma sappiamo tutti degli utenti daltonici, giusto?
  • Distinguersi dagli altri campi in un modo oltre il testo e il colore del testo. Sarebbe molto bello se tutti i campi "ok" venissero oscurati un po ', in modo da poter vedere quelli che hanno bisogno di essere modificati spiccano in contrasto più netto. Tuttavia, se si volesse modificare uno di questi campi "ok", un clic dovrebbe comunque "aprirli" per modifiche "brillanti".
0
Tom Quick

Voglio secondare quello che JonW ha detto con qualche leggera alterazione. Per quegli utenti su screen reader, ti consigliamo di riassumere gli errori nella parte superiore del modulo. Quindi, una volta entrati nel modulo, si desidera informare gli screen reader dei singoli errori prima dei campi.

Mi sono imbattuto in questo problema sul lavoro e volevo trovare un metodo che fosse sia utilizzabile che accessibile. Ho trovato questo post sul blog http://www.nomensa.com/blog/2010/accessible-forms-using-the-jquery-validation-plug-in/ che mi ha aiutato moltissimo. Dato che lavoro nello sviluppo di applicazioni per un'università, cose come questa sono molto importanti.

Esistono best practice - metodi che hanno dimostrato di funzionare - ma niente è meglio dei test degli utenti reali. È inestimabile.

L'esempio si basa su jQuery e sul plugin validate.

Riassumere:

  • Raggruppa tutti gli errori in modo che gli utenti con tecnologia assistiva (AT) comprendano cosa c'è che non va da una prospettiva a volo d'uccello.
  • Posizionare i singoli errori sopra ciascun campo del modulo in modo che AT avvisa gli utenti dell'errore prima che completino il campo.
  • Se possibile, collega gli errori riassunti ai singoli campi in questione, come nell'esempio.

Infine, se hai bisogno di un determinato formato, assicurati di menzionare il formato nell'etichetta per ridurre il numero di errori (e per rendere la vita più facile a coloro che non riescono a vedere bene o per niente).

0
zxbEPREF

È sempre meglio

  1. Mostra messaggi di errore in linea
  2. E impostare lo stato attivo sul primo campo del mandato lasciato vuoto o sul campo con dati non validi dopo l'invio del modulo.

In caso di convalida in tempo reale/dati in tempo reale

  1. Messa a fuoco del campo rosso e visualizzazione di un messaggio di errore in linea

In caso di convalida lato server, ad es. Dove js è disabilitato -

  1. Mostra ancora un messaggio di errore in linea con lo stato attivo nel campo vuoto o nel campo con dati non validi

Pratica abituale -

  1. La convalida dei dati dovrebbe essere in tempo reale (suggerimento che suggerisce il formato giusto quando l'utente immette dati non validi)
  2. Il controllo del campo del mandato dovrebbe avvenire al momento dell'invio del modulo - Ciò aiuta a evitare un eccessivo intervento del sistema sull'inserimento dei dati dell'utente)

Tuttavia, il modo tradizionale di contrassegnare i campi del mandato con "*" è il migliore