Ierarhie vizuală pentru începători

Ierarhia vizuală este organizarea obiectelor într-o ordine specifică pentru a atrage atenția asupra zonelor vizate.

Folosită în mod obișnuit în designul UX, ierarhia vizuală oferă cititorului o navigare mai ușoară și îi ajută să-i îndrepte atenția acolo unde doriți să fie.

Utilizarea necorespunzătoare sau lipsa ierarhiei vizuale pot lăsa vizitatorii site-ului web confuzi și pierduți.

Ierarhia vizuală este predominantă în afișe și reclame pentru a ajuta la dirijarea atenției asupra elementelor dorite.

Acest blog va oferi începătorilor elementele de bază ale ierarhiei vizuale.

Ierarhia vizuală defalcată

Împărțirea ierarhiei vizuale în bucăți mai simple ajută la explicarea modului în care designerii abordează conceptul de design.

Trei sunt trei roluri principale în ierarhia vizuală, dintre care două sunt strâns legate.

mărimea

Schimbarea dimensiunii obiectelor poate ajuta fie la atragerea atenției asupra lor, fie la îndepărtarea lor.

Este esențial să lăsați cea mai mare dimensiune pentru cele mai importante informații pe care doriți să le exprimați. Utilizarea prea multor elemente de dimensiuni similare va elimina acest efect, deoarece nimic nu iese la fel de mult în evidență.

Scalarea dimensiunilor este vitală pentru a arăta cum se compară cu alte obiecte. Crearea unui sentiment de echilibru ajută la scalare pentru a sublinia modul în care obiectul tău cel mai mare se compară cu cele mai mici.

Dacă aveți informații care nu sunt importante, având-o într-o dimensiune mică le va ține din drum și le va lăsa acolo unde utilizatorii le vor vedea ultima dată.

Culori și contrast

Culorile mai strălucitoare fac o treabă mai bună de a atrage atenția decât altele. Acest efect crește atunci când combinați culori luminoase cu fundaluri mai închise. Rezultatul face ca informațiile dvs. să apară mai mult și să atragă atenția cu ușurință.

Culoarea și contrastul sunt două părți ale ierarhiei vizuale, dar ambele lucrează împreună perfect pentru a capta atenția.

O modalitate de a folosi această metodă este de a schimba culoarea unui text prin evidențierea acestuia cu o culoare strălucitoare; va atrage atenția înaintea oricărui alt text colorat plictisitor.

Cu cât contrastul este mai mare, cu atât atenția este mai puternică. Adăugarea unor diferențe drastice de culoare, cum ar fi un fundal închis cu un font roșu aprins, va atrage atenția utilizatorului și va face ca acesta să fie primul lucru pe care îl observă pe orice imagine sau pagină web.

Când creați culori contrastante pentru a capta atenția, cel mai bine este să le reduceți la minimum. Prea multe obiecte contrastante derutează cititorul și creează un efect nedorit și dezamăgitor.

O altă modalitate de a folosi culorile este să alegi palete similare pentru a crea o corelație între anumite obiecte.

Cel mai bine este să rezervi această tactică doar pentru elementele cele mai necesare dintr-o pagină, deoarece acolo vrei să fie îndreptată mai întâi toată atenția.

Designul UX bun include mult contrast, majoritatea esteticii folosind un contrast puternic pentru a crea lucrări uimitoare.

Modelele F și Z

Când vine vorba de furnizarea de informații în primul rând prin text, există două modele principale care profită cel mai bine de modul în care procesăm informațiile vizuale.

Aceste modele funcționează pentru majoritatea limbilor, dar funcționează excelent pentru engleză, deoarece cuvintele sunt citite de la stânga la dreapta și de sus în jos.

Modelul F

Modelul F este alegerea perfectă pentru modelele care conțin text extins. Designul urmează litera numită după ea, începând din stânga sus și deplasându-se spre dreapta.

După care, spectatorul scanează pe coloana vertebrală pentru subtitluri sau titluri.

Modelul este numit alternativ E-pattern, deși modelul F este mai iconic.

Pentru a utiliza modelul F, trebuie să plasați toate informațiile vitale în partea stângă în titluri mici pentru a atrage atenția.

Acest design este excelent pentru a elimina plictiseala asociată cu citirea textului de pe blocuri mari de paragrafe.

Utilizatorii pot scana titluri pentru a identifica titluri atrăgătoare sau puncte marcatoare, deoarece servesc pentru a atrage atenția.

Modelul Z

În timp ce modelul F este potrivit pentru site-urile web cu conținut ridicat de text, modelul Z este diferit.

Modelul Z este perfect pentru site-uri web sau reclame care nu au mai multe paragrafe de text.

Designul începe prin a avea informațiile cu cea mai mare prioritate să se afle în stânga sus, apoi cad în cascadă în importanță în dreapta sus, stânga jos și dreapta jos.

Utilizatorii vor naviga cu ușurință în modelul Z, deoarece este un design folosit frecvent și ușor de înțeles.

Secțiunea din stânga sus este de obicei rezervată pentru un logo, deoarece va fi primul lucru pe care oamenii îl vor observa. În dreapta sus este un îndemn la acțiune poziționat după ce utilizatorii au văzut sigla companiei. Îndemnul la acțiune în această situație este de obicei un prompt de înregistrare.

Mijlocul designului include de obicei o imagine pentru a umple partea goală.

Colțul din stânga și din dreapta jos include tot textul sau informațiile pe care doriți să le arătați vizitatorului dvs.

