Zasady Gestalt w projektowaniu interfejsów ~ Izabela Kozioł

Zasady Gestalt w projektowaniu interfejsów ~ Izabela Kozioł

Podczas tworzenia interfejsów cyfrowych ważne jest przestrzeganie pewnych ogólnie przyjętych praw i zasad, aby końcowy produkt był użyteczny. Zasady te zwykle opierają się na zrozumieniu ludzkiego zachowania, a w szczególności wizualnego postrzegania informacji. Dzięki ich stosowaniu jesteśmy w stanie przewidzieć, w jaki sposób użytkownik może wejść w interakcje z naszym produktem i dostosować do niego interfejs. Oczywiście same zasady i prawa nie mogą zastąpić badań i testów użyteczności, ale zdecydowanie mogą pomóc w podejmowaniu właściwych decyzji projektowych.

 

Z tego artykułu dowiesz się:

  • W jaki sposób użytkownik postrzega informacje wizualne
  • Czym są zasady Gestalt i jak je stosować
  • Jak skutecznie prowadzić użytkownika przez interfejs

 

Zasady Gestalt zostały opracowane przez niemieckich psychologów na początku XX wieku. Jest to zbiór praw projektowych, które pomagają zrozumieć, w jaki sposób postrzegamy informacje wizualne w określonych warunkach. Ich podstawą jest fakt, iż nasz umysł tworzy globalną całość z tendencjami do samoorganizacji 1. Poznając i stosując te zasady, możesz stać się bardziej świadomym projektantem. Pomogą Ci one w lepszej organizacji elementów na stronie w taki sposób, aby doprowadzić użytkownika do celu, zatrzymując jego uwagę na dłużej tam, gdzie tego chcesz. Działania te sprawią, że Twój interfejs będzie zorientowany na użytkownika i przyjazny w odbiorze. W dalszej części artykułu omówimy każde z praw Gestalt wraz z przykładami.  

 

Zasada bliskości

Prawo bliskości Gestalt mówi, że obiekty lub kształty położone w niewielkiej odległości od siebie, odbierane są jako grupa. Bliskość elementów sugeruje istnieje relacji pomiędzy nimi. Nawet gdy kształty i rozmiary są całkiem inne, jeżeli będą one niedaleko siebie, zostaną odebrane jako grupa. To jedno z najważniejszych praw postrzegania, silniejsze niż kształt lub kolor. Ważną rolę odgrywa tutaj odległość (przestrzeń), która pomaga w oddzielaniu grup lub elementów tak, by nie zostały odebrane jako jedna całość.

Trzy zbiory elementów przedstawiające zasadę bliskości na różnych kształtach i kolorach. Pierwszy zbiór kółek ma równe odległości pomiędzy elementami, przez co odbierany jest jako grupa. Kolejny zbiór kółek jest oddzielony przestrzenią przez co odbierany jest jako dwie grupy. Ostatni to zbiór różnych elementów w różnych kolorach oddzielonych przestrzenią, przez co także odbierany jest jako dwie grupy.
Ilustracja 1. Przedstawienie zasady bliskości za pomocą różnych kształtów.

Szczególnie warto zwrócić uwagę na położenie względem siebie poszczególnych elementów podczas projektowania stron responsywnych. Gdy ekran staje się coraz mniejszy, pusta przestrzeń pomiędzy komponentami również  lub odwrotnie – są ułożone zbyt daleko od siebie, przez co niszczą relację grupowania. Należy pamiętać, aby elementy z jednej grupy były zawsze obok siebie. Gdy na małym ekranie brakuje przestrzeni do oddzielenia grup, można zastosować inną zasadę, np. wspólnego regionu (opisana poniżej).

Przykładem zasady bliskości będzie nawigacja przedstawiona na obrazku poniżej. Przestrzeń pomiędzy głównymi kategoriami a kategoriami pomocniczymi wskazuje na to, że są one w oddzielnych grupach i mają różne funkcje. Odległość ma tutaj kluczowe znaczenie i pomaga użytkownikowi w łatwy sposób zlokalizować kategorię, której potrzebuje.

Wizualizacja nawigacji z większą przestrzenią pomiędzy różnymi grupami kategorii.
Ilustracja 2. Nawigacja z zachowaniem zasady bliskości.

 

Zasada wspólnego regionu

