Ne volim duge uvode, pa ću odmah do stvari: ovo je checklista najvažnijih UX saveta za kreiranje korisnički prijateljskih formi za prijavu i registraciju.
Hajde da počnemo.
1. Automatski fokusiraj prvo polje
Ironično, osnovno pravilo interakcionog dizajna je: eliminiši interakciju. Ukloni klikove, čitanje, čekanje, razmišljanje.
Ako znamo da će 95% korisnika koji otvore formu odmah kliknuti na prvo polje, zašto im ne olakšati posao i automatski postaviti fokus?
(Napomena: automatski fokus može ometati korisnike koji koriste screenreadere, pa je dobro testirati ovaj deo.)
2. Koristi specijalizovane tastature za mobilne uređaje
Dve stvari su sigurne u životu: (1) smrt i (2) email adrese sadrže „@“ i „.“. Na sreću, mobilni telefoni imaju tastature prilagođene unosu emaila – ali samo ako označimo polje sa type="email" u HTML-u.
(Ovo važi i za telefonske brojeve – type="tel", URL-ove – type="url", i brojeve – type="number".)
3. Proveravaj validnost polja čim korisnik izađe iz njega
Umesto da čekamo da korisnik popuni celu formu pre nego što ukažemo na grešku, bolje je obavestiti ga čim sistem može da detektuje problem. Za email, na primer, ima smisla proveriti validnost čim korisnik pređe na sledeće polje (blur event).
4. Omogući klik na labelu
Svako polje u formi treba da ima klikabilnu labelu. U HTML-u, jednostavno stavite input unutar label elementa. Ovo omogućava:
-
Klik na labelu fokusira polje
-
Olakšava unos ako korisnik promaši malo polje
(Savet za pristupačnost: screen readeri ne uvek dobro podržavaju input unutar label, pa je bolje dodati aria-labelledby atribut.)
5. Prikaži uslove za lozinku dok korisnik bira
Niko ne bi trebalo da pogađa šta lozinka mora da sadrži. Prikaži pravila dok su relevantna – i sakrij ih kad nisu.
6. Dozvoli korisnicima da vide svoju lozinku
Omogućavanje prikaza lozinke sprečava greške pri unosu. Ovo je bolje nego terati korisnike da je unose dva puta.
7. Koristi tekst na dugmetu da naglasiš vrednost
Umesto generičkih „Nastavi“ ili „Pošalji“, iskoristi dugmad da pokažeš šta korisnik dobija – npr. „Napravi nalog“ ili „Pridruži se besplatno“.
8. Omogući prijavu preko društvenih mreža
Zašto forsirati korisnike da pamte još jedan username i lozinku? Pored klasične registracije, ponudi im opciju prijave preko Google, Facebook ili drugih naloga.
9. Preskoči lozinku – koristi „magic link“ ili jednokratni kod
Umesto lozinke, pošalji korisniku link ili kod na email. Zašto?
-
Ljudi zaboravljaju lozinke
-
Koriste iste lozinke na više mesta
-
Često je lakše proveriti email nego se setiti lozinke
(Mana: ako korisnik izgubi pristup emailu, gubi i pristup servisu. Takođe, link/cod treba da bude ograničenog vremena.)
10. Ne traži eksplicitno odobrenje uslova korišćenja (ako nije obavezno)
U nekim zemljama (npr. EU) moraš tražiti eksplicitnu potvrdu, ali gde god je moguće, izbegavaj dodatni klik.
(Iskreno? Skoro niko ne čita uslove, pa je to čista formalnost.)
11. Koristi jasne termine za „prijavu“ i „registraciju“
Izbegavaj „Sign in“ i „Sign up“ – slični su i zbunjuju. Bolje koristi „Prijavi se“ i „Registruj se“.
12. Omogući lako prebacivanje između prijave i registracije
Ako korisnik pogreši, trebalo bi da može lako da pređe na drugu opciju – obično preko linka na dnu forme.
13. Prijavljuj se email-om, ne username-om
Email-ove je lakše zapamtiti, a korisnici ne moraju da pamte dodatne podatke.
14. Ako je lozinka nevalidna, objasni zašto
Umesto generičke „Pogrešna lozinka“, objasni koji uslov nije ispunjen (npr. „Lozinka mora imati najmanje 8 karaktera“).
15. Zapamti unete podatke između pokušaja
Ako korisnik pogreši lozinku, ne briši email. Čak i lozinku možeš ostaviti vidljivu da proveri grešku.
16. Bonus: „Zaboravljena lozinka“ treba da pamti email
Ako korisnik već uneo email, ne teraj ga da ga ponovo unosi na stranici za resetovanje lozinke.
17. Dodaj dvostepenu autentifikaciju (2FA) – ali pametno
Da li znaš šta je gore od zaboravljene lozinke? Kad neko drugi pogodi tvoju!
Dvostepena autentifikacija (2FA) je kao dodatni brave na vratima – čak i ako neko ukrade lozinku, ne može da uđe bez SMS koda, Google Authenticator potvrde ili biometrije.
Kako je implementirati bez lošeg UX-a?
-
Ne forsiraj je odmah – ponudi je tek nakon što korisnik uđe u nalog.
-
Koristi metode koje ne ometaju (npr. push notifikacije umesto SMS-a, jer su brži).
-
Dozvoli „zapamti ovaj uređaj“ da ne mora stalno da unosi kod.
(Bonus: Ako korisnik omogući 2FA, pošalji mu backup kodove – za slučaj da izgubi telefon.)
18. Koristi reCAPTCHA – ali ne onu koja izaziva nervozu
Dokaži da nisi robot! – rečenica koja je uništila više korisničkog strpljenja nego loše lozinke.
Ali ima smisla: botovi napadaju forme, kreiraju lažne naloge i spamuju. Problem? Klasična reCAPTCHA (sa semaforima, traktorima i magarčićima) otera i prave korisnike.
Kako rešiti?
-
Invisible reCAPTCHA – radi u pozadini, ne ometa korisnike.
-
hCaptcha – manje agresivna alternativa.
-
Ako moraš vizuelnu, koristi v3 – proverava ponašanje bez slika.
(Pro tip: Ako korisnik greši 3x pri prijavi, tek onda prikaži CAPTCHA – ne odmah!)
Zašto su ove dve stavke bitne?
-
2FA čini nalog bezbednijim bez žrtvovanja korisničkog iskustva (ako je dobro implementirana).
-
reCAPTCHA sprečava zloupotrebu bez pretvaranja prijave u kviz iz prepoznavanja nadvožnjaka.
Zaključak
Niko ne dolazi na tvoj sajt da bi se prijavio – korisnici žele da brzo obave ono što im je potrebno i nastave sa svojim danom. Kao dobri UX dizajneri, treba da olakšamo taj proces što je više moguće.
Cilj je da bezbednost ne ubije korisničko iskustvo. Ako korisnik mrzi tvoj proces prijave – ili će odustati, ili će koristiti lošu lozinku („123456“) samo da ga prođe.
Pravilo UX-a za bezbednost:
„Najbezbednija prijava je ona koju korisnik ne primeti – ali koja ga i ne hakuju.“
Šta misliš? Da li si sreo odlične (ili užasne) primere UX prijave i registracije? 🚀