Zasady Gestalt w ujęciu UX i UI. Psychologia w projektowaniu

W poprzednim artykule przedstawiłam postać doktora Nielsena oraz jego wpływ na rozwój User Experience i projektowanie interfejsów. Dziś przedstawię kolejny kanon, bez którego użyteczne projektowanie nie ma racji bytu. Gestalt. To zasady, które mówią o psychologii naszego mózgu i organizacji danych na bodźce. “Gestalt” pochodzi z języka niemieckiego i oznacza formę lub postać. Zasady Gestalt są zatem psychologią postaci lub formą postrzegania przez człowieka. Zostały zapoczątkowane przez Maxa Wertheimera, Kurta Koffka oraz Wolfganga Kohlera z Gestalt Therapy Institute w Kolonii. Cała idea Gestalt mówi, że całość jest czymś więcej niż tylko sumą części, a dostrzeżenie i wyróżnienie elementów składowych zachodzi dopiero po pewnym czasie.

Jako projektanci UXUI powinniśmy bacznie analizować swój proces twórczy i zwracać uwagę na nierozdzielność projektu w ujęciu doświadczeń użytkownika i wyglądu interfejsu. Zasady Gestalt zawierają w sobie zbiór wrodzonych mechanizmów percepcyjnych u człowieka, więc dostosowując się do nich, zaprojektujemy proste do przyswojenia interfejsy i intuicyjne rozwiązania biznesowe. 

Zasada bliskości

“Obiekty, które są nie daleko lub blisko siebie, mają tendencję do grupowania się razem”

Grafika przedstawiająca ustawienie elementów w zgodzie z zasadą bliskości, źródło: rekinysukcesu.pl

1. Obiekty, które są blisko mogą łatwo nawiązać relację ze sobą. Powoduje to grupowanie się i oddziaływanie na siebie. 
2. Uważa się, że elementy znajdujące się blisko siebie mają podobną funkcjonalność lub podobne cechy. Zazwyczaj dotyczą tej samej funkcjonalności.
3. Obiekty, które są blisko siebie, pomagają użytkownikom szybciej i wydajniej rozumieć i układać informacje. Nawet jeśli nie ma wyraźnych grup, podświadomie zostają one pogrupowane.

Zasada bliskości mówi o grupowaniu obiektów – w jeden duży blok lub kilka mniejszych. Tworzenie interfejsów podzielonych na kilka sekcji ułatwia użytkownikowi wychwycić najważniejsze informacje (np. w tabeli) lub akcje. Tworzenie grup odbywa się za pomocą tworzenia odpowiednich przestrzeni między elementami. Mózg będzie grupował elementy nawet bez wyraźnej granicy (np. stworzonej przez linię). Grupować można również stosując akapity w tekście. Projektowanie dużych świateł w interfejsie ułatwia userowi oddzielenie bloków informacyjnych – dystans sugeruje związek pomiędzy elementami. Zasadę tę można stosować np. przy ułożeniu menu lub kafli z call-to-action, gdzie bliskość elementów będzie wskazywała na całokształt funkcji. Podobnie ma się rzecz z osadzonymi obok siebie buttonami, gdzie zostaną postrzegane jako zbiór o podobnej funkcji. Ważne jest by odległości między komponentami, czy tekstem były spójne z design system lub ogólnie przyjętymi zasadami projektowymi w danym projekcie.

Wpływ odległości między elementami interfejsu, źródło: ux-info.pl

Na powyższej grafice można zauważyć znaczący wpływ odległości między elementami interfejsu – z prawej strony nasz mózg automatycznie wyróżnia grupy elementów.

Zasada podobieństwa

“Ludzkie oko ma tendencję do postrzegania podobnych elementów w projekcie jako pełnego obrazu, kształtu lub grupy, nawet jeśli te elementy są rozdzielone”

Zasada podobieństwa, a rozmieszczenie w interfejsie, źródło: rekinysukcesu.pl

1. Elementy, które są podobne wizualnie, będą postrzegane jako powiązane. Mowa tutaj o ramkach, buttonach, grafikach.
2. Kolor, kształt, rozmiar, orientacja i ruch – mogą sygnalizować, że elementy należą do tej samej grupy. Może to też wskazywać na wspólne znaczenie lub funkcjonalność.
3. Linki oraz systemy nawigacji powinny różnić się wizualnie od elementów tekstowych. Używając jednolitego systemu również grupujemy.