Elementy zwykle są odbierane jako grupa, jeśli dzielą wspólny obszar o wyraźnie określonej granicy. Wszystko wewnątrz obudowy jest postrzegane jako powiązane ze sobą i zakłada się, że ma wspólne cechy lub funkcje. Typowym sposobem pokazania wspólnego regionu jest narysowanie ramki wokół powiązanych elementów.

Trzy zbiory elementów przedstawiające zasadę wspólnego regionu na różnych kształtach i kolorach. Część z nich zaznaczona jest ramkami przez co elementy w ramkach są odbierane są jako grupy.
Ilustracja 3. Przedstawienie zasady wspólnego regionu za pomocą różnych kształtów.

Interfejsy, które w ten sposób mają odrębnie zorganizowane sekcje, są łatwiejsze w odbiorze. Zastosowanie tej zasady pomaga w grupowaniu i organizacji treści, dzięki czemu użytkownik może w łatwy sposób zlokalizować elementy, a to przyspiesza skanowanie strony. Do przedstawienia regionu (oprócz ramki) często używa się innego koloru tła, co daje taki sam efekt. Stworzenie wyraźnej granicy pomiędzy elementami może być mocniejszą wskazówką wizualną niż inne zasady grupowania, takie jak bliskość lub podobieństwo. Należy jednak stosować takie oznaczenia z umiarem. Jeżeli wszystkie elementy na stronie podzielimy na regiony i nadamy im obszar, np. przy użyciu ramki, wtedy uzyskamy efekt przeciążenia, a użytkownik wciąż nie będzie wiedział, na jaki element ma zwrócić uwagę. Przykładem zasady wspólnego regionu mogą być komponenty kart, szczególnie w projektach e-commerce, które zwykle składają się z tytułu, opisu, zdjęcia, ceny, przycisku CTA. Powinny one mieć region wyznaczony poprzez ramkę lub kolor tła, dzięki temu użytkownik szybko rozpozna oddzielne obiekty, co ułatwi mu skanowanie treści. Zasadą wspólnego regionu możemy również wyróżnić jedną z kart, np. poprzez wzmocnienie ramki i dodanie cienia.

Trzy takie same komponenty z wyznaczonym regionem za pomocą ciemniejszego tła.
Ilustracja 4. Komponenty z zaznaczeniem wspólnego regionu.

 

Zasada podobieństwa

Podobieństwo ma miejsce, gdy elementy o wspólnych cechach odbieramy jako bardziej skorelowane niż te, które takich cech nie mają. Czyli wizualnie podobne elementy będą postrzegane jako powiązane ze sobą, ponieważ ludzie mają tendencję do budowania relacji między nimi. Podobieństwo może być określone poprzez wspólny kolor, kształt, rozmiar, fakturę i inne cechy wizualne. Przedmioty nie muszą być identyczne, ale powinny mieć co najmniej jeden widoczny wspólny wyróżnik, aby były postrzegane jako część tej samej grupy.

Trzy zbiory elementów przedstawiające zasadę podobieństwa na różnych kształtach i kolorach. Tam gdzie podobne kształty są ułożone obok siebie to zostają odbierane jako grupa.
Ilustracja 5. Przedstawienie zasady podobieństwa za pomocą różnych kształtów.

Zasada ta różni się od pozostałych praw Gestalt – łączy elementy pomimo rozproszenia ich po całej stronie lub aplikacji. Błędne zastosowanie tej zasady może wprawić użytkownika w zakłopotanie lub spowodować wiele przypadkowych kliknięć. Podobieństwo pomaga w klasyfikacji i tworzeniu hierarchii na stronie oraz przypisywaniu określonych znaczeń lub funkcji wśród różnych elementów. Najpopularniejszym zastosowaniem tej zasady są przyciski. Rozproszone po całej witrynie lub aplikacji wiążą się ze sobą dzięki zastosowaniu tego samego kształtu i koloru. Zmieniając kolor lub wielkość, możemy w łatwy sposób wyznaczać grupy przycisków i utworzyć z nich hierarchię. Bardzo ważne jest, aby zawsze dla takiej samej akcji wykorzystywać taki sam przycisk. Innym przykładem mogą być linki, dobrą praktyką jest używanie jednego koloru dla wszystkich. Powinien być on stosowany tylko do elementów klikanych, w szczególności nie należy stosować go do wyróżnienia nagłówków i do słów kluczowych, które nie są klikane.

