8 principii de web design care încă funcționează în 2020
Publicat: 2021-07-22Proiectarea site-ului dvs. web este mai importantă pentru conversii decât credeți. Puteți implementa fiecare tactică de creștere a conversiilor din lume, dar dacă designul dvs. web arată ca o prostie, nu vă va ajuta prea mult.
Proiectarea nu este doar ceva ce fac designerii. Designul este marketing. Designul este produsul dvs. și cum funcționează. Cu cât am aflat mai multe despre principiile designului web, cu atât am obținut rezultate mai bune.
Curs UX & Usability gratuit
Treci de la principii la practică. Urmăriți cursuri gratuite despre UX și utilizare.
Iată 8 principii eficiente de design web pe care ar trebui să le cunoașteți și să le urmați.
1. Ierarhia vizuală
Roțile scârțâitoare obțin grăsime, iar imaginile vizuale atrag atenția. Ierarhia vizuală este unul dintre cele mai importante principii din spatele unui bun design web. Este ordinea în care ochiul uman percepe ceea ce vede.
Exercițiu. Vă rugăm să ordonați cercurile în ordinea importanței:
Fără să știi nimic despre aceste cercuri, ai reușit să le clasezi
uşor. Aceasta este o ierarhie vizuală.
Anumite părți ale site-ului dvs. web sunt mai importante decât altele (formulare, îndemnuri, propunere de valoare etc.) și doriți ca acestea să primească mai multă atenție decât părțile mai puțin importante.
Dacă meniul site-ului dvs. web are 10 articole, sunt toate la fel de importante? Unde doriți să facă clic utilizatorul? Faceți legăturile importante mai proeminente.
Ierarhia nu vine doar din dimensiuni. Amazon face butoanele de îndemn „Adăugați în coș” și „Cumpărați acum” mai proeminente utilizând culoarea:
Începeți cu obiectivul de afaceri
Ar trebui să clasați elementele de pe site-ul dvs. web pe baza obiectivului dvs. de afaceri. Dacă nu aveți un obiectiv specific, nu veți ști ce să acordați prioritate.
Iată un exemplu. Este o captură de ecran pe care am luat-o de pe site-ul Williams-Sonoma. Vor să vând veselă în aer liber.
Cel mai mare punct de atracție este uriașa bucată de carne (fă-mă să vreau), urmată de titlu (spune ce este) și un apel la acțiune (ia-l). Locul al patrulea merge la un paragraf de text sub titlu; al cincilea este bannerul de transport gratuit, iar navigarea de sus este ultima.
Aceasta este o ierarhie vizuală - un principiu atemporal al designului web - bine făcut.
Exercițiu. Navigați pe web și clasificați conștient elementele din ierarhia vizuală. Apoi mergeți să vă uitați la site-ul dvs. Este ceva important (adică informații cheie pe care vizitatorii le caută) prea departe în ierarhie? Faceți-o mai proeminentă.
2. Proporțiile divine
Raportul de aur este numărul magic 1.618 (φ). Se crede că modelele care utilizează proporții definite de raportul auriu sunt estetice.
Apoi, există secvența Fibonacci. Fiecare termen este suma celor doi termeni anteriori: 0, 1, 1, 2, 3, 5, 8, 13, 21 și așa mai departe. Interesant este că cele două subiecte aparent fără legătură produc același număr exact.
Iată cum arată raportul de aur:
Mulți artiști și arhitecți folosesc proporții pentru a aproxima raportul de aur. Un exemplu celebru este Partenonul, construit în Grecia Antică:
Poate Golden Ratio să funcționeze pentru web design? Ai pariat. Iată Twitter:
Iată un comentariu, de acum câțiva ani, al directorului de creație Twitter, Doug Bowman. Alegerea designului nu a fost întâmplătoare:
Deci, dacă lățimea aspectului dvs. este de 960 px, împărțiți-o la 1.618 (= 593 px). Știți că lățimea zonei de conținut ar trebui să fie de 593 px și bara laterală de 367 px. Dacă înălțimea site-ului web este de 760 px înălțime, îl puteți împărți în bucăți de 470 px și 290 px (760 / 1,618 = ~ 470).
Dacă doriți să aflați mai multe, consultați acest articol despre cum să aplicați raportul de aur tipografiei.
3. Legea lui Hick
Legea lui Hick spune că, cu fiecare alegere suplimentară, crește timpul necesar pentru a lua o decizie.
Ați trăit asta de nenumărate ori la restaurante. Meniurile cu opțiuni uriașe îngreunează alegerea cinei. Dacă ar oferi două opțiuni, luarea unei decizii ar dura mult mai puțin timp. Acest lucru este similar cu Paradoxul alegerii - cu cât oferiți mai multe alegeri, cu atât este mai ușor să nu alegeți nimic. Ambele principii intră în joc cu designul web.
Cu cât un utilizator are mai multe opțiuni pe site-ul dvs. web, cu atât este mai dificil de utilizat (dacă este utilizat deloc). Trebuie să eliminăm alegerile. Pentru a face un design web mai bun, concentrați-vă pe eliminarea opțiunilor care vă distrag atenția pe tot parcursul procesului de proiectare.
Într-o eră de alegeri infinite, oamenii au nevoie de filtre mai bune! Dacă vindeți un număr mare de produse, adăugați filtre mai bune pentru luarea mai ușoară a deciziilor. Wine Library vinde o cantitate imensă de vin.
Ei fac o treabă bună cu filtrele:
4. Legea lui Fitt
Legea lui Fitt prevede că timpul necesar pentru a trece la o zonă țintă (de exemplu, faceți clic pe un buton) este o funcție a distanței până la țintă și a dimensiunii țintei. Cu alte cuvinte, cu cât un obiect este mai mare și cu cât este mai aproape, cu atât este mai ușor de utilizat.
Spotify facilitează apăsarea „Redare” decât alte butoane:
În aplicația pentru telefonul mobil, acestea plasează și butonul de redare într-o locație ușor de atins.
Mai mare nu este întotdeauna mai bun. Un buton care ocupă jumătate de ecran nu este o idee bună și nu avem nevoie de un studiu matematic care să ne spună. Chiar și așa, Legea lui Fitt este un logaritm binar. Aceasta înseamnă că rezultatele prezise ale utilizabilității unui obiect rulează de-a lungul unei curbe, nu o linie dreaptă.
Un buton mic este mult mai ușor de făcut clic atunci când i se oferă o creștere a dimensiunii cu 20%, în timp ce un obiect foarte mare, având aceeași mărire de 20% în dimensiune, nu va oferi aceleași beneficii în ceea ce privește utilizarea.
Acest lucru este similar cu regula dimensiunii țintei. Dimensiunea unui buton trebuie să fie proporțională cu frecvența de utilizare așteptată. Puteți utiliza urmărirea mouse-ului pentru a vedea ce butoane utilizează cel mai mult oamenii, apoi pentru a mări butoanele populare (mai ușor de atins).
Să ne imaginăm că există un formular pe care doriți să-l umple oamenii. La sfârșitul formularului, există două butoane: „Trimiteți” și „Resetați” (ștergeți câmpurile).
99,9999% vor să atingă „Trimiteți”. Prin urmare, butonul ar trebui să fie mult mai mare decât „resetare”.
5. Regula treimilor
Este o idee bună să utilizați imagini în design. Un vizual vă comunică ideile mult mai repede decât textul.
Cele mai bune imagini respectă regula treimilor: o imagine trebuie împărțită în nouă părți egale prin două linii orizontale distanțate la fel și două linii verticale la fel de distanțate. Elementele compoziționale importante trebuie plasate de-a lungul acestor linii sau la intersecțiile lor.
Mai jos, vedeți cum este mai interesantă imaginea din dreapta? Aceasta este regula treimilor în acțiune.
Utilizarea unor imagini frumoase și mari contribuie la o bună web design. Dacă imaginile dvs. sunt mai interesante, site-ul dvs. web va fi mai atrăgător.
6. Legile de proiectare Gestalt
Psihologia Gestalt este o teorie a minții și a creierului. Principiul său este că ochiul uman vede obiectele în întregime înainte de a-și percepe părțile individuale.
Iată ce vreau să spun:
Observați cum ați putea vedea câinele fără să vă concentrați asupra fiecărei pete negre din care constă câinele? Un fondator al gestaltismului, Kurt Koffka, a explicat-o astfel: „întregul există independent de părți”.
În ceea ce privește designul web, oamenii văd mai întâi întregul site - înainte să distingă antetul, meniul, subsolul și așa mai departe.
Există opt așa-numite legi de proiectare gestaltă care ne permit să prezicem modul în care oamenii vor percepe ceva. Iată cum se raportează fiecare la designul web:
1. Legea apropierii
Oamenii grupează lucruri care sunt apropiate în spațiu. Devin un singur obiect perceput.
Pentru un design web eficient, asigurați-vă că lucrurile care nu merg împreună nu sunt percepute ca una. În mod similar, grupați elemente de proiectare asociate (meniu de navigare, subsol etc.) pentru a comunica că formează un întreg.
Craigslist folosește această lege pentru a înțelege cu ușurință ce sub-categorii se încadrează în „de vânzare”:
2. Legea asemănării
Grupăm lucruri similare împreună. Această similitudine poate apărea sub formă de formă, culoare, umbrire sau alte calități.
Aici grupăm punctele negre într-un grup și albul în altul, pentru că, ei bine, punctele de aceeași culoare arată asemănător.
Cum arată acest lucru atunci când este aplicat designului web? Mixpanel folosește un design similar pentru link-uri către studii de caz, așa că le vedem ca un singur grup, fiecare consolidându-l pe celălalt:
3. Legea închiderii
Căutăm completitudinea. Atunci când forme care nu sunt închise sau părți ale unei imagini lipsesc, percepția noastră umple golul vizual. Vedem un cerc și un pătrat, chiar dacă niciuna dintre forme nu există de fapt în graficul de mai jos.
Fără legea închiderii, am vedea doar linii diferite cu lungimi diferite. Dar legea închiderii combină liniile pentru a forma forme întregi.
Folosirea legii închiderii poate face logo-urile sau elementele de design mai interesante. Un bun exemplu este logo-ul World Wide Fund For Nature, care a fost proiectat de Sir Peter Scott în 1961:
4. Legea simetriei
Mintea percepe obiectele ca fiind simetrice, formându-se în jurul unui punct central. Este plăcut percepția de a împărți obiectele într-un număr par de părți simetrice.
Când vedem două elemente simetrice care sunt neconectate, mintea le conectează perceptiv pentru a forma o formă coerentă.
Când ne uităm la imaginea de mai sus, avem tendința să observăm trei perechi de paranteze simetrice, mai degrabă decât șase paranteze individuale.
Oamenii preferă aparițiile simetrice decât cele asimetrice. Coloanele alternative de imagini și text, glisoarele centrate și o listă cu trei coloane se adaugă la plăcerea vizuală a designului paginii de pornire Trello:
5. Legea destinului comun
Tindem să percepem obiectele ca linii care se mișcă de-a lungul unei căi. Grupăm obiecte care au aceeași tendință de mișcare și, prin urmare, sunt pe aceeași cale.
Din punct de vedere mental, oamenii grupează bețe sau mâini ridicate îndreptate undeva, pentru că toți indică în aceeași direcție. În proiectarea site-ului dvs., puteți utiliza acest lucru pentru a îndruma atenția utilizatorului asupra a ceva (de exemplu, un formular de înscriere, o propunere de valoare etc.).
De exemplu, dacă există o serie de puncte, iar jumătatea punctelor se deplasează în sus, în timp ce cealaltă jumătate se deplasează în jos, percepem punctele în mișcare în sus și punctele în mișcare în jos ca două unități distincte.
6. Legea continuității
Oamenii au tendința de a percepe o linie ca continuând direcția stabilită. Când există o intersecție între obiecte (de exemplu, linii), avem tendința de a percepe cele două linii ca două entități unice, neîntrerupte. Stimulii rămân distincti chiar și cu suprapunere.
Fixel folosește acest lucru pentru a conecta fețele la bios:
Există și alte legi despre gestalt, cum ar fi Figura și temeiul sau Legea bunei gestalt. (Obiectele tind să fie grupate perceptual dacă formează un model care este regulat, simplu și ordonat - cum ar fi inelele olimpice.) Cu toate acestea, cele acoperite mai sus sunt cele mai bune principii directoare pentru designul web.
7. Spațiu alb și design curat
Spațiul alb (numit și „spațiu negativ”) este porțiunea unei pagini web care rămâne „goală”. Este spațiul dintre elemente grafice, margini, rigole, spațiu între coloane, spațiu între linii de tip sau imagini.
Nu este doar spațiu „gol” - este un element important al designului web. Permite obiectelor din interior să existe. Spațiul alb se referă la utilizarea ierarhiei pentru informații, tipografie, culoare sau imagini.
O pagină fără spațiu alb, plină de text sau grafică, riscă să pară ocupată sau aglomerată. De obicei, este dificil de citit. (Oamenii nici măcar nu se vor deranja.) Acesta este motivul pentru care site-urile web simple sunt mai bune din punct de vedere științific.
Cantitatea potrivită de spațiu alb face ca un site web să pară „curat”. Deși un design curat este crucial pentru a comunica un mesaj clar, nu înseamnă doar mai puțin conținut.
Un design curat face cea mai bună utilizare a spațiului în care se află. Pentru a crea un design de site curat, trebuie să știți cum să comunicați clar folosind spațiul alb cu înțelepciune. Made.com folosește bine spațiul alb:
Folosirea fină a spațiului alb facilitează concentrarea asupra mesajului principal și a imaginilor, iar copia corporală este ușor de citit. În general, spațiul alb promovează eleganța și rafinamentul, îmbunătățește lizibilitatea și stimulează concentrarea.
Citiți mai multe despre spațiul alb și simplitatea.
8. Aparatul de ras al lui Occam
Atunci când i se dau mai multe ipoteze concurente, aparatul de ras al lui Occam vă îndeamnă să alegeți cel care face cele mai puține ipoteze și, prin urmare, oferă cea mai simplă explicație. Pentru a-l pune în contextul designului web, Razor-ul lui Occam susține că cea mai simplă soluție este de obicei cea mai bună.
Într-o postare despre experiența lor Angelpad, echipa Pipedrive scrie:
Echipa și mentorii Angelpad ne-au provocat în multe feluri. „Aveți prea multe lucruri pe pagina dvs. de pornire” a fost ceva cu care nu am fost de acord la început, dar suntem bucuroși să testăm. Și s-a dovedit că ne-am înșelat într-adevăr. Am eliminat 80% din conținut și am lăsat un buton de înscriere și un link Aflați mai multe pe pagina principală. Conversia la înscriere a crescut cu 300%.
Nu este vorba doar despre aspect, ci și despre modul în care funcționează. Unele companii - cum ar fi 37Signals - s-au transformat „simplu” într-un model de afaceri. Iată un citat din cartea Rework, scrisă de fondatorii Jason Fried:
Mulți oameni ne urăsc deoarece produsele noastre fac mai puțin decât concurența. Sunt insultați când refuzăm să includem caracteristica lor de animal de companie. Dar suntem la fel de mândri de ceea ce nu fac produsele noastre, precum și de ceea ce fac. Le proiectăm pentru a fi simple, deoarece credem că majoritatea software-ului este prea complex: prea multe caracteristici, prea multe butoane, prea multă confuzie.
Designul simplu și minimalist nu garantează că designul va funcționa. Dar, din experiența mea, simplul este întotdeauna mai bun decât opusul și, prin urmare, ar trebui să ne străduim să ne simplificăm design-urile web.
Concluzie
Designul web eficient și arta nu sunt la fel. Dar multe principii psihologice și de proiectare se aplică site-urilor web. Puteți proiecta un site web excelent aplicând aspectele relevante ale acestor legi la aspectul, tipografia și imaginile dvs.
Proiectare pentru utilizator și obiectivele afacerii dvs. Un design web bun poate oferi rezultate plăcute din punct de vedere estetic și satisfăcătoare din punct de vedere financiar.