Hvernig Eye Scanning hefur áhrif á sjónræna stigveldi í UX Design
Þótt árþúsundir listanna, frá grískum vösum til ítalska kapellanna, hafi mótað skilning okkar á því hvað fegurðin er, þá er tiltölulega nýleg tækni sem er á bak við auga mælingar að bæta nýjum krafti við hvernig við skynjum sjónina í heiminum. Fleiri til marks, þessi spennandi nýja vísindi hjálpa okkur að skilja betur - og betra hönnun - vefsíður sem eru bæði áhrifaríkar og fagurfræðilegar.
Vefhönnun (sem myndlist) fylgir mörgum af sömu reglum og hefðbundnum myndlistum. Í þessari grein munum við í stuttu máli gera grein fyrir mikilvægi sjónrænum skipulaga og útskýra hvernig niðurstöður augnspjaldsins geta bætt útlit vefviðmóta.
Búa til sjónrænt skipulag
Það er ekki á óvart að hvernig útlit vefsins hefur áhrif á velgengni sína, en það er mikilvægt að ákvarða ástæður þess. Í blaðinu hans Samskipti við Visual Hierarchy , Luke Wroblewski, höfundur og yfirmaður vöruþróunar á Yahoo!, Útskýrir að sjónræna kynning á vefviðmótum sé nauðsynlegt fyrir:
Leiðbeiningar
Vel gerður tengi getur leiðbeint notendum frá einum aðgerð til annars án þess að vera tilfinningalegur. Óháð því sem þú hugsar um viðskiptahætti, þá er það enginn vafi á því Uber er dæmi um ótrúlega slétt, enn uppbyggð vefsvæði. Verðmæti uppástunga eru efst í skruninu, eftir skemmtilegri rennistiku til að fræðast um mismunandi valkosti bíla og ljúka við rökrétt næsta skref að finna ríður í borginni þinni.
Samskipti
Með því að passa á annan hátt ólíkt upplýsingum, getur notendahandbókin myndað tengla í huga notandans, samskipti skilaboð án þess að segja eitthvað. Horfðu á vinsæla hönnunarsíðuna Abduzeedo : Víðtækar flokkar eru efst, lögun efnis í miðjunni og nákvæmar flokkar í fótsporinu.
Búa til tilfinningaleg áhrif
Ekki gera mistök að hugsa vefsvæðið þitt er einfaldlega vélknúið tól. Vefsíður hafa tilhneigingu til að gera tilfinningaleg tengsl, og ef þinn gerist ekki, vilji samkeppnisaðila þinnar. Reyndar geta fólk í raun verið líklegri til að fyrirgefa galla tengilsins ef þú ert jákvæð tilfinningaleg viðbrögð . MailChimp er fullkomið dæmi um síðuna með tengi sem er nothæft, ljúffengt og í raun gaman að nota.
Fyrirsjáanlegt augað manna
Stundum virðist augun þín hafa huga þeirra eigin. Ár þróunar hafa gefið okkur eðlishvötin til að komast að hlutum og hreyfingum sem við teljum mikilvægt, hvort sem er einhver kynþokkafullur gönguleið yfir götuna, eða kjánaleg teiknimyndabjörn sem auglýsir hunang. Þó að hlutfallslegur þyngd sem við leggjum á það sem skiptir máli getur verið mismunandi frá mann til manneskju, þá er stöðugt það kerfi sem þau hegða sér að. Í stórum stíl fylgja meirihluti fólks með sömu þróun þegar þeir skoða vefsíðu.
Af þessum þróun eru tveir sem við munum ræða í smáatriðum. Í grein um sjónræn reglur , Alex Bigman, Hönnuður Writer fyrir 99Designs, sýnir hvernig, fyrir menningu sem lesa til vinstri til hægri, eru þessar tvær mynstur algengustu - og gagnlegur - þegar þeir eru að hanna skipulag vefsíðu.
Fyrst, F-Pattern, er notað aðallega til texta (en hægt er að laga það til annarra nota). Annað, Z-mynstur, er hægt að nota fyrir hvaða sjónræna uppsetningu. Við munum útskýra mismunandi kostir og gallar fyrir hvert fyrir neðan.
F-mynstur
F-Mynsturinn er sjónarhugmyndin sem kemur fram á síðum sem eru mjög þungar með texta, venjulega blogg, fréttatilkynningar, greinar o.fl.
Þegar blasa af orðum stendur munu flestir lesendur fyrst skanna lóðréttu línu niður vinstra megin á textanum, venjulega að leita að leitarorðum eða áhugaverðum stöðum í fyrstu setningum málsins. Að lokum finnur lesandinn eitthvað sem hann vill og byrjar að lesa venjulega, mynda lárétta línur. Niðurstaðan er eitthvað sem lítur út eins og stafina F eða E.
Jakob Nielson í Nielson Norman Group gerði lesrannsókn byggð á 232 notendum sem skanna þúsundir vefsíðna. Frá rannsóknum sínum tók hann upp það sem hann telur vera hagnýtar afleiðingar af F-Pattern:
- Notendur munu sjaldan lesa hvert orð textans þíns.
- Fyrstu tveir málsgreinar eru mikilvægustu og ætti að innihalda krókinn þinn.
- Byrja málsgreinar, undirsagnir og punktaspjöld með tæla leitarorð.
Eins og alltaf er efri vinstri horni mikilvægast, þar sem allir vinstri til hægri lesa ræktunin byrja út. Notandinn mun venjulega lesa lárétt yfir hausinn, þannig að hér er góður staður fyrir siglingar og / eða aðgerð. Þá skannar notandinn lóðrétt niður til vinstri, þar til þau koma yfir efni sem vekur áhuga þeirra. Að lokum lýkur notandi hægra megin á síðunni, frábær staður með aðgerð eða auglýsingu. Bara ekki láta skenkur yfirbuga innihaldið.
En F-Mynsturinn er ekki sniðmát - það er í raun ekki nákvæm æfing, en meira af lausu leiðarvísinum samanstendur af þróun meirihluta notenda. Hafðu þetta í huga vegna þess að F-Pattern missir skilvirkni þess eftir efstu röðum F.
Kickstarter notar kortagerð til að sýna eiginleika verkefna og ekki verða sjónrænt leiðinlegt eftir fyrstu 500 punkta.
Á hinn bóginn, iZettle tekur hefðbundna nálgun á F-Pattern á heimasíðu þeirra. Hins vegar tekst þau að koma í veg fyrir sniðmát útlit með því að leggja fram aðalritið ("Grow Your Business with iZettle") og kalla til aðgerða á stórum bakgrunnsmynd. Við munum líta svo á þetta lágmarks lágmark til að laga þetta lestarmynstur í viðmótið.
Z-mynstur
Að auki er Z-Mynstur einfaldasta og alhliða mynsturið, sem almennt er notað á hvaða vefsíðu sem er byggð á texta. Lesandinn skannar fyrst lárétt yfir toppinn, píla niður og aftur til vinstri og skannar síðan lárétt aftur yfir botninn.
Það er mikilvægt að skilja fjölhæfur Z-mynstur , þar sem það fjallar um kröfur um algerlega vefsíðu, svo sem stigveldi, vörumerkja og símtöl til aðgerða. Fegurð hennar er í einfaldleika sínum og hugsjón skipulag fyrir síður sem beinast að aðgerðinni. Hins vegar, fyrir flóknara eða of mikið efni, getur Z-mynsturin verið of einföld.
Hugsaðu að Z-mynstur er rétt fyrir síðuna þína? Hér eru nokkrar bestu venjur til að hámarka ávinninginn:
- Bakgrunnur - Haltu bakgrunnnum þar sem það tilheyrir: í bakgrunni. Þú vilt ekki afvegaleiða lesandann þinn.
- Punktur 1 - Sem upphafið er þetta yfirleitt þar sem þú vilt setja lógóið þitt.
- Punktur # 2 - Þó að aðalviðtalið ætti að koma seinna, er hér góð staður fyrir framhaldsskoðun, greinarmerki með lárétta flipa. (A ágætur grafískur eða myndflipari mun hjálpa að skilja efst og neðst á síðunni og hvetja lesandann til að vera á fyrirsjáanlegri slóð Z-Pattern.)
- Punktur # 3 - Þetta er fallegt staður til að vekja athygli á öðrum tenglum, eða til að leiða sjónar notandans til enda markmiðsins: Punktur # 4.
- Punktur # 4 - Sem "ljúka við lína" er þetta fullkominn staður fyrir aðalhringinn þinn.
Það fyrsta sem þú vilt gera er að forgangsraða þætti á síðunni þinni fyrir sjálfan þig svo þú þekkir mest og minnstu mikilvægustu. Þaðan er það bara einfalt mál að úthluta þeim til viðeigandi "heita staða".
Þar að auki getur Z-Mynsturinn verið endurtekinn og framlengdur um alla síðu. Kíktu bara á hvernig Evernote zig-zags niður í gegnum símtöl til aðgerða og sölustaði.
DropBox tekur sjónrænt einfaldari nálgun við þetta zig-zag mynstur með því að gera burt með hvaða bakgrunnsmyndum. Þess í stað er virkni byggð á útfærslunni þar sem "Að fá frekari upplýsingar" kallar til aðgerða hjálpar til við að tengja hverja hluta vindmynstri þegar auganu færir sig niður á síðunni. Þetta hjálpar einnig upplýstum lesendum að smella á næstu viðeigandi síðu án þess að þurfa að lesa öll afritið fyrst.
Sýn í framsýni
Great tengi hönnun ætti að vera eins og ósýnilega hönd sem leiðbeinir lesendum eftir á hraðanum af hugsun. Mikilvægt frádráttur frá þróun F-Pattern og Z-Pattern er að þú getur sett mikilvægasta efnið þitt þar sem lesandinn mun "hrasa" það náttúrulega í stað þess að reyna að þvinga þá til að líta á þær.
Lítilleikur er mikill kostur fyrir hvaða síðuuppsetningu, og þessi mynstur geta skipt máli milli þess að benda eitthvað á lesandanum þínum og skjóta því niður í hálsinn.