Vijesti o Tehnologiji, Recenzije i Savjeti!

Vodič za vizualnu hijerarhiju za ne-dizajnere [Best Practices + Examples]

Jeste li ikada kliknuli na web stranicu, pogledali i rekli “Hm, to će biti ne” dok tražite gumb za izlaz?

Općenito mi je to iz tri razloga: stranica se čini zastarjelom, pretrpanom ili teškom za navigaciju.

Loš dizajn može spriječiti vašu ciljnu publiku da se zainteresira za vaš brend.

Zato je važno razumjeti ključna načela dizajna koja će vam pomoći da angažirate svoju publiku, zadržite je na stranici i potaknete konverzije.

Evo jednostavnog vodiča za određeni princip dizajna: vizualna hijerarhija. Pokriti ćemo sve elemente koji doprinose vizualnoj hijerarhiji i pogledati dobre i loše primjere.

Vizualna hijerarhija utječe na ono što gledate i na što se fokusirate u dizajnu, bilo da je to slika, grafički dizajn ili web dizajn. To je ključni igrač u ct-u (to jest, kako su informacije organizirane i prikazane radi lakšeg razumijevanja i navigacije) i može imati ogroman utjecaj na korisničko iskustvo (UX).

Kada razmišljate o vizualnoj hijerarhiji, morate si postaviti nekoliko pitanja:

  • Na što želimo skrenuti pozornost?
  • Koje radnje želimo da naši korisnici poduzmu?
  • Kamo prirodno ide oko i gdje slijeće?

Postavljanje ovih pitanja pomoći će vam da upotrijebite dolje navedena načela za stvaranje jasne vizualne hijerarhije.

Što čini lošu vizualnu hijerarhiju?

Kada je u pitanju vizualna hijerarhija, postoji pravilo: ako se svaka stavka čini važnom, ništa se neće činiti važnim.

Vizualna hijerarhija služi kao način za klasifikaciju informacija koje konzumirate. Ako ne postoji način razlikovanja između stavki, to se smatra lošom hijerarhijom.

Uzmi ovaj primjer:

S lijeve strane se mnogo toga događa. Dvije glavne stavke su iste veličine, ima mnogo različitih boja. Otežava znati gdje tražiti. Oči ti zasljepljuju sve, stvarajući nelagodu i nedostatak smjera.

S desne strane vaše oko automatski ide do glavnog plavog okvira s lijeve strane, a zatim prirodno prelazi na elemente s desne strane prije nego što dođe do narančastog poziva na radnju (CTA).

Loša vizualna hijerarhija:

  • Zbunjuje korisnika.
  • Čini nejasnim gdje tražiti.
  • Napravite gladak dizajn.

Umjesto toga, stvorite vizualnu strukturu koja olakšava razumijevanje i vodi korisnika.

1. Razmislite o čitanju obrazaca.

Prilikom dizajna, želite uzeti u obzir prirodne obrasce očiju vaše ciljane publike.

U svim kulturama čitamo od vrha do dna. Međutim, postoje neke varijacije u načinu na koji čitamo vodoravno. Zapadne kulture obično čitaju s lijeva na desno, dok neki semitski i indoarijski jezici, kao što su arapski, hebrejski i urdu, čitaju s desna na lijevo.

Imajući to na umu, to utječe na način na koji skeniramo i razumijemo dizajn. Na primjer, zapadni korisnici često slijede obrazac čitanja F ili Z.

Vizualna hijerarhija čitanja obrazaca

Poznavanje ovih informacija pomoći će vam da dizajnirate projekte koji pretvaraju, posebno odredišne ​​stranice.

2. Korisnici lakše primjećuju veće predmete.

Veličina igra važnu ulogu u vizualnoj hijerarhiji. To je jedan od glavnih načina klasifikacije elemenata u dizajnu.

Uzmite ovaj primjer s Netflixa.

Primjer veličine vizualne hijerarhije Netflixa

Izvor slike

Prva stvar koju ćete pročitati kada pogledate ovu sliku je “”

Zatim će pročitati sljedeći redak, a zatim sljedeći prije nego što istraži ostale elemente na stranici.

Veličina znači važnost. Što je predmet veći, to privlači više pažnje i veća je vjerojatnost da ćete ga prvi pogledati.

Kada dizajnirate svoju web stranicu, razmislite što želite da vaša publika prvo pogleda i upotrijebite to za usmjeravanje svoje strategije.

