Share
Astăzi, vom examina ce validare este și de ce tu, Joe Webdesigner, ar trebui să aibă grijă de asta. Iată un teaser: este una dintre cele mai ușoare căi de a îmbunătăți gradul de utilizare a desenelor și designerilor web și de a uita tot timpul despre asta! Vom prezenta, de asemenea, câteva exemple de design de validare a formei excelente. Citiți pe lăcustele tineri ... cunoștințele așteaptă.
În contextul unei relații umane, validarea este atunci când simțiți nevoia de a fi spus că aveți dreptate; În contextul unei forme de web, validarea este atunci când formularul vă spune că greșiți. Pentru a fi specific, validarea formularului este procesul în care un formular web verifică dacă informațiile introduse în acesta sunt corecte.
De exemplu:
Ai idee ... validarea doar asigură că utilizatorul nu a făcut o greșeală.
Este natura umană să facă greșeli, totuși, și, din păcate, formularul tău web probabil nu este scutit de eroarea umană. Acesta este locul unde validarea joacă rolul său într-o formă ușor de utilizat. Un memento vizual simplu pentru utilizator că ceva nu este completat în mod corespunzător poate face diferența între bucuria unui formular completat cu succes și frustrarea intensă de a avea ghicitul ce sa întâmplat.
Principiul principal al validării formei bune este acesta: "Discutați cu utilizatorul! Spuneți când ceva este greșit!"
Integrarea validării în design-urile web nu este greu ... dar marea majoritate a designerilor nu includ niciodată desene sau modele pentru aceasta. De ce? Deoarece validarea este adesea lăsată de dezvoltatori să-și facă griji în ultimele etape ale unui proiect.
Acest lucru creează un scenariu în care dumneavoastră, Joe Webdesigner, încredințați unul dintre cele mai importante aspecte ale experienței utilizatorului unui dezvoltator care probabil nu știe sau nu are grijă de modul în care trebuie proiectată validarea. Heck, în multe cazuri, dezvoltatorii nu se vor deranja cu nimic dincolo de cea mai validă validare a formularului de remediere ... care poate lăsa utilizatorii frustrați.
Acest lucru nu este o sapă la dezvoltatori sau nimic (și există o mulțime de devs mare, care se va ocupa de acest lucru cu culori zburatoare), dar să presupunem că dev nu este atenție de dragul argumentului.
Examinați următoarea grafică:
Ce e în neregulă cu acest formular? Sigur - formularul se "validează" prin a spune utilizatorului că ceva nu este în regulă ... dar utilizatorul este lăsat să ghicească ce este.
Principiul principal al validării formei bune este acesta: "Discutați cu utilizatorul! Spuneți când ceva este greșit!"
Să examinăm următorul grafic:
Mult mai bine? Acum, utilizatorul primește informațiile necesare pentru remedierea problemei. Acesta este un exemplu simplificat, dar observați cum integrarea unui sistem de răspuns de bază îmbunătățește gradul de utilizare prin salturi și limite.
Acum, că ați înțeles ce validare este, sperăm că doriți să aplicați acest lucru formularelor dvs. web. Există, în general, trei greșeli pe care le-ar putea întâmpina utilizatorii în forma dvs.:
Aceasta este probabil cea mai mare problemă cu care se vor confrunta utilizatorii. Ați completat vreodată un formular numai pentru a afla că ați introdus un caracter ilegal în câmpul nume de utilizator sau ați folosit un spațiu într-o adresă web? Aici începe validarea de formatare.
Cele mai multe câmpuri dintr-o formă web sunt doar alfanumerice, cu toate acestea, dacă aveți o adresă de email, o adresă web, un număr de telefon sau o parolă, este posibil să aveți nevoie de o anumită formatare. Probabil că puteți ghici sintaxa fiecărui câmp. Deci validarea formatării este eficientă dacă aveți în vedere anumite informații.
Aceste erori se întâmplă atunci când un utilizator uită / neglijează să completeze un câmp pe care l-ați specificat drept "necesar".
Acest lucru se întâmplă atunci când trebuie să verificați dacă o valoare este egală cu alta. Acest lucru este atât de important în formularele de conectare, mai ales pentru că nu doriți să permiteți utilizatorilor să se autentifice dacă parola lor nu se potrivește cu cea corectă.
Acesta poate fi, de asemenea, folosit pentru a face utilizatorii retype lor de e-mail sau parola, atunci când este vital, ei nu fac o greșeală.
În timp ce vă puteți modela formularul cu o mie de moduri diferite, există în general trei pași de bază pentru a vă ajuta utilizatorul să remedieze problema validării:
Culoarea este unul dintre cele mai bune instrumente să se utilizeze la proiectarea validării. Pentru că funcționează la un nivel instinctual, adăugând roșu la mesajele de eroare sau verde la mesaje de succes este incredibil de puternic.
Proximitate este un alt instrument important - să păstrați notificări specifice în apropierea câmpurilor de probleme și să păstrați mesaje despre întreaga formă departe de orice câmpuri individuale. Dacă puteți crea soluții personalizate pentru "piele", care fac aceste strategii și mai evidente (cum ar fi ca o notificare să pară că este atașată fizic unui anumit domeniu), veți face chiar mai bine.
Este, de asemenea, o bună practică de a le spune utilizatorilor în prealabil unde pot crea erori. Multe site-uri Web includ o casetă laterală cu instrucțiuni despre modul în care trebuie completat formularul. Altele au sintaxa corectă descrisă sub etichetă. Oricare metodă funcționează, atâta timp cât este acolo.
După cum vom menționa în secțiunea "Cum funcționează validarea" de mai jos, veți dori, de asemenea, să rulați "validarea instantanee" atunci când este posibil.
Acum, că am trecut prin teoria validării formei ... să analizăm câteva exemple de acest lucru în acțiune!
În timp ce vă uitați la acestea, rețineți că soluția este întotdeauna simplă: o sugestie, o notificare în cutie sau o bucată de text simplu. Atâta timp cât păstrați notificările aproape în apropierea câmpului de problemă, puteți să le proiectați, să le pielea sau să le stilizați în orice fel doriți. Singurul lucru pe care trebuie să-l amintiți este că de fapt îi oferiți un sfat utilizatorului.
Să ne grăbim:
ThemeForest aduce imediat un mesaj de eroare sub câmp. Înregistrările reușite obțin un verde "Succes!" mesaj.
Frexy folosește o abordare simplă, dar eficientă: Culoarea câmpului este greșită și adăugați textul de notificare luminos de mai jos. Editați: După cum a remarcat Boba în comentariile, culoarea verde ar putea induce în eroare pentru unii utilizatori, dar trebuie să echilibrați brandingul și uzabilitatea cu propriul gust.
Twitter adaugă un mesaj în dreptul drept al câmpului pentru a indica eroarea. Se face instantaneu ... și chiar adaugă culoare sistemului de răspuns pentru a accentua mesajul!
Monetăria nu validează doar câmpurile de formă imediat, ci și cele două pozitiv și negativ feedback ... este aproape ca și cum ai avea o conversație cu formularul!
FancyForm este un instrument de formă care arată cât de utilă este de a furniza de fapt feedback in-line sub formă de icoane.
Virb adaugă un mesaj luminos atunci când ați făcut ceva greșit. Puncte bonus: Virb nici nu vă va lăsa să tastați într-un caracter nepermis! Doar încercați ... vă îndrăznesc.
WordPress vă va oferi un mesaj de bază ... dar ceea ce este special este faptul că forma în sine de fapt shake-uri când introduceți informații greșite.
InvoiceMachine folosește cea mai simplă abordare. În loc de ajutor textual, culoarea fundalului este roșie pentru a semnala o problemă. Rețineți că o sugestie de text atunci când utilizatorul se deplasează peste formular ar îmbunătăți acest lucru și mai mult.
WPCoder arată că un simplu pop-up Javascript poate funcționa foarte bine.
Yahoo folosește o abordare plină de umor ... mai degrabă decât să întoarcă o eroare de bază atunci când o zi de naștere este incorectă, vă dau un pic de atitudine.
Din punct de vedere tehnologic, există două modalități diferite de a integra validarea într-o formă:
Validarea pe partea clientului oferă cea mai accesibilă alternativă pentru că poate afișa feedback-ul live și instantaneu astfel încât utilizatorul să își poată corecta imediat greșelile. Cu toate acestea, un dezavantaj major pentru validarea pe partea clientului este că, în general, se bazează pe un anumit tip de JavaScript. Prin urmare, dacă utilizatorul are JavaScript dezactivat, nu va vedea validarea live. Așadar, asigurați-vă că aveți încă posibilitatea de a renunța la validarea de pe server
Puteți citi mai multe despre partea tehnologică a validării site-ului nostru de rețea, Nettuts!
Cele mai bune forme sunt cele care anticipează comportamentul utilizatorilor. Este important să vă planificați un formular și să înțelegeți cum un utilizator ar putea face greșeli înainte ca acesta să se construiască. De ce? Deoarece dacă puteți anticipa un loc de problemă, este ușor să creați o soluție pentru a ajuta utilizatorii să treacă peste el. Cu toate acestea, lăsarea modelului de validare până în ultima clipă poate fi costisitoare pentru a repara odată ce codarea este completă. Dacă ai nevoie de ceva timp pentru a proiecta strategii și stil pentru formularele tale, vei economisi timp, bani și frustrare pe termen lung.
Accentsconagua