Gestalt princip blízkosti v UI designu: Jak ho používá Airbnb nebo Netflix?

Naučte se při návrhu webu nebo aplikace cíleně používat Gestalt princip blízkosti (Law of Proximity). Podívejte se na reálné ukázky, jak s principem pracují známé weby.

Gestalt princip blízkosti v UI designu: Jak ho používá Airbnb nebo Netflix?
Lukáš Augusta
UI/UX designér

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.

Dozvíte se

  • Co je to Gestalt princip blízkosti (Law of Proximity)?
  • Jak s principem blízkosti pracují weby Airbnb nebo Netflix?
  • Jak správně určovat vzdálenosti mezi prvky pomocí odsazovačů?
  • Co je to „gumičková“ metoda?

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ů

  1. Prvky, které máme vnímat, že patří k sobě, musí být dostatečně blízko.
  2. Prvky, které máme vnímat, že patří do odlišných skupin, musí být dostatečně daleko od sebe.
  3. 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.

→ Připojte se k 400+ odběratelům lekcí. Přínosný a hodnotný obsah. Bez spamu. Odhlášení kdykoliv.

south

Cvičení

  1. Otevřete si libovolný web a zkuste se zaměřit na princip blízkosti. Které prvky tvoří skupiny? Najdete prostor ke zlepšení pomocí principu blízkosti? Které prvky by se daly přiblížit nebo naopak oddálit od jiných, aby to zlepšilo design?
  2. Až příště otevřete grafický editor a budete navrhovat web nebo aplikaci, zkuste si mezi prvky představovat gumičku a „pnutí“ mezi prvky. Společně s použitím odsazovačů vám metoda pomůže rozhodovat se, jak umísťovat prvky daleko od sebe.

Autor lekce

Lukáš Augusta
UI/UX designér

Jsem web designér, UI/UX designér a tvůrce na volné noze působící v Česku. Navrhuji weby, e‑shopy, webové a mobilní aplikace.

✍️ Napište článek. A zlepšete povědomí o vašem jméně a značce

Chcete se stát autorem Designui? Nově můžete napsat článek i vy! Zjistěte, co můžete získat…

Mentoring pro UI designéry

Naučte se zlepšit homepage nebo landing page vašeho webu

Novinka
Vytvořte si web bez nutnosti kódovat

Vytvořte si web
bez nutnosti kódovat