• Poštovani posjetitelju, za korištenje svih mogućnosti koje InternetZarada Forum omogućuje, predlažemo ti da se registriraš. Besplatno je i tvoja privatnost je potpuno zaštićena. Registracija ti omogućuje pristup svim kategorijama i temama, mogućnost pristupa privicima u postovima (slike, video, tutorijali, uputstva itd), pristup malom oglasniku (Tržnica), direktnu komunikaciju s članovima putem privatnih poruka, automatsko praćenje tema od interesa i još mnogo toga. Veselimo se tvojoj prijavi! ❤️

Web dizajn Psihologija websajta

skijanje

Član
Tu od
11 Pro 2010
Postova
83
Uvod

Ovo je svojevrsni "tutorijal" o psihologiji korištenja websajta, kako posjetitelj pregledava stranicu i što prvo uoči, te kako možemo prilagoditi svoje stranice kako bi iskoristili ta saznanja u svoju korist. Većina posjetitelja ovog foruma koristi gotove skripte dizajn predloške. Zbog toga u ovom tekstu neće biti govora o tome kako napraviti neku grafiku ili oblikovati html element, već o jednostavnijim stvarima koje manje više svi mogu primijeniti poput: kako odabrati odgovarajući font, boju, poziciju oglasa itd.

Navodim da preporuke koje se navode u tekstu nisu moj izum već su one navedene u raznim studijama. Jedna te ista preporuka neće vrijediti uvijek i svugdje, tako da ih uzmite kao načelne.

Kod pregledavanja web stranice, iznimno veliku ulogu ima web dizajn. Dizajnom utječemo na izgled i raspored pojedinih dizajnerskih elemenata. Svi nastojimo privući što više korisnika koji donose određeni benefit. Dizajnom moramo uvjeriti posjetitelja da napravi željenu akciju. Prilagođavanjem izgleda web stranice postižemo da stranica daje bolje rezultate od istog broja posjetitelja.

Pojednostavljeno:
dobar dizajn = bolja efektivnost = bolja zarada


Kako ljudi pregledavaju websajt?

Provođena su istraživanja gdje se korisnicima pratio pogled i utvrdilo se koji su najgledaniji dijelovi stranice. Na sljedeće dvije slike vidi se kojim redoslijedom ljudi pregledavaju stranicu i koji su dijelovi stranice najuočljiviji (područja označena crvenom bojom su najgledanija).

structure_layout1.jpg
structure_layout2%281%29.jpg



Od zasebnih elemenata koji najviše privlače pogled su običan tekst (!), slika lica i slika (polu)golog tijela. Općenito, slike srednjeg ili većeg formata privlače pažnju, dok one koje su premalene u odnosu na okolni tekst budu preskočene u potpunosti. Iako slike privlače pažnju, ono što zadržava posjetitelje na sajtu je tekst (ako se ne radi o galeriji slika naravno:)). Iz tog je razloga bitno da font, boja teksta i boja pozadine budu dobro usklađeni, tj. da ne umara posjetitelja jer ga se na taj način doslovno tjera sa stranice.

Ako želite usmjeriti pogled posjetitelja na točno određeni dio stranice (op-tin formu, order formu, neki interni link kod cpa i sl.) učinite to koristeći upadljive strelice većeg formata. Strelice možete dodatno pojačati jakim riječima kao što su 'click here', 'order now, 'get free copy' itd. Treba podsjetiti da CPC oglašivačke mreže (poput Google Adsensa) ne dozvoljavaju da se strelicama usmjeravaju posjetitelji da klikaju na oglase, dok cpa mreže naravno dozvoljavaju takvo promoviranje offera.


Odabir boje

Često se zanemaruje važnost odabira odgovarajuće boje za sajt. Odabranom bojom šaljemo određenu poruku posjetitelju iako toga uglavnom nismo niti svjesni. Boja na web stranici se ''podrazumijeva'', mislimo da jednostavno moramo odabrati bilo koju boju kako bi popunili prazan prostor ili pozadinu. Zbog toga u većini slučajeva odabiremo onu koja se nama osobno sviđa ili koja je 'fora' dok je neka druga puno prikladnija i daje bolje rezultate.

Značenje boja nije univerzalno i ono ovisi o kulturološkom porijeklu gledaoca kao i kontekstu u kojem se određena boja pojavljuje. U kratkim crtama osnovna značenja pojedinih boja u zapadnjačkoj kulturi bi bila ova:

