6 zasad pychologii Gestaltu, dzięki którym interfejsy są intuicyjne

Próbowałeś kiedyś narysować cokolwiek lewą ręką (jako praworęczny) i w dodatku do góry nogami?
Ja próbowałem.

Takie „doświadczenia artystyczne” wykonują tatusiowie, kiedy siedzą naprzeciw swoich córek i używają lewej ręki do odwrócenia uwagi dziecka od łyżki z zupą, trzymanej w prawej. Życie.

– Co to jest? – pyta tata wkazując na niebieski bohomaz skreślony na kartce zeszytu?
– Koooo – odpowiada w swoim języku dziecko, słusznie rozpoznając kotka.

Zastanawiałem się, jak to jest…
Jak to jest, że już taki mały człowiek widząc przeróżne reprezentacje wizualne kota – od realistycznych, przez kolorowe rysunki, po koślawe mazgroły – potrafi bezbłędnie rozpoznać to zwierzę. Dziecko (ani dorosły) nie wymienia poszczególnych elementów rysunku, ani tym bardziej nie nazywa figur geometrycznych które te elementy przypominają. Czyli nie zachodzi tu żaden proces analizy (a przynajmniej nie uświadomiony), tylko przeciwnie – błyskawiczna synteza.

Wygląda na to, że nasze mózgi dopasowują widziane kształty i ich wzajemne relacje do wzorca, który już znają. Jest to kwestia sposobu w jaki postrzegamy rzeczywistość. Percepcji.

Na temat percepcji i opisanego przeze mnie zjawiska mówi m.in. psychologia postaci – zwana też psychologią Gestalt (niem. postać, kształt, figura), której podstawy powstały już w latach 20. ubiegłego wieku, za sprawą trzech niemieckich psychologów: Wertheimera, Köhlera i Koffki.

Wnioski jakie wyciągnli uczeni ze swoich badań, głosiły, że nasze postrzeganie rzeczywistości zawsze zmierza w kierunku rozpoznania struktury w jakiś sposób zorganizowanej. Idea Gestaltu zawiera się bowiem w zdaniu: „Całość to coś innego niż suma jej elementów”.

Psychologowie Gestaltu opracowali kilka zasad opisujących w jaki sposób ludzkie mózgi analizują to na co patrzymy. Te zasady po dziś dzień stanowią doskonałe wytyczne dla wszytkich zajmujących się projektowaniem graficznym i tworzeniem interfejsów (w tym stron internetowych).

1. Zasada podobieństwa

Zasada podobieństwa mówi o tym, że mamy tendencję grupować obiekty, które są do siebie w jakiś sposób podobne – np. pod względem koloru, kształtu, wielkości czy faktury.

Im bardziej do siebie podobne, tym oceniamy je jako bardziej spójne. Każde przełamanie wzoru podobieństwa rzuca się w oczy i jest oczywistym sposobem na podkreślenie odmienności wybranego elementu.

Zastosowanie identycznych boksów, ustawionych w równych szeregach, sugeruje, że mamy do czynienia z zestawem równorzędnych elemetów.
Boks, który częściowo przełamuje strukturę rzuca się w oczy (w ten sposób przedstawiamy np. elementy aktywne strony)

2. Zasada kontynuacji

Zasada kontynuacji dotyczy prostego faktu, że oko ludzkie zauważa linie utworzone nawet z różniących się obiektów. Zauważa je i podąża w kierunkach, które wytyczają.

W praktyce możemy wykorzystać tę prawidłowość, aby poprowadzić wzrok użytkownika np. przez kolejne etapy procesu zakupowego w sklepie internetowym.

Na przestawionej grafice nie ma żadnych linii, nasze oko jest jednak wyraźnie prowadzone od lewej do prawej, by zatrzymać się na przycisku.

3. Zasada domknięcia

Mamy do czynienia z zasadą domknięcia wtedy, kiedy patrzymy na figury lub znaki, które są niekompletne lub ich wewnętrzna przestrzeń nie jest zamknięta. Nasz mózg ma wóczas tendencję do uzupełnienia brakującej części, tworząc w naszych głowach znane nam kształty.

W praktyce mechanizm ten jest najczęściej wykorzystywany przy projektowaniu piktogramów lub znaków graficznych.
Dzięki temu nie muszą one być szczegółowe ani dosłowne, a nadal pozostają zrozumiałe.

Mimo, że prostokąty ani okręgi nie są pełnymi, zamknietymi figurami, to nie mamy problemu ze zidentyfikowaniem
tych obiektów jako dwa niezależne elementy w ramkach z piktogramami po lewej stronie opisu.

4. Zasada bliskości

Zasada bliskości mówi o tym, że elementy znajdujące się blisko siebie traktujemy jako powiązane ze sobą lub jako jedną całość.
Tę regułę stosuje się we wszystkich sytuacjach w których chcemy zgrupować obiekty różniące się pod względem koloru, kształtu, wielkości czy faktury.

Dostatecznie bliskie umiejsowienie opisów nad polami formularza pozwala bez trudu rozpoznać do których pozycji one się odnoszą.
Znajdujący się po prawej stronie opis intuicyjnie powiążemy ze znajdującym się tuż obok obrazkiem, a nie z wyraźnie odsuniętym formularzem.

5. Zasada figura/tło

Nasz mózg ma nieodpartą potrzebę odseparowania obiektów od otaczającego je tła. Klasycznym przykładem obrazującym to zjawisko jest obrazek na którym możemy zobaczyć kielich lub zwrócone do siebie dwa profile twarzy – w zależności od tego czy sfokusujemy swoją uwagę na obiekcie czarnym traktując jako tło obiekt biały, czy też odwrotnie.

From Wikimedia Commons, the free media repository

Zasadę figurę/tło często stosuje się w projektach logo, ale często znajduje zastosowanie w wszystkich kreacjach, w których wykorzystuje się przestrzeń negatywową do przekazania komunikatu.

Zastosowanie tła i przestrzeni negatywowej w przedstawionym przykładzie, pozwala skierować uwagę użytkownika
z lewej strony na prawą, sugerując powiązania pomiędzy tymi elementami, a równocześnie wizualnie je rozróżniając.

6. Zasada symetrii

Nasz mózg lubi symetrię i porządek. Wszystko co niesymetryczne i nieuporządkowane, sprawia, że nasz mózg zaczyna pracować intensywniej, próbując uporządkować bałagan lub znaleźć brakujący element.

Jeśli interfejs nie jest zaprojektowany harmonijnie, użytkownik zwyczajnie traci czas próbując go ogarnąć, zamiast koncentrować się na naszych komunikatach lub oferowanych funkcjonalnościach.

Jednym słowem – wszelkie odstepstwa od symetrii i porządku powinny być uzasadnione.

A jakie są Twoje doświadczenia z zasadami Gestaltu?
Może przychodzi Ci do głowy przykład strony, na której ewidentnie o którejś z zasad zapomniano?
Podziel się zostawiając komentarz!