”Good design is a lot like clear thinking made visual.” – Edward Tufte

Ierarhia vizuală este aspectul care face diferența dintre un site care doar arată bine și unul gândit să atragă atenția vizitatorului asupra elementelor care ne interesează de fapt.

Bineînțeles, organizarea elementelor în site îndeplinește câteva funcții vitale:

1. informează utilizatorii;

2. crează relații între diferite părți din conținutul site-ului;

3. generează impact emoțional în rândul vizitatorilor.

Dar ce influențează, de fapt, modul în care elementele unei pagini web sunt vizualizate de către utilizatori? Mai jos am enumerat o serie de factori care joacă un rol important în stabilirea ierarhiei vizuale:

Dimensiunea – elementele mari vor atrage mai mult atenția, spre deosebire de cele de dimensiuni reduse (de exemplu titlurile mari atrag atenția asupra a ceea ce urmează să fie prezentat pe larg în textul scris cu caractere mai mici);

Culoarea – culorile puternice atrag mult mai ușor atenția (cum sunt nuanțele de roșu sau galben). Urmează culorile închise, iar cel mai scăzut impact îl au nuanțele de gri;

Contrastul – acesta poate să apară în rândul culorilor, texturilor, formelor sau mărimilor. Alternarea elementelor pot atrage atenția asupra unor anumite aspecte, punându-le mai ușor în evidență (de exemplu butoanele de acțiune);

Aliniamentul – felul în care sunt aliniate elementele poate crea o anumită ordine în ceea ce privește modul în care acestea urmează să fie parcurse de vizitatori;

Proximitatea – distanța sau apropierea dintre elemente determină care este relația dintre acestea;

Spațiul alb – acesta încadrează frumos elementele și delimitează secțiunile dintr-o pagină;

Repetiția – atunci când un elemente apare în mod repetat în site-ul tău, acesta va atrage atenția mai ușor asupra lui (de exemplu hyperlink-urile care apar albastre în corpul textului).

Tipare de scanare a paginilor web

Ochiul uman are tendința de a parcurge o pagină web după anumite tipare, în funcție de conținut:

Modelul „F”

Este frecvent utilizat în cazul paginilor cu mult text, cum sunt blogurile. Modelul „F” presupune scanarea verticală în partea stângă a textului, pentru a căuta cuvinte cheie sau bullets. Dacă acestea atrag atenția și stârnesc interesul, ulterior textul va fi parcurs în mod natural – orizontal, de la stânga la dreapta.



Modelul „Z”

Este frecvent în cazul paginilor unde accentul nu cade pe text. Tendința este de a scana conținutul paginii, pornind din colțul stânga sus (unde se găsește logo-ul sau bara de meniu) și se continuă spre colțul din dreapta, așa cum parcurgem în mod natural o pagină. Ulterior, privirea se duce în colțul din stânga jos, și parcurge din nou pagina pe orizontală. Sunt ideale pentru site-urile sau paginile simple, unde punctul de interes este un buton call-to-action, cum sunt de exemplu landing page-urile.

Surse:

https://www.awwwards.com/understanding-web-ui-visual-hierarchy.html

https://www.interaction-design.org/literature/topics/visual-hierarchy