Praca nad interfejsem zawsze opiera się na znajomości użytkownika. Standardem w projektowaniu są badania UX rozpoznające zachowania i nawyki konkretnej grupy docelowej, ale dużą wiedzę można pozyskać także z badań uniwersalnych, których wyniki dotyczą każdego typu użytkownika i które można wykorzystać w projektowaniu dowolnego interfejsu – strony internetowej, sklepu, czy aplikacji.
Przykładem takich uniwersalnych wskazówek są zasady Gestalt, znane od 100 lat. Po raz pierwszy w pełni opisane przez austro-węgierskiego psychologa Maxa Wertheimera w roku 1923. Generalna idea polega na tym, że ludzki mózg podświadomie dąży do zebrania przedstawionych mu elementów w jedną całość, na 6 podstawowych sposobów. Zasady Gestalt opisują te wrodzone skłonności i pomagają na nie odpowiadać. Użyte w projektowaniu UX/UI przekładają się na większą użyteczność i funkcjonalność interfejsu, a przy tym ułatwiają użytkownikowi zobaczenie produktu jako wiarygodnego systemu elementów tworzących spójną całość.
Zasada Gestalt, która zachęca projektanta UX/UI do używania przestrzeni tak, żeby stworzyć hierarchię treści poprzez rozdzielanie elementów na grupy, ale bez stosowania obwodów czy łączenia obiektów ze sobą bezpośrednio.
Aby to osiągnąć, w UI wystarczy zadbać o takie grupowanie elementów – na przykład przycisków nawigacyjnych obsługujących jeden proces – żeby obiekty należące do każdej grupy były równo od siebie oddalone, ale z mniejszym odstępem, niż grupy względem siebie. Istotna jest przy tym umiejętna gra przestrzenią negatywną – im więcej wolnej przestrzeni pomiędzy grupami, tym szybciej i sprawniej użytkownik przyswoi interfejs jako system.
Aby dodatkowo wzmocnić efekt przynależności, można ułożyć te zestawione elementy na planie figury geometrycznej, która będzie wyraźnie odcinać się w dedykowanej przestrzeni interfejsu. Zapewni to podobne wrażenie całości, jakie osiągamy w bloku tekstu, gdzie identyczna interlinia i wyrównanie sprawiają, że treść jest traktowana jako całość, a do przełamania potrzebny jest nowy akapit.
Zasada bliskości sugeruje także umieszczać przyciski CTA możliwie blisko treści informacyjnej, włączając je do grupy razem z tekstem i multimediami. W ten sposób użytkownik zobaczy je jako równie ważne, co aktualnie czytany tekst.
Dzięki tej zasadzie Gestalt można tworzyć grupy z elementów, które nie są w bezpośrednim sąsiedztwie. Użytkownik odbierze dane obiekty jako przynależne do grupy np. elementów nawigacyjnych, jeśli będą posiadać istotną cechę wspólną: kształt, kolor, wzór wypełnienia, font opisu. Wówczas jeśli te elementy będą nieregularnie rozmieszczone w szerszym zbiorze elementów, utworzą w odczuciu użytkownika wspólny zbiór wewnętrzny, funkcjonujący na wspólnych zasadach.
Klasycznym przykładem jest oznaczenie wszystkich hiperłączy w tekście kolorem niebieskim i podkreśleniem.
Zasadę podobieństwa można stosować w całej przestrzeni interfejsu, ponieważ działa, nawet kiedy elementy podgrupy nie są widoczne na raz. Wystarczy pokazać użytkownikowi jeden specyficzny wzór np. przycisku lub ikony (włączając w to spójny dobór słownictwa opisów), aby zasugerować mu zaliczanie do tej kategorii wszystkich elementów pasujących do wzoru, napotkanych w całym interfejsie.
Będzie to działać dla obiektów mających wspólne miejsce w hierarchii, pełniących podobną funkcję, czy oferujących taki sam typ interakcji. Ponieważ wystarczy jedna wspólna cecha, można zachować efekt podobieństwa, stosując kilka kolorów dla jednego wzoru przycisku – np. zielone wypełnienie dla przycisków potwierdzających i czerwone dla anulujących.
Skuteczna implementacja zasady podobieństwa Gestalt polega z jednej strony na konsekwentnym stosowaniu w interfejsie wzorów elementów, a z drugiej, wzorów ustawień tych elementów – takich jak ustandaryzowana sekcja z obrazem i tekstem. Style i układy powinny powtarzać się analogicznie, nadając elementom jednoznaczną rolę informacyjną, czy nawigacyjną. To przyspiesza skanowanie treści i przyswajanie zasad działania interfejsu, a tym samym pracuje na jakość UX.
Ta zasada Gestalt umożliwia przechwycenie i prowadzenie uwagi użytkownika przez serię obiektów ustawionych w interfejsie tak, że przypominają linię. Wzrok będzie zawsze intuicyjnie podążał najbardziej płynną ścieżką. Nawet jeśli elementy różnią się kształtem, kolorem lub wielkością. Dlatego warto na niej umieścić najbardziej kluczowe składniki procesów.
Stworzenie płynnej scieżki ułatwia nawigację, dostrzeganie kolejnych etapów w kontekście różnych procesów oraz unikanie dystrakcji w trakcie poszukiwania konkretnych informacji. Zasadę ciągłości należy uwzględnić szczególnie przy formularzach, konfiguratorach i podstronach oferty, aby użytkownik zapoznawał się z treścią bez wysiłku, według z góry ustalonej, logicznej kolejności.
Ta sama umiejętność, którą ludzki mózg wykorzystuje do łączenia punktów w jedną ścieżkę lub obraz, umożliwia mu wypełnianie pustych przestrzeni, aby zobaczyć całość i zrozumieć, na co patrzy.
Dla designera UX/UI oznacza to, że może stworzyć w umyśle użytkownika obraz bez dostarczania kompletnego obrysu lub szczegółów. Układ elementów może sugerować całość, nawet jeśli się ze sobą nie stykają. Przykładem zastosowania tej zasady w identyfikacji wizualnej jest logotyp WWF, czy Adobe, natomiast w kontekście interfejsu podobnie można upraszczać ikony, nie tracąc na użyteczności.
Dla projektanta UX/UI istotna jest także możliwość rozbudowania interfejsu poza obszar ekranu. Zasada ciągłości z katalogu Gestalt zachęca do umieszczania np. szerokiego wiersza elementów w taki sposób, że skrajne z nich kończą się w połowie i wydają się zanikać, wychodząc za ekran. Mózg użytkownika intuicyjnie dostrzeże całe obiekty „kończące się” za ekranem. A wraz z nimi możliwość przesuwania wiersza w poziomie i docierania dalej. Nie byłoby to oczywiste, gdyby zamiast tego zabiegu przesunąć wiersz o pół elementu w dowolną stronę, tak aby wszystkie mieszczące się elementy były widoczne w całości.
Zasada ukazana w licznie występujących złudzeniach optycznych pod tytułem „co widzisz jako pierwsze”. Takich jak obraz Edgara Rubina ze świecznikiem i dwiema twarzami. Dla UX/UI designera istotny jest fakt, że ludzkie oko zawsze szuka trójwymiarowości, wyodrębniając elementy aktywne (pierwszy plan) z nieaktywnego tła. W taki sam sposób, jakby wypatrywało drapieżnika w jego środowisku naturalnym. Dzięki temu uwagą użytkownika da się sterować, eksponując kluczowe elementy i przyciski CTA w jednoznaczny i przejrzysty sposób, na wyraźnie odcinającym się tle.
W kontekście całego interfejsu warto przydzielać na tło większą powierzchnię, wtedy elementy na nim osadzone staną się w odbiorze bardziej wyraziste. Użytkownikowi łatwiej będzie się skupić na rzeczywistej treści i używać tła do nawigacji pomiędzy elementami i grupami obiektów.
Aby dodatkowo wzmocnić kontrast w czasie kluczowej interakcji – takiej jak w przypadku okna pop-up, warto uwzględnić jednoczesne przyciemnienie lub zamazanie reszty witryny, czyniąc z niej tymczasowe tło aż do podjęcia przez użytkownika decyzji.
W tej kategorii mieści się tendencja, że jeśli użytkownik napotka skomplikowane kształty lub takie o nieoczywistym znaczeniu, w pierwszej kolejności będzie je sobie upraszczał. Interpretacja zawsze będzie dążyć do ułatwienia odbioru, nawet jeśli występuje ryzyko fałszywego domysłu. Aby wyjść temu naprzeciw, należy postawić na proste i jednoznaczne formy, kształty oraz układ. Eliminując szansę na błędne interpretacje, które zaburzyły by user flow, a z nim cały UX.
W generalnym ujęciu warto także pamiętać, że jednym z kluczowych celów projektowania UX/UI jest szybkie uzyskanie zainteresowania nowego użytkownika i skierowanie go na tory właściwych procesów. Pomaga w tym estetyka budząca zaufanie porządkiem, logiką i przewidywalnością. Taki efekt buduje się symetrią tekstu, konsekwentnym porządkowaniem elementów i wyrównywaniem ich względem siebie.
Aby zminimalizować szansę użytkownika na pogubienie się, UX/UI designerzy w myśl tej zasady starają się używać lustrzanych odbić podstawowych kształtów, a szczególnie elementów nawigacyjnych, zamiast mnożyć ilość unikalnych przycisków, ikon czy symboli. W powtarzalnym i przewidywalnym środowisku użytkownik na zasadzie analogii przyswoi zasady obsługi. Komfortowo i w przyspieszonym tempie.
Teoria Gestalt ma za zadanie ułatwić organizację i projektowanie UX/UI, w dużej mierze odciążając każdego designera – niezależnie od tego, jaki interfejs tworzy i dla jakiej grupy docelowej. Dzięki 6 podstawowym zasadom można wyjść naprzeciw podświadomym nawykom każdego użytkownika, jednocześnie redukując poziom skomplikowania elementów graficznych oraz liczbę ich wersji.
Jeśli 6 zasad Gestalt zostanie wdrożonych systemowo, interfejs niejako samoczynnie połączy się z wyobraźnią przestrzenną użytkownika, tworząc UX pełen harmonii i poczucia kontroli nad procesami. Sposób doboru i ułożenia elementów zbuduje kompletne obrazy, ścieżki, zasugeruje sposób interakcji, a przede wszystkim, znacznie uprości procesy, zmniejszy wysiłek poznawczy i skróci czas ładowania podstron lub ekranów.
Znając podejście Gestalt, łatwiej zrozumieć motto, które mu towarzyszy:
„Całość to więcej niż suma jej składników” – Arystoteles.