Trzy przyciski. Pierwszy wypełniony o nazwie primary, drugi secondary bez wypełnienia i trzeci link z podkreśleniem.
Ilustracja 6. Przykładowy wygląd przycisków z zachowaniem zasady podobieństwa.

 

Zasada zamknięcia

Zasada zamknięcia mówi, że patrząc na złożony układ elementów wizualnych, nasz mózg poszukuje dla nich jednego rozpoznawalnego wzoru. Staramy się nadać sens i znaleźć całość w zbiorze elementów. Na przykład okrąg narysowany przerywanymi liniami jest nadal postrzegany przez mózg jako okrąg. Łączymy części, aby stworzyć prostszą, znaną nam całość. Podświadomie uzupełniamy brakujące informacje tak, aby stworzyć kompletną figurę.

Koło i gwiazda narysowane za pomocą przerywanych linii z dużymi odstępami.
Ilustracja 7. Przedstawienie zasady zamknięcia za pomocą różnych kształtów.

Kluczem do zamknięcia jest dostarczenie wystarczającej ilości informacji, aby oko mogło wypełnić resztę i stworzyć jednolitą całość. Jeśli zbyt wiele brakuje, istnieje duże prawdopodobieństwo, że mózg nie odczyta dobrze obrazu. Zasada ta jest najczęściej stosowana w projektach logo, ilustracjach i ikonografii, ale nie tylko. Wykorzystywana jest także w interfejsach w celu przedstawienia części elementu wystającego poza ekran, np. slider, którego wystającą część w całości widzimy dopiero po przesunięciu ekranu palcem lub strzałkami. Ważne jest, aby w takim przypadku pokazać fragment ukrytego elementu, co użytkownik od razu zinterpretuje jako wskazówkę, że w danym miejscu może być więcej treści do zobaczenia. Natomiast jeśli od razu pokażemy tylko pełen obraz, mózg nie odczyta naszych intencji, a ukryta treść może zostać pominięta przez użytkownika.

Slider z częściowo odkrytymi kolejnymi do przewijania elementami.
Ilustracja 8. Slider zaprojektowany zgodnie z zasadą zamknięcia.

 

Zasada symetrii

Zgodnie z nią ludzie postrzegają symetrycznie położone względem siebie elementy jako część jednej grupy. To prosta zasada, która daje poczucie porządku w interfejsie. Naturą człowieka jest systematyzowanie elementów i pragnienie równowagi w kompozycji. Symetrycznie ułożone elementy pomagają w grupowaniu, rozpoznawaniu wzorców, a także poprawiają szybkość skanowania interfejsu. Ponadto są proste, harmonijne i przyjemne wizualnie.

Dwa kółka odbite symetrycznie względem linii i dwa symetryczne względems siebie nawiasy kwadratowe.
Ilustracja 9. Przedstawienie zasady symetrii za pomocą różnych kształtów.

Choć zasada ta jest bardzo ważna, nie oznacza, iż musisz projektować cały interfejs symetrycznie. Najczęściej nie jest to nawet możliwe. Minusem wielu symetrycznych kompozycji jest monotonność. Musisz znaleźć równowagę między symetrią a asymetrią. Jeśli chcesz coś wyróżnić i zwrócić na to uwagę użytkownika, możesz dodać asymetrycznie umiejscowiony element. Takie kompozycje prezentują się dynamicznie, ale jednocześnie są trudniejsze do projektowania, ponieważ taka kompozycja charakteryzuje się dużo większą złożonością. Symetria jest ważna dla przyciągnięcia uwagi użytkownika w każdym projekcie, o ile używamy rozsądnej liczby asymetrycznych elementów. Najpopularniejszym przykładem symetrii w projektowaniu są siatki z produktami lub symetrycznie ułożone sekcje.

Ilustracja dwóch symetrycznych sekcji. W pierwszej obrazek jest po lewej i tekst po prawej stronie a w drugiej odwrotnie.
Ilustracja 10. Rysunek przedstawiający dwie symetryczne sekcje.

 

Zasada ciągłości

