Vplyv ľudského správania na vaše dizajnové rozhodnutia - Jonas Arleth

Aby sme navrhli dobré rozloženie webu, musíme pochopiť, ako sa ľudia správajú. Vďaka týmto znalostiam je návrh čo najpohodlnejšie naplánovaný, čo robí dizajn efektívnym.
Čo to však ovplyvňuje? Ako ľudia chápu webovú stránku? Existujú známe spôsoby správania, ktoré si môžeme osvojiť zo skutočného života?

V tomto článku vám poviem:

Ako prinútiť ľudí porozumieť rozloženiu, keď ho nikdy predtým nepoužili
Ktoré farby konkrétne priťahujú viac pozornosti a prečo ich tak vnímame
Aký široký by mal byť blok textu a prečo
Ktoré animácie nám pomáhajú na webových stránkach
Ako môžete zabezpečiť, aby boli dôležité informácie určite viditeľné
A ako môžete zvýšiť pravdepodobnosť, že na tlačidlo určite kliknete

Vypočujte si tento príspevok ako podcast!

To, aký úspešný je produkt alebo služba, závisí od toho, ako dobre rozumiete svojej cieľovej skupine

Kvôli dosiahnutiu vysokej použiteľnosti musí rozloženie potešiť predovšetkým používateľa, nie vás. Musí sa dať ľahko používať a návštevník sa musí dostať z bodu A do bodu B bez prílišného premýšľania.

Keď vieme, kto je používateľ a čo chce, je pre nás tiež jednoduchšie vyvolať emócie. Aby ste to dosiahli, musíte pochopiť, ako ľudia cítia určité veci a prečo to robia tak, ako to robia. V najlepšom prípade je rozloženie navrhnuté tak intuitívne, že používateľ môže riešiť úlohy bez prerušenia. Úlohou môže byť navigácia, ale aj objednávkový proces v online obchode.

Len čo používateľ začne musieť dlhšie premýšľať, začne už tiež neriešiť úlohy intuitívne. Potom ho napnú. Čím viac sa ich stretne, tým frustrujúcejší bude ich vzťah k produktu, a teda k webovej stránke.

Ako dizajnéri je na nás, aby sme návštevníkom predstavili úlohy alebo ich vedome usmernili jedným smerom. Aby ste to dosiahli, musíte vedieť, ako sa používatelia správajú, a zodpovedajúcim spôsobom pracovať so známymi vecami. Masy vedia, ako funguje web alebo aplikácia. Napriek tomu stále existuje veľké množstvo ľudí, ktorí vôbec netušia, ako vyzerá používateľské rozhranie alebo ako ho používať. Poznanie cieľovej skupiny je preto nevyhnutné!

Je veľmi ťažké prijímať rozhodnutia o dizajne, ktoré sa netýkajú iba masy, ale ktoré sú vnímané individuálne pre každého používateľa.

Ako však dosiahnuť, aby používateľ porozumel stránke, hoci v tomto smere ešte nikdy nemal skúsenosti?

Grafické používateľské rozhranie obsluhujú rôzni ľudia. Povedzme, že ide o online obchod. Mnohí vedia, ako nakupovať na internete, iní zatiaľ nie. Ako však prinútiť každého, aby stránke rýchlo a ľahko porozumel?

Musíte sa im pokúsiť priblížiť čo najbližší zážitok, aký poznajú zo svojho života. Aj keď nevedia, ako nakupovať produkty online, majú predstavu o tom, ako to funguje v skutočnom živote. Tieto znalosti musíte využiť. Preto je dobré preniesť na web skúsenosť zo skutočného života kupujúceho.
Napríklad sme zvyknutí umiestniť nákup do nákupného košíka. Preto by sme mali niečo podobné použiť v online obchode. Pre používateľa ide o známe spojenie, ktorému okamžite rozumie.

Tu je niekoľko príkladov toho, ako môžete pomocou dizajnu ovplyvňovať prvky takým spôsobom, aby im používateľ rozumel požadovaným spôsobom.

Používajte správne farby

Farby pomáhajú návštevníkovi zorientovať sa na webových stránkach. Najmä keď chceme povzbudiť akciu, sú ideálne na prilákanie pozornosti. Môžeme ich použiť na spustenie akcií a vedome nasmerovať svoj pohľad jedným smerom.

Nasledujúci príklad ukazuje, ako vedome možno vyzvať diváka, aby si vybral tlačidlo.

Ktoré tlačidlo vás láka? Príklad toho, ako môžeme používateľov vedome viesť k rozhodovaniu.

Iba pomocou farebnej oblasti môžeme jedno z dvoch tlačidiel intenzívne dostať do popredia. Bezfarebné tlačidlo so sivým rámom pôsobí nenápadne a sekundárne. Tento variant môžeme určite použiť na uľahčenie rozhodovania používateľov.

Väčšinou chceme, aby boli klikacie tlačidlá objavené a funkčné. Iba tak môžeme používateľa viesť k ďalšiemu kroku alebo spustiť funkciu. Aby bol gombík vôbec vnímaný, musí priťahovať pozornosť a líšiť sa od ostatných objektov. Pomáha zvyšovať kontrast k okolitým prvkom. V nasledujúcom prípade to urobí červená farba.

Červená farba priťahuje pozornosť, je pre nás varovnou farbou, a preto je ťažké ju ignorovať. Pomocou toho môžeme vedome postaviť akciu do popredia:

Vedome zamerajte orientáciu používateľa na tlačidlo, ako je to v tomto príklade s červenou farbou. Zaujme a je ťažké ju ignorovať ako varovnú farbu.

Zoberme si princíp semaforu, kde stojíme, keď sme červení a môžeme kráčať, keď sú zelení. Mnoho ľudí už tento princíp internalizovalo. V tomto prípade vieme, že pokiaľ ide o zelenú farbu, ľudia podnikajú ďalší krok. Tento pocit môžeme preniesť aj na gombík, kde chceme, aby sa akcia vykonala pozitívne.

Ako na semafore alebo na telefonickom hovore: Zelená signalizuje a sprevádza nás pri ďalšom kroku.

Podobné správanie vykazuje aj používateľské rozhranie telefónneho hovoru. Zaveste červenou farbou a na prijatie sa používa zelená. Ale táto pozornosť sa týka všetkých?

Cieľová skupina je rozhodujúca!

Aj keď dva vyššie uvedené príklady znejú pre nás vierohodne, nie sú všeobecne použiteľné. V Nemecku by mohla fungovať funkcia farby semaforu, ale existuje veľa ľudí z iných kultúr, ktorí farby vnímajú inak. V Číne napr. B. webové stránky sú úplne farebné. Ak by sme tam mali obsluhovať online obchod, malo by to pravdepodobne úplne negatívny vplyv na naše správanie pri surfovaní.

Aby bolo možné vedome riadiť správanie návštevníkov, musí sa rozloženie otestovať na cieľovej skupine. Iba na základe analýz môžete skutočne zistiť, či konkrétne rozhodnutie o farbe viedlo k väčšiemu úspechu.

Aktualizácia:

Je zaujímavé, že krátko po napísaní tohto článku som čítal príspevok, v ktorom HubSpot v používateľskom teste preskúmal presne tieto dve farby. Išlo o to, či červené alebo zelené tlačidlo spôsobuje vyšší konverzný pomer. Celé rozloženie bolo rovnaké, odlišné je iba jedno tlačidlo. Červená prekvapivo získala o 21% viac kliknutí. Išlo skôr o akési tlačidlo „kúp mi“, ktoré vďaka svojej červenej farbe jednoducho pútalo viac pozornosti.

Pre farby všeobecne platí toto

Keď je zvýšený kontrast s okolitými prvkami, potom je venovaná väčšia pozornosť a tým viac akcie. Nielen u ľudí, ktorí dokážu vnímať farby, ale aj u tých, ktorí sú farboslepí.

ZAREGISTRUJTE SA DO MÉHO NOVINY

Nové články, epizódy podcastov a hodnotné zdroje týkajúce sa dizajnu priamo do vašej doručenej pošty!

Okrem mojich aktualizácií blogu budete raz týždenne dostávať zaujímavé odkazy a obsah pre webových dizajnérov, o ktoré sa budem deliť iba v tomto vestníku.!

Zvyšujte šance a ponúknite dve cesty k cieľu

Máte za úlohu prinútiť návštevníka vykonať konkrétnu akciu? Potom zdvojnásobte svoje šance!

Každý sa na webovú stránku pozerá inak, a preto si prvky, ktoré sú pre vás umiestnené na popredných miestach, môžu všimnúť až na druhý pohľad. Uistite sa, že sa určité výzvy zobrazujú viackrát, a zvyšujete tak pravdepodobnosť požadovaného efektu.

Čitateľnosť textov

Existuje ľudské správanie, ktoré sa učíme od útleho veku, a ktoré je preto vtlačené do našich životov. Keď sme začali spájať písmená a čítať slová ako vety, robili sme to od začiatku zľava doprava. Zmena tohto správania na webe by bola fatálna. Nikto nevedel správne prečítať odseky a človek by nehovoril o príjemnom zážitku používateľa. Tento argument sa týka aspoň väčšiny regiónov (niektoré sa čítajú aj sprava doľava).

Rolu však zohráva nielen smer čítania. Pre nás je text ľahšie čitateľný, aj keď šírka odsekov nie je príliš široká. Týmto spôsobom pomáhame oku nekĺzať pri zmene riadkov, čo zaisťuje príjemný priebeh čítania.

Táto metóda je zreteľne viditeľná v mäkkej väzbe. Aby nebolo vedľa seba príliš veľa slov, každá stránka má určitú šírku a je oddelená golierom. Tak vzniknú dve oblasti, ktoré sú rovnako široké.

Ak použijeme tento princíp z nášho skutočného života na webovú stránku, dalo by sa povedať, že textové bloky by nemali byť širšie ako 700px - 800px. Čím širšie je textové pole a čím menšie písmo, tým ťažšie je pre nás nájsť pohodlný postup čítania. Ak táto šírka nie je dostatočná, môžete text umiestniť vedľa seba v menších textových blokoch.

Príklad slabého toku čítania: položky Wikipédie na väčších obrazovkách

Rozhodne negatívnym príkladom toho je Wikipedia. Ak sa pozriete na článok tu na väčšej obrazovke, je takmer nemožné prejsť na ďalší riadok. Každá zmena riadku sa stáva námahou.

Správne umiestnenie dôležitých informácií

Ak chceme, aby boli viditeľné dôležité informácie, umiestnenie hrá rozhodujúcu úlohu. Ukazovať posledné dôležité veci nemá zmysel. Vieme, že sa na webovú stránku pozerá zhora nadol. Len keď niekto chce viac informácií, ponorí sa hlbšie na stránku.

Preto sú informácie v hornej časti dôležitejšie ako informácie uvedené nižšie, pretože sa zobrazia najskôr po načítaní stránky. Túto metódu nájdeme aj v ďalších oblastiach:

Tabuľka grafu zobrazuje najpopulárnejšieho umelca ako prvého, nie uprostred alebo posledného
Najrelevantnejšie výsledky vyhľadávania sú vždy na prvom mieste
Logo alebo názov webovej stránky sa zvyčajne umiestňuje do ľavého horného rohu

Pre niekoho sa to nemusí zdať ako nová znalosť, mali by ste si však stále uvedomiť, že ak máte informácie, ktoré by návštevník mal určite vidieť, mali by ste ich umiestniť aj vyššie. Iba tak ho presvedčíte. Podľa toho, aký výrez má zariadenie, sa toto viditeľné pole môže samozrejme líšiť!

Prilákajte pozornosť pohybom

Animácie oživujú užívateľské rozhranie. Všetko, čo sa hýbe, automaticky priťahuje našu pozornosť. Ale pozor! Rýchlo sa toho stáva priveľa!

Keď sa animácie použijú šikovne, urobia rozloženie živé a zrozumiteľné. Potom môžete konkrétne ukázať vzťahy a určiť hierarchie.

Efektívne využívať dizajn

Vytvorenie zrozumiteľného a príjemného rozloženia nie je ľahké. Vyžaduje si to veľa skúseností, výskumu a vedomostí.

Porozumenie a uplatnenie základných vecí je nevyhnutné, ak chcete efektívne využiť dizajn. Príklady uvedené vyššie vám v tom pomôžu. Ak sa o ňom chcete dozvedieť viac, môžete sa prihlásiť na odber môjho bulletinu tu. Potom vás upozorním na nový príspevok.

Zdieľať príspevok:

Získajte viac informácií o webovom a UI/UX dizajne a práci na voľnej nohe

Môj týždenný bulletin je najlepší spôsob, ako získať prístup k najnovším blogovým príspevkom, epizódam podcastov a hodnotným dizajnovým zdrojom.