Înțelegerea tipografiei

Ierarhia tipografică este ușor de înțeles și este aplicabilă oricărui design care implică o mulțime de text, care este marea majoritate. Poate fi împărțit în trei părți, ordinea fiind titlul, subtitlurile și, în final, textul dvs.

Titlurile tale conțin informații esențiale, sunt plasate cel mai sus pe designul tău și sunt conținutul cel mai vizibil.

Subtitlurile funcționează pentru a sorta tot textul și pentru a oferi ordine aglomerației de paragrafe. Păstrați întotdeauna subtitlurile mai mici decât titlurile dvs., deoarece acestea nu ar trebui să concureze în prioritate.

Subtitlurile oferă utilizatorilor o navigare simplă pentru a găsi informații specifice.

Ultima ta bucată este textul tău, care de obicei implică paragrafe. Dimensiunea fontului trebuie să fie mică, dar să mențină lizibilitatea. Cele două secțiuni anterioare funcționează pentru a oferi utilizatorilor un timp mai ușor de navigat prin textele dvs. dense.

Importanța spațierii

Pentru site-urile web care conțin informații minime, lăsarea unui spațiu abundent în jurul informațiilor importante va face ca atenția să fie atrasă spre centrul în care se află tot spațiul.

Acest concept ar trebui să se aplice și tuturor celorlalte modele ale dvs., adăugarea de prea multe informații vă va lăsa cu o experiență de utilizator neplăcută.

Conținutul înconjurător cu spațiu oferă un design UX simplu și ușor de urmărit.

Înghesuirea prea multă informații și lăsarea puțin spațiu în jurul zonelor vă va lăsa cu un design copleșitor și îi va lăsa pe oameni să se simtă nedumeriți. Când utilizatorii sunt confuzi, au întotdeauna șansa de a părăsi site-ul dvs., asigurați-vă că prezentați doar informații importante.

Folosind Alinierea

Este important să vă aliniați desenele, deoarece textul poziționat aleatoriu va crea o imagine agitată la care să vă uitați.

Ambele modele F-pattern și Z-pattern întruchipează utilizarea alinierii. Modelele F-pattern folosesc alinierea la stânga, în timp ce modelele Z folosesc aliniamente la stânga și la dreapta și alinierea la centru.

Când realizați un design vizual cu textul ca accent, cel mai bine este să vă aliniați la stânga.

Pentru modelele strict vizuale cu un accent simplist, alinierea tuturor elementelor la centru tinde să creeze un design atractiv.

Utilizarea Grilelor

Atunci când construiți proiecte, grilele sunt o metodă comună de a ajuta în procesul de creare. Utilizarea regulii treimii permite posibilitatea de a adăuga echilibru design-urilor dvs.

Pentru a utiliza regula treimii, adaugă o grilă în design și lasă-l să se odihnească pe două linii orizontale și verticale. Rezultatul oferă un design plăcut și mai ușor pentru ochi.

Obiectele mai apropiate de centru vor atrage atenția, în timp ce cele îndepărtate vor atrage atenția în ultimul rând.

Proximitate și relație

Când elementele sunt mai apropiate, cititorul dvs. va presupune că sunt înrudite.

Acest lucru vă poate ajuta să organizați o mulțime de informații și să le facă mai ușor de înțeles pentru spectator.

Gruparea imaginilor cu text înseamnă că ambele sunt legate, iar cititorii le vor asocia pe cele două împreună. Dacă o imagine și textul sunt îndepărtate unul de celălalt, cititorul va presupune că ambele elemente nu sunt legate și nu au nimic de-a face unul cu celălalt.

Fonturi și ierarhie vizuală

Schimbarea dimensiunii fontului dvs. cu fonturi mai mari rezervate pentru informații importante vă va ajuta să dirijați atenția asupra acestora.

Pentru un afiș, numele ar trebui să fie unul dintre fonturile mai mari, în timp ce elemente precum o adresă trebuie scrise cu un font mic.

Trecerea de la dimensiunea fontului, utilizarea diferitelor tipuri de fonturi va ajuta la dirijarea atenției utilizatorului. Utilizați un font diferit pentru titluri, subtitluri și text informativ. Această metodă de proiectare vă va ajuta să vă oferi lucrării pop-ul de care are nevoie pentru a aduna și a menține atenția cititorului.

Sfaturi pentru ierarhia vizuală

Înainte de a începe să vă creați designul, luarea câteva note vă poate ajuta să vă organizați designul și chiar să vă ajute să creați modele mai estetice.

Notați cele mai importante informații pe care trebuie să le acordați prioritate și ce metode veți folosi pentru a face acest lucru.

De asemenea, încercați să vă imaginați călătoria cititorului și încercați să îmbunătățiți designul UX și să eliminați orice detalii aglomerate.

Rentabilitatea investiției dintr-un design UX bun merită întotdeauna munca suplimentară, așa că nu îi subestimați importanța.

Învelire

Ierarhia vizuală se referă la dictarea în ce ordine doriți să se îndrepte atenția cititorului dvs.; vrei ca informațiile vitale să fie văzute mai întâi, urmate de orice altceva.

Utilizarea contrastului poate crea culori care pop și devin primul lucru pe care cititorii îl observă într-un design.

Știind ce informații doriți să fiți văzute mai întâi de cititori, vă va permite să utilizați toate elementele ierarhiei vizuale pentru a oferi altora un design bun UX.