Zasada ciągłości ma miejsce, gdy elementy ułożone na linii lub krzywej są postrzegane jako bardziej powiązane niż elementy niebędące w ciągu. Intuicyjne dla ludzi jest podążanie za ścieżką, dlatego wyrównanie elementów może pomóc w płynnym przemieszczaniu się po interfejsie. Im gładsze przejścia pomiędzy elementami, tym bardziej ścieżka jest odbierana jako jednolita i pozwala użytkownikowi podążać po niej. Zakłócenie ciągłości może sygnalizować zamierzony koniec, np. koniec sekcji lub formularza. Jeśli nie jest to świadomy zabieg, użytkownik może poczuć się zagubiony, ponieważ nie będzie wiedział, gdzie dalej kierować swój wzrok.

Ciąg kółek i ciąg trójkątów.
Ilustracja 11. Przedstawienie zasady ciągłości za pomocą różnych kształtów.

Przykładem jest proces zakupu w sklepie internetowym: jeśli formularz i kroki zostaną uporządkowane i będzie w nich ciągłość, to użytkownik będzie świadomy, że podąża właściwą ścieżką, co usprawni jego zakup i wywrze dobre wrażenie. Na poniższym obrazku etykiety zostały wyrównane do prawej, aby wyświetlały się w tej samej linii, co pola do wpisywania. Dodatkowo przycisk zatwierdzający również się na niej znajduje, dzięki czemu użytkownik nie musi przeskakiwać wzrokiem, aby zapisać swoje dane.

Przykładowy formularz gdzie etykiety, pola do wpisywania i przycisk znajdują się w jednym ciągu.
Ilustracja 12. Formularz zaprojektowany zgodnie z zasadą ciągłości.

 

Zasada wspólnego losu

Elementy poruszające się w tym samym kierunku są postrzegane jako bardziej powiązane niż elementy nieruchome lub poruszające się w różnych kierunkach. Niezależnie od odległości od siebie, jeśli będą poruszały się w jednym kierunku, odebrane zostaną jako grupa. To podstawowa zasada w projektowaniu ruchu.

Kółka z przyczepionymi strzałkami ustawionymi się w różnych kierunkach i zbiór kółek ustawionych ze strzałką w jednym kierunku.
Ilustracja 13. Przedstawienie zasady wspólnego losu za pomocą różnych kształtów.

Każda animacja/interakcja powinna kierować użytkownika we właściwą stronę. Zatem projektując grupę ruchomych elementów, należy zadbać o to, by poruszały się one w tym samym kierunku i z tą samą prędkością. Zasada wspólnego losu jest bardzo często stosowana w listach rozwijanych, akordeonach, sliderach. Popularnym jej przykładem jest rozwijane menu, którego podkategorie stają się widoczne jako grupy, a każdy poziom podkategorii porusza się w tym samym kierunku, dzięki czemu odbierane są one jako całość i prowadzą użytkownika po kolejnych etapach.

Menu rozwijane z podkategoriami rozwijanymi w tym samym kierunku.
Ilustracja 14. Menu rozwijane zaprojektowane zgodnie z zasadą wspólnego losu.

Ta zasada pomaga pokazać relacje między elementami. W ten sposób użytkownicy zainteresowani danym kawałkiem mogą poszerzyć swoją wiedzę o nim przez podążanie za ruchem. Z drugiej strony ci, którzy nie są zainteresowani elementem, będą unikać części powiązanych, dzięki czemu zaoszczędzą swój czas.

Zasada figury i tła

To prawo pokazuje, że ludzie instynktownie rozpoznają, czy dane elementy znajdują się na pierwszym planie, czy w tle. Zamiast obiektów istniejących na płaskiej powierzchni, przedstawia się głębokość. Zasada ta ma zastosowanie, gdy główny obiekt można odróżnić od tła, a tło nie skupia uwagi odbiorcy. Dzięki temu możemy zatrzymać uwagę użytkowników w jednym miejscu. Patrząc na dany obiekt, automatycznie nasz mózg szuka sposobów na odróżnienie figury od podłoża. Obiekty na pierwszym planie zwykle wydają się być bardziej ostre niż te w tle, które zwykle są rozmazane lub zamglone. Innym ze sposobów na odróżnienie figury od tła jest kontrast; wysoki sprzyja szybkiemu odróżnieniu elementów. Kolejne narzędzie to wielkość – obiekty bliżej nas postrzegamy jako większe, a części tła zazwyczaj jako mniejsze i bardziej oddalone.

Dwa kółka i kwadrat z cieniami.
Ilustracja 15. Przedstawienie zasady figury za pomocą różnych kształtów.

Projektując witrynę czy aplikację z podkreśleniem pierwszego i drugiego planu, pomagasz użytkownikowi zdecydować, na co powinien zwrócić uwagę oraz gdzie dokonać akcji, a co pominąć w danym momencie. Wyskakujące okienka (pop-up) są tego najlepszym przykładem. Modal przyciąga wzrok z kilku powodów:

  • jest na tyle duży, aby nie został pominięty; 
  • charakteryzuje się kontrastem kolorów figury do tła (zwykle modal jest jaśniejszy); 
  • obiekty w tle mogą zostać rozmazane. 

Dzięki tym zabiegom użytkownicy od razu wiedzą, co można zignorować, a na czym należy się skupić. 

Ilustracja wyskakującego okienka na tle strony.
Ilustracja 16. Prezentacja wyskakującego okienka (pop-up) na stronie.

 

Propozycja przebudowy strony według zasad Gestalt

Poniżej przedstawiony został przykład strony www.vidaxl.pl, która wymaga reorganizacji 2, oraz propozycja uporządkowania jej za pomocą zasad Gestalt.

Trzy zbiory elementów przedstawiające zasadę bliskości na różnych kształtach i kolorach. Pierwszy zbiór kółek ma równe odległości pomiędzy elementami, przez co odbierany jest jako grupa. Kolejny zbiór kółek jest oddzielony przestrzenią przez co odbierany jest jako dwie grupy. Ostatni to zbiór różnych elementów w różnych kolorach oddzielonych przestrzenią, przez co także odbierany jest jako dwie grupy.
Ilustracja 17. Strona główna www.vidaxl.pl i propozycja reorganizacji.

W pasku nawigacyjnym została zastosowana zasada bliskości, by oddzielić główną ikonę menu, pod którą kryją się kategorie, od ikon pomocniczych. Dzięki takiemu rozwiązaniu użytkownik szybciej może zlokalizować poszukiwany element. Chaotycznie ułożone banery zostały zastąpione sliderem, spełniającym zasadę zamknięcia. Następnie produkty wraz z podpisami wpisano w ramki zgodnie z zasadą wspólnego regionu. Z sekcji „Specjalne oferty” wyciągnięto newsletter, ponieważ poprzez zachowanie jednakowych odległości (zasada bliskości), kształtu i koloru (zasada podobieństwa) przypomina elementy obok, które należą do innej grupy, co może być bardzo mylące dla użytkownika. Najprawdopodobniej newsletter jest przez nich pomijany. Miejscem, gdzie również świetnie można wykorzystać zasady Gestalt, jest stopka oraz wszystkie dodatkowe informacje, które chcemy przekazać użytkownikowi na dole strony. Tam znakomicie sprawdzają się zasada bliskości oraz wspólnego regionu.

 

 

Jak i po co stosować zasady Gestalt w projektach?

Zapewne intuicyjnie już je częściowo stosujesz, ale jako projektant interfejsów powinieneś to robić świadomie. Dzięki takiej wiedzy będziesz potrafił argumentować swoje rozwiązania projektowe, a to wśród projektantów UX/UI bardzo cenna umiejętność. Jeśli jesteś początkującym projektantem, to w procesie projektowym – po zdefiniowaniu zawartości strony – możesz powrócić do zasad Gestalt i pomyśleć, jak ułożyć ścieżkę użytkownika z zastosowaniem ich. W każdym kolejnym projekcie z pewnością będziesz korzystał z tej wiedzy automatycznie, ale świadomie.

1 M. Philips, How to Use Powerful Gestalt Principles in Design (with Infographic) (dostęp: 12.10.2021 r.).

2 Stan witryny na dzień 20.09.2021 r.

Inspiracje

Autorka

zdj

Izabela Kozioł

Senior UX/UI designer w e-ux.pro i mentor w xpower. Zajmuje się projektowaniem rozwiązań, które poprawiają doświadczenia użytkowników, zarówno na platformy mobilne, jak i webowe. Zwolenniczka nowych technologii i futurystycznych rozwiązań. W wolnych chwilach zgłębia wiedzę z zakresu projektowania sztucznej inteligencji.

https://www.linkedin.com/in/izabela-koziol/