Crvena: ljubav, strast, uzbuđenje, akcija, avantura, ona potiče i aktivira posjetitelja (jasno se vidi zašto se na sales pagevima preferiraju nijanse crvene boje kod ključnih elemenata poput naslova i buttona)
Plava: poslovnost, profesionalnost, uspjeh, smirenost, ozbiljnost, povjerenje, snaga (boja karakteristična za news, business i sportske portale)
Zelena: novac, priroda, zdravlje, harmonija (boja idealna za niche kao što su: money making, sve vezano za zdravlje, prirodu, životinje itd.)
Bijela: čistoća, smirenost, jednostavnost
Crna: snaga, elegancija, ozbiljnost, mističnost
Siva: neutralnost, pritajena elegancija, ozbiljnost
Narančasta: mladost, kreativnost, proslava, zabava
Roza (pink): nježnost, mladost
Smeđa (braun): zemlja, priroda

Boje na sajtu posjetitelj odmah uoči i one daju svojevrstan brand stranici. Boje treba prilagoditi temi i svrsi stranice, nije isto ako imate npr. sportski portal, review sajt pc igrica ili prodajete preparate za mršavljanje. Za odabir boje bitni su još spol posjetitelja i dob. Značaj boja je velik iz razloga što boje pobuđuju emocije a emocije mogu biti (ili su često) stimulans, tj. okidač za određenu akciju (posebno na stranicama koje nude kupovinu). Primjera radi, dobro dizajniran sales page ubrzava rad srca, blago povisuje tlak i emocionalno (drugim riječima neracionalno) navodi posjetitelja da kupi proizvod. Neosynthesys je u više članaka pisao upravo o utjecaju dizajna i copywritinga na donošenje odluka. Uzimajući u obzir utjecaj boja može se reći da su boje zapravo jedan od alata za postizanje željenog cilja u internet marketingu.

Ako radite vlastite banere, makar za interlinking, koristite svjetlije boje sa jasnom porukom popraćene jakim porukama poput click here, click now i sl.


Odabir teksta

U naslovu posjetitelj uglavnom pročita prve dvije tri riječi, zbog toga stavite ključne riječi na početak naslova. Naslove ili neke izdvojene dijelove teksta ne treba podcrtavati jer crta predstavlja svojevrsnu barijeru za daljnje čitanje. Posjetitelj poslije naslova pogledom prelazi na prvo poglavlje. Dobar dio posjetitelja upravo kroz to poglavlje odlučuje hoće li nastaviti čitati ili otići sa stranice. Zbog toga nastojte da to poglavlje bude sažetak teksta i naglasite najzanimljivije ili najvažnije točke o kojima se govori u ostatku teksta. Također, nije loše dodatno istaknuti to poglavlje italic ili bold stilom. U ostatku teksta dobro je boldanjem istaknuti ključne riječi. Ne čitaju svi sa pozornošću cijeli tekst kako bi došli do dijela koji ih zanima već dobar dio posjetitelja skenira tekst tražeći određenu informaciju. Istaknutim ključnim riječima pomažemo posjetitelju da zaustavi pogled (ukoliko je samo letimično skenirao tekst) i baci se na čitanje. Ukoliko objašnjavate kompliciranije i apstraktnije stvari, odličan je potez koristiti neku grafiku ili animaciju koja čitatelju predočava stvari i olakšava razumijevanje (1 slika 1000 riječi).

Ukoliko želimo da posjetitelj pročita tekst, treba koristiti manji font. Suprotno nekom instinktivnom mišljenju, tekst velikog formata posjetitelj će samo letimično skenirati, dok će manji font čitati sporije i sa većom pažnjom. Zbog toga, ako vam je važno da posjetitelj pročita tekst (npr. kod affiliate promocije proizvoda) koristite manji neserifni font (neserifni fontovi su arial, tahoma, verdana i ostali koji nemaju ukrasne kvačice na završnim rubovima poput times new romana npr.). Usput rečeno, sales pagevi koriste upravo manje fontove za tekst kako bi se posjetitelja potaknulo da koncentrirano pročita sve o datom proizvodu. Serifni fontovi su dobri ako planirate ukositi tekst (italic stil).

Od navigacije je najuočljivija horizontalna navigacija ispod logoa, tj. iznad naslova teksta (o tome više u dijelu o postavljanju oglasa). Linkovi u tekstu trebaju biti lako uočljivi i naravno, uvijek koristite deskriptivan anchor. Kod većih tekstova uvucite početni red odlomka. Uvučeni prvi redovi olakšavaju čitanje, razbijaju 'monumentalnost' odlomaka i olakšavaju čitatelju prelazak na sljedeći odlomak. Koristite manje odlomke koji potiču na čitanje; veći odlomci odbijaju čitatelja.


