Vizualni protok prenosi gledateljsko oko kroz dokument na način da svi važni elementi dobivaju važnost, a ništa ne ometa viziju ili uzrokuje da gledatelj izgubi osjećaj dijela. Upotreba očitih elemenata protoka poput strelica ili brojeva najčešći je način na koji web dizajneri koriste protok, ali postoje i druge vrste elemenata koji se mogu koristiti i zloupotrijebiti za usmjeravanje vaših čitatelja da se kreću duž određenog puta. Koraci u ovom vodiču pokazat će vam primjere dobrog i lošeg protoka i pomoći vam da naučite vokabular vizualnog protoka u dizajnu.
Što je Visual Flow?
Vizualni protok može se postići na više načina:
- strelice
- Sekvencijalne slike ili tekstualni elementi
- Perspektiva
- gradijenti
- Promjene veličine
- krivulje
- Motion u slikama
- Lica - osobito oči
Sljedeće slike će vam pokazati neke uobičajene pogreške u protoku na web stranicama i kako ih ispraviti.
02 od 07Zapadni tekst struji od lijeva do desna
Ako ste odrasli u čitanju zapadnjačkog jezika, navikli ste na razmišljanje da se tekst treba pomicati s lijeva na desno. Dakle, kad se oko pomiče preko retka teksta, ona se kreće s lijeva na desno.
Na gornjoj slici vodopad teče desno u lijevu stranu, a tekst tekla vodopadom. Budući da svi znamo da se slapovi spuštaju, u smjeru protoka vode dolazi do prekida strujanja teksta teksta. Ogledalo gledatelja kreće se u pogrešnom smjeru da bi pročitao tekst.
03 od 07Tekst bi trebao protjecati sa slikama
U tom je slučaju slika preokrenuta tako da tekst teče u istom smjeru kao i voda. Svi elementi vode gledateljev pogled prema dolje s protokom vode i protokom teksta.
04 od 07Lijevo na desno jednako brzo
Konj na ovoj slici radi od desno na lijevo, ali tekst je engleski i slično lijevo. Vizualni utjecaj konjskog utrke u jednom smjeru usporava tempo čitavog dokumenta jer ide drugačije od teksta.
U zapadnjačkim kulturama, jer se naši jezici kreću s lijeva na desno, pridružili smo se vizualni smjer lijevo-desno kao naprijed i brz, dok je desno na lijevoj strani više zaostalo i sporo. Prilikom stvaranja izgleda s konotacijom brzine, trebali biste to zapamtiti - i zadržite svoje slike u istom smjeru kao i tekst.
05 od 07Nemojte prisiliti Eye Viewera da se Usporedi
Kad konj i tekst idu u istom smjeru, povećava se implicirana brzina.
06 od 07Pogledajte oči u web-fotografijama
Mnoge web stranice s fotografijama čine ovu pogrešku - stavljaju fotografiju osobe na stranicu, a osoba gleda daleko iz sadržaja. To se čak može vidjeti na web stranici za dizajn webstarta.com u starom dizajnu.
Kao što možete vidjeti, moja fotografija nalazi se pored nekog teksta. Ali ja gledam daleko od tog teksta, skoro sam se okrenuo prema njemu. Ako ste vidjeli taj govor tijela između dvije osobe u grupi, bilo bi lako pretpostaviti da mi se ne sviđa osoba kojoj se nalazim (u ovom slučaju blok teksta).
Mnoge studije praćenja oka pokazale su da ljudi vide lica na web stranicama. A srodne su studije pokazale da gledajući slike, ljudi će nesvjesno pratiti oči da vide što slika gleda. Ako se fotografija na vašoj web-lokaciji gleda izvan ruba preglednika, tamo će vaši korisnici izgledati, a zatim pritisnite gumb za povratak.
07 od 07Oči u bilo kojoj fotografiji trebale bi se suočiti sa sadržajem
U novom dizajnu za winicare.com, fotografija je malo bolja. Sada moje oči gledaju naprijed, a tu je i mali znak da tražim svoju lijevu - gdje je tekst.
Još bolja fotografija za tu poziciju bila bi jedna u kojoj su mi ramena također bila usmjerena prema tekstu. Ali ovo je puno bolje rješenje od prve fotografije. A za situacije u kojima će slika biti na desnoj strani sadržaja i lijeve strane, to bi mogao biti dobar kompromis.
Zapamtite, također, da dok slike ljudskih lica privlače najviše pozornosti, isto vrijedi i za životinjske fotografije. Na primjer, u ovom rasporedu uzorka imam svoje pse gledajući lijevo, ali slika je ispravan. Znači, gledaju sa stranice. Ovaj će izgled biti poboljšan ako sam promijenio orijentaciju pasa tako da su gledali u središte zaslona.
