Zasady grupowania wizualnego – psychologia Gestalt cz. II

Zasady grupowania wizualnego – psychologia Gestalt cz. II

Jeżeli przebrnąłeś przez część pierwszą, wiesz już, że my – ludzie – nieświadomie przestrzegamy zasad, które określają, co będzie pojedynczym elementem, a co zbiorem obiektów. Zarówno w codziennym życiu, jak i podczas przemierzania wirtualnego świata. W poprzednim artykule skoncentrowałam się na zasadzie bliskości i podobieństwa. Dziś będzie o zależności figura-tło.

Nie powiedziałam wcześniej o jednej ważnej rzeczy: mózg jest zaprojektowany do postrzegania wszystkiego w całości. Domyślnie przy pierwszym rzucie oka nie zobaczysz nóg krzesła i śrub, jakimi są przytwierdzone do siedziska. Zobaczysz krzesło. Powiem nawet więcej: Twój mózg pominie rozważania o tym, co sprawia, że jest to krzesło. Od razu otrzymasz ofertę „usiądź na mnie” (względnie „połóż na mnie reklamówki z zakupami”). O ofertach na pewno jeszcze będę pisać nie raz, bo to jeden z moich ulubionych tematów. Teraz jednak zależy mi na podkreśleniu, że umysł użytkownika dąży do scalania obiektów, a Twoim zadaniem – jako projektanta – jest odpowiednio te obiekty od siebie odseparować.

Mówiąc jeszcze bardziej wprost: użytkownik, wchodząc na dowolną stronę, dostaje w twarz całą zawartą na niej treścią. Całą. Jednocześnie. Będzie potrzebować chwili, żeby dojść do tego, co jest czym i przede wszystkim, co musi zrobić, żeby dostać to, po co tu przyszedł. Od tego, jak dobrze zaprojektowany jest interfejs, zależy, jak szybko użytkownik przejdzie od „Ratunku! Zabierzecie mnie stąd!” do  „OK, Janusz, nie tragizuj, weź się w garść, szukasz klapków, po prostu zignoruj reklamy i kliknij na buty” (Jeśli chcesz się dowiedzieć, dlaczego Janusz ignoruje reklamy – kliknij tutaj i przewiń na sam dół artykułu).

Dobra, powiedziałam o superważnej rzeczy, która mi wcześniej umknęła. Czuję się rozgrzeszona. Jedziemy dalej.

Zasada figura-tło pozwala nam wyodrębnić samodzielny element z całości sceny wzrokowej. Pomaga też określić, co jest kluczowe w danym widoku. Ma to zatem związek z „podziałem” uwagi na nieistotne tło i strategiczną figurę. Istnieje sporo kryteriów decydujących o podziale figura-tło. W przypadku obiektów w realnym świecie (i zdjęć) najważniejsza jest wielkość i ostrość. Oczywistym jest, że mały przedmiot na tle dużego w większości przypadków znajduje się bliżej, a więc możemy się z nim spotkać szybciej (a to dobrze, jeśli należy do kategorii „mogę tego użyć/mogę się z tym zaprzyjaźnić/mogę to zjeść” albo bardzo źle, jeśli kategoria nosi etykietę „przeciwnik”). Niezależnie od tego, czym jest ten niedaleki obiekt – gdy tylko się pojawia, nasze moce percepcyjne przerzucane są błyskawicznie, żeby go zidentyfikować, ocenić i albo pogłębić analizę, albo przejść dalej. Podobnie rzecz się ma z elementami ostrymi i nieostrymi. Ostry – znajduje się bliżej w stosunku do reszty sceny wzrokowej.

No dobrze, ale to dotyczy realnego świata, ewentualnie zdjęć, tak? Bynajmniej! Gdy patrzysz na stronę internetową/aplikację po raz pierwszy, najpierw zauważasz to, co jest wyodrębnione z tła. Oczywiście jeżeli strona jest pstrokata, ten efekt pewnie zaniknie (zresztą jeśli użytkownik ucieknie z krzykiem po pierwszych 3 sekundach, to i tak nie ma większego znaczenia, co uznał za figurę i tło, no nie?). Jeżeli projektant nie zachowa umiaru i będzie atakować ruchomymi elementami albo jaskrawymi kolorami – w najlepszym razie użytkownik zignoruje je i spróbuje dokopać się do contentu, a w najgorszym po prostu zamknie stronę. Na pewno jednak nie będzie się czuć komfortowo. Należy szanować odbiorcę, stosując subtelne wyróżnienia, jak wielkość, kontrast, czy cień, aby „wysunąć” pewne elementy na wierzch, a inne schować. Poniżej całkiem niezły przykład:

Źródło: brand24.pl

Na absolutnie pierwszy plan wysuwa się Call To Action prowadzący użytkownika do założenia konta testowego. Następnie zauważam logo i krótki opis narzędzia oraz korzyści płynących z pracy z nim. Potem „pojawia” się menu i ponownie – choć już subtelniej – CTA. A dopiero, gdy się przyjrzę, zobaczę lekkie tło symbolizujące wykresy i social media. Dla mnie hierarchia wizualna i architektura informacji: 10 na 10.

To teraz standardowo zły przykład – dla kontrastu. I nie, nie będzie pstrokacizny. Pstrokato już było w poprzedniej części. Teraz będzie pozornie lekka, nowoczesna strona. Gotowy?

Źródło: www.tigerpower.pl/#restart

Zanim przejadę się po twórcach powyższego dzieła, polecam wejście na powyższą stronę, bo zdjęcie nie oddaje w pełni frustracji, jaką ona wywołuje. Elementy strony są ruchome. Podążają za ruchem myszy, utrudniając myślenie i trafienie w cokolwiek.

No dobrze, co my tu mamy? Na pierwszym planie puszka napoju – genialnie odseparowana od tła. Aż ma się ochotę ją chwycić. Tylko co z tego, skoro nawet nie jest klikalna. Nie niesie też żadnej wartościowej wskazówki, pozwalającej się odnaleźć. Mój mózg został zmotywowany do pracy, określił puszkę, jako priorytetową i puff – nic się nie stało. Warto tu napomknąć, że wyhamowanie rozpoczętych procesów jest jedną z najbardziej kosztownych energetycznie operacji, jakie może podjąć mózg.

Idźmy dalej. Po zignorowaniu puszki, w oczy rzucają się ludzie. To nie ma związku z zasadą figura-tło. Jesteśmy zaprogramowani ewolucyjnie do rozpoznawania twarzy, czy postaci jako takich. Pisałam o tym tutaj i tutaj. Dlatego po prostu przejdźmy dalej. Po zignorowaniu ludzi, zauważyłam napis „TIGER RESTART” i nie uwierzycie – też nie jest klikalny. W normalnych warunkach musiałoby mi naprawdę niesamowicie zależeć na znalezieniu czegoś na tej stronie, żebym została dłużej.

Na kolejnym planie znajdują się strzałki w prawo i w lewo. Kliknęłam. Oto, co dostałam:

Źródło: www.tigerpower.pl/#speed

Jest to inny widok banera mającego postać karuzeli. Tyle tu emocji, że nawet puszka przegrała walkę o atencję. Klik w strzałkę jednak nic nie zmienił w kwestii poszukiwanych przeze mnie informacji, więc wróciłam na landing page. Kolejne spojrzenie na interfejs. Na szarym końcu został mi logotyp, którym mogę sobie odświeżyć tę stronę (yay!) i menu, które prawdopodobnie mnie uratuje i poprowadzi w jakiekolwiek inne miejsce. Reasumując: strona jest super nowoczesna, młodzieżowa, przykuwa uwagę, ale hierarchia wizualna i architektura informacji leżą i kwiczą. Niestety.

Zmęczyła mnie ta strona niemiłosiernie. Niech za podsumowanie wystarczy to: marzy mi się, żeby projektanci wreszcie zrozumieli, że mniej znaczy więcej.

Blibliografia:

1. Matoga, B. (2012). Projektowanie użytecznych interfejsów. Rocznik Kognitywistyczny2011(Tom 5), 129135.

2. Koffka, K. (2013). Principles of Gestalt psychology. Routledge.

3. Krug, S. (2000). Don’t make me think!: a common sense approach to Web usability. Pearson Education India.

Dodaj komentarz