Odabir stila oglasa

Za početak na Googlovoj stranici imate preporuke gdje smjestiti oglase.
Kako bi dobili što bolji CTR, smjestite oglase na mjesta koja su najgledanija (pogledaj grafike sa početka).
Ukoliko je stranica svijetla, veći je ctr ako se oglas uklopi u stranicu, tj. da je boja pozadine i teksta oglasa jednaka bojama koje se koriste na stranici i da se ukloni rub oglasa. Što se oglas bolje uklopi u dizajn stranice, posjetitelj će imati dojam da je oglas dio stranice a ne „oglas“ i prije će kliknuti na njega (pogotovo ako je tekst oglasa kompatibilan sa sadržajem stranice). Sa druge strane, ukoliko je stranica tamna, bolje prolaze oglasi koji su kontrastni, tj. koji se ističu i 'bodu oči'.
Najbolje prolaze veći oglasi. Oglas smjestite uz zanimljiv sadržaj koji privlači pogled, što se posebno odnosi ako na stranici imate neki video ili sliku. Također dobro su uočljivi oglasi pri vrhu ili unutar teksta. Oglasi sa desne strane ili ispod članka su manje uočljivi, iako na Googlovoj stranici sugeriraju postavljanje oglasa ispod teksta, budući da posjetitelj nakon čitanja teksta očekuje 'nastavak'. U jednom dijelu teksta je spomenuto da najviše pažnje privlači običan tekst, slika lica i slika (polu)golog tijela. Ukoliko koristite slobodnije slike, informirajte se da li vaša oglašivačka mreža dozvoljava postavljanje oglasa na stranice sa takvim sadržajem. Konkretno Google ne dozvoljava postavljanje oglasa (jedan član je nedavno pisao o blokadi Adsense računa zbog istog razloga), tako ta pripazite ukoliko vam je to jedan od načina zadržavanja posjetitelja.

Od navigacije, najuočljivija je horizontalna navigacija iznad teksta. Zbog toga su na dosta sajtova postavljeni adsense oglasi (text units) i ti oglasi (pogotovo ako su dobro 'kamuflirani' što je česta praksa) imaju vrlo solidan ctr jer posjetitelji ne očekuju oglase na tom mjestu već navigaciju. Sa druge strane, većina korisnika ne voli nikakve oglase, a od svih oglasa upravo ti inline text units oglasi najlošije kotiraju, tako da sami odlučite koliko dobivate ili gubite na profesionalnosti postavljajući te oglase ispod (ili umjesto) horizontalne navigacije. Vrlo malo ozbiljnih web stranica i portala koristi ove oglase, dok su česti kod blogova i foruma.

Posjetitelji koji učestalo dolaze na isti sajt prestaju da primjećuju oglase (ad blindness). Na sljedećoj heatmapi se vidi kako posjetitelji pogledom izbjegavaju oglase.

1225494952_c671651891.jpg


Čak i posjetitelji koji prvi put dođu na neki sajt pogledom preskoče oglase. Također posjetitelji često preskaču i dijelove stranice koji nisu oglasi ali ih prilikom skeniranja stranice podsjećaju na oglase (slike, vertikalna navigacija). Ako imate stalne posjetitelje dobro je privremeno promijeniti lokacije oglasa ukoliko je to moguće kako bi 'razbili' očekivani raspored elemenata i kako bi posjetitelji primijetili oglas.


Zaključak

Kako je na početku rečeno, ove preporuke su samo načelne i ne vrijede u svim situacijama. Treba reći i da je Internet već preplavljen razno raznim ponudama, nerealnim obećanjima, bombastičnim naslovima, agresivnim reklamama i prikrivenim (neetičkim) oglasima. U svemu tome svatko treba pronaći neki balans između koristi i štete i vidjeti koji mu pristup u Internet marketingu daje najbolje rezultate.
 
Ima jedno pravilo koje je nama ljudima usađeno od početka školovanja, a to je da nam je pogled prema web stranici uvijek usmjeren u lijevo, a to je jednostavno zato što je u našoj kulturi pravilo da se piše s lijeva na desno, tako da uvijek bolje prolazi sadržaj koji se nalazi sa lijeve strane web stranice!
Dovoljno je vidjeti kako Google razmišlja kada stavlja plaćene oglase, oni u žučkastoj boji stoje lijevo na vrhu pretraživača i puno su posjećeniji od onih koji se nalaze sa desne strane!
Tako je i u web dizajnu, oglasi i reklame koje su smještene na lijevoj strani puno bolje prolaze nego oni s desne ;)
 
