Jak oko skenování ovlivňuje vizuální hierarchii v UX designu
Zatímco tisíciletí umění, od řeckých váz až po italské kaple, formovaly naše chápání toho, co je krása, poměrně nedávná technologie za sledováním očí přidává novou dynamiku k tomu, jak vizuálně vnímáme svět. Více na vědomí, tato vzrušující nová věda nám pomáhá lépe porozumět - a lépe navrhovat - webové stránky, které jsou efektivní i estetické.
Web design (jako výtvarné umění) následuje mnoho stejných pravidel jako tradiční umělecké formy. V tomto článku budeme stručně představit důležitost vizuální organizace a poté vysvětlit, jak mohou výsledky sledování oka zlepšit uspořádání webových rozhraní.
Vytváření vizuální organizace
Není divu, že to, jak vypadá webová stránka, ovlivňuje její úspěch, ale je důležité určit důvody proč. Ve svém článku Komunikace s vizuální hierarchií , Luke Wroblewski, autor a hlavní ředitel pro produktový design společnosti Yahoo !, vysvětluje, že vizuální prezentace webového rozhraní je nezbytná pro:
Vedení
Dobře vytvořené rozhraní může uživatelům přivést z jedné akce do druhé bez pocitu nadsázky. Bez ohledu na to, co si myslíte o jejich obchodních praktikách, to není pochyb Uber je příkladem neuvěřitelně hladkého, ale strukturovaného webu. Hodnotové návrhy jsou na vrcholu navigačního tlačítka, po němž následuje zábavný posuvník, který se dozvíte o různých možnostech vozu a dokončíte logický další krok hledání jízd ve vašem městě.
Sdělení
Přiřazením jinak než na rozdíl od informací může uživatelské rozhraní vytvářet vazby v mysli uživatele, komunikující zprávy bez toho, aby něco říkaly. Podívejte se na oblíbenou webovou stránku designu Abduzeedo : velké kategorie jsou nahoře, obsahují uprostřed a podrobné kategorie v zápatí.
Vytvoření emočního dopadu
Nedělejte chybu myšlení, že vaše webové stránky jsou pouze mechanizovaným nástrojem. Webové stránky mají potenciál k vytváření emocionálních vazeb, a pokud ne, vaše vůle vašich konkurentů. Ve skutečnosti mohou být lidé náchylnější k odpuštění nedostatků vašeho rozhraní, pokud budete mít pozitivní výsledky emoční reakce . MailChimp je dokonalým příkladem webu s rozhraním, které je použitelné, bezstarostné a skutečně zábavné.
Předvídatelné lidské oko
Někdy se zdá, že vaše oči mají vlastní mysl. Roky evoluce nám daly instinkty k pozorování objektů a pohybů, které považujeme za důležité, ať se jedná o sexuální procházku někde přes ulici, nebo o mazlíček s medvídkem. Zatímco relativní váha, kterou dáváme na to, co je důležitá, se může lišit od člověka k člověku, jedna konstanta je mechanismus, na kterém se chová. Ve velkém měřítku většina lidí při sledování webové stránky sleduje stejné trendy.
Z těchto trendů existují dva, o kterých budeme podrobně diskutovat. V jednom článek o vizuálních principech , Alex Bigman, Design Writer pro 99Designs, ukazuje, že pro kultury, které četly zleva doprava, jsou tyto dva vzory nejběžnější - a nejužitečnější - při navrhování rozvržení webových stránek.
První, F-vzorek, se používá hlavně pro text (ale může být přizpůsoben pro jiné účely). Druhý, Z-vzorek, může být použit pro jakékoliv vizuální uspořádání. Budeme vysvětlovat různé výhody a nevýhody pro každý níže.
F-vzor
F-Pattern je trend, který se objevuje na stránkách, které jsou silně nabité textem, typicky blogy, zpravodajské zdroje, články atd.
Když se setkáte s blokem slov, většina čtenářů nejprve naskenuje svislou čáru levou stranu textu, obvykle hledá klíčová slova nebo body zájmu v původních větách odstavce. Nakonec čtenář najde něco, co se jim líbí, a začne normálně číst a tvoří vodorovné čáry. Konečný výsledek je něco, co vypadá jako písmena F nebo E.
Jakob Nielson ze skupiny Nielson Norman Group provedl studii čitelnosti založené na 232 uživatelích skenujících tisíce webových stránek. Z jeho výzkumu zaznamenal, co věří praktické důsledky F-vzoru:
- Uživatelé budou zřídkakdy číst všechna slova vašeho textu.
- První dva odstavce jsou nejdůležitější a měly by obsahovat váš hák.
- Začněte odstavce, podkapitoly a odrážky s lákavými klíčovými slovy.
Jako vždy je nejdůležitější levý horní roh, protože začíná všechny čtenářské kultury zleva doprava. Uživatel bude obvykle číst vodorovně přes záhlaví, takže zde je dobré místo pro navigační lištu a / nebo výzvu k akci. Potom uživatel prohlédne vertikálně levou stranu, dokud nenajde obsah, který je zajímá. Nakonec uživatel končí na pravé straně stránky, skvělé místo s výzvou k akci nebo reklamou. Jen nedovolte, aby postranní panel obsah obsahoval.
Ale F-vzor není šablona - opravdu to není přesná praxe, ale spíše volná příručka sestavená z trendů většiny uživatelů. Mějte to na paměti, protože F-vzorek ztrácí svou účinnost po horních řádcích F.
Kickstarter používá rozložení karet pro zobrazení projektů vlastností a neprojevení vizuálně nudných po prvních 500 pixelů.
Na druhou stranu, iZettle bere běžnější přístup k F-vzoru na jejich domovské stránce. Nicméně se jim podaří vyhnout se šablonovanému vzhledu tím, že překryjí primární kopii ("Rozšiřte svou firmu pomocí iZettle") a výzvu k akci na velký obrázek na pozadí. Zvažovali bychom toto minimum pro přizpůsobení tohoto čtecího vzoru rozložení rozhraní.
Z-vzorek
Z-vzorek je navíc nejjednodušší a nejvíce univerzální vzorek, který se běžně používá na jakékoli webové stránce, která je založena na textu. Čtenář nejprve skenuje vodorovně přes vrchol, šipky dolů a zpátky na levou stranu a pak znovu skenuje horizontálně dolů.
Je důležité pochopit univerzální model Z , neboť se zabývá požadavky na základní webové stránky, jako je hierarchie, branding a výzvy k akci. Její krása je v jeho jednoduchosti a ideální uspořádání pro weby zaměřené na výzvu k akci. V případě složitějšího nebo nadměrného obsahu může být Z-vzorek příliš jednoduchý.
Myslíte si, že Z-vzorek je pro vaši stránku správný? Níže uvádíme několik doporučených postupů pro optimalizaci výhod:
- Pozadí - Udržujte pozadí, kam patří: na pozadí. Nechcete rozptýlit čtenáře.
- Bod č. 1 - Výchozím bodem je obecně místo, kde chcete umístit své logo.
- Bod č. 2 - Zatímco hlavní výzva k akci by měla nastat později, je zde dobré místo pro sekundární výzvu k akci, která obsahuje bodové označení vodorovného navigačního panelu. (Pěkný grafický nebo obrazový posuvník vám pomůže oddělit horní a dolní část stránky a povzbudí čtenáře, aby zůstal na předvídatelné cestě modelu Z.)
- Bod č. 3 - Je to pěkné místo, kde si můžete přitáhnout pozornost k jiným odkazům, nebo alternativně k tomu, abyste vedli uživatele k cíli: Bod č. 4.
- Bod č. 4 - Jako "cílová čára", toto je ideální místo pro hlavní výzvu k akci.
První věc, kterou budete chtít udělat, je upřednostnění prvků na vaší stránce pro sebe, abyste věděli ty nejméně důležité. Odtud je to prostě jednoduchá záležitost, jak je přidělit vhodným "horkým místům".
Z-vzorek lze navíc opakovat a rozšířit po celé stránce. Stačí se podívat na to, jak Evernote Zig-zags směrem dolů přes výzvy k akci a prodejní body.
DropBox získá vizuálně jednodušší přístup k tomuto zig-zag vzoru tím, že odstraní všechny obrázky na pozadí. Místo toho je do rozvržení zabudováno více funkcí, protože výzva k akci "Další informace" pomáhá propojit každou část vzoru vinutí, když vaše oko prochází po stránce. To také pomáhá informovaným čtenářům kliknout na další relevantní stránku, aniž by bylo nutné přečíst si nejprve celou kopii.
Pohled na předvídavost
Skvělý design rozhraní by měl být jako neviditelná ruka, která vede čtenáře spolu s rychlostí myšlení. Důležitým úkolem trendů F-Pattern a Z-Pattern je, že můžete umístit svůj nejdůležitější obsah tam, kde čtenář "narazí" na to přirozeně, na rozdíl od snahy přinutit je, aby se na ně dívali.
Subtilita je velkou výhodou pro libovolné rozložení stránky a tyto vzory mohou znamenat rozdíl mezi tím, že něco naznačují čtenáři, ačkoli je hází do krku.
Doporučený obrázek, používá obraz lidského oka přes Shutterstock.