Ce trebuie să știm despre Log In Form? (+ PSD gratuit)

Si în cazul formularelor Log In, există mai multe practici, unele funcționale, altele slab concepute, iar altele discutabile. Voi încerca sa comentez mai jos câteva exemple, iar la sfârșit voi veni cu o soluție personală unde voi argumenta fiecare decizie, atât vizual, cât și legat de usability.

1. Abduzeedo

Probleme: Textul “Members sign in” este aproape invizibil. Butonul “Log in” de asemenea, insuficient scos in evidență (putea fi un buton verde, albastru sau orice altă nunanță din logo). Nu înțeleg nici scopul asteriscurilor (*) de la Username și Password. Când apare după un cuvânt, acest simbol se folosește de regulă pentru a semnaliza că mai jos există o notă explicativă. Nu este cazul aici. Dacă vrea să scoată în evidență că cele două câmpuri sunt obligatorii, iarăsi nu le văd sensul, în orice “Log in form”, username-ul și parola sunt obligatorii.

2. Dribbble

Vedem un Log In form împărțit în două, avem și opțiunea de Sign in with Twitter, se pare că cei de la dribbble mizează mult pe asta. Butonul de Sign In este suficient evidențiat. Observați că link-ul de ”forgot password” este plasat chiar deasupra inputului și lângă textul ”password”. Evident, motivul este pentru a avea cât mai la îndemâna această opțiune.

3. Facebook

Per ansamblu totul este OK, câmpurile sunt suficient de vizibile, singura problemă este că ”Forgot your password” nu este semnalizat ca link. Arată la fel ca ”Keep me logged in” care nu este un link. Observați că formularul de înscriere apare direct în homepage, asta arată cât de mult contează pentru facebook înscrierea de noi membri.

4. Digg

Aici avem de-a face cu un modal form destul de la moda mai nou, inspirat din Lightbox, nu știu dacă e soluția cea mai bună pentru un Log in form, mai mult din cauza X-ului din colt, care duce cu gandul la o anulare. Ce vedem diferit față de exemplele anterioare? Textele username / password apar în interior-ul câmpurilor. Input-ul de parolă este scurtat iar lânga el apare link-ul de ”Forgot?”, tocmai pentru a fi cât mai accesibil pentru utilizator. Butonul de Login este suficient de vizibil, iar link-urile sunt semnalizate corect. În cazul input-urilor pe un fundal deschis, observați că întotdeauna ele sunt delimitate fie printr-un stroke fie printr-un shadow subtil.

5. Twitter

Vedem tot un fel de modal box pentru ”Log in”, o soluție preluată ulterior de mai multe site-uri (vezi și exemplul următor). E o soluție practică care a devenit aproape un design pattern. Aici totul pare OK, link-urile sunt corect semnalizate, arată diferit față de restul textelor, butonul de ”Sign in” e suficient de vizibil. Totuși, ca o preferinta personală, pe un site ca twitter, aș vrea ca formularul de log-in sa fie direct în homepage, nu să dau un click în plus de fiecare dată când vreau să mă loghez.

6. Grooveshark

Tot un box în genul celui de pe twitter.com, arată destul de elegant, input-ul colorat ne arată unde ne aflăm, link-urile sunt semnalizate corect.

7. WordPress

Este unul dintre cele mai elegante și funcționale pe care le-am văzut. Clean și simplu. Îmi plac input-urile puțin supradimensionate, textul introdus e foarte vizibil. Bineînteles, aici avem de-a face cu un login form care este singur pe pagină, nu mai avem nimic altceva. Diferit față de celelalte exemple (mă refer la cele care au input-urile pe verticală) este butonul de Log In care apare în dreapta. Personal prefer această variantă în locul plasării în stânga, voi explica mai jos de ce, când voi comenta soluția mea.

Soluţii:

Mai jos aveți soluția mea la un login box, poate puțin supradimensionată pentru ca totul să fie vizibil, ușor de localizat și să ne facem o idee legat de cum funcționează. Bineînteles, când veți avea de creat un design box veți șine cont de spațiul pe care îl aveți disponibil.

Puteți vedea și niște adnotările (de la 1 la 5) pe care le voi explica mai jos:

  • 1. Input delimitat în felul următor: Un stroke gri de 1 pixel plus un al doilea stroke de 5 pixeli, gri, transparent. Cel de-al doilea, accentuează delimitarea câmpului, dar și ajută design-ul din punct de vedere estetic. Apoi mai avem și un shadow interior. La fel, și acesta este destul de subtil, nu vrem un shadow prea evident, ci doar cât să aducă un plus la capitolul user experience. Fundalul câmpului are altă culoare, asta ne arată că în momentul respectiv cursorul nostru este acolo.
  • 2. Label-urile Username / Password sunt plasate în stânga (nu deasupra) și aliniate la dreapta. Nu este greșită nici plasarea lor deasupra sau în interiorul input-urilor în cazul în care avem la dispoziție un spațiu mai restrâns.
  • 3. Forgot password / Forgot username plasate într-o proximitate maximă a input-urilor pentru a fi cât mai accesibile utilizatorului. Scrise cu o culoare diferită față de restul textelor pentru a arăta că avem de-a face cu un link.
  • 4. Butonul de Log In colorat în verde, tratat ca un Call to Action și evidențiat cât mai bine în formular. L-am plasat în dreapta pentru că în stânga am deja opțiunea de ”remember password”. Al doilea motiv pentru care l-am plasat în dreapta este pentru că această pozitionare sugerează un flow, un drum parcurs de catre utilizator. Acest buton te duce mai departe, urmează o altă pagină. Exact din acelasi motiv am inclus și o săgeată în butonul de Log In.
  • 5. Opțiunea de creare a unui cont, semnalizată cu altă culoare ca link. La hover va apărea cu underline.

Important de observat sunt și mărimile fontului. Dacă facem exceptie de titlul ”Log in to your account” (Helvetica bold 28 pt), în rest am doar 2 dimensiuni în tot design-ul: 20 pt, respectiv 13 pt. Pentru o coerență vizuală nu e recomandat sa faceți abuz nici de dimensiuni, nici de fonturi.


Freebie. Poftiţi şi Degustaţi!

Ca ”freebie” aveţi soluția mea disponibilă gratuit ca fișier Photoshop (dowbload 1.4 MB). Uitati-vă peste ea, eventual încercați să concepeți și voi o variantă proprie având în vedere comentariile de mai sus. Pentru a downloada PSD-ul folositi butonul de mai jos:

Înapoi la prima pagină

2 răspunsuri la “Ce trebuie să știm despre Log In Form? (+ PSD gratuit)”

  1. Ce trebuie să știm despre Log In Form? (+ PSD gratuit) scrie:

    [...] Home › Freebies › Ce trebuie să știm despre Log In Form? (+ PSD gratuit) [...]

  2. Razvan Pavel scrie:

Adaugă un comentariu