Hvala što si nas informirao, mogao si usput navesti neku studiju koja potkrepljuje to što tvrdiš (članci koje sam ja koristio su dio istraživanja Jakob Nielsen grupe http://www.nngroup.com/topic/eyetracking/ ). Naravno da postoje izuzeci od uobičajenog načina pregledavanja stranice u zavisnosti od rasporeda grafičkih elemenata ali ako se može generalizirati onda ljudski pogled ide kako je prikazano na prve dvije slike. Ako misliš da je logo kao jedan od najbitnijih elemenata stranice bolje postaviti na desnu stranu ili pri dnu stranice, nemam ništa protiv..
 
Ljudi pregledavaju stranice u F-layoutu, zato je i većina stranica na taj način rađena kako bi korisnicima olakšala skeniranje.

Postoji naravno i stranice koje vizualno navode korisnike gdje gledati, kao u npr. Z-layoutu.

Od "zasebnih elemenata" prvo što privlači pažnju je naslov, pa tek onda slika, pa tek onda tekst.

Svaki UX/UI dizajner to zna.

Ima ogroman broj članaka i istraživanja od UX profesionalaca, tako da slobodno iskoristi google.

Evo konkretno u zadnjem paragrafu si napisao da za zaokupljanje treba koristiti velike strelice, što je netočno jer se to radi sa CTA buttonima unutar kojih može, a i nemora biti strelica ili ikonica, a tekst kojim se dodatno podržava (click here) ti je objašnjen zašto se ne treba koristiti uopće na sljedećem linku.

uxdesign.smashingmagazine.com/2012/06/20/links-should-never-say-click-here/

EDIT: Logo se stavlja na desnu stranu, a navigacija na lijevu iz samo jednog jedinog razloga koji je jako jako rijedak. U svim ostalim slučajevima je logo lijevo ili eventualno u sredini.
 
Hvala na korisnim informacijama i što si obrazložio svoj prvotni stav.
Malo tko je ovdje baš profesionalni UX/UI dizajner iako se svi manje više time usput bavimo i pratimo blogove, tako da je svaki insight dobrodošao.

Šta se tiče famoznog pregledavanja stranice, ti si spomenuo F odnosno Z-layout, ja sam to pokušao objasniti pomoću dvije slike, ali mislim da poanta bila jasna i ne znam šta je tu bilo toliko različito od F-layouta.

Vezano za naslov, potpuno si u pravu, iako sam ja više aludirao na tekst "u globalu" navodeći važnost odabira odgovarajućeg fonta, veličine slova i boje pozadine. Ali u pravu si, naslov je pojedinačno najuočljiviji, ne samo zbog vizualnog već i "link bait" efekta.

Slažem se za "click here", kod CTA buttona bolje je staviti naslov koji odgovara akciji koja slijedi nakon klikanja.
U svakom slučaju treba eksperimentirati sa više modela i ostaviti onaj koji daje najbolje rezultate.

[PS. logo na desnoj strani je bila ironija naravno..]
 
Da znam što si pokušao, ali ta slika je kriva. Tvoja lijeva slika pretpostavljam da je konkretna za tu stranicu ispod nje, a za desnu sliku, misliš na 9 grid ili 3x3 grid, koja je opet drugačija i točnija.

Content is king. Ali jedna stvar je content, a druga stvar je privlačenje korisnika da pročita taj content. Naravno content mora u svoj osnovi biti čist i lako čitljiv, da ne napreže oči korisnika i da je usklađen. (Npr. Najgore je čitati crveni tekst na plavoj pozadini.)

Ovo za eksperimentiranje pretpostavljam da aludiraš na A/B testing koji pokazuje konkretne rezultate na konkretnoj stranici što je bolje za njene korisnike.

Nisam bio ironičan, jedan jedini razlog zašto bi navigacija došla prije logo-a je ako je sadržaj važniji od onoga tko je napisao taj sadržaj, a to je skoro pa nikad.

Ne kažem za sebe da sam profesionalni ux/ui dizajner na globalnoj razini, ali u usporedbi sa tvrtkama i pojedincima na ovim prostorima koji se razbacuju s tom riječi (ux), a nemaju blage veze što ona znači, jesam.
 
Da potvrdim ono što je maydayy napisao.

Malo sam čaprkao po netu i našao zanimljiv članak.

vanseodesign.com/web-design/3-design-layouts/
 
Back
Na vrh