Czy zastanawiałeś się kiedyś, dlaczego niektóre projekty graficzne, layouty stron internetowych czy obrazy po prostu wydają się harmonijne? Czujemy, że panuje w nich porządek, nawet jeśli nie potrafimy dokładnie wskazać dlaczego. Z drugiej strony, inne kompozycje wywołują w nas subtelny niepokój i wrażenie chaosu.

Odpowiedź leży głębiej niż w samych zasadach projektowania. Kryje się w sposobie, w jaki nasz umysł i ciało wspólnie interpretują świat. Postaram się wyjaśnić, czym jest koncepcja ucieleśnienia (ang. embodiment) i pokazać, jak możesz ją świadomie wykorzystać, by Twoje projekty stały się bardziej intuicyjne, spójne i skuteczne.

Kompozycja to, najprościej ujmując, układ elementów w przestrzeni. Choć termin ten kojarzy się głównie ze sztuką i projektowaniem graficznym, dotyczy on wszystkiego – od aranżacji mieszkania po układ ikon na pulpicie komputera.

Wyznacznikiem udanej kompozycji jest subiektywne odczucie równowagi i spójności. Chociaż każdy z nas ma indywidualne preferencje, to jako ludzie dzielimy wspólne doświadczenia fizyczne i kulturowe. Podlegamy tym samym prawom fizyki, dorastamy w podobnym otoczeniu. To sprawia, że na pewnym fundamentalnym poziomie odbieramy określone układy wizualne w bardzo podobny sposób. Kluczem do zrozumienia tego zjawiska jest właśnie ucieleśnienie.

W kognitywistyce (nauce o poznaniu) ucieleśnienie to teoria mówiąca, że nasze myślenie, pojęcia, a nawet język są nierozerwalnie związane z doświadczeniami naszego ciała. Innymi słowy, rozumiemy abstrakcyjny świat poprzez pryzmat naszych fizycznych interakcji z rzeczywistością.

Łatwiej jest nam zrozumieć coś, czego możemy dotknąć, zobaczyć lub fizycznie doświadczyć. Dlatego nieświadomie "przenosimy" cechy świata fizycznego na świat abstrakcji, w tym na projektowanie graficzne. Ciało stanowi centralny punkt naszego poznania, wokół którego koncentrują się nasze doświadczenia, działania, odczucia i interakcje.

Na podstawie powtarzających się sytuacji tworzymy sobie coraz ogólniejsze schematy. Dzięki nim możemy lepiej kategoryzować nowe doświadczenia, dopasowując je do istniejących wzorców.

Ciągłe interakcje ze światem prowadzą do powstania w naszych umysłach tzw. schematów wyobrażeniowych (ang. image schemata). Są to proste wzorce oparte na doświadczeniach fizycznych, które pomagają nam kategoryzować świat (Kovecses, 2011).

Przez chwilę skoncentrujmy się na ostatnim z wymienionych - pojemniku. Rozumiemy go jako ograniczoną przestrzeń, która może zostać czymś wypełniona lub pozbawiona zawartości. Posiada ściany, oddzielające wnętrze od zewnętrza. Codzienne doświadczenia z obiektami takimi jak naczynia, szafki czy opakowania sprawiają, że zaczynamy postrzegać także inne obiekty i zjawiska w kategoriach pojemników. I czynimy tak nawet w odniesieniu do własnego ciała oraz umysłu, którym nadajemy cechy pojemnika.

Najbardziej widoczne jest to w języku. Mówimy np. „jestem pełen entuzjazmu”, „zgromadziłem w sobie złe emocje”, „liczy się wnętrze (w odniesieniu do charakteru człowieka)”, „przechowuję to w pamięci”…

Mamy więc naturalną tendencję do rozumienia większości rzeczy tak, jakby posiadały cechy fizyczne. Łatwiej jest nam zrozumieć działanie tego, czego możemy doświadczyć cieleśnie (zobaczyć, dotknąć, powąchać) niż nienamacalnych koncepcji i teorii. Dlatego dokonujemy projekcji cech fizycznych na świat abstrakcyjnych pojęć.

Myśląc np. o sprawiedliwości, zwycięstwach i porażkach, uczuciach czy procesach myślowych, nadajemy im cechy obiektów lub zjawisk, których możemy doświadczyć za pomocą zmysłów.

Przykładów takich projekcji jest niezliczona ilość.