Zastosowanie tej zasady można zaobserwować w projektowaniu buttonów lub sekcji ze zdjęciami. Podobnie, jak zasada bliskości, dzięki podobnemu wyglądowi mówią użytkownikowi o podobnym działaniu, np. inny kolor tekstu dla hiperłączy, ale różniące się od siebie elementy ułożone obok nie zostaną postrzegane jako inny zbiór. W zasadzie podobieństwa główny nacisk kładzie się na spójność, która najmocniej wpływa na percepcję postrzegania. Kolejnym ważnym elementem jest kolor, np. rzeczy pozytywne rozpoznajemy po kolorze zielonym, a negatywne po kolorze czerwonym — głównie ma to zastosowanie przy projektowaniu call-to-action. Stosowanie tej zasady ułatwia poruszanie się oraz zrozumienie działań na stronie lub aplikacji.

Na grafice segregacja elementów podobnych do siebie wizualnie oraz finkcjonalnie, źródło: blog.tubikstudio.com

Zasada kontynuacji

“Elementy, które są połączone wizualnie, są postrzegane jako bardziej powiązane niż elementy bez połączenia”

Kontynuacja w działaniu powinna iść w określną stronę, źródło: rekinysukcesu.pl

1. Grupuj funkcje o podobnym charakterze, aby wizualnie były połączone. Można to zrobić za pomocą kolorów, ramek, linii — grupując w sekcje.
2. Alternatywnym i bezpośrednim rozwiązaniem łączenia jest zastosowanie linii lub strzałek z jednego elementu do drugiego. Wtedy też mówimy o grupowaniu.
3. Używając jednolitego połączenia, pokazujemy kontekst lub podkreślamy związek między podobnymi rzeczami. Jest to celowe zastosowanie wizualnego grupowania.

Bazując na tej zasadzie, możemy pokierować użytkownika w pożądanym przez nas kierunku. Dobrym przykładem są używane w interfejsach listy, gdzie user przechodzi wzrokiem z jednego punktu do kolejnego — aż do celu. Ten mechanizm sprawdza się również przy procesie rejestracji lub zakupów, gdzie wzrok będzie podążał za kolejnymi etapami. Ciąg kropek np. pod zbiorem zdjęć lub ofert, jest odbierany jako linia, która ma swój początek oraz koniec, a nie jako niezależny od siebie zbiór elementów. Zasada kontynuacji najlepiej się sprawdzi w projektowaniu wizualizacji procesów. Użytkownik będzie mógł płynnie przejść przez etapy, bo będzie znał ich dystans oraz czas. Zasada ta to głównie podpowiedź, która będzie instrukcją dla usera.

Powyższy proces rejestracji pokazuje użytkownikowi, ile kroków należy wykonać, aby dokończyć rejestrację oraz pola niezbędne do wypełnienia. Źródło: amazseas.blogspot.com

Zasada zamknięcia

“Użytkownik patrzy na figury lub znaki, które są niekompletne, a mózg automatycznie wypełnia luki”

Nasza percepcja pozwala nam widzieć dwa trójkąty i trzy koła, a nie zbiór linii i nieregularnych kształtów, źródło: rekinysukcesu.pl

1. Obiekty są postrzegane jako całokształt, nawet gdy nie są kompletne i są widoczne luki. Mózg sam wypełnia luki na podstawie wcześniejszych doświadczeń.
2. Użytkownicy muszą wiedzieć, jaki jest status systemu i wykonywanych czynności. Możemy tutaj mówić np. o komunikacie ładowania kolejnej sekcji —  widzimy, czy proces się przetwarza.

Każdy wskaźnik ładowania został zaprojektowany w myśl tej zasady. Sugeruje on proces, który jest aktualnie w toku, co powoduje zrozumienie użytkownika i spokój, że akcja nadal trwa. Ludzki mózg sprowadza “niekompletne figury” do rozpoznawalnych, dzięki czemu zastępuje chaos znanym porządkiem. Zastosowanie tej zasady możemy zauważyć również w projektowaniu ikon, które są proste, a jednak nadal czytelne dla użytkownika.

Powyżej widzimy proste rozwiązania ukazujące proces w toku. Źródło: uxdesign.cc

Tutaj LinkedIn wyszedł poza ramy jednej ikony i przedstawił ładowanie zasobów, jako szkielet (który używamy w projektowaniu UX), który sugeruje, gdzie zostaną podstawione treści. Źródło: uxdesign.cc

Zasada symetrii

