Tag: ITMAGINATION

Zasada bliskości

Elementy, które znajdują się blisko siebie widziane są jako jedna grupa. Na poniższej grafice elementy tworzą trzy kolumny. Wystarczy jednak zmienić odległości między nimi i stworzyć wrażenie, że zamiast w kolumnach, ułożone są w trzech rzędach. Jedyne co się zmieniło to przestrzeń, która decyduje, że ludzki mózg łączy te obiekty w jedną grupę, mimo że nie mają one narysowanych granic. Podobnie jest z tekstem, gdy między akapitami nie ma przestrzeni. Odbieramy go jako całość, a dodanie akapitu między blokami tekstu spowoduje, że uznamy go jako coś odrębnego. Dlatego tak ważne jest odpowiednie umieszczenie komponentów w tworzeniu UI, aby użytkownik wiedział, które przynależą do danej grupy.

Jeżeli strona ma dużo światła (przestrzeni), użytkownikowi łatwiej przychodzi oddzielanie od siebie bloków informacyjnych. Taki efekt uzyskuje się również przez ułożenie elementów w określonym kształcie, ponieważ pozwala to grupować powiązane ze sobą elementy. Zasadę można wykorzystać w obszarze nawigacji (menu) na stronach internetowych – jej elementy są rozłożone blisko siebie, co automatycznie postrzega się jako cały zbiór odnośników do nawigacji na stronie.

Zasada podobieństwa

Według tej zasady uznaje się, że użytkownik grupuje obiekty, które są do siebie podobne pod względem koloru, kształtu czy faktury.

Zasadę podobieństwa większość projektantów stosuje na stronach internetowych oraz w aplikacjach dla przycisków lub innych elementów aktywnych. Dzięki podobieństwu sugerują, że działają w podobny sposób (np. hiperłącza w tekście mają inny kolor fontu i są podkreślone). Podobnie jest z takim samym rozmiarem fontów np. dla nagłówków. Dzięki temu użytkownicy szybko rozpoznają znaczenie określonych elementów. Ważna jest spójność. Zaprojektowane przyciski muszą wyglądać tak samo i być w identycznej kolejności jeżeli wywołują dokładnie taką samą akcję.

Zasada symetrii

Użytkownik interpretuje skomplikowane sceny tak, aby redukować ich złożoność. Np. gdy dwa symetryczne elementy są niepołączone, umysł percepcyjnie łączy je i tworzy spójny kształt. Symetryczne interfejsy pomagają szybciej skanować zawartość strony i łatwej rozpoznawać wzorce.

Zasada symetrii nadaje kompozycji elegancję. Warto wykorzystać ją do układu tekstów, wyrównania ich względem obrazów lub innych elementów graficznych.

Figura-tło

Zapewne większość z nas widziała grafikę ze złudzeniem optycznym, na której widać dwie głowy lub wazon. Ludzki mózg ma potrzebę odseparowania obiektów od otaczającego je tła, dlatego zasada figura-tło pozwala wyodrębnić samodzielny element z całości obrazu. Pierwszą rzeczą jakiej użytkownik doszukuje się w obrazach, to określenie co jest tematem, a co jedynie jej tłem.

Ta zasada pomaga odpowiednio skierować uwagę użytkownika i określa co jest kluczowe w danym widoku. Jej zadaniem jest podział uwagi odbiorcy na strategiczną figurę oraz mało istotne tło. Figura-tło jest bardzo często wykorzystywana w przypadku landing page – w centrum znajduje się hero image, formularz z CTA, który przekierowuje dalej. Bardzo popularne jest także odzwierciedlenie tej zasady w trendzie “negative space”, wykorzystywanym w projektowaniu logo (np. stacji telewizyjnej NBC).

Zasada dobrej kontynuacji (ciągłości)

Oko ludzkie zauważa linie utworzone z różnych lub takich samych obiektów. Elementy, które poprzez swoje ułożenie tworzą pewien kształt lub linię, postrzegamy jako całość. Nawet jeżeli różnią się one kształtem czy kolorem, to właśnie dzięki linii tak je widzimy.

Zasada ciągłości pozwala nakierowywać uwagę użytkownika na kluczowe informacje lub miejsce na stronie dzięki poprowadzeniu wzroku użytkownika, np. w kolejne etapy procesu zakupowego czy wypełnienie formularza. W projektowaniu interfejsów zasadę dobrej kontynuacji warto zastosować w formie suwaków lub list. Obiekty umieszczone blisko siebie powodują, że wzrok „skacze” z jednego na drugi.

Zasada domknięcia

Gdy użytkownik patrzy na figury lub znaki, które są niekompletne lub ich wewnętrzna przestrzeń nie jest zamknięta, to mamy do czynienia z zasadą domknięcia. Ludzki mózg automatycznie próbuje wypełnić brakujące części znanymi obrazami.

Jest to najczęściej wykorzystywany zabieg przy projektowaniu znaków graficznych i logo. Dzięki niemu nie muszą być szczegółowe ani dosłowne, a nadal pozostają zrozumiałe. Na powyższej grafice automatycznie dostrzegamy trzy koła i trójkąt, pomimo że w rzeczywistości jest tu kilka nieregularnych kształtów. Oznacza to, że widzimy kształty, których teoretycznie nie ma.

Gestalt nie tylko w UX i UI

Zasad Gestalt jest oczywiście więcej, ale sześć przedstawionych powyżej jest dla większości projektantów UX/UI podstawą w tworzeniu interfejsów i pozwalają podejmować świadome decyzje projektowe. Zapewne wielu użytkowników serwisów internetowych i aplikacji już stosuje niektóre z zasad Gestalt nawet o tym nie wiedząc, ponieważ robimy to nieświadomie. Jednak teoria przydaje się nie tylko do projektowania, ale także do testowania produktów – zawsze warto je skonfrontować z dobrymi zasadami tworzenia UX/UI.

Autorka:

Katarzyna Suwała, UX designer w ITMAGINATION