Ruch w górę kojarzymy z czymś pozytywnym (wzrost, sukces), a w dół z negatywnym (upadek, regres). Wzrastamy w wierze, podnosimy kogoś na duchu, mamy górnolotne plany lub możemy być upadłymi ludźmi, zmniejszając wymagania, obniżamy je, albo przeciwnie: podnosimy poprzeczkę.

Postrzegamy cele i procesy jako podróż. Zmierzamy do celu (realizujemy założenia planu), przecieramy szlaki (jesteśmy pionierami), stawiamy pierwsze kroki w jakiejś dziedzinie, każdy idzie swoją drogą, a małżonkom życzymy szczęścia na nowej drodze życia.

Rozumiemy wiele rzeczy jako pojemniki z wnętrzem i zewnętrzem. Miewamy głębokie przemyślenia, skrywamy tajemnice, przepełnia nas energia, a niektórym z nas się nie przelewa.

O czymkolwiek byśmy nie pomyśleli, widzimy to w kategoriach fizyczności. Nie odnosi się to jedynie do języka, ale ogólnego mechanizmu rozumienia świata. Te fundamentalne schematy kierują naszym postrzeganiem – także w projektowaniu.

Wyobraź sobie, że wracasz z pracy: otwierasz drzwi, zdejmujesz płaszcz i wieszasz go na haczyku przytwierdzonym do ściany. Prawdopodobnie poczułbyś się dość niekomfortowo, gdyby płaszcz zawisł tym razem w powietrzu, na środku pomieszczenia. Podobne odczucie budzą w nas źle skomponowane projekty graficzne. Poszczególne elementy powinny pozostawać we wzajemnych relacjach, jakie znamy z codziennego doświadczenia. Brak punktu zaczepienia dla płaszcza rodzi podobne odczucia, co chociażby umieszczony w niecodziennym miejscu przycisk logowania.

Rozumiejąc, że odbiorca nieświadomie patrzy na Twój projekt jak na fizyczną przestrzeń, możesz zacząć podejmować bardziej świadome decyzje projektowe. Oczekuje on, że w projekcie „obowiązuje” zasada grawitacji, jedne obiekty są „podporą” dla innych, „cięższe” (czyt. większe) obiekty znajdą się niżej, albo zostaną w jakiś sposób "zrównoważone".

Duży okrąg w lewym dolnym rogu został zrównoważony przez dwa mniejsze, znajdujące się w prawej części obrazu.

Oczywiście, jak zawsze w tematach dotyczących ludzkiej psychiki, bywa różnie. Żyjemy jednak we względnie jednorodnym społeczeństwie, posiadającym wspólne doświadczenia, więc można założyć, że kwestie percepcyjne będą zasadniczo podobne u większości z nas.

• Waga wizualna: Duże, ciemne lub złożone elementy są postrzegane jako cięższe. Dlatego naturalnie umieszczamy je na dole kompozycji, aby dać jej solidną podstawę i poczucie stabilności. To dlatego tak wiele stron internetowych ma ciemne, "ciężkie" stopki.

• Balans: Jeśli umieścisz duży "ciężki" element po jednej stronie, kompozycja wyda się niezrównoważona. Musisz go "zrównoważyć" innym obiektem (lub kilkoma mniejszymi) po przeciwnej stronie, aby uniknąć wrażenia, że projekt "przechyla się" na jedną stronę. Prowadziło by to do niepokojącego poczucia, które towarzyszy nam, gdy np. patrzymy na ciężki obiekt zawieszony na nitce lub tancerza nie potrafiącego utrzymać swojego środka ciężkości. Równowagę w kompozycji można sprowadzić do odczucia, wynikającego z codziennych doświadczeń cielesnych, które przenosimy na grunt postrzegania sztuki i grafiki.

Kompozycja jest symetryczna, gdy posiada przynajmniej jedną oś symetrii lub punkt symetrii, dzielące projekt na odpowiadające sobie (często będące swoim lustrzanym odbiciem) części. Artyści, graficy i projektanci dążą do jej osiągnięcia, bo zapewnia ona wizualne poczucie równowagi i harmonii. Ale zastanówmy się, z czego może to wynikać.

W grafice często odnosimy się do fizycznych koncepcji, takich jak równowaga i środek ciężkości (często jest to środek symetrii obrazu). Ale pojęcia te odnoszą się przecież do świata realnego... Okazuje się, że przenosząc cechy fizycznych obiektów, choćby takie jak ciężar czy gęstość, na elementy kompozycji, jesteśmy w stanie wywołać w odbiorcy odczucie harmonii i równowagi.

Skoro już znamy koncepcję ucieleśnienia, możemy odwołać się do typowych schematów percepcyjnych, by odpowiednio zbalansować i rozmieścić poszczególne moduły na stronie internetowej. Duże elementy postrzegane będą jako cięższe. Naturalnie jest umieszczać je niżej. Podobnie będzie z kolorami. Ciemne barwy wydają się „gęstsze”, dlatego zwykle stosuje się jaśniejsze kolory wyżej, a ciemniejsze niżej. Przyjrzyj się stopkom większości witryn internetowych. Są one często najmroczniejszym ;) elementem designu.

Pamiętaj, że stronę internetową postrzegamy jako system powiązanych wzajemnymi relacjami modułów, a nie zbiór losowych elementów. Dlatego staraj się zawsze budować stronę jak dobrze zaprojektowany budynek, którego „okna” znajdują się w precyzyjnie wyznaczonych miejscach, oddzielone równymi odstępami, a przycisk „zaloguj” pełni rolę zgrabnej i estetycznej klamki.

Znane w projektowaniu Prawa Gestalt są w rzeczywistości psychologicznym przejawem ucieleśnienia. Nasz mózg grupuje elementy, aby nadać sens otoczeniu, tak jak robiłby to w fizycznym świecie.

Obiekty znajdujące się bliżej siebie chętniej postrzegamy jako jedną całość lub grupę powiązanych elementów.

Zastosowanie: Projektując interfejs, umieść etykietę blisko pola formularza, do którego się odnosi. Grupuj powiązane przyciski akcji.

Elementy leżące blisko siebie postrzegamy jako należące do jednego zbioru. Przestrzenie pomiędzy grupami są widziane jako pewnego rodzaju granice.

Skłaniamy się do grupowania obiektów, które wykazują pewną wspólną cechę, taką jak kolor, kształt, rozmiar czy faktura.

Zastosowanie: Spraw, by wszystkie przyciski "call to action" na stronie wyglądały tak samo. Używaj tego samego koloru dla wszystkich klikalnych linków. To usprawnia nawigację, bo użytkownik uczy się funkcji danego elementu.

Elementy posiadające jakąś wspólną cechę (np. kolor) przypisujemy do wspólnej kategorii.

Występuje, gdy patrzymy na figury, które są niekompletne lub niedokończone. Mózg potrafi "uzupełnić" brakujące części obrazu na podstawie posiadanych schematów.

Zastosowanie: Projektuj proste, minimalistyczne ikony i logotypy. Nie musisz rysować całego kota; okrąg z wąsami wystarczy, by mózg rozpoznał symbol. To pozwala przekazać informację szybko i bez wizualnego bałaganu.

Mimo że obraz składa się jedynie z czterech narożników, z pewnością zauważysz w nim kwadrat. To przykład działania prawa domykania.

Koncepcja ucieleśnienia pokazuje, że kompozycja graficzna nie jest zbiorem arbitralnych reguł, ale wynika z fundamentalnych mechanizmów ludzkiego postrzegania. Traktujemy layout strony internetowej jak fizyczną konstrukcję – potrzebujemy w niej "rusztowania", porządku i stabilności.

Mając tę wiedzę, możesz tworzyć świadomie. Możesz budować harmonijne, spokojne projekty oparte na symetrii i równowadze, albo celowo łamać te zasady, by wywołać niepokój i dynamikę. Zrozumienie, dlaczego pewne zasady działają, daje Ci prawdziwą wolność twórczą i pozwala projektować nie tylko to, co dobrze wygląda, ale też to, co dobrze się "czuje". Jeśli interesuje Cię, jak wpływać na odbiorcę przy wykorzystaniu kolorów lub typografii, zajrzyj do moich poprzednich artykułów.

• Goniroszek, D. (2011) Językoznawstwo kognitywne: “ucieleśniony” umysł i znaczenie. W: Językoznawstwo: współczesne badania, problemy i analizy językoznawcze 5, s. 13-20 [11.05.2024]

• Kovecses, Z. (2011). Język, umysł, kultura. Praktyczne wprowadzenie. Kraków: Universitas

• Maruszewski, T. (2016) Psychologia poznania, umysł i świat, Gdańskie Wydawnictwo Psychologiczne