3. Boja i kontrast privlače pozornost.

Drugo načelo koje treba imati na umu je boja.

Znamo da boja može izazvati emocije i može imati određene kulturne i društvene konotacije. Samo pogledajte logotipe po djelatnostima i primijetit ćete trend. Brendovi hrane obično imaju crvene i žute, dok su financijske institucije obično plave.

U dizajnu, boja je izvrsna za privlačenje pažnje.

primjer boja vizualne hijerarhije

U gornjem primjeru vidjet ćete da su stavke koje se najviše ističu narančaste. Tek nakon što ih pogledate, skenirat ćete ostale elemente na stranici.

Na web-mjestu to možete upotrijebiti da privučete pozornost na svoje pozive na akciju.

vizualna hijerarhija boja CTA primjer

Izvor slike

U gornjem primjeru CTA koji se najviše ističe nalazi se u sredini. Marka vjerojatno želi da korisnici odaberu ovu opciju. Ostali pozivi na radnju i dalje su vidljivi, ali prigušeni u usporedbi s narančastom.

Kako biste stvorili najveći vizualni učinak s bojom, manje je više.

4. Bijeli prostor stvara naglasak.

Bijeli prostor se odnosi na prazan prostor unutar dizajna.

Lagani primjer vizualne hijerarhije razmaka

Izvor slike

Ponekad postoji želja da se prostor ispuni sa što više predmeta. Međutim, ovo se vraća na koncept važnosti: ako se svi čine jednako važnima, nitko se ne smatra važnim.

Zbog toga je dodavanje bijelog prostora vašem web dizajnu ključno za privlačenje posjetitelja.

Apple Također je poznat po korištenju razmaka.

primjer vizualne hijerarhije blank of Apple

Izvor slike

Marka nudi jednostavno korisničko sučelje, koje stvara veći naglasak na elementima stranice. Korištenje koje čini Apple Bijeli prostor također odražava identitet brenda.

5. Blizina i ponavljanje stvaraju jedinstvo.

Kada sastavite više elemenata, to govori korisniku da su koncepti povezani.

NYT Kuharska vizualna hijerarhija blizina i primjer ponavljanja

Izvor slike

Ovaj dizajn nudi mnoge primjere blizine.

Uzmite elemente “Svladajte osnove”. Usko grupirajući sve ove kutije, posjetitelj može shvatiti da pripadaju istoj kategoriji.

Isto vrijedi i za ikone “Prati nas”. Kada bi sve ikone bile nasumično raspoređene na stranici, korisnicima bi bilo teško razumjeti njihovu svrhu.

Ako niste sigurni kako grupirati određene stavke, možete upotrijebiti određene strategije istraživanja UX-a, kao što je sortiranje kartica, kako biste grupirali stavke na temelju očekivanja vaše publike.

Primjeri dobre vizualne hijerarhije

1. Visme.co

Visme primjer dobre vizualne hijerarhije

Izvor slike

Visme.co ima privlačan skočni prozor koji potiče korisnike da se pretplate na njegov newsletter.

Brend uspješno koristi prostor, boju, veličinu i kontrast kako bi istaknuo ključne elemente. Također ćete primijetiti da su elementi dizajnirani prema Z uzorku, tako da je veća vjerojatnost da će korisnici pretvoriti.

2. Studija 8. AD

Prilikom dizajna svoje web stranice, ovaj brend koristi prednost bijelog prostora kako bi usmjerio pozornost korisnika na tri ključna elementa: sliku i dva poziva na akciju koja se nalaze u donjem lijevom kutu.

Studio 8AD primjer dobre vizualne hijerarhije

Izvor slike

3. Pretežno crna

Ovaj brend nudi izvrstan primjer blizine za stvaranje vizualnih hijerarhija. PredominantlyBlack.com primjer dobre vizualne hijerarhije

Izvor slike

Organizirajući sve proizvode pod glavnim naslovom i ostavljajući malo prostora između njih, posjetitelji brzo shvaćaju da ti proizvodi pripadaju istoj kategoriji.

Vizualna hijerarhija se odnosi na rangiranje vaših stavki po važnosti. Nakon što definirate na što se želite usredotočiti i uzmete u obzir potrebe svoje publike, možete kreirati dizajn koji će ostvariti željeni učinak.

predlošci sadržaja