O Gestalt principech jste určitě v souvislosti s UI designem slyšeli. Pojďte zjistit, jak cíleně používat princip blízkosti. Přečtěte si o 2 metodách, které vám pomohou snadněji rozmisťovat prvky a určovat vztahy mezi nimi.
Princip blízkosti je jeden ze zákonů Gestalt psychologie. Je to velmi intuitivní, ale v UI designu často podceňovaný princip, který designéři používají spíše nahodile než se záměrem. Když se naučíte cíleně princip používat, budete v návrhu sebejistější a získáte i argumenty, proč jsou některé prvky v designu vzdálené a seřazené tak, jak jsou.
Co jsou Gestalt principy?
Gestalt [čteno se „š“] se dá v němčině přeložit jako tvar, podoba nebo forma. Představitelé Gestalt psychologie se na počátku 20. století začali zabývat tím, že jednotlivé prvky vnímáme jako organizované celky.
Použitím Gestalt principů dosáhneme toho, že uživatelské rozhraní má dobrou strukturu, je přehledné a intuitivní. Uživatelé tak rychle a efektivně zvládají rozluštit hierarchii informací.
Princip blízkosti (Law of Proximity)
Podívejme se na jeden z Gestalt principů. Princip blízkosti nám říká, že prvky, které jsou blízko sobě, mají tendenci nějakým způsobem spolu souviset. Prvky, které jsou blízko k sobě tvoří skupinu a vnímáme je tak, že sdílí podobné vlastnosti a rysy.
V praxi pak při správně navrženém UI snadno rozpoznáme, které informace a prvky spolu souvisí a dokážeme je snadno, rychle a efektivně prohlížet očima, navzájem rozpoznávat a plnit požadované cíle.
Podívejme se na reálné příklady užití principu blízkosti.
Příklad: Airbnb
Příklad: Netflix
Jak určovat vzdálenosti mezi prvky při návrhu UI
Při navrhování webu nebo aplikace řešíte, jak daleko nebo blízko mají být prvky od sebe. V souvislosti s principem blízkosti vás bude zajímat klíčové slovo white space.
3 pravidla pro správné určení vzdálenosti prvků
- Prvky, které máme vnímat, že patří k sobě, musí být dostatečně blízko.
- Prvky, které máme vnímat, že patří do odlišných skupin, musí být dostatečně daleko od sebe.
- Vyhněte se situaci „mezi“ – tedy situaci, kdy prvek není dostatečně blízko ani daleko od jiného prvku. Vztah mezi prvky musí být na první pohled zřejmý.
Používejte odsazovače (spacers)
Když otevřete grafický editor a začnete navrhovat objekty na plátně, je dobré určovat vzdálenosti mezi nimi pomoci odsazovačů. Odsazovače jsou předem určené velikosti definované ideálně na základě modulární stupnice.
Modulární stupnice je řada hodnot, kdy každá následující hodnota je odvozena od předchozí vynásobením určitým poměrem. Taková stupnice se pak využívá i v nastavení typografie.
Nejčastěji se při návrhu webu nebo aplikace využívá 8–20 odsazovačů. Co to znamená? Při rozhodování, jak umístit prvky daleko od sebe, nemáte nekonečno možností, ale pouze několik. Tím si snížíte možnosti při rozhodování, jak prvek umístit daleko. Návrh tak bude mnohem rychlejší.
Při určování vzdálenosti dvou prvků vyzkoušejte nejprve jeden odsazovač a podle vizuálního výsledku se rozhodněte, zda použijete menší či větší.
Představte si napínající se gumičku
Představte si gumičku, kterou zaháknete o pevný bod A. Na druhý konec potom přichytíte kuličku, kterou začnete pomalu natahovat k pevnému bodu B. Gumička se začne napínat a klást odpor. Po celou dobu, co kuličku vzdalujete, cítíte, že kulička patří k bodu A. V jednu chvíli však přijde zlom. Gumička nezvládne pnutí a praskne. Kulička vystřelí směrem k bodu B, kam jste ji napínali. Teď je naprosto zřejmé, že kulička už k bodu A nepatří.
Stejné je to s umisťováním prvků v uživatelském rozhraní. Mezi prvky si zkuste představit gumičku, která se napíná. Jakmile začnete zvětšovat vzdálenost mezi prvky, v jednu chvíli zjistíte, že se prvek od jednoho vizuálně odpojí a začnete vnímat to, jak se připojuje k jinému.
Shrnutí Gestalt principu blízkosti
Snažte se prvky skládat do skupin. Pokud prvek neexistuje čistě sám o sobě jako samostatná jednotka, snažte se ho vizuálně přiřadit k jiné skupině prvků. Neměl by v prostoru „plavat“ osamocen. Ze skupin pak tvořte další skupiny.
Uživatelské rozhraní, které respektuje princip blízkosti a pracuje se skupinami prvků, je přehledné, vizuálně atraktivnější, intuitivní a struktura informací se dá jednodušeji rozluštit. Tím uživatele rozhraním provedete a usnadníte mu splnit jeho cíle.
Když si tento princip vštípíte do hlavy a budete jej používat aktivně, podaří se vám tvořit uživatelská rozhraní, která jsou nejen pochopitelnější a přehlednější, ale zároveň budou vypadat o dost lépe.
.png){kind=icon}