gestalt projektowanie

Elementarz

Gestalt i projektowanie

Podejrzewam, że pojęcie gestalt obiło Wam się już o uszy. Nawet jeśli nie, to jako projektanci stosujecie pewne zabiegi, które można podpiąć do zbioru zasad, których dotyczy. Zasady te należą właściwie do kanonu projektowania (nie tylko graficznego!) i warto je po prostu znać, aby świadomie wykorzystywać w kolejnych realizacjach.

Skąd się w ogóle wzięły?

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.

O co w nich chodzi?

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.

To świetna koncepcja, która udowadnia, że całość, może być inna, niż suma jej części!

Po co mi to?

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.

Dawaj te zasady

No więc… według psychologów można wyróżnić konkretne zasady, którymi kieruje się nasz umysł. Poniżej znajdziecie kilka wybranych i pokrótce opisanych.

gestalt teoria bliskosci
Zasada bliskości – obiekty znajdujące się blisko siebie widziane są jako jedna grupa.

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.

Zasada bliskości wykorzystywana jest również w projekcie pojedynczych elementów, na przykład ikon. Przez zastosowanie bliskich sobie plam lub kresek można stworzyć wrażenie pełnego obiektu.

W web designie natomiast najczęściej wykorzystuje się zasadę bliskości w nawigacji. Zgrupowanie linków w wierszu lub kolumnie pozwala zinterpretować użytkownikowi tę część serwisu jako jedność – o podobnej zasadzie działania.

Jak widzicie, w zasadzie bliskości chodzi o zastosowanie takich efektów, by użytkownik zrozumiał, że należą do jednej grupy. Taki efekt uzyskamy przez zamknięcie tych elementów w jakimś kształcie, ramce, ułożeniu na gridzie, czy odpowiednio stosowanej pustej przestrzeni.

gestalt teoria podobienstwa
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.

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.

gestalt teoria doswiadczenia
Zasada doświadczenia (przyzwyczajenia) – uczymy się i zapamiętujemy.

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.

Oczywiście, nie oznacza to wcale by nie robić czegoś zupełnie oderwanego od dotychczasowych doświadczeń. Można przecież budować nowe mechanizmy i doświadczenia przez utrzymanie spójności wewnątrz projektu – strony, aplikacji, sklepu. Sprawcie jednak by użytkownicy szybko zrozumieli o co chodzi i za każdym razem nie musieli uczyć się tego od nowa.

gestalt teoria symetrii
Zasada symetrii – nasze oko lubi symetrię. Symetria kojarzy się z porządkiem i harmonią. Po prostu jest miła dla oka.

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 ta jest powszechnie stosowana w projektowaniu ikon i logo

gestalt teoria figura-tlo
Figura / tło – oddzielamy figury od ich teł

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ć. Budować relacje figura / tło można przez zabawę barwą, jej kontrastem, nasyceniem, wielkością elementów względem siebie.

Jest tego więcej…

Tak, to jeszcze nie wszystko. Mamy bowiem zasadę ciągłości (kontynuacji), równoległości, zamknięcia (domknięcia), wspólnego losu. Wybrałam jednak powyższe, bo wydają mi się taką podstawą w projektowaniu. Jak wspomniałam, wiele osób korzysta z tych zasad niekoniecznie znając konkretne pojęcia i teorie, i dla wielu projektantów projektowanie w ten sposób, jest po prostu intuicyjne.

Niemniej jednak uważam to za fajną ciekawostkę, by udowodnić Wam, że projektowanie, to nie po prostu robienie ładnych obrazków, ale planowanie, analizowanie i myślenie o tych, którzy nasze projekty będą oglądać.

Od 9 lat zajmuję się projektowaniem (na co dzień IA) i nie wyobrażam sobie żeby zajmować się czymś innym (choć projektowanie w moim wypadku to bardzo, bardzo szerokie pojęcie). W wolniejszej chwili jem, gram w gry i czytam nie tylko sci-fi i komiksy ;)

  • nie spotkałam się jeszcze z takim psychologicznym podejściem do grafiki
    nie mniej jednak po przeczytaniu tego tekstu zauważyłam te zależności
    bardzo ciekawe ujęcie tematu

    • W gruncie rzeczy, projektowanie (a co za tym idzie również grafika), bardzo często przeplatają się z psychologią 🙂 Wystarczy zerknąć na psychologiczne podejście do reklamy, neuromarketing czy cała działa projektowania User Experience i tematy związane z użytecznością. Robienie ładnych rzeczy to jedno, ale projektowanie mądrych, przydatnych dla użytkowników rozwiązań to drugie 🙂 Dlatego tak bardzo to lubię – to naprawdę szeroka działka, w której każdy znajdzie coś dla siebie 🙂

  • Bardzo fajnie się to czyta 🙂 Bardzo dobry artykuł i ciekawy. Faktycznie obiło mi się o uszy to pojęcie ale nie wiedziałem, że takie zasady są mu przypisywane 🙂 Pozdrawiam 🙂

  • O, ale ciekawy tekst! Wiele z tych zasad ma zastosowanie też w kompozycji fotografii, późniejszej pracy nad zdjęciem. Świetnie było poznać to od strony naszego mózgu. 🙂

    • to prawda – są całkiem uniwersalne 🙂

  • Pingback: Miesiąc w skrócie | Marzec 2017 | Zen Blog()