Pokud jako designéři chceme vytvářet smysluplné uživatelské rozhraní, ve kterém se lidé snadno zorientují, poznají související objekty, dokáží se orientovat v důležitosti jednotlivých prvků, atp. je potřeba efektivně aplikovat prvky tzv. Gestaltismu nebo Gestalt Psychologie, které nám s tím pomohou.
Gestalt psychologie, nebo její principy, jsou jednou z klíčových součástí nejen návrhu uživatelského rozhraní, ale grafického designu obecně. Díky formulovaným principům a postupům můžeme lidem pomoci chápat smysl prezentovaných informací a jejich strukturu.
Představení
Co je užitečné vědět
Tento směr, pokud se budeme bavit o Gestalt psychologii, byl formulován začátkem 20. století několika německými a rakouskými psychology. Jde v podstatě o nauku o tom, jak funguje lidské vnímání a mysl. V podstatě říká, že člověk při pohledu na určitý obraz nebo scénu nevnímá jednotlivé prvky a poté je skládá dohromady pro vytvoření kompletního obrazu, ale že vnímá danou scénu jako celek automaticky bez jakékoliv vědomého úsilí.
Název vychází ze slova gestalt, což znamená vzor, věc, forma, tvar nebo objekt – něco celého.
Vše funguje na principu takzvaného „vzniku“, kdy si skrze lidské oko mozek uvědomí a spojí danou scenérii nebo obraz v něco smysluplného. Klasickým příkladem je například tento obrázek:
Na výše uvedeném obrázku můžete vidět nějaké tvary či objekty bez jakékoliv souvislosti. Lidský mozek u většiny lidí však uvidí psa, jak čuchá k něčemu na zemi. V našem vnímání však hraje roli například předchozí zkušenost, znalosti, způsob vnímání, atp. Můžeme ale říci, že pokud má mozek dostatek informací, může si danou scénu automaticky spojit (vytvořit nebo zkompletovat) a dát nám tak nějakou smysluplnou informaci.
Můžeme to tedy shrnout tak, že pokud nemáme kompletní obrázek (vidíme pouze část celku) nebo je daný obraz nějakým způsobem poškozen, lidská mysl se skrze vnímání pokusí chybějící část doplnit.
Zároveň zde funguje také princip tzv. multistability. Když lidský mozek vidí nějaký obrázek, u kterého vnímá více možných významů, bude mezi nimi neustále přepínat. Multistabilita je tedy princip, díky kterému se bude lidský mozek snažit vyznat ve více významech a bude mezi nimi neustále přepínat. Viz například následující obrázek:
Lidské vnímání funguje zároveň i tak, že umíme vnímat různé objekty jako stejné, i když jsou v různých variantách – například pootočené, převrácené, v různé perspektivě atp.
Vše tyto výše uvedené principy formulují jednotlivé principy Gestalt psychologie, které popisují, jak vnímání různých objektů a skupin funguje. Čehož můžeme efektivně využít i v návrhu uživatelského rozhraní.
Poznámka: Pro více informací o tom, jak vlastně Gestalt psychologie funguje, doporučuji navštívit přiložené odkazy v části Zdroje.
Principy
Gestalt psychologie popsala několik principů pro organizování prvků pro tvorbu smysluplných skupin, které můžeme v rámci návrhu využít. Jedná se o:
- Princip podobnosti (The Law of Similarity)
- Princip blízkosti (The Law of Proximity)
- Princip známosti nebo smysluplnosti (The Law of Familiarity/Meaningfulness)
- Princip společného směru (The Law of Common Fate)
- Princip symetrie (The Law of Symmetry)
- Princip návaznosti (The Law of Continuity)
- Princip uzavření (The Principle of Closure)
- Princip popředí a pozadí (Figure/Ground principle)
Toto jsou asi ty nejznámější (a základní) principy. Podle moderního pojednání o Gestalt psychologii sem ale můžeme zařadit i další tři pravidla, nebo řekněme principy:
- Princip propojení prvků (The Principle of Element Connectedness)
- Princip společného místa (The Principle of Common Region)
- Princip synchronizace (The Principle of Synchrony)
Níže popisuji jednotlivé principy a jak je vlastně efektivně využívat v návrhu uživatelského rozhraní.
Princip podobnosti (The Law of Similarity)
V případě principu podobnosti můžeme říct, že prvky, které mají stejné vizuální vlastnosti budou vypadat, že spolu nějak souvisí více než ty, které takové vlastnosti nemají. Ve smyslu vlastností typicky mluvíme o:
- Velikosti,
- Tvaru,
- Barvě.
Viz následující příklady.
Jak můžete vidět na předchozím obrázku, prvky mající stejnou barvu (jakožto vizuální vlastnost) mohou vytvářet související skupinu prvků.
Na předchozím obrázku jsem zkombinoval další vlastnosti dohromady – tedy odlišné tvary a poté odlišné tvary a barvy. Jak můžete vidět, prvky s různým tvarem mohou vytvářet související skupiny prvků. Přidáním další vizuální vlastnosti tím toto vnímání ještě více podtrhnete.
Jak můžete vidět na předchozím obrázku, i pomocí různé velikosti prvků (což je také vizuální vlastnost) můžete vytvářet vnímání různých skupin prvků. Pokud to ještě zkombinujete o barvu a tvar, podtrhnete tím tuto vazbu.
S využitím podobnosti je ale potřeba pracovat opatrně. Například barvy (či jiný výrazný kontrast v odlišnosti – například radikální odlišnost ve velikosti) mohou ostatní vizuální odlišnosti přebýt a vytvořit tak odlišné skupiny, než byste původně zamýšleli. Viz následující obrázek:
Použití v uživatelském rozhraní
Jak tohoto principu ale efektivně využívat v uživatelském rozhraní? Jednou z klíčových aplikací principu podobnosti je konzistence vizuální podoby v uživatelském rozhraní. Tedy to, že například:
- Primární tlačítka by měla všude vypadat stejně.
- Sekundární tlačítka by měla všude vypadat stejně a měla by být jiná než primární.
- Pozitivní stavy by měly mít stejnou barvu napříč celou aplikací.
A tak podobně. Lidé je totiž poté budou vnímat stejně, tedy se stejným významem.
Jak bylo zmíněno výše, pokud využijeme tří klíčové vizuální aspekty, tedy:
- Velikosti,
- Tvaru,
- Barvě.
Na základě kterých podobnosti vytvoříme (samozřejmě ještě s dalšími doplňky, jako jsou stíny, atp.), můžeme tak udělat rozhraní pro lidí snáze naučitelné, pochopitelné a použitelné.
Princip blízkosti (The Law of Proximity)
V případě principu blízkosti můžeme říct, že vnímáme související prvky v případě, kdy jsou blízko u sebe, případně blíže než ostatní prvky. Právě i když budeme mít více prvků, prvky stojící blízko u sebe budeme vnímat jako související místo těch, které jsou vzdálenější.
Jak můžete vidět na předchozím obrázku, prvky můžeme vnímat jako související, pokud jsou u sebe blízko, resp. když jsou od ostatních vzdálené. Také viz další následující příklad, kdy vnímáme prvky jako související i v případě, že mají jiný tvar.
Náš mozek vnímá blízkost (reps. vzdálenost) tak moc, že naše vnímání může být mnohem silnější než „spojení“ s využitím vlastností jako je například barva. Na následujícím příkladě můžete vidět, že tomu tak skutečně je (i když je to trochu problematické).
Použití v uživatelském rozhraní
Jak tohoto principu ale efektivně využívat v uživatelském rozhraní? Představte si uživatelské rozhraní, ve kterém je:
- Všechno „naplácané“ na malé ploše nebo hrozně blízko u sebe.
- Nebo je naopak všechno příliš roztahané.
Pokud si to představujete, v něčem takovém by se rozhodně nedalo vyznat a lidé by si kladly otázky typu „Co k čemu patří“, „Když kliknu sem, co to ovlivní“, atp. (Ve skutečnosti by brzo odešli místo toho, aby to řešili).
Jak můžete vidět na obrázku nahoře na příkladu stránky vyhledávání, titulek je spojen s vyhledávacím polem, tlačítko je ale samostatně na druhé straně obrazovky. Působí to tedy tak, že spolu nijak nesouvisí a není hned jasné, zda tlačítko slouží pro potvrzení vyhledávání. (Tlačítko je zároveň snadno přehlédnutelné).
Tento problém je v reálných řešení často k nalezení. A přitom stačí snadné řešení. Více danou kompozici spojit a ucelit dohromady. Tedy ať je vyhledávací pole blízko s tlačítkem.
Zároveň se podívejme na to, co se může stát, pokud vše „nahňácáme“ dohromady třeba kvůli tomu, abychom ušetřili místo.
Jak můžete vidět na předchozím obrázku, designér se snažil položky umístit tak, aby co nejvíce ušetřil místo. Není však jasné, co k čemu patří. Pokud se ale podíváme na následující obrázek, je už více jasné (díky prostoru), které položky k sobě patří.
Princip známosti nebo smysluplnosti (The Law of Familiarity/Meaningfulness)
Princip známosti nebo také smysluplnosti je jedním z principů organizace prvků tak, že lidé vnímají prvky jako související, pokud prvky vytvoří nějaký smysluplný nebo pro člověka relevantní objekt, prvek nebo scénu.
V tomto případě samozřejmě dost záleží na tom, zda má člověk s danou formou nebo uskupením určitou zkušenost – například že se s ním setkal, viděl jej, atp. Pokud nemá předchozí zkušenost či daný objekt, předmět nebo scéna je pro daného člověka nerelevantní, nebude prvky vnímat jako související. V případě tohoto principu můžeme u lidí mluvit také o schopnosti rozpoznávat/rozeznávat.
U tohoto pravidla jde především o to vytvořit takové skupiny, které budou lidem dávat smysl. Jde vlastně o spojení různých prvků dohromady tak, aby je lidé rozpoznali.
Princip společného směru (The Law of Common Fate)
Jeden z dalších Gestalt principů, který nám umožňuje vnímat prvky jako související je tzv. princip společného směru (v originále The Law of Common Fate). Ten nám v podstatě říká, že máme tendenci vnímat prvky jako související, pokud se pohybují stejným směrem.
Jak můžete vidět na obrázku výše, prvky pohybující se stejným směrem vnímáme jako související, podobné. To stejné můžeme říct i o prvcích, které se pohybují stejným směrem, ale i stejnou rychlostí. Tím je vlastně odlišíme od ostatních.
Je užitečné si uvědomit, že schopnost sledovat objekty vzhledem k jejich směru a rychlosti je dána vývojem. Naši předkové vlastně přežívali díky tomu, že byli schopni rozpoznat různé hrozby (například různé predátory), které všude možně číhali. Tato schopnost (tedy rozpoznání pohybu) nám zůstala a je důležitou součástí lidského vnímání.
Použití v uživatelském rozhraní
Je zřejmé, že tento princip bude důležitý v rámci motion designu, animací, atp. Můžeme říct, že abychom lidi vedli správným směrem, budeme tento princip určitě využívat – aby vlastně dávalo rozhraní lidem smysl. Představte si to například u obrázkové galerie nebo „kolotoče“ (carousel).
To stejné platí i v případě například vyjížděcích nabídek, u kterých platí, že pokud se nabídky ukazují stejným směrem, lidé je budou brát jako související.
Princip symetrie (The Law of Symmetry)
Princip symetrie je jedním z principů organizace prvků tak, abychom vnímali prvky jako související v případě, pokud symetricky uspořádané v rámci daného objektu. V podstatě vytvářejí dojem pořadí a stability.
Tento princip vychází z toho, že pokud se díváme na různé objekty, naše mysl a vnímání se zaměří na střed, což ovlivňuje naše vidění světa. Pokud tedy v tomto středu vidíme určitý balanc a symetrii, naše mysl spojí symetrické prvky k sobě jako související.
Na předchozím obrázku můžete vidět, jak člověk vnímá symetrickou skupinu prvků. Zkuste to srovnat s následujícím příkladem, kdy jsou prvky v nesymetrické skupině.
Symetrie je zároveň něco, co bychom neměli ignorovat. Přirozeně se vyskytuje v přírodě, například křídla motýla nebo lidská tvář. Zároveň lidé mají tendence hodnotit lidský obličej jako přitažlivý v případě, pokud je příjemně symetrický.
Použití v uživatelském rozhraní
Je poměrně známé, že lidská pozornost je (v pozitivním slova smyslu) přitahována k symetrickým objektům. Můžeme toho využít v uživatelském rozhraní tak, že lidem díky tomu pomůžeme skenovat (a číst) obsah a vlastně rozpoznávat objekty a vzory.
Symetričnost v rámci uživatelského rozhraní nám umožní vytvořit pocit stability. Což může být v některých případech záhodné, například u navigace, galerií, atp.
Když si to tak vezmeme, tak vlastně samotné rozložení (nebo můžeme říct layout či grid) vlastně slouží a představují určitou symetričnost v rámci uživatelského rozhraní.
Zároveň berme v potaz i fakt, že ne vždy můžeme chtít vše symetrické. Asymetričnost nám může pomoct vnímání desingu jako dynamického, živějšího, čehož můžeme dosáhnout například na landing page pro vyšší atraktivnost a zaujetí potencionálních zákazníků.
Princip návaznosti (The Law of Continuity)
Tento princip se trochu liší od těch předchozích. Nejde o shlukování prvků či jejich odlišení. V tomto principu jde o to, že pokud oko navedeme z jednoho objektu na druhý, naše schopnost vnímání bude brát objekty jako související nebo spojené.
Jak můžete vidět na předchozím obrázku, nejlépe můžeme tento princip demonstrovat tak, že spojíme různé prvky obyčejnou čárou. V podstatě je tak propojíme a vytvoříme dojem, že prvky spolu nějakým způsobem souvisí.
Samozřejmě nemusíme prvky přímo propojovat čarou. Stačí ale pouze vytvořit dojem, že jsou prvky nějak propojené a lidé je budou pravděpodobně vnímat jako související. Jak můžete vidět na předchozím obrázku.
Použití v uživatelském rozhraní
Jak tohoto principu ale efektivně využívat v uživatelském rozhraní? Tento princip ale můžete také skvěle využít pro vysvětlení rozhraní pro (nejen) nové uživatele. Třeba v případě, kdy jim ukážete a popíšete, co mají lidé dělat:
Samozřejmě tak funguje i tzv. slideshow, nebo-li posunovatelná galerie obrázků. Představte si, že máte právě řádek obrázků, které jdou za sebou. Díky tomu poté působí jako jedna skupina.
Tento princip ale platí i u samotných prvků uživatelského rozhraní, například:
- Drobečková navigace – položky jdou za sebou a tvoří tak ucelený celek navigační hierarchie.
- Posuvník – tvoří propojené hrany výběru a tedy skupinu, ve které hodnoty budou.
- Vysouvací nabídky – vysouvací menu směřuje k tlačítku, ke kterému patří.
Princip uzavření (The Principle of Closure)
Musím říct, že mně osobně přijde princip uzavření, neboli The Principle of Closure, jako jeden z nejzajímavějších Gestalt principů. Funguje tak, že lidé vnímají objekty jako celé i v případě, že nejsou kompletní. Naše mysl si totiž dokáže rychle chybějící místa doplnit a naše vnímání tak ucelit.
Jak můžete vidět na předchozím obrázku, lidský mozek se snaží doplnit mezery a tím pro nás vytvořit ucelený obrázek, tedy například:
- Celistvý kruh,
- Čtverec,
- Trojúhelník s kruhem.
Použití v uživatelském rozhraní
Asi nejznámějším případem využití principu uzavření (The Principle of Closure) bude tzv. negativní místo (negative space), které budete pravděpodobně znát z různých aplikací grafického designu, jako jsou například loga.
Nemusí to být samozřejmě pouze loga, ale často najdete tento princip využit i u ikonek a jiných grafických prvků uživatelského rozhraní. Můžete totiž díky tomuto principu zachovat prvky jednoduché především díky menšímu množství detailů.
Tento princip můžeme využít například zjednodušením uživatelského rozhraní tak, když budeme místo plné čáry využívat tečkovanou nebo přerušovanou. Čímž snížíme počet prvků, ale zároveň necháme naši mysl objekt automaticky dokončit, takže myšlenka zůstane zachována. Což můžete vidět na obrázku níže.
Princip popředí a pozadí (Figure/Ground principle)
Princip popředí a pozadí je jeden z principů organizace vnímání prvků, která je založená na tom, že odlišujeme vnímání popředí/postavy (figure) a pozadí (background, ground). Lidské oko je schopné oddělit různé prvky v závislosti na tom, jak jsou zamýšlené. Můžeme poznat a odlišit objekty, které jsou umístěné v popředí a které v pozadí.
Tento princip funguje v podstatě na principu kontrastu – kdy vnímáme odděleně například bílý text na černém pozadí (vnímáme obojí) nebo různé objekty či scény, jak můžete vidět na následujícím obrázku:
Když budete správně tento princip využívat, můžete v uživatelském rozhraní lidi efektivně navést v rámci jejich úkolu a snížit tak nároky na jejich kognitivní schopnosti. Díky tomuto principu můžeme právě vidět právě a pouze objekty, na které se zaměříme. Zbytek pro nás zůstane v podstatě méně viditelný (i pro periférní vidění).
Použití v uživatelském rozhraní
Distribuovat pozornost v rámci uživatelského rozhraní je velice důležité pro správnou použitelnost. Mnohdy bude „potřeba“ zobrazit více informací na jednom místě, ale stále budeme potřebovat zaměřit pozornost lidí pouze na určitou část.
Asi nejznámější aplikací je modální okno – požadovaný obsah se dostane do popředí (typicky separovaném) a zbytek necháme zešednout či rozmazat. Pozornost lidí tak navedeme na to, co je potřeba udělat v rámci modálního okna.
Samozřejmě v tomto principu je snahou rozdělit zorné pole na dvě části – popředí a pozadí (které bude méně důležité. Toho můžeme využít i při tvorbě záhlaví stránek. Viz následující obrázek.
Princip propojení prvků (The Principle of Element Connectedness)
Dalším principem je jeden z těch novějších, tedy princip propojení prvků (v originále The Principle of Element Connectedness nebo také The Law of Uniform Connectedness). V podstatě jde o docela podobný princip jako v případě principu návaznosti (The Law of Continuity).
Ta odlišnost je zde taková, že v případě principu návaznosti jde o to, aby prvky šly v podstatě za sebou (pokračovaly), tak princip propojení prvků mluví o tom, že pokud prvky skutečně spojíme, budeme je brát jako skupinu nebo prostě jako související prvky.
Jak můžete vidět na předchozím obrázku, prvky propojené čárou opravdu máme tendence vnímat více jako společné. Funguje to i v případě, kdy mají prvky stejné vizuální vlastnosti jako některé prvky, které ale nejsou propojené.
Jak můžete vidět na předchozím obrázku, některé prvky se od zbytku liší a stejně je díky propojení čárou vnímáme jako součást dané skupiny, ale jako nesouvisející se zbytkem prvků stejné barvy.
Použití v uživatelském rozhraní
Jak tohoto principu ale efektivně využívat v uživatelském rozhraní? Princip propojení prvků je velice jednoduše aplikovatelný, ale zároveň vysoce efektivní. Často se s ním potkáváme v běžném světě a proto je vhodné jej používat – pokud je zde taková potřeba – v rámci uživatelského rozhraní.
Samozřejmě nás asi jistě napadne, že tento princip můžeme využít dobře i vizualizace dat. Například pro ilustraci vzájemného propojení událostí čase a tedy určitou souvislost. Na obrázku výše můžete vidět dva grafy:
- Samostatné body,
- Propojenou řadu bodů.
Obojí se vlastně snaží říct to stejné. U prvního grafu se samostatnými body nám ale nemusí být jasné, co se daný graf snaží říct i přes to, že jsou body stejné. Pokud je ale propojíme, jasně tuto závislost demonstrujeme.
V podstatě kdykoliv budete chtít prvky udělat pro lidi jako spojené, související, tak je můžete propojit čárou. Pokud se to bude do vašeho návrhu hodit. Nemusí jít ale pouze o nějaké větší celky, ale klidně i o detaily – viz zmíněná vizualizace dat a nebo hodnoty na posuvníku hlasitosti.
Princip společného místa (The Principle of Common Region)
Princip společného místa, nebo v originál The Principle of Common Region, je částečně podobný jako princip blízkosti (The Law of Proximity). V podstatě nám říká, že prvky umístěně v rámci stejného místa/prostoru jsou vnímány jako součást stejné skupiny – a je potřeba říct, že vnímání souvisejících prvků asi nemůže být silnější.
Jak můžete vidět na předchozím obrázku, pokud určité prvky zahrneme do jasně vymezené skupiny, budeme je vnímat jako související. Princip společného místa poté přebíjí i ostatní principy, jak můžete vidět na obrázku níže.
Je potřeba říct, že jasně vymezeným prostorem – tedy aplikací tohoto principu – můžeme ušetřit kognitivní zdroje lidí, protože je víceméně jasné, o co se vlastně pokoušíme a lidé tak nad tím nemusí „přemýšlet“. (Což může být při nevhodné a nejasné aplikaci problematické u ostatních principů.)
Samozřejmě můžeme využít i jednodušší vizuální formu pro vytvořené společného prostoru, například:
- Čáru nebo více čar.
- Oddělení bez výplně.
Použití v uživatelském rozhraní
Dovolím si říct, že princip společného místa (The Principle of Common Region) je jeden z nejvyužívanějších principů v rámci organizace uživatelského rozhraní. Často najdete na různých stránkách a v různých aplikací prvky uzavřené do určitého boxu, místa, atp.
Jak můžete vidě na předchozím obrázku, je zde několik prvků uzavřených do skupin, které vnímáme jako související, ale zároveň nesouvisející se zbytkem:
- Status bar systému,
- Hlavička aplikace,
- Spodní navigace.
Nebo si vezměme různé kartičky, obsah v rámci, atp. Vlastně jak můžete vidět na následujícím obrázku.
Jak můžete vidět na předchozím obrázku, je zde několik „boxíků“, které sdružují určitý obsah do skupin. Tedy například:
- Hlavní navigace,
- Doplňující nabídka a filtry,
- Vyhledávání,
- Poslední vyhledávání,
- Doporučené nabídky práce.
Na stránce je tedy několik různých položek, které designéři raději spojili do společných míst, aby tak nebylo pochyb, které položky k sobě patří.
Princip synchronizace (The Principle of Synchrony)
Princip synchronizace je v mnohem velice podobný principu společného směru (The Law of Common Fate). Je zde ale jeden malý rozdíl – zatímco princip společného směru pojednává o objektech, které se hýbou, princip synchronizace je i o objektech, které jsou statické, tedy bez pohybu.
Tento princip nám říká, že lidé vnímají prvky jako související (nebo součástí stejné skupiny) pokud se stane nějaký vizuální změna ve stejném čase.
Jak můžete vidět na předchozím obrázku, pokud prvky mění svou vizuální podobu ve stejnou chvíli, vypadají jako prvky ze stejné skupiny. Stejně jako u principu společného směru je ale potřeba mít i stejnou rychlost.
Nemusí jít samozřejmě pouze o barvu. Stejně jako u principu podobnost může jít také o velikost nebo tvar. Samozřejmě s tím, že je vše možné zkombinovat.
Použití v uživatelském rozhraní
Tento princip můžeme využívat v podstatě stejně jako v případě principu shodného směru (The Law of Common Fate). Například u již zmíněného případu vyjížděcího menu, kdy se položky podnabídky objeví ve stejném směru, ve stejný okamžik.
Jedinou odlišností od principu společného směru je právě to, že tento princi lze aplikovat i na statické prvky – tedy ty, které se nehýbají, ale mění svou vizuální podobu.
Ve vašich návrzích dejte pozor na časování a různé změny, abyste předešli tomu, že některé prvky budou vypadat jako související kvůli shodné změně a to i přes to, že jste to vlastně tak nezamýšleli.
