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.

Zauważalne treści na rozbudowanym tle na mowimypofrancusku.pl

Wyróżnione treści na rozbudowanym tle na zakochajsiewkolorze.pl

Kierowanie uwagą przy użyciu mechanizmu figury i tła

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

Zamykanie na przykładzie gazetapraca.pl - dostrzegalne kolumny treści pomimo braku obramowania

Zamykanie na przykładzie studioengram.pl - kolumnowy rozkład treści bez obramowań

Zamykanie na przykładzie squarespace.com - wyraźne kolumny i rzędy

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ą.

Nietypowy wygląd wyszukiwarki na nike.com nie pasuje do wcześniejszych doświadczeń ze stronami

Szara wyszukiwarka nie odpowiada konwencji

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