Share
Oggi esamineremo la validazione del modulo e il perché tu, Joe Webdesigner, dovrebbe preoccuparsene. Ecco un teaser: è uno dei modi più semplici per migliorare l'usabilità dei tuoi progetti e la maggior parte dei web designer se ne dimentica continuamente! Mostreremo anche alcuni esempi di progettazione di validazione di grandi form. Leggi su giovani cavallette ... la conoscenza ti aspetta.
Nel contesto di una relazione umana, la convalida è quando senti il bisogno di sentirti dire che hai ragione; Nel contesto di un modulo Web, la convalida avviene quando il modulo ti dice che hai torto. Essere specifici, la convalida del modulo è il processo in cui un modulo Web verifica se le informazioni che sono state inserite in esso sono corrette.
Per esempio:
Hai un'idea ... la convalida fa in modo che l'utente non abbia commesso un errore.
È la natura umana a commettere errori, e sfortunatamente, il tuo modulo web probabilmente non è esente da errori umani. È qui che la convalida fa parte di un modulo di facile utilizzo. Un semplice promemoria visivo all'utente che qualcosa non è compilato correttamente può fare la differenza tra la gioia di una forma compilata con successo e l'intensa frustrazione di dover indovinare cosa è andato storto.
Il principio fondamentale della validazione di una buona forma è questo: "Parla all'utente! Dimmi quando qualcosa non va!"
Integrare la convalida nei tuoi progetti web non è difficile ... ma la stragrande maggioranza dei designer non include mai disegni per questo. Perché? Perché la convalida è spesso lasciata agli sviluppatori di cui preoccuparsi nelle ultime fasi di un progetto.
Questo crea uno scenario in cui tu, Joe Webdesigner, affidi uno degli aspetti più cruciali dell'esperienza utente a uno sviluppatore che probabilmente non conosce o cura come dovrebbe essere progettata la validazione. Diamine, in molti casi, gli sviluppatori non si preoccupano nemmeno di qualcosa che vada oltre la convalida dei moduli più correttiva ... il che può lasciare gli utenti frustrati.
Questo non è uno scavo per gli sviluppatori o altro (e ci sono molti grandi sviluppatori che gestiranno questo a pieni voti), ma supponiamo che lo sviluppatore non presti attenzione per il gusto di argomentare.
Esaminare il seguente grafico:
Cosa c'è di sbagliato in questo modulo? Certo - il modulo sta "validando" se stesso dicendo all'utente che qualcosa non va ... ma l'utente è lasciato ad indovinare di cosa si tratta.
Il principio fondamentale della validazione di una buona forma è questo: "Parla all'utente! Dimmi quando qualcosa non va!"
Esaminiamo la prossima immagine:
Molto meglio vero? Ora all'utente vengono fornite le informazioni di cui hanno bisogno per risolvere il problema. Questo è un esempio semplificato, ma si noti come l'integrazione di un sistema di risposta di base migliora l'usabilità a passi da gigante.
Ora che capisci cos'è la validazione, speri di applicarla ai tuoi moduli web. Ci sono generalmente tre errori che gli utenti potrebbero incontrare nel tuo modulo:
Questo è probabilmente il problema più grande che gli utenti incontreranno. Hai mai compilato un modulo solo per scoprire che hai inserito un carattere illegale nel campo del nome utente o utilizzato uno spazio in un indirizzo web? È qui che entra in gioco la convalida della formattazione.
La maggior parte dei campi in un modulo Web sono solo alfanumerici, tuttavia, se si dispone di un indirizzo di posta elettronica, un indirizzo Web, un numero di telefono o una password, è possibile che sia richiesta una formattazione specifica. Probabilmente puoi indovinare la sintassi di ogni campo. Pertanto, la convalida della formattazione è efficace se si hanno informazioni specifiche in mente.
Questi errori si verificano quando un utente dimentica / trascura di compilare un campo che hai specificato come "richiesto".
Questo accade quando è necessario verificare se un valore è uguale a un altro. Questo è particolarmente importante nei moduli di accesso, in quanto non si desidera consentire agli utenti di accedere se la loro password non corrisponde a quella corretta.
Può anche essere utilizzato per fare in modo che gli utenti ripetano la propria e-mail o password quando è fondamentale che non commettano errori.
Mentre puoi dare forma al tuo modulo in mille modi diversi, ci sono in genere tre passaggi fondamentali per aiutare l'utente a risolvere il problema della convalida:
Il colore è uno dei migliori strumenti da usare quando si progetta la validazione. Perché funziona a livello istintivo, aggiungendo rosso ai messaggi di errore, o verde ai messaggi di successo è incredibilmente potente.
Prossimità è un altro strumento importante: tieni le notifiche specifiche vicino ai campi del problema e mantieni i messaggi sull'intero modulo lontano da ogni singolo campo. Se riesci a creare soluzioni "skin" personalizzate che rendano queste strategie ancora più ovvie (come rendere la notifica come se fosse fisicamente collegata a un campo specifico), farai ancora meglio.
È anche una buona pratica informare preventivamente gli utenti su dove possono creare errori. Molti siti Web includono una barra laterale con le istruzioni su come compilare il modulo. Altri hanno la sintassi corretta descritta sotto l'etichetta. Entrambi i metodi funzionano, purché siano lì.
Come accenneremo nella sezione "come funziona la validazione" di seguito, dovrai anche eseguire "la convalida istantanea" quando è possibile.
Ora che abbiamo esaminato la teoria della convalida del modulo ... diamo un'occhiata ad alcuni esempi di questo in azione!
Mentre osservi questi, nota che la soluzione è sempre semplice: una descrizione comando, una notifica in scatola o una parte di testo normale. Finché le notifiche rimangono chiuse in prossimità del campo del problema, puoi progettare, applicare skin o stili come preferisci. L'unica cosa da ricordare è che in realtà dai qualche consiglio all'utente.
Scaviamo in:
ThemeForest visualizza immediatamente un messaggio di errore sotto il campo. Le voci riuscite ottengono persino un "successo!" Verde Messaggio.
Frexy usa un approccio semplice ma efficace: colora il campo che è sbagliato e aggiungi un testo di notifica luminoso di seguito. Modifica: Come Boba ha notato nei commenti, il colore verde potrebbe essere fuorviante per alcuni utenti, ma devi bilanciare il marchio e l'usabilità secondo i tuoi gusti.
Twitter aggiunge un messaggio alla destra immediata del campo per indicare l'errore. Lo fa all'istante ... e persino aggiungono colore al sistema di risposta per enfatizzare il messaggio!
Mint non solo convalida immediatamente i campi modulo, ma li fornisce entrambi positivo e negativo feedback ... è quasi come se si stesse avendo una conversazione con il modulo!
FancyForm è uno strumento di forma che mostra quanto possa essere utile fornire effettivamente feedback in linea sotto forma di icone.
Virb aggiunge un messaggio luminoso quando hai fatto qualcosa di sbagliato. Punti bonus: Virb non ti lascerà nemmeno digitare un personaggio non consentito! Provalo ... ti sfidano.
WordPress ti darà un messaggio base ... ma quello che è speciale è che il modulo stesso in realtà scuote quando inserisci le informazioni sbagliate.
InvoiceMachine utilizza l'approccio più semplice. Invece di aiuto testuale, colora lo sfondo in rosso per indicare un problema. Tieni presente che un suggerimento testuale quando l'utente si posiziona sopra il modulo lo migliorerà ulteriormente.
WPCoder mostra che un semplice popup Javascript può funzionare anche bene.
Yahoo usa un approccio umoristico ... piuttosto che restituire un errore di base quando un compleanno non è corretto, ti danno un po 'di attitudine.
Da un punto di vista tecnologico, ci sono due modi diversi per integrare la convalida in una forma:
La validazione lato client offre l'alternativa più user-friendly in quanto può mostrare il feedback in tempo reale e istantaneo in modo che l'utente possa immediatamente rettificare il proprio errore. Tuttavia, uno dei principali svantaggi della convalida lato client è che generalmente si basa su una sorta di JavaScript. Pertanto, se l'utente ha disattivato JavaScript, non vedrà la convalida dal vivo. Quindi, assicurati di essere ancora in grado di eseguire il fallback sulla convalida lato server
Puoi leggere molte altre informazioni sul lato tecnologico della validazione sul nostro sito di rete, Nettuts!
Le forme migliori sono quelle che anticipano il comportamento dell'utente. È importante pianificare un modulo e capire in che modo un utente potrebbe commettere errori prima ancora di essere costruito. Perché? Perché se puoi anticipare un problema, è facile progettare una soluzione che aiuti gli utenti a superarla. Tuttavia, lasciare il progetto di convalida fino all'ultimo minuto può essere costoso da risolvere una volta completata la codifica. Prendersi un po 'di tempo in più per progettare strategie e stili per le tue forme farà risparmiare tempo, denaro e frustrazione a lungo termine.
Accentsconagua