Gestalt principy

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.

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 neměckými a rakouskými psychology. Jde v podstatě o náuku 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:

Co vidíte – vázu, dva lidi co se na sebe dívají, nebo si nemůžete vybrat? Zdroj: https://www.whatpsychologyis.com/gestalt-psychology/

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.

Princip podobnosti (The Law Of Similarity) s využitím barev.
Princip podobnosti (The Law Of Similarity) s využitím barev – prvky mající stejnou barvu mohou vizuálně utvářet související skupinu.

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ů.

Princip podobnosti (The Law Of Similarity) s využitím tvarů a barev.
Princip podobnosti (The Law Of Similarity) s využitím tvarů a barev – prvky mající stejný tvar nebo stejný tvar a barvu mohou vizuálně utvářet související skupinu.

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.

Princip podobnosti (The Law Of Similarity) s využitím tvarů, barev a velikosti prvků.
Princip podobnosti (The Law Of Similarity) s využitím velikosti prvků, tvarů a barev – prvky mající stejnou velikost, stejný tvar a barvu mohou vizuálně utvářet související skupinu.

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:

Princip podobnosti (The Law Of Similarity) s využitím barev i přes další odlišnosti, jako je například tvar.

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.

Příklad aplikace principu podobnosti (The Law of Similarity) – na levé straně jsou významově odlišná tlačítka, která ale vypadají stejně. Což pro vedení pozornosti není správně. Měli bychom je tedy odlišit tak, jak je například na pravé straně, kde je výrazné primární tlačítko.

Jak bylo zmíněno výše, pokud využijeme tří klíčové vizuální aspekty, tedy:

  • Velikosti,
  • Tvaru,
  • Barvě.
Příklad aplikace principu podobnosti (The Law of Similarity) u formuláře. Na levé straně můžeme vidět formulář, kde jsou formulářové prvky vizuálně stejné jako sekundární tlačítko. To může být dost matoucí. Měli bychom je tedy odlišit tak, jak je například na pravé straně, kde formulářové prvky vypadají jinak než ostatní prvky, ale samotné vypadají stejně.

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ší.

Princip blízkosti (The Law of Proximity) umožní vnímání prvků jako souvisejících díky jejich vzdálenosti, resp. blízkosti.
Princip blízkosti (The Law of Proximity) umožní vnímání prvků jako souvisejících díky jejich vzdálenosti, resp. blízkosti.

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.

Princip blízkosti (The Law of Proximity) umožní vnímání prvků jako souvisejících díky jejich vzdálenosti, resp. blízkosti i v případě jiného tvaru.
Princip blízkosti (The Law of Proximity) umožní vnímání prvků jako souvisejících díky jejich vzdálenosti, resp. blízkosti i v případě jiného tvaru.

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é).

Princip blízkosti (The Law of Proximity) umožní vnímání prvků jako souvisejících díky jejich vzdálenosti, resp. blízkosti i v případě jiného tvaru, ale také barvy.

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 tomto příkladu stránky vyhledávání, jak pole pro vyhledávání potvrdím?

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.

Lepší příklad toho, jak využít principu blízkosti na stránce pro vyhledávání.

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.

Ukázka “špatného zacházení” s pravidlem blízkosti (The Law of Proximity), kdy se snažíme na obrazovce ušetřit co nejvíce místa.

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ří.

Pokud chceme, aby lidé vnímali prvky jako související, spojme je dohromady, ale zároveň oddělme od těch, se kterými nesouvisí. Snadno tak (s využitím bílého místa) můžeme udělat skupiny prvků.

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.

Ukázka principu známosti/smysluplnosti (The Law of Familiarity/Meaningfulness) – složení několika objektů do nám známého tvaru vytváří vnímání jejich souvislosti.

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.

Princip společného směru (The Law of Common Fate) díky kterému vnímáme prvky jako související, pokud se hýbou 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.

Princip společného směru (The Law of Common Fate) díky kterému vnímáme prvky jako související, pokud se hýbou stejným směrem a rychlostí.

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).

Ukázka principu stejného pohybu (The Law of Common Fate) u obrázkové galerie, kde fotografie vypadají jako související nejen díky vizuální podobě, ale také díky stejnému směru a rychlosti pohybu.

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í.

Ukázka principu stejného pohybu (The Law of Common Fate), kdy nabídky pohybující se stejným směrem vzbuzují vnímání, že spolu souvisí.

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í.

Princip symetrie (The Law of Symmetry) umožní vnímat prvky jako související, pokud jsou součástí symetrické skupiny.
Princip symetrie (The Law of Symmetry) umožní vnímat prvky jako související, pokud jsou součástí symetrické skupiny. Na takové objekty se zároveň dobře dívá (a člověk je dobře vnímá díky jejich stabilitě a vyváženosti).

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ě.

Nesymetrická skupina prvků, které právě díky nesymetričnosti nemusí mozek vnímat jako související.

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.

Příklad využití Principu symetrie (The Law of Symmetry) na ukázce galerie obrázků. Layout je složený z dlaždic, kde každá dlaždice zabírá stejný prostor a na obě strany je vlastně galerie stejná (pouze motiv fotografie se liší).

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ž se podíváte na předchozí obrázek, můžete vidět, že pokud položky v navigaci nejsou symetrické, působí to zvláštně a nevyváženě. Což není v případě, kdy mají položky stejnou důležitost, zrovna vhodné.

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í.

Když se podíváte na grid v rámci layoutu, uvidíte vlastně jistou snahu zajistit v rámci rozložení prvků symetričnost.

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é.

Princip návaznosti (The Law of Continuity) asi nejlépe demonstrujeme propojením různých prvků čárou.

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í.

Princip návaznosti (The Law of Continuity) je možné ukázat i tak, že prvky jdou za sebou v určité souvislosti a vytvářejí tak dojem, že jsou nějak spojené.

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:

Princip návaznosti (The Law of Continuity) tak, jak jej někdy můžete vidět. Nějaké vysvětlení co udělat a šipka, která vás navede.

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.

Princip návaznosti (The Law of Continuity) funguje právě například u posunovatelné galerie obrázků, kdy jdou fotografie za sebou a fungují jako jeden celek.

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ří.
Příklady prvků uživatelského rozhraní, u kterých můžete princip návaznosti vidět v akci.

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.

Princip uzavření (The Principle of Closure) funguje tak, že lidská mysl si doplní chybějící místa a objekt pak vnímáme jako ucelený.

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.

Asi nejznámější příklady aplikace principu uzavření (The Principle of Closure) jsou tato loga společností NBC, WWF a Adobe. Díky tomu mohou být jednoduchá, ale stále nést doplňující detail.

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ů.

Příklad ikon, u kterých můžeme vidět princip uzavření v akci. Ikonky obsahují nekompletní objekty, naše mysl se je ale stále snaží doplnit a ucelit.

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.

Příklad principu uzavření (The Principle of Closure) z okna pro import dat ze souboru v Google Spreadsheets. Oblast pro nahrání souboru je vyznačená čárkovaně (místo plné čáry), což vypadá mnohem “jemněji”, ale naše mysl stále oblast bere jako celek.

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í.

Princip popředí a pozadí (Figure/Ground principle) je možné ukázat jako objekty s různým kontrastem, kdy je vnímáme na různé úrovni a dokážeme je od sebe odlišit.

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:

Známý příklad prezentace fungování Gestalt principů od dánského psychologa Edgara Rubina. Člověk obyčejně vidí dvě možnosti – dvě tváře a nebo vázu. Záleží na tom, kam soustředí svou pozornost. Zdroj: https://www.toptal.com/designers/ui/gestalt-principles-of-design

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.

Příklad využití principu popředí a pozadí (Figure/Ground) kdy pozornost vedeme na určitý prvek a ostatní části upozadíme.

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.

Prezentace produktů na stránce Apple často funguje s využitím principu Figure/Ground.

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.

Princip společného místa (The Principle of Common Region) umožní vnímání prvků jako souvisejících pokud je jasně propojíme dohromady čárou, rámcem, atp.

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é.

Princip společného místa (The Principle of Common Region) umožní propojením prvků navodit jejich souvislost, i když nemají stejné vizuální atributy.

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í.

Ukázka použití principu propojení prvků – využití u vizualizace dat.

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.

Jak můžete vidět, posuvník hlasitosti také obsahuje princip propojení prvků.

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ší.

Princip společného místa (The Principle of Common Region) umožní vnímání prvků jako souvisejících díky “uzavření” do společného prostoru.

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.

Princip společného místa (The Principle of Common Region) je silnější co se týče vnímání, než ostatní principy – třeba blízkosti nebo podobnosti.

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ě.
Princip společného místa (The Principle of Common Region) je možné aplikovat různým způsobem.

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ět na obrázku, uzavřením prvků od určitého místa je vnímáme jako související a zároveň nesouvisející se zbytkem.

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.

Ukázka využití principu společného místa na stránce nabídek práce na sociální sítí Linkedin.

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.

Princip synchronizace (The Principle of Synchrony), kdy prvky mění svou podobu a proto vypadají jako prvky stejné skupiny.

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.

Princip synchronizace (The Principle of Synchrony), kdy prvky mění svou podobu a proto vypadají jako prvky stejné skupiny.

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.

Ukázka principu synchronizace (The Law of Synchrony). Jak můžete vidět, prvky, které se objeví ve stejný moment vnímáme jako součást stejné skupiny.

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.

Zdroje

Napsat komentář