Vizuálna hierarchia v UX: ako nasmerovať pozornosť používateľa

Najprv sa pozrieme na obrázok, a až potom čítame text (vďaka, čiapka), takže vizuálne riešenie stránky sa stáva rozhodujúcim pre privedenie užívateľa k cieľu: túto cestu môže zjednodušiť a prekážať. Poďme zistiť, ako viesť návštevníka stránky k správnemu rozhodnutiu organizovaním priestoru stránky - na desktopoch aj na mobilných zariadeniach.

Nositeľ Nobelovej ceny Daniel Kahneman vo svojej knihe „Pomyslite si pomaly, rýchlo rozhodnite“ opisuje dva systémy myslenia, v rámci ktorých náš mozog rozhoduje. Podmienený "Systém 1" funguje na obrazoch, je zodpovedný za rýchle rozhodovanie a dobre reaguje na vizuálne informácie. "Systém 2" (ďalej len mená bez úvodzoviek) sa zaoberá závažnejšími činnosťami a je zodpovedný za pochopenie významu textu alebo výpočtu v mysli.

Vo väčšine prípadov systém 2 pracuje v režime „zníženej spotreby energie“ a nerobí vlastné rozhodnutia veľmi aktívne. Najčastejšie sú pre ne pripravené závery pre systém 1, ktorý je chamtivý pre "vizualizmus".

Úlohou projektanta UX je posunúť systém 1 do správneho riešenia.

Organizácia vizuálnych webových stránok

Nemáte veľa času na to, aby ste sa zaujímali o obsah používateľa. Keď používateľ navštívi akúkoľvek webovú stránku, podvedome hľadá odpoveď na tri otázky:

  • Čo sa tu deje?
  • Ako je to pre mňa užitočné?
  • Prečo ju potrebujem?

Čítanie textu (najmä ak je veľa) je časovo náročný proces pre mozog, ktorý vyžaduje zahrnutie systému 2. Väčšina používateľov bude príliš leniví na to, aby ho zapli, systém 1 dostane vykonanú prácu. Okrem toho je žiaduce, aby sa to robilo na najviac predvídateľných miestach. Keď sa nájde centrum pozornosti, systém 2 sa pripojí a začne podrobnejšie skúmať obsah stránky.

Dobrá vizuálna organizácia rieši tieto problémy:

  • informovanie, Vizuálna štruktúra neviditeľnej ruky nasmeruje pozornosť užívateľa z jednej akcie na druhú bez toho, aby spôsobovala ťažkosti na ceste.
  • Emocionálny vplyv, Vizuálny obraz je uložený v pamäti oveľa silnejšie ako obsah textu. Ostatné veci sú rovnaké, užívateľ si vyberie z niekoľkých možností, ktoré vyzerajú esteticky.
  • Prezentácia vzťahov v obsahu, Ak na stránke správne zoskupíte dôležité prvky a kategórie - teda zjednodušíte životnosť systému 1, užívateľ bude ľahšie nájsť podsekciu, ktorú potrebuje.

Skenovacie vzory: čo a kde užívateľ podvedome očakáva

V prvých sekundách na stránke bude užívateľ vyhľadávať užitočný obsah na stránke, "skenovať" viditeľnú oblasť stránky pri hľadaní potrebných informácií. Začína od ľavého horného rohu (ak je zvyknutý čítať zľava doprava), pohybuje sa doprava a očakáva, že tam dostane ďalšie informácie. Potom sa pozrie na ľavý dolný sektor a rýchlo skočí do pravého dolného rohu.

Tento skript alebo vzor má názov: Gutenbergov diagram. Najčastejšie sa nachádza na vstupných stránkach a na registračných stránkach a je v súlade s tým, že sú vytvorené úvodné stránky.

Okrem toho existuje niekoľko ďalších spoločných vzorov v UX.

Vzory na skenovanie pracovnej plochy

F-vzor. Bez toho, aby ste si to uvedomili, stretávate sa so vzorom F denne. Akonáhle ho spoznáte bližšie, nebudete môcť prestať ho pozorovať na každom druhom spravodajskom portáli. Presvedčte sa sami:

Z-vzor. Pri skenovaní stránky, na ktorú sa chcete pozerať, nie je nič, na čo by ste sa mali spoliehať, vzor Z je zapnutý: pohľad na cikcak cez stránku v širokom cikcakaní, zachytávajúci reflektory:

Mobilné skenovacie vzory

Obrazovka mobilného zariadenia môže zobrazovať omnoho menej obsahu ako obrazovka notebooku alebo monitor a väčšinu času ho používatelia udržujú vo vzpriamenej polohe. Kvôli tomu skenujeme obsah na mobilných telefónoch inak.

Obsah na mobilných zariadeniach sa zvyčajne nachádza dvoma spôsobmi: mriežkou a zoznamom (Zobrazenie mriežky a Zoznam).

netto (pozri obrázok) sa líši od zoznamu tým, že na obrazovku je súčasne umiestnených viac jednotiek obsahu, ale bude potrebné prilákať pozornosť používateľa len kontrastnými obrázkami.

zoznam - jedná sa o bloky obsahu usporiadané vertikálne jeden za druhým, pričom jeden blok zaberá celú šírku obrazovky. Skenovanie zoznamu je podobné F-vzoru, sústredenie pozornosti (a rozhodovanie o dôležitosti bloku) sa vyskytuje na hlavičkách blokov a obrazy, ak sú prítomné, sú vo forme miniatúr náhľadu.

Pozornosť používateľa je rovnomerne rozložená na všetky obrázky a skenovanie je v tvare S (ak medzi obrázkami nie sú žiadne výrazné obrázky):

Umiestnenie akcentov: kontrast, farba, hĺbka

Distribúcia obsahu vo vesmíre je dôležitou etapou pri spracovaní vizuálnej hierarchie, ale nie poslednej. Po umiestnení všetkých prvkov na ich miesta do niektorých blokov budú duplicitné prvky a takmer vždy jeden z nich bude dôležitejší ako ostatné. Aby bolo možné užívateľovi úspešne oznámiť, kde sa oplatí venovať pozornosť, mali by ste sa riadiť princípom činnosti systému 1.

Jej vizuálne vnímanie je intuitívne a je založené na rýchlom vytváraní obrazov. Podvedomie sa snaží porovnávať všetky vizuálne informácie s objektmi v reálnom živote, a to dať mu "tvar" a "hmotnosť".

kontrastovať

Ďalšie dôležité veci by sa mali zdôrazniť pridaním kontrastovať - čím vyšší je, tým dôležitejší je pre používateľa prvok. Ak by napríklad nahradili sovy tlačidlami, ľudia by častejšie stláčali tmavé tlačidlo.

hĺbka

Binokulárne videnie nám umožňuje určiť vzdialenosť a sústrediť sa striedavo na objekty na rôznych vzdialenostiach, ale najdôležitejšou vecou je to, čo sa deje blízko.

Na plochej obrazovke, na reprodukciu efektu hĺbky a „vytrhávania“ niečoho sa často používa tieň alebo efekt rozostrenia. Aby sa však dosiahol primárny účinok hĺbky, stačí (hoci banálne to môže znieť), aby boli dôležitejšie prvky väčšie a ostatné menšie.

farba

farba obklopuje nás všade a prináša ďalšie informačné zaťaženie. Nahromadená skúsenosť s "farebnými informáciami" je prenesená užívateľom na stránky webovej stránky a do otvoreného okna aplikácie. Aby sme ho posunuli k požadovaným činom a odtlačili ho od nežiaducich, využite skutočnosť, že sme od detstva pevne v hlave: svetelné farby.

Ale červená farba - „zlá“ cena - pomáha upozorniť na najlepšiu cenu:

Mimochodom, nedovoľte, aby vás pojem „farebná slepota“ chytil do nevedomosti: miznúca časť populácie má skutočne „čiernobiele“ videnie, zatiaľ čo rôzne typy farebnej slepoty (keď oči nerozlišujú žiadnu základnú farbu, ktorá ovplyvňuje asi 5% obyvateľstva je vnímavých na vnímanie celého spektra, a ak je vaše publikum mužské - ešte viac: 8%.

Všetci títo ľudia tiež používajú internet a nemali by sa zabúdať pri premýšľaní o palete farieb. Avšak problém prístupnosti (slovo, ku ktorému ešte nie je zavedený preklad v ruštine, ale ktorý možno opísať ako „ľahkosť vizuálneho vnímania“, „čitateľnosť“) sám o sebe si zaslúži viac ako jeden článok.

Vizuálne vzory: zarovnanie a zoskupenie

Od poznania, ako izolovať a upozorniť na prvky vzoru, poďme ďalej k tomu, čo môžeme robiť priamo so vzorom. Koniec koncov, sám je potenciálnym nosičom informácií:

Náš mozog (konkrétne Systém 1, ktorý v tomto článku v podstate označujeme ako „mozog“) miluje a dokáže ho zovšeobecniť. Akonáhle sa niečo okolo nás začne opakovať, všimneme si to a časom venujeme menej a menej pozornosti opakujúcim sa prvkom. Upozornenie sa zapne len vtedy, keď je poškodený existujúci vzor.

Keď sa pozrieme na vyššie uvedený obrázok, päť klokanov nevidíme jednotlivo: najprv uvidíme skupiny štyroch klokanov. Potom - piaty klokan, ktorý je oproti. Predstavivosť okamžite kreslí obraz opozície.

Ale menu Bucking. Zoskupovanie, kontrast a farba nám dávajú presný vzor správania: zadajte údaje do troch bielych polí a stlačte veľké modré tlačidlo. A ak budete nasledovať správanie stránky, uvidíte, že oblasť vyhľadávania pre možnosti má vždy rovnakú farbu. Toto je priamy vplyv na systém 1, ktorý vyhľadá známe farby na ľubovoľnej stránke.

Pozrime sa na inú skupinu:

Po tom, čo ste videli obrázok, ste si bez toho, aby ste si to uvedomili, vytvorili veľa spojení v skupine šiestich labutí:

  • plávajú v dvoch radoch;
  • pohyb v jednom smere;
  • dve labute na vrchu a dve na dne, zrejme pripojené k sebe;
  • Zdá sa, že labuť na pravej strane pláva rýchlejšie ako jeho kamaráti;
  • ďaleko vľavo - naopak zaostáva.

Všetky tieto myšlienky mi prechádzali hlavou. zarovnanie, Snažili sme sa logicky prepojiť úzke prvky a nájsť na diaľku to, čo odlišuje prvky od ostatných.

A čím zložitejšie sú informácie, ktoré je potrebné zefektívniť, tým dôležitejšia je úloha zoskupení. Pozrite sa, aké schémy pouţívajú na svojich hotelových kartách:

Pozri: 1 - toto sú všeobecné informácie o hoteli, 2 - hodnotenie používateľa, 3 - údaje o službe, 4 - informácie o izbách a 5 - pridelené na ceny izieb podľa veľkosti a umiestnenia (nezabudnite na klokana). Listovanie cez dlhý zoznam, budete "chytiť" túto logiku nevedome, alebo skôr, bude váš systém 1 chytiť.A to bude hľadať potrebné informácie na obvyklých miestach.

Teraz viete o rôznych vzoroch. Čo bude ďalej?

Potom by ste sa mali obmedziť a nepoužívať všetky triky naraz.

Zoskupte prvky, ktoré by mali byť „čítané“, umiestnite potrebné akcenty. Napríklad, jednoducho nedávajte dôležité informácie do ľavého dolného rohu - toto jednoduché riešenie môže zvýšiť konverziu stránky. Zvýraznite farbu, štýl, veľkosť, len to, čo je naozaj dôležité. Nepreťažujte stránku akcentmi. Pozrite sa na mobilnú verziu vašej stránky z hľadiska vzorov - a použite kontrastné prvky na rozbitie monotónnosti streamu.

Ako môžete vidieť, vzory sú vhodné nielen na usporiadanie sovy a klokany podľa ich poradia: mali by sa používať tam, kde chcete jemne posúvať používateľa na správnu akciu. Je však dôležité zachovať rovnováhu. Akonáhle si užívateľ uvedomí, že stlačenie tlačidla nie je jeho rozhodnutím, ale výsledkom vašej manipulácie, všetka mágia vizuálnej hierarchie sa rozptýli a vozík sa zmení na tekvicu.

Materiál bol pripravený Denisom Springom,
Autor služby AskUsers
.

Zanechajte Svoj Komentár