Podejrzewam, że pojęcie zasad Gestalt obiło wam o uszy. Nawet jeśli nie, to jako osoby projektujące (branding, reklamy, UX czy UI) stosujecie pewne zabiegi, które można podpiąć do zbioru zasad, których dotyczy. Zasady Gestalt należą właściwie do kanonu projektowania (nie tylko graficznego) i warto je po prostu znać, by świadomie wykorzystywać w kolejnych realizacjach.
Nagrałam też film jeśli wolicie wersję audio/video.
Skąd się w ogóle wzięły?
A no z psychologii – zasady gestalt opisują wrodzone mechanizmy percepcyjne, a badania nad psychologią Gestaltu pozwoliły uporządkować wiedzę na temat ludzkiej percepcji. W psychologii zasady Gestalt traktuje się jako fakty – to wrodzone mechanizmy percepcyjne (tzn. nie nabywa się ich z czasem). Badania nad psychologią Gestaltu rozpoczęto na początku XX wieku i pozwoliły uporządkować wiedzę na temat ludzkiej percepcji.
Na przestrzeni lat oczywiście wciąż prowadzone są badania związane z naszą percepcją i w związku z tym doczekaliśmy się nowych, dodatkowych zasad.
O co chodzi w zasadach Gestalt?
Ludzki umysł dąży bardziej do postrzegania ogółu, niż pojedynczych elementów. Widząc samochód, widzimy przede wszystkim pojazd, w następnej kolejności skupiamy się na szczegółach. Patrząc na dom, widzimy budynek, nie grupę okien, drzwi, ścian i innych elementów. Pewne czynniki sprawiają, że coś mniej lub bardziej postrzegamy jako całość.
Nasz mózg potrafi płatać nam figle. Takie zjawiska wykorzystuje się na przykład przy tworzeniu obrazków bazujących na złudzeniach optycznych. Wiecie, te wszystkie kielichy i twarze. Po prostu nasz mózg dąży do układania, porządkowania i uzupełniania informacji.
Po co mi to?
Zasady gestalt stosujemy do organizowania treści w interfejsach, reklamach, grafikach aby były estetyczne i łatwe do zrozumienia.
Skoro wiecie już, że na nasze postrzeganie wpływają jakieś zasady, to warto je znać. Myślę, że część z nich intuicyjnie wykorzystujecie w procesie projektowania, ale ważne jest by zrozumieć, jakich błędów można uniknąć. Te błędy rzucają mi się w oczy podczas przeglądania stron i korzystania z aplikacji i mogą mieć bezpośredni wpływ na użyteczność produktu.
Jeżeli nie rozumiemy jak działają zasady, możemy sprawić, że odbiorcy naszych projektów będą widzieć i rozumieć nasz projekt inaczej niż sobie to założyliśmy. W projekcie UI może to wpływać np. na to czy użytkownicy dostrzegają przyciski i linki, które dotyczą konkretnych treści czy np. zakładają, że dotyczą już innych informacji i… w nie nie klikają.
Dawaj te zasady Gestalt
No więc… przejdźmy sobie przez konkretne zasady, którymi kieruje się nasz umysł w celu grupowania informacji. Poniżej znajdziecie kilka wybranych i pokrótce opisanych.
Zasada bliskości
Obiekty znajdujące się blisko siebie widziane są jako jedna grupa. Grupujemy bliższe sobie elementy, oddzielając je od tych od siebie oddalonych. Wydaje się oczywiste, ale to błąd w projektach, który widzę bardzo często. Przestrzeń wpływa na to jak nasz mózg łączy obiekty w jedną grupę, dlatego koniecznie musimy nauczyć się o nią dbać.
Jeżeli mamy tekst z podziałem na akapity równej długości to czytamy go jako całość. Ale wystarczy oddalić jeden blok tekstu żeby automatycznie uznać go za coś dodatkowego, obcego. Zobaczcie jak z zasadą bliskości poradzili sobie twórcy poniższych aplikacji. Po lewej stronie widać jak przycisk Upgrade zbliżony jest do górnego tekstu, jednocześnie tworzy się spora odległość od sekcji poniżej. Po prawej stronie widać przykład zwykłej odległości między akapitami – widzimy od razu, że to jakieś dwie oddzielne informacje.
Często popełnianym błędem w projektowaniu stron i aplikacji, który obserwuję, jest niezadbanie o odległości właśnie. Zwłaszcza, gdy mamy listy powtarzających się elementów i nagłówki bądź zdjecia między nimi. Jeśli będą dokładnie miały zawsze te same odległości od góry i dołu, trudno będzie zrozumieć, której treści dotyczą.
Wystarczy zerknąć na zdkęcie powyżej. Przybliżenie zdjęcia do tekstu poniżej, a oddalenie go od tego powyżej, sprawia, że automatycznie grupujemy zdjęcie z tekstem poniżej. Po prawej stronie widać natomiast przykład, gdzie teksty mają równe odległości do zdjęć. Scrollując przez takie treści, trudno zrozumieć, którego zdjęcia będą dotyczyć. I o tym jest zasada bliskości właśnie – wystarczy coś przybliżyć, coś odsunąć i mamy efekt, który pozwala nam pogrupować sobie treści jeszcze zanim zabierzemy się za czytanie.
Zasada podobieństwa
Obiekty podobne do siebie, widziane są jako jedna grupa. Im więcej elementów podobnych da się wyodrębnić, tym większa moc oddziaływania. Podobieństwo można uzyskać przez kolor, wielkość, kształt, czy fakturę, miksując kilka wartości lub wybierając tylko jedną. Zasada podobieństwa ma zastosowanie na przykład w projektach stron i aplikacji. Przyciski i inne aktywne elementy, wyglądające podobnie, będą sugerować, że działają w podobny sposób.
Na przykładzie poniżej, po lewej stronie, zasada podobieństwa jest zastosowana żeby pokazać dwie grupy informacji i to podobieństwo zachodzi w ramach tych grup – przez użycie tego samego kształtu i stylu ikon oraz ułożenie tekstu względem nich. Po prawej, kafelki i układ treści w środku, równie dają nam poczucie, że te informacje są równorzędne i prawdopodobnie należą do tej samej grupy.
To coś, co może usprawnić użyteczność, ale również zadziałać zupełnie odwrotnie jeśli upodobnimy do siebie elementy, które działają w odmienny sposób. Przykład? Formularz z identycznymi przyciskami z napisem wyślij i wyczyść. Mi zdarzyło się kilka razy wpaść w dziki szał, bo ktoś bardzo pomysłowy postanowił zrobić je w tym samym stylu.
Zresztą, przykład złego zastosowania możecie zobaczyć na screenie poniżej:
Zasada doświadczenia (przyzwyczajenia)
Budujemy wspomnienia, mentalne reprezentacje obiektów – przedmiotów, mebli, ludzi, zwierząt. I w codziennym życiu świadomie i nieświadomie do nich wracamy. Kiedy elementy składające się na nasz projekt, np. logo albo plakat, utworzą znajomą nam figurę, zobaczymy ją jako całość – bo te pojedyncze obiekty złożą nam się do czegoś, co już znamy.
Ma wpływ na interpretację symboli, obrazów i kolorów, ale niestety, jest bardzo indywidualną kwestią. Są jednak doświadczenia, które można przypisać większej grupie. Jeśli widzimy czarne łaty na białym tle, zobaczymy krowę, ułożone kolejno koła w kolorze czerwieni, żółci i zieleni to światła uliczne. Doskonałym przykładem jest menu hamburgerowe – kto kilkanaście lat temu, trzy poziome kreski, skojarzyłby z opcją menu? Rozpoznawanie ikon bazuje właśnie na zasadzie doświadczenia. Warto korzystać z doświadczeń użytkowników, bo skraca to czas na naukę i zrozumienie choćby elementów interfejsu aplikacji.
Ta zasada jest też o tym, dlaczego często zdarza nam się widzieć twarze, gdzie ich nie ma.
Zasada symetrii
Nasze oko lubi symetrię. Symetria kojarzy się z porządkiem i harmonią. Po prostu jest miła dla oka.
Jeżeli mamy symetryczne elementy, automatycznie będziemy łączyć je jako grupę. Mamy po prostu tendencję do postrzegania symetrii i upraszczania kształtów. Porządkując swój projekt i układając go na siatkach uważajcie jednak na to, by nie wprowadzać symetrii do elementów zupełnie ze sobą niezwiązanych, bo możemy wprowadzić odbiorców w błąd.
Dlatego, kiedy chcecie uspokoić kreację i sprawić, by była bardziej elegancka, wykorzystajcie właśnie zasadę symetrii i wprowadźcie ją do układu tekstów, wyrównania ich względem obrazów i innych elementów graficznych.
Zasada domknięcia
Nie musimy idealnie odwzorować konturu jakiegoś obiektu żeby skutecznie go zidentyfikować. Jako przykład tej zasady pokazuje się często logo IBM albo WWF – mimo niepełnych kształtów, wypełnimy sobie luki liniami, wzorami, kolorami z otoczenia, żeby uzupełnić obraz. Często ten zabieg stosujemy właśnie w projektowaniu identyfikacji wizualnej.
W projektowaniu UI przykładem tej zasady są ikony, zwłaszcza te w małym rozmiarze.
Jeśli chcecie tworzyć minimalistyczne projekty, warto ją znać, bo pokazuje, jak przy minimalnej ilości środków wizualnych, możemy osiągnąć ciekawe efekty.
Zasada wspólnego obszaru (regionu)
Ramki, marginesy, tła, linie – używamy ich do podzielenia informacji w projekcie. Dodanie ich w odpowiednich miejscach może mieć duży wpływ na to jak je będziemy odbierać. Możecie zobaczyć to na przykładzie prostego tła – w zależności, w jaki sposób ułożymy je względem treści, będziemy wizualnie sugerować, które elementy są ze sobą połączone.
Stworzenie takiej granicy między obiektami ma dużą siłę, która może wpłynąć na inne zasady grupowania, takie jak bliskość lub podobieństwo.
Zasada ciągłości (kontynuacji)
Spotkacie się też z nazwą Zasada dobrej kontynuacji. Mówi o naszej umiejętności określania stałości obiektu, gdy cały obiekt nie jest widoczny (np. coś zasłania jego części). Postrzegamy przeplatające się lub przecinające elementy wizualne jako ciągłe formy.
Gdy z połączenia tych elementów powstaje (ułoży nam się) linia prosta lub jakaś krzywa, nawet zasłonięta lub przerwana jakimś obiektem, widzimy jej kontynuację, co skutkuje postrzeganiem obiektu jako ciągłego czy też całego.
Czemu warto znać tę zasadę? Projekty, w których elementy są zasłonięte przez inne obiekty (częsty zabieg graficzyny), powinny uwzględniać prawo dobrej kontynuacji – inaczej trudno będzie zrozumieć „relację” między tymi elementami, czy wręcz zasłonięte elementy nie będą dla nas czytelne.
Zasada wspólnego losu
Elementy wizualne poruszające się w tym samym kierunku iz tą samą lub podobną prędkością są postrzegane jako należące do grupy lub tworzące grupę.
Dobrym przykładem jest ruch stada ptaków. Takie stado może składać się z setek, jeśli nie tysięcy pojedynczych elementów wizualnych, ale ich prędkość i kierunek są dopasowane, dając wrażenie jednej dużej, spójnej grupy. Jeśli mijały by się dwa takie stada, więc „wizualnie” zmieszałyby nam się elementy z jednej i drugiej grupy, to wciąż moglibyśmy je odróżnić. Własnie przez wspólny kierunk poruszania się każdego stada.
Zasada synchronii
Ta zasada Gestalt odnosi się do naszego postrzegania zdarzeń wizualnych występujących jednocześnie jako reprezentujących grupę. Na przykład, migające żarówki są postrzegane jako zgrupowane, nawet jeśli są rozmieszczone wokół nieoświetlonych żarówek. Zasada synchronii jest podobna do zasady wspólnego losu, która mówi, że podobnie poruszające się przedmioty są postrzegane jako zgrupowane, nawet jeśli są od siebie oddalone. Jednak zasadę synchronii można zastosować do statycznych zdarzeń wizualnych, ponieważ żarówki, które są utrzymywane w pozycji „włączonej” lub „wyłączonej” są postrzegane jako odrębne grupy.
Zasada połączenia elementów
Zasada połączenia (angielska nazwa to Principle of Element Connectedness) opisuje tendencję do postrzegania fizycznie powiązanych elementów jako zgrupowanych. Na przykład kropki połączone linią prostą, są postrzegane jako zgrupowane, niezależnie od odległości między tymi kropkami.
W projektowaniu takie połączenia wykorzystujemy często tworząc reprezentację linii czasu – wszelkiej maści timelines często łączymy własnie krótkimi kreskami, by sugerować nie tylko ciągłąć, ale właśnie połączenie elementów przez które scrollujemy.
Jeżeli więc prowadzimy jakieś linie w naszym interfejsie, musimy mieć świadomość, że być może nawet nieintencjonalnie, tworzymy jakieś połączenia między elemtantami.
Figura/tło
W zależności od źródła, spotkacie się z opisem Figury/tło jako kolejnej z zasad czy też ogólnej metody organizacji treści. Niezależnie od „przydziału” warto wiedzieć na czym polega. Zerkając na przykład powyżej, z pewnością w pierwszej kolejności zwrócicie uwagę na to, co jest „na wierzchu” – odróżnicie element istotny od tła – wyskakujące okienko i/lub tooltip w lewym górnym rogu.
Organizacja figury/tła jest w dużej mierze możliwa dzięki temu jak działa nasze oko. Większa ostrość informacji wzrokowych znajduje się w centrum naszego spojrzenia. Dlatego skupiając wzrok w jednym miejscu, pzostałe elementy będziemy postrzegać jako nieostre/rozmazane. To, na czym skupiamy uwagę traktujemy jako figurę, a tło… no właśnie jako tło – stąd nazwa.
W projektowaniu interfejsów dążymy do tego, żeby wyraźnie oddzielać figurę od tła – np. tekst ma kontrastową barwę względem tła albo stosujemy wyraźne kontury obiektów, obrysy, które wizualnie oddzielają się od pozostałych elementów.To pierwsza rzecz jakiej doszukujemy się w kompozycjach, wyszukujemy co jest figurą – tematem, a co jedynie jej tłem, mniej istotnym elementem. Sprawnie wykorzystana zasada może pokierować odpowiednio uwagę użytkownika.
Zwróćcie uwagę na dobrze skonstruowane landing page, gdzie w centrum uwagi znajduje się zazwyczaj krótki formularz lub przycisk kierujący dalej. Z drugiej strony, nie raz pewnie spotkaliście się z sytuacją, gdy tekst został umieszczony na zdjęciu i w ogóle nie było go widać lub kontrast elementów był zbyt mały, by go zauważyć.
W innych dziedzinach projektowania niż projektowanie interfejsów, w sztuce, możemy dążyć do tego żeby ta różnica między figurą a tłem była niejednoznaczna – np. zacieramy granice między obiektami czy tworzymy iluzje optyczne. Musimy po prostu pamiętać o konsekwencjach takiego działania.
Inne materiały o Gestalcie
Psychologia to jedna z najciekawszych dziedzin, bezpośrednio związanych z projektowaniem. I wcale nie musicie kończyć specjalistycznych studiów by się nią zainteresować.
🇺🇸 Artykuł o zasadach Gestalt: Gestalt Principles
🇺🇸 Artykuł o zasadzie domknięcia i figurze/tle: Improve Your Designs With The Principles Of Closure And Figure-Ground (Part 2)
💰 Kurs IxDF: Gestalt Psychology and Web Design: The Ultimate Guide (klikając w link załapiecie się na zniżkę)
💰 Kurs IxDF: The Ultimate Guide to Visual Perception and Design – inny ciekawy kurs w ramach dostępu do IxDF, który również szeroko porusza tematy Gestaltu
💰 Kurs na SkillShare: Sketching for UX Designers: Practice Activity Through Gestalt Principles
💰 Stworzyłam też swój kurs! Kurs na eduweb.pl, który przygotowałam, jest więc krótkim i prostym wprowadzeniem do zagadnienia. Z całą pewnością nie wyczerpuje tematu, a na blogu i kanale z pewnością pojawiać będą się jeszcze treści, z psychologią związane. Link do kursu znajdziecie tu: klik klik!