“Użytkownik interpretuje skomplikowane sceny tak, aby redukować ich złożoność – umysł percepcyjnie łączy i tworzy spójny kształt”

Symetria to używanie np. jednakowych wielkości w grafikach, tekstach (ich długości) oraz rozmieszczania elementów, żródło: rekinysukcesu.pl

1. Elementy, które są ułożone symetrycznie, pomagają skanować zawartość i rozpoznawać wcześniej już znane wzorce. Lepiej układać interfejs małymi sekcjami, ale za to wizualnie podobnymi do siebie.
2. Symetria pozwala skupić się na tym, co jest istotne. Mówimy tutaj o wyróżnieniu najważniejszej funkcji w danej sekcji.

Dla użytkownika symetria oznacza porządek i ład. Treści, które są chaotycznie zaprojektowane na stronie, powodują uczucie zagubienia usera i skutkuje to najczęściej opuszczeniem strony. Percepcja postrzegania dąży do porządku, który sugeruje symetria wykorzystywana w projektowaniu interfejsów. O symetrii mówimy nie tylko wtedy, kiedy mamy rozłożone elementy względem siebie tak samo, ale również możemy zauważyć symetrię w tabelach, gdzie zamiast linii, do separacji danych, użyjemy naprzemiennych kolorów. Zasada symetrii równie dobrze sprawdzi się przy wyrównywaniu tekstów i nagłówków względem elementów graficznych. Pamiętajmy, że strony asymetryczne powodują dłuższe reakcje użytkownika i są mało intuicyjne.

Na grafice widzimy podział informacji (tekstów) oraz elementów wizualnych, źródło: ux360.design

Zasada losu

“Kiedy elementy poruszają się w tym samym kierunku, postrzegane są jako część tej samej grupy”

Dążąc do celu wszelkie animowane akcje powinny, jak ptaki w kluczu, poruszać się wspólnie w jednym kierunku, źródło: rekinysukcesu.pl

1. Każda animacja na stronie powinna być projektowana według “wspólnego losu”. Dzięki temu dajemy użytkownikowi podążanie wzrokiem we właściwym kierunku.
2. “Wspólny los” to np. rozwijanie menu, przejście między zdjęciami, czy publikacjami.

Projektując na stronie np. kilka zbiorów grafik, które można obejrzeć (np. w galeriach), ważne, aby przemieszczały się w jednym kierunku, najczęściej jest to kierunek w prawo lub góra-dół. Podobnie jest z paskami postępu, którego początek zaczyna się z lewej, a kończy na prawej stronie. Ludzki mózg jest przyzwyczajony do czytania od lewej do prawej. Natomiast w krajach, gdzie sytuacja jest odwrotna, projektowanie, na podstawie o tę zasadę, powinno odbywać się zgodnie z doświadczeniami użytkownika, czyli od prawej do lewej.

Na grafice przedstawiona galeria filtrów porusza się w jednym kierunku – od lewej do prawej. Natomiast kolejna pokazuje użytkowników i ich galerie, które możemy przeglądać góra-dół, źródło: dribbble.com

Zasada figury

“Ludzkie oko jest w stanie rozdzielić obiekt na różne plany skupienia”

Dzięki kolorom ludzki mózg rozpoznaje który element jest bliżej, a który dalej, źródło: blog.edugrafia.pl

1. Zasadę używamy za każdym razem przy projektowaniu pop-upów; sekcji, które zamykamy w konkretnej figurze. Są to elementy, które zostają na siebie nałożone.
2. Oddzielenie figur można stosować np. za pomocą kolorów, cieni, czy linii. Działamy na zasadzie kontrastu, aby wyróżnić to, co jest dla nas najważniejsze.

Ludzkie oko ma tendencję do postrzegania elementów na pierwszym planie lub w tle. Aby skupić uwagę użytkownika na najważniejszych obiektach, powinniśmy zrobić je pierwszoplanowe — używając do tego odpowiedniej kolorystyki, ostrości oraz kontrastu. Najprostszym przykładem użycia tej zasady są pop-up’y, które służą konfirmacji działań lub są kolejnym krokiem w danym procesie. Pozwalają użytkownikowi skupić uwagę tylko i wyłącznie na zagadnieniu, które wymaga reakcji.

Widzimy, że istotna informacja została wyróżniona i wymaga akcji ze strony użytkownika, źródło: dribbble.com

Zasada (wspólnego) regionu

“Elementy są zwykle postrzegane jako grupy, jeśli dzielą obszar o wyraźnie określonej granicy”

Grupowanie elementów za pomocą koloru (boxu) oraz obramowania, źródło: blog.edugrafia.pl

1. Wspólny obszar tworzy przejrzystą strukturę i pomaga użytkownikom szybko i skutecznie zrozumieć relacje między elementami i sekcjami. Pozwala to na odróżnienie ważnych elementów.
2. Obramowanie wokół elementu lub grupy to najprostszy sposób na utworzenie wspólnego obszaru. Linia i obramowanie to tylko jedne z rozwiązań.
3. Wspólny obszar można też utworzyć, nadając tło za elementem lub grupą elementów. Zagłębiając się w projektowanie, można znaleźć wiele rozwiązań.

Zasada wspólnego regionu nawiązuje do definiowania podobnych informacji, funkcji, celów, ról, czy znaczeń. Nadaje to treściom klarowny ton — użytkownik, patrząc na uporządkowane elementy, wie, które są najważniejsze, a które mniej znaczące. Stosując tę zasadę, możemy nieco wyjść poza ramy unifikacji interfejsu, gdyż można tworzyć sekcje w różnych kolorach, czy kształtach, a doświadczenie użytkownika będzie pozytywne. Wspólne regiony w interfejsach to np. podsumowanie zamówienia, które ma sporo danych do potwierdzenia. Zamiast przedstawiać userowi szereg informacji jedna pod drugą (czyli tworzymy listę) możemy z powodzeniem stworzyć sekcje, które będą obejmować osobno dane zamawiającego, osobno informacje o produkcie, osobno treści dotyczące zwrotu i reklamacji. Dzięki temu zyskamy schludny i czytelny interfejs, który jest przyjazny, dla użytkownika.

Powyższa grafika pokazuje interfejs bez zastosowania zasady wspólnego regionu oraz po jej zastosowaniu. Źródło: blog.edugrafia.pl

Zasada okresowości

“Elementy, które pojawiają się wiele razy w podobnych odległościach, są postrzegane jako powiązane”

Zasada okresowości pozana na zasadzie wyróżnienia kolorem, źródło: blog.edugrafia.pl

1. Dzięki okresowości ułatwiamy użytkownikom rozpoznanie wzorców projektowych w interfejsie. Nadajemy rytm naszym sekcjom.
2. Rytm okresowości rozpoznawalny jest dzięki wyróżniającemu się elementowi. Może to być nagłówek, linia, kolor, czy obszar sekcji, który pojawia się w określonym dystansie.

Zasada okresowości pomaga użytkownikom rozpoznawać wzorce projektowe w interfejsie. Zasada ta jest stosowana np. w zakładkach — elementy są umieszczone w tym samym rytmie (w takich samych odległościach i wielkościach sekcji). Można to zauważyć, przewijając listę, a obiekty pojawią się wielokrotnie w podobnej odległości. Dobrym posunięciem jest wykorzystywanie okresowości przy budowie rytmu na stronie lub aplikacji. Innym przykładem jest np. zastosowanie nagłówków artykułów lub zdjęć w podobnych dystansach. To, co definiuje okresowość, jest zazwyczaj wyróżniające — jak wspomniany nagłówek — i dzięki temu łatwo rozpoznawalne dla ludzkiego oka.

Na przykładzie bardzo łatwo zauważyć, że okresowość nadawana jest dzięki rozwijanym nagłówkom pytań. Źródło: blog.edugrafia.pl

Zasady Gestalt są osadzone w psychologii, która skupia się, na percepcyjnym postrzeganiu człowieka tego, co go otacza i dzięki temu stały się użyteczne na gruncie User Experience. Psychologiczne aspekty Gestalt wspierają projektanta w rozumieniu, jak userzy kategoryzują, organizują, dostrzegają i rozumieją elementy wizualne. Jako projektanci bardzo często korzystamy z tych zasad, nawet ich nie znając — są one intuicyjne i wychodzą z naszych doświadczeń. Znajomość znaczenia poszczególnych praw Gestalt powinna wskazać designerom zasadność stosowania obranych reguł, by jeszcze lepiej trafić do użytkownika. Tworząc intuicyjne interfejsy, które oddziałują zgodnie z percepcją postrzegania, dajemy userom swobodę i bezpieczeństwo wykonywanych czynności na platformach, czy aplikacjach. Unikając elementów niezrozumiałych oraz wprowadzających w zamieszanie, zyskujemy przychylność i prawdopodobnie stałych użytkowników naszej strony lub aplikacji.