Zastosowanie psychologii postaci w projektach webowych
W poprzednim artykule o zastosowaniu psychologii postaci w webdesignie skupiłam się na zasadach grupowania percepcyjnego. Tym razem przyjrzę się bardziej ogólnym wnioskom z nauk gestaltowców.
Figura tło
Postrzegamy elementy jako figury (elementy skupiające naszą uwagę) lub tła (podłoże dla figury). Umiejętność odróżnienia ich od siebie pozwala nam rozgraniczać bodźce istotne, od tych mniej istotnych. Nasza tendencja do postrzegania figury jako znajdującej się przed tłem jest bardzo silna, nawet gdy figura tak naprawdę nie istnieje. W taki sposób nasz umysł interpretuje powyższy obrazek, dostrzegając na nim biały trójkąt i białe tło jako osobne elementy, postrzegając subiektywne kontury, których w rzeczywistości nie ma. Taka interpretacja wiąże się też z prawem pregnancji, według której łatwiej nam dostrzec trzy kółka i dwa trójkąty, niż sześć oddzielnych, tak zwanych złych figur.
Na stronach mowimypofrancusku.pl i zakochajsiewkolorze.pl, mimo iż tło jest złożone i intensywne, to jednak użytkownik bez problemu odkrywa właściwe treści i kieruje ku nim swoją uwagę. Efekt ten jest dodatkowo wzmacniany przez cienie, które pokazują obszary będące na górze (a więc ważniejsze) oraz przez rozmazanie tła. Ostatni przykład pokazuje, jak wykorzystanie tego mechanizmu ułatwia przetwarzanie informacji, skupiając uwagę odbiorcy na etykiecie, a nie całym obszarze odnośnika. W kolumnie po prawej nazwa linka i obramowanie traktowane są jak równorzędne figury, co utrudnia percepcję. Warto o tym pamiętać przy tworzeniu makiet funkcjonalnych.
Zamykanie
Zamykanie to nasza tendencja do postrzegania elementu jako pełnego i symetrycznego, pomimo istniejących zakłóceń i luk. W powyższej ilustracji dostrzegamy więc po lewej stronie szary okrąg. Im więcej siły wymaga od nas uzupełnienie luk w postrzeganym elemencie, tym słabiej działa zasada domykania. Dlatego po prawej stronie powyższego obrazka trudno nam już dostrzec tą samą figurę.
Przykłady polskich serwisów pracuj.pl i gazeta praca.pl pokazują, że ludzkie oko nie potrzebuje obramowania, aby w rozbudowanym rozkładzie strony dostrzec równomiernie rozłożone prostokąty. Także mniejsze serwisy, typu studioengram.pl czy squarespace.com, mogą wykorzystać mechanizm do tworzenia minimalistycznego w środkach wyrazu i poukładanego layoutu.

Zamykanie na przykładzie pracuj.pl - dostrzegalne boksy z linkami i najnowszymi artykułami pomimo braku obramowania
Zasada wcześniejszych doświadczeń i ramy odniesienia
Nasz umysł jest bardziej skłonny do grupowania ze sobą tych elementów, które poprzednio też były ze sobą grupowane. Nasze doświadczenie wpływa na naszą percepcję. Obok kontekstu czasowego (czyli właśnie doświadczenia), na naszą percepcję wpływa także kontekst przestrzenny. Umieszczenie symbolu z kółka (na obrazku powyżej) między liczbami 12 i 14 powoduje, że symbol ten dostrzegamy jako liczbę 13. Kiedy zmienimy ramy odniesienia na kolejne litery alfabetu, symbol nabiera innego znaczenia – litery B.
W interakcji człowiek-komputer doświadczenie użytkownika (czyli dotychczasowa praktyka z innymi interfejsami i serwisami) odgrywa dużą rolę. Utarło się na przykład, że pole wyszukiwarki to biały pasek, zaś kolor szary jest często identyfikowany z elementem nieaktywnym. Dlatego użytkownicy nike.com czy typography.com mogą mieć problem z identyfikacją wyszukiwarki, a w tym drugim przypadku pomylić go dodatkowo z nieaktywną funkcjonalnością.
Jak widać na przykładzie serwisu ewnioski.pl, występowanie czerwonych etykiet i obramowań pól formularza sugeruje użytkownikom, że mamy do czynienia z jakimś błędem (dostrzegamy to nawet pomimo braku komunikatu błędu). Jednak podobny czerwony kolor użyty w serwisie czerwona maszyna.pl nie będzie już tak jednoznacznie identyfikowany z błędami, gdyż barwa ta stanowi element identyfikacji wizualnej marki i jest wszechobecny na stronie sklepu. Użytkownik uczy się szybko, że w tym kontekście kolor czerwony nie jest jednoznaczny z błędem.

Kontekst czasowy i przestrzenny wpływa na interpretację czerwonych wyróżnień pól formularza na wnioski.pl

Ramy odniesienia dla czerwonych napisów i obramowań na czerwonamaszyna.pl nadają im innego znaczenia
Podsumowanie
Choć reguły te dotyczą głównie warstwy wizualnej projektów, to wpływają w sposób olbrzymi na percepcję funkcjonalności oraz użyteczność interakcji. Decydują o tym, jak użytkownik przetwarza dostarczane bodźce, jak je łączy w logiczne całości i interpretuje. Psychologia postaci dostarcza nam tak naprawdę potężnych narzędzi do kierowania uwagą odbiorców. Dlatego też mechanizmy te powinny być znane zarówno grafikom, jak i projektantom interakcji.
Źródła i dodatkowe materiały:
Zimbardo, P.G. (2004) Psychologia i życie. Warszawa: PWN
Borsky, S. (2010) Using Power Structure and Gestalt for Visual Hierarchy
Rutledge, A. (2009) Gestalt principles of perceptron – 5: Closure ; Gestalt principles of perception – 1: Figure ground relationship