Gestalt principy ve webdesignu

Začínající designér v rámci tvůrčího procesu možná přehlédne důležitost psychologie. Přitom relativně jednoduché principy, které z ní vycházejí, jsou pro start designérské činnosti skvělým vodítkem. Ve webovém designu se tyto principy uplatňují hlavně v oblasti uživatelského rozhraní (UI), které pomáhá řídit vizuální vnímání a chování návštěvníka stránky.

Co je vlastně Gestalt?

Na jedné straně německé slovo, které znamená formu, na straně druhé psychologický koncept, který v zásadě vysvětluje, jak člověk interpretuje realitu. Lidé informace přijaté svými smysly seskupují a snaží se (ať už vědomě, nebo nevědomě) jim dát nějaký jasný a srozumitelný význam.

Gestalt vznikl ve 40. letech minulého století. Původně šlo o humanistický, prožitkový směr v psychoterapii, který definoval sadu samostatných principů vztahu člověka k světu. Dneska už je to metoda do jisté míry překonaná, používaná pouze v omezené míře.

Pro design jsou ale tyto principy neustále platné a přínosné. Gestalt se totiž zaměřoval na tvarové elementy a s nimi související prožívání a vyjadřování emocí — právě to je pro design zcela zásadní.

Pojďme se podívat, jak jednotlivé principy snadno využít při návrhu webového rozhraní:

Princip symetrie

1. Symetrické prvky vnímáme jako součásti, které k sobě patří, bez ohledu na jejich vzdálenost. Dávají nám pocit pořádku a stability.
2. Působí na nás jednoduše, harmonicky a vizuálně příjemně.
3. Jde tedy o užitečný princip pro rychlou a efektivní komunikaci. Symetrie nám pomáhá soustředit se na to, co je důležité.
4. Naopak asymetrické kompozice dodávají designu dynamiku. Vyvolávají vzrušení a aktivitu. Když se s nimi nepracuje správně, spíše uživatele znervózňují a podněcují agresivitu.

Princip blízkosti

1. Prvky uspořádané blízko vnímáme jako více související než ty, které jsou od sebe dál.
2. V designu uživatelského rozhraní se tento princip využívá pro seskupování podobných informací, organizaci obsahu a deklaraci rozvržení. Jeho správné použití má pozitivní dopad na vizuální komunikaci a uživatelskou zkušenost.
3. Položky, které souvisejí, by proto měly zůstat blízko u sebe, a nesouvisející položky zase dál.
4. ZÁSADNÍ roli hraje také prázdný prostor. Vytváří totiž kontrast vedoucí oči uživatelů požadovaným směrem.

Princip podobnosti

1. Prvky, které mají podobné vizuální vlastnosti, vnímáme jako související, jako záměrně seskupené nebo dokonce jako vzor. Přirozeně si pak myslíme, že slouží stejnému účelu.
2. Podobnost nám může pomoct při organizování a klasifikaci objektů ve skupině a jejich propojení s konkrétním významem nebo funkcí. V designu ji realizujeme zejména barvou, velikostí, tvarem, rozměrem nebo orientací prvků.
3. Zároveň pomáhá od sebe prvky odlišovat a vytvářet kontrast. Tím, že podobnost porušíme, uživatele jednoduše upozorníme na námi vybranou část obsahu.

Princip pokračování

1. Prvky uspořádané v linii nebo v křivce vnímáme jako související víc než ty, které jsou seskupeny neuspořádaně.
2. Čím hladší linie jsou, tím více je vidíme jako jednotný tvar; naše mysl totiž dává přednost cestě nejmenšího odporu. Typickým použitím je prosté zarovnání, díky kterému naše oči stránkou snadno proplouvají.
3. Narušení kontinuity může signalizovat konec oddílu a upozorňuje na nový obsah.

Princip společné oblasti (podobný principu blízkosti)

1. Prvky umístěné ve stejné oblasti vnímáme jak související. To nám pomáhá při seskupování informací a organizaci obsahu.
2. Tento princip na druhé straně pomáhá i oddělení obsahu nebo vytvoření CTA. Akcentuje hierarchii, zvyšuje čitelnosti stránky a pomáhá při propagaci informací (jejich přenesení do popředí).
3. Použitím čáry, barvy, tvaru a stínu dosáhneme toho, že i větší skupiny prvků tvoří jednotné celky.

Princip společného osudu

1. Pokud se prvky pohybují stejným směrem, stejnou rychlostí nebo se společně mění, vnímáme je jako navzájem příbuzné. Bez ohledu na to, jak daleko od sebe jsou nebo jak odlišně vypadají.
2. Stejný efekt nastává, i když jejich pohyb primárně vychází z pohybu jiných vizuálních prvků.
3. Princip společného osudu nám pomůže se seskupením k sobě patřících informací a s propojením akce a reakce.
4. Narušení synchronizovaného pak pomáhá upoutat pozornost uživatelů a nasměrovat ji na konkrétní prvek nebo funkci.

Sečteno podtrženo, gestalt už sice pamatuje svoje, ale osvojit si jeho principy je pro webdesignera je pořád užitečné.