Tým Logomachine hovoří o principu, který vám pomůže odhalit a opravit běžné chyby v designu webu a reklamy, i když nejste designér.
Podobné obrázky kolují po internetu již mnoho let:
Většina lidí skutečně bude přečtěte si tento text v tomto pořadí. Je možné použít toto kouzlo mimo Bradavice a ovládnout pozornost klienta, který přišel na váš web nebo viděl reklamu, katalog, obal?
Vzory a místo pozornosti
Nejprve , pojďme se podívat na to, jak funguje ta horní. obrázek: je zde zahrnut takzvaný F-vzor , což bylo odvozeno studiem pohybu očí. Ukazuje, že většina lidí prohlíží stránky podle vzoru typu F:
Abych to řekl na rovinu, všichni opravdu chceme začít číst z levého horního rohu, pokud nás něco nezachytí svou velikostí, barvou, tvarem, polohou nebo animací. To se děje na „magickém“ obrázku: všimli jsme si, že v rohu je nějaká entita, ale největší nápis na sebe upozorňuje.
K dispozici je také Z-vzor . Funguje na webech a vstupních stránkách, kde není příliš mnoho textu. Podél horní vodorovné roviny klouzá pohled z loga do pravého horního rohu stránky, poté se šikmo přesouvá k informačnímu bloku ve spodní části a protíná střední část s obrázkem a výzvou k akci.
V tomto případě si všimneme všeho s periferním viděním, ale místo pozornosti (nejedná se o překlep) v každém okamžiku – pouze jeden z nápisů. Fyzicky nemůžeme číst dva texty současně. Na místo pozornosti myslíme aktivně a cíleně. Nyní je vaším místem tyto řádky:
Než prozkoumáme, jak tyto znalosti správně používat, podívejme se na příklad, který je třeba použít.
Proč weby tak často porušují princip hierarchie ponoření?
Představte si: sofistikovaný majitel továrny na západky si objedná web od mladého webového designéra. Na hlavní stránce musíte napsat o sestavě a zveřejnit dokumentaci. Návrhář obdrží všechny cenné pokyny a o týden později poskytne něco jako toto:
Hierarchie ponoření je jasná: návštěvník vidí že tento web je o západkách. Pokud má zájem, uvidí sekce „Naše modely“ a „Dokumentace“ a ponoří se hlouběji do vyhledávání.
Po prohlédnutí tohoto modelu říká majitel továrny na šrouby: „Rozhodně nejsem odborník, ale … Nejprve je třeba logo zvětšit, aby si ho lidé pamatovali. Také bych zvýraznil barevně slovo „západka“, aby vás zaujalo. Dokumentace je velmi nízká, lidé nevěnují pozornost, zvýrazněte ji také. Model 136 je mezi fajnšmekry absolutním hitem, někteří ho sledují. A ještě pár poznámek … „
Po úpravách bude web vypadat asi takto:
Zbývá stejné množství informací, ale nyní nám mozek dává signál: „Vyžaduje to příliš mnoho glukózy, abychom to zjistili, běž.“ Tento mechanismus funguje na autopilotu – mozek vyhodnotí kognitivní zátěž a pokud odměna není příliš velká, odmítne pochopit. Taková designová řešení kazí míru konverze a čas strávený návštěvníky a snižují CTR u bannerů.
Přejít na svůj web právě teď a pokusit se odhadnout, kolik kognitivní zátěže klesá na návštěvníka. Kolik entit musí vidět s periferním viděním? Jsou tyto entity zřejmé? Je jasné, v jakém pořadí si materiál přečíst? K těmto otázkám se vrátíme později, ale prozatím pojďme zjistit, co se na espagnoletové stránce pokazilo.
Návrhář porušil hlavní pravidlo hierarchie ponoření:
Zvýraznění velikostí, tvarem, polohou, barvou a animací jasně označuje hierarchii prvků.
Jednoduše řečeno, existuje tolik různých způsobů, jak přilákat pozornost na stránku, že není jasné, který z nich je ten hlavní. K dispozici je výběr v barvě, tvaru (šipky, kurzíva a tučné styly), velikosti. Tím se prolomí přirozený vzor F a vytvoří se další kognitivní zátěž.
Věnujte pozornost velmi důležitému bodu: v prvním návrhu jste si s největší pravděpodobností nevšimli, že jedna z dokumentace je označena jako „hit“. Stalo se to proto, že vás dokumentace šroubů v zásadě nezajímá – nadpis „Dokumentace“ se stal vaším místem pozornosti a neponořili jste se dále, protože lépe šetříte glukózu, než číst o šroubech.
Pokud jste ale přišli jen pro dokumentaci, ponořili byste se hlouběji a všimli jste si, že jeden z modelů je „hit“. Takto funguje hierarchie ponoření: pečlivě oddělujeme publikum a poskytujeme všem důležité informace ve správný čas.
Ve druhé verzi designu, chtivě, věnujte pozornost tomuto „zásahu“, i když jste nepřišli pro dokumentaci – je na ní příliš mnoho akcentů.
Poznámka – v příkladu o západkách není tolik prvků, na průměrném webu je mnohonásobně více entit: nabídky, formuláře, texty. Příklad je samozřejmě přehnaný a dnes takové stránky nenajdete … Ačkoli počkejte, co to je? K dispozici je dokonce výběr s animací!
To má svou vlastní krásu, ale představte si, že jste se podívali na seznam nejsilnějších tenistů – jak rychle se vzdáte?
Souhrn: weby často porušují princip hierarchie ponoření, protože ne každý chápe, že publikum nemůže pokrýt všechny entity najednou a rozhodnout, kterou z nich potřebuje. To vytváří zbytečnou kognitivní zátěž, která ztěžuje návštěvníkům najít to, co potřebují, a častěji neopustí web.
Udržování hierarchie podle velikosti
Nejjednodušší způsob, jak udržovat hierarchii, je výběr velikosti, takže stojí za to o ní hovořit samostatně.
Právě teď jste čtení textu shora dolů a velké nadpisy vám pomohou odlišit jednu část od druhé. Nezajímavý blok můžete snadno přeskočit nebo například přejít na ten, který je pro vás nejužitečnější.
Chcete-li zachovat hierarchii pomocí velikosti, musíte dodržovat pravidlo:
Objekty jsou vnímány odlišně, pokud se jejich vizuální hmotnost liší alespoň jednou a půlkrát
Podívejme se na příklad. Zde vidíte, že existuje pokus o vytvoření hierarchie, ale rozdíl ve velikosti není dostatečný pro rychlé vnímání:
Zvýšíme rozdíl ve vizuální hmotě:
Nyní tyto tři nadpisy jasně vyniknou a můžete rychle najít to, co potřebujete – rajčata nebo lilky. Tento příklad porušuje další princip – teorii blízkosti, o které jsme již natočili video.
Je důležité si uvědomit: rozdíl ve velikosti je jedním z nejběžnějších a nejjednodušších způsobů vytvoření hierarchie . Aby to fungovalo, musí se rozměry výrazně lišit. Podívejte se na rozdíl mezi nadpisem a textem na webu Apple:
Údržba hierarchie pomocí barev
Dalším způsobem, jak vytvořit hierarchii webů, je zvýraznit barvou to, na co chcete upozornit, vyvážit uspořádání prvků na stránce. Celé bloky lze zvýraznit barvou. K tomu stačí dvě barvy: primární a sekundární pro zvýraznění.
Zvýraznění pro vytvoření hierarchie je důležité pro mobilní weby a aplikace: malá obrazovka omezuje schopnost používat další principy vizuální hierarchie – velikost a prostor.
Praktické tipy pro budování hierarchie
Představte si: příbuzný vás požádal, abyste přinesli pilulky, které zapomněl. Vejdete do domu a uvidíte, že je to nepořádek: věci tu ležely i na podlaze. Někde v chaosu by měly ležet i pilulky, které potřebujete – třeba v plechovce od kávy nebo na kredenci.
Nyní si představte tuto možnost: překročíte prahovou hodnotu a uvidíte úplnou objednávku – nádobí v kuchyni, knihy v knihovně. Ve skříni je stojan s bílými značkami „Ikeevsky“: „hračky“, „dokumenty“, „léky“. V krabičce na léky najdete lahvičku, kterou potřebujete, bez bolesti nebo slz.
Váš web by měl být jako dům, kde je každá věc na svém místě. Uživatel nemá čas přijít na to, která ze sekcí obsahuje potřebné informace – chce to rychle zjistit. Existují jen dva jednoduché tipy, jak web vyjasnit.
Tip 1. Informace o skupině
Ujistěte se, že všechny informace zveřejněné na webu jsou rozděleny do skupin a uspořádány v logickém pořadí: od hlavních po sekundární. Použijte diagram obráceného trojúhelníku: nejdříve základní informace, poté důležité podrobnosti a poté další podrobnosti. Hlavní věc je, aby tyto informace byly každému uživateli srozumitelné: ve které kategorii hledat produkt nebo například na které tlačítko kliknout a přidat položku do košíku.
Tip 2: Vizuální posílení informací o hodnocení
Podívejte se, jak se na vašem webu používají čtyři pohlcující nástroje hierarchie: složení, velikost, barva a prázdné znaky .
Složení. Neobjevujte kolo znovu a pro sestavení staveniště používejte hotová schémata: f-vzor a z-vzor, které jsme již popsali výše. Uživatel tak bude mnohem pohodlněji vnímat informace.
Velikosti. Díky různé velikosti můžete zvýšit nebo snížit důležitost informací: logo, nadpis nebo infografika. V typografii existují tři úrovně velikosti, z nichž každá by měla být alespoň jeden a půlkrát větší než ta předchozí. Pokud například vezmeme hlavní text jako 100%, pak pro podnadpis musíme zvolit velikost jeden a půlkrát větší – 150% a pro nadpis – 250%.
Barvy. O zachování hierarchie s barvami jsme již hovořili výše. Ujistěte se, že váš web nemá více než dvě nebo tři barvy: primární a sekundární. Pomocí dalších barev lze zvýraznit informační bloky nebo jednotlivé prvky – tlačítka, seznamy, ikony.
Volné místo. Na webu by měl být dostatek „vzduchu“, jak říkají designéři. Například použití volného místa umožňuje oddělit od sebe novou sekci nebo položky v jedné sekci. Prostor poskytuje příležitost odpočinout oko uživatele a upravit jej pro další obsah.
Shrnutí
Oči a mozek uživatelů jsou přesyceny obsahem. V boji o pozornost zvítězí ten, kdo web „vylepší“ – to znamená, že udělá vše pro to, aby informace vnímal pohodlně a snadno.
Na svůj web se můžete zaměřit pomocí čtyř jednoduchých nástrojů pro návrh: složení, velikost, barva a volné místo.
Podle průzkumů se většina lidí podvědomě rozhodne koupit si produkt na webu do 90 sekund. Kladného rozhodnutí lze dosáhnout pomocí hierarchie ponoření, která není ani pod kontrolou designéra.
***
Děkujeme, že jste si tento článek přečetli až do konce!
Další užitečné informace v našich sociálních sítích: VKontakte | Instagram | Facebook
