Practici pentru o interfață web mai bună

Încep prin a vă spune că nu sunt vre-un designer grozav, cu mare ochi critic… știu să fac design, îmi face plăcere, dar nu sunt expert. Țin doar la anumite lucruri și cred că ele sunt globale, for dummies like me și adesea mă ajută să fac un design plăcut. În ultima vreme, mai ales cu flat design prinzând avânt, am văzut o mulțime de template-uri ce păreau a fi niște experimente, interesante, dar puțin trase de păr. Tocmai de aceea, o să enumăr o serie de „practici” pe care dacă le urmezi, obții cu siguranță o interfață web atrăgătoare.

Poate ține un pic de preferințe așa că vă avertizez ((-:

Cerințele generale ale unui design atractiv pornesc de multe ori din nevoia concretă a oamenilor de a disemina cu ușurință informația. Desigur, informația este aici un termen vag, dar concret, intefața web este acea fereastră care trebuie să pună cel mai pună cel mai bine în lumină conținutul site-ului.

  • Un design ar trebui să fie intuitiv, să nu fie nevoie a mă concentra pe modul de descifrare al meniului
  • Dacă e un blog, să-mi concentreze atenția pe conținut, dacă e magazin pe produse etc. Nu îmi place ca acest lucru să fie uitat în nenumărate rânduri. Când vreau să îți citesc articolul nu vreau să mi se distragă atenția în toate părțile iar lista exemplelor negative ar putea continua…
  • Îmi plac interfețele web elegante și minimale. Trebuie să tineți cont că vorbim doar de câteva secunde – acesta este timpul de care dispunem pentru a convinge un utilizator să citească conținutul site-ului nostru. Altfel, va da back și clic pe altceva.
  • Vreau să găsesc ceva de valoare, iar design-ul ar trebui să accentueze acel lucru valoros. Nu invers ascunzându-l după un popup mișcător.

Ținând cont de cerințele de mai sus, de ce am mai citit pe alte site-uri de profil și de ceea ce sțiu, m-am gândit la câteva idei pe care le-ați putea încerca pentru a vă face site-ul mai consistent. Spun consistent și nu frumos căci eu mă gândesc în prima fază la un website bine închegat, ce e foarte ușor de folosit. E și o strategie bună, ținând cont că poate nu ai experiență prea mare în webdesign. Nici eu nu am vreun background teoretic în asta…e precum cântatul la un instrument – poți urma o serie de pași pentru a cânta o piesă bine, chiar dacă nu înlegeți lucrurile de finețe pe care un muzician practician le simte cu ochii închisi.

 

1.Încearcă layout-uri cu o singură coloană

Cei care folosesc WordPress știu foarte bine despre ce vorbesc. Layout-urile cu o singură coloană sunt foarte indicate pentru bloguri căci fluidizează foarte mult întreg procesul narativ. Asta fiindcă direcționează foarte bine ochiul userilor de la stânga spre dreapta și de sus în jos. Să vă dau un contraexemplu concret care ar trebui să reliefeze situația. La momentul actual site-ul acesta merge pe stilul clasic: one big content block și un sidebar în partea dreaptă. Oricât de concentrat ai fi o parte din atenție se va îndrepta involuntar spre sidebar și te va distrage de la conținut (A da!Sper că nu ai fost distras în timp ce citeai asta să te uiți la sidebar ((-: ). Sunt multe exemple de bloguri personale care poate ar trebui mai degrabă să ghideze userii printr-o singură coloană jos…la un îndemn la acțiune (call to action).

Incerca layout-uri cu o singura coloana

2.Încearcă contrastul în locul similarității

Contrastul este mărimea prin care putem vedea diferențele relative de culoare între elementele grafice diferite și este metoda folosită cel mai des pentru a crea accente într-un layout. Conceptul este simplu: cu cât este mai mare diferența dintre un element grafic și ceea ce îl înconjoară, cu atât mai tare va ieși în evidență – îi creștem deci contrastul.

Cum putem crește/scădea contrastul? Am putea, de exemplu, să facem un element mai închis și cele din jurul său mai deschise (sau invers). Dacă ne jucăm cu adâncimea, putem să facem ca elementul să pară mai apropiat sau mai depărtat(aici ne jucăm cu umbre și gradiente). În final putem să alegem o combinație de culori complementare.

 

3.Încearcă formulare cu mai puține câmpuri

Asta ține mult de ușurința de utilizare și de accesibilitate, dar e un lucru care trebuie să-l menționez.Eu sunt o persoană leneșă la acest capitol. Mă sperie un website unde trebuie să completez date peste date, doar pentru a mă înregistra. E ca și cum pentru un baton de Snikers mă pui să îți sap un șanț – de cele mai multe ori aș zice nu și aș pleca. Analogia asta mică merge și la site-uri: e bine să reduci cât mai mult aceste procese căci adesea, vei pierde foarte mulți useri pe bază de comoditate. Să nu mai spun pe cei de pe tabletă sau de pe telefon.

 

4.Mergi pe o ierarhie vizuală bine definită

Exemplu de ierarhie vizuala bine definita
HopStock e un bun exemplu de site cu o ierarhie vizuala bine definita.Above the fold esti prezentat aproape pe intreg ecranul cu o imagine reprezentativa a produsului lor si apoi, fara alte introduceri iti sunt prezentate cele doua butoane.

O ierarhie vizuală bună poate fi utilizată cu succes pentru a separa elementele importante de cele mai puțin importante. Ierarhia asta vizuală rezultă dintr-o multitudine de lucruri precum simetria, spațiere, tipografie, mărimea elementelor, proximitatea, culoarea etc. Când aceste elemente sunt aplicate corespunzător, ele pot lucra împreună pentru a pauza și direcționa atenția oamenilor într-o pagină –  crescând astfel gradul de lizibilitate.

Dacă ar fi să fac iarăși o comparație aș zice că ierarhia vizuală e precum cauciucurile de iarnă ale mașinii.Ele sporesc fricțiunea, viteza cu care șoferul conduce și nu îl duce în vreun stâlp. În cazul nostru, viteza cu care userul scanează elementele paginii, de sus în jos, iar asta e bine, căci nu vrem să ne trezim cu el prin sidebar căutând după niște idei din vreun articol.

 

5.Grupează funcții similare în locul fragmentării interfaței cu userul

De-a lungul timpului vei ajunge să creezi poate neintenționat secțiuni multiple, elemente și opțiuni care vor face aceeași funcție. Treaba asta seamănă foarte mult cu entropia din fizică…lucrurile își măresc gradul de dezorganizare de-a lungul timpului. Tu, ca designer sau coder ce face design(e o diferență să știți – eu mi-s coder și nu mi-e așa de ușor să fac un design bun), va trebui să cauți astfel de fragmente și să le repari căci ele încurcă minunat de bine userul.

 

Alte chestii sau alte sfaturi vă rog foarte mult a le impârtăși…nu de alta, da mă ajutați și pe mine și pe ceilalți. ((-:

Lasă un comentariu