Zasady grupowania wizualnego – psychologia Gestalt cz. I

Zasady grupowania wizualnego – psychologia Gestalt cz. I

Na co dzień kierujemy się całym mnóstwem zasad, które pozwalają łączyć elementy w obiekty, a obiekty w grupy (niech ten wpis będzie częścią pierwszą – nie chciałabym przesadzić z ilością informacji). Dzięki temu potrafimy oddzielić groch od ryżu, gdy są wymieszane w jednej misce albo też znaleźć określoną osobę wśród tłumu. Potrafimy też dużo bardziej imponujące rzeczy! Po chwili namysłu radzimy sobie z określeniem, gdzie kończy się jedna zebra, a zaczyna się druga – np. na zdjęciu z nagłówka (nie wiem jak dla Ciebie, ale dla mnie to ekscytująca supermoc).

Ze względu na postępującą cyfryzację, percepcja ludzka przeniosła się z bodźców naturalnych – przestrzennych (jak powyższe), na bodźce wirtualne – płaskie. Cała maszyneria zaprzęgnięta niegdyś do wybierania najładniejszej marchewki ze skrzynki na targu, uaktywnia się teraz, gdy poruszamy się w zdigitalizowanym świecie. Oczywiście nadal wybieramy marchewki na targu i to się pewnie nieszybko zmieni, ale ja przecież nie o tym.

Blisko, bliżej, za blisko!

Psychologia Gestalt zajmuje się zasadami, którymi zdają się kierować nasze umysły, rozpoznając obiekty, grupując je lub oddzielając od siebie. Najczęściej przywoływana zasada – zasada bliskości – mówi o tym, że odległość, na jaką odsunięte są od siebie elementy, decyduje o tym, które z nich są postrzegane jako całość.

Źródło: własne

Zgodzisz się pewnie, że elementy po lewej tworzą cztery kolumny. Wystarczy  jednak nieznacznie zmienić odległości między nimi i można wywołać wrażenie, że zamiast tego są ułożone w trzech rzędach. Zauważ też, że Twój mózg nie połączyłby tych dwóch grup w jeden obraz, mimo iż nie ma między nimi granic. Jak byś nie spojrzał – główne grupy są dwie. Wystarczy sama przestrzeń.

O zaletach przestrzeni pisałam wcześniej (np. tutaj), przypomnę więc tylko krótko, że jeżeli strona „ma czym oddychać”, dużo szybciej przychodzi użytkownikowi oddzielanie od siebie bloków informacyjnych. Niezłym przykładem poprawnie dotlenionej strony jest strona PKO BP (nie, nie płacą mi za reklamę, chociaż mogliby).

Screen własny (źródło: pkobp.pl/klienci-indywidualni/karty (dostęp: 27.09.2018))

Nie twierdzę, że to idealne rozwiązanie. Oczywiście – nie. Zawsze można coś poprawić. Ale w kwestii przestrzeni, a więc ułatwienia użytkownikowi kategoryzacji informacji, PKO BP radzi sobie naprawdę nieźle. Dla podkreślenia, co mam dokładnie na myśli, podrzucam jeszcze przykład strony ledwo oddychającej:

Screen własny (źródło: biedronka.pl (dostęp: 27.09.2018))

Brr. Nie wiem, jak Ty, ale ja się prawie udusiłam razem z nią…

Podobne, ale inne

Ale wróćmy do rzeczy. Inna zasada Gestalt dotyczy podobieństwa i wydaje się równie banalna, co poprzednia. Jednak podobnie jak ona niesie za sobą niezwykle ważne dla projektanta wskazówki. Spójrz na tę prostą ilustrację:

Źródło: własne

Potrzebujesz kilkuset milisekund, żeby stworzyć grupy z przedstawionych na niej elementów. Zauważ, że wcześniej przywołana przeze mnie zasada bliskości nie wygasła. Nadal przestrzeń wpływa na podział. Tym razem jednak obiekty przynależą do mniejszych grup – również ze względu na swój kształt. Jednoczesne działanie tych dwóch zasad może wpływać na różnice w odbiorze treści przez dwóch różnych użytkowników. Bez badań trudno orzec, która zasada działa silniej na większość userów. Dlatego tak ważne jest pytanie ich o zdanie i sprawdzanie, które odpowiedzi są częstsze.

Zasada podobieństwa nie dotyczy wyłącznie kształtów (nie dotyczy nawet wyłącznie bodźców wizualnych, ale przy okazji projektowania stron internetowych, czy aplikacji to przecież właśnie one mają znaczenie). Umysł jest maszyną do kojarzenia faktów, grupowania obiektów i umieszczania ich w kontekście.

Źródło: własne

Oprócz tego, że jesteś w stanie błyskawicznie powiązać ze sobą powyższe słowa i potrafisz nawet wyjaśnić dlaczego, założę się, że na ułamek sekundy większość z nich wyświetliła Ci jakieś skojarzenie (obraz, wspomnienie, inne słowo, może nawet emocje). W powyższym przykładzie granice znaczeniowe między słowami są ogromne, więc grupowanie było zadaniem trywialnym. Imiona męskie, środki transportu i spożywcze produkty naturalne znajdują się przecież w zupełnie innych szufladach umysłu.

Chciałabym Ci jednak pokazać, jak subtelne bywają różnice, mające wpływ na grupowanie.

Źródło: własne

Nie sądzę, żeby ktokolwiek musiał się zastanawiać, co łączy te słowa ze sobą. Przychodzi nam to z łatwością. Po krótkiej chwili wiesz już, że jest to w zasadzie jeden zbiór, dający się podzielić na dwa: imiona męskie, ale w brzmieniu oficjalnym i zdrobniałe.

No dobrze, ale jak to się ma do projektowania aplikacji, czy stron? Spieszę z wyjaśnieniem. Grupowanie na podstawie zasady podobieństwa odbywa się na przykład w przypadku tworzenia nawigacji przez projektanta i późniejszego korzystania z niej przez użytkownika.

Niektóre przyporządkowania są oczywiste. Jeśli masz do wyboru kategorie „siedzenie”, „jedzenie”, „rozrywka”, to obiekt o nazwie „fotel” z pewnością umieścisz w pierwszej z nich. Co jednak, jeśli masz zdecydować, gdzie powinno się znaleźć „krzesełko do karmienia dzieci”? Oczywiście możesz stwierdzić, że to jasne i po prostu wrzucić je do worka razem z innymi rzeczami służącymi do siedzenia. Ryzykujesz jednak, że część użytkowników będzie się zastanawiać. Im więcej punktów, w których user musi myśleć, tym szybciej poczuje się zniechęcony.

Czuję jednak, że wchodzimy w dyskusję na kolejny już temat, więc i na kolejny wpis.

Podsumowując informacje, którymi chciałam się z Tobą podzielić w części pierwszej o zasadach Gestalt, projektant powinien stale myśleć o tym, w jaki sposób user kategoryzuje dane. Bardzo ważne jest kontekstowe umieszczanie informacji – odległości, jakie dzielą poszczególne bloki ułatwiają myślenie, czytanie i podejmowanie decyzji. Jeżeli są zbyt małe lub (o zgrozo!) nie istnieją – trudno rozróżniać wątki. Po drugie (i chwilowo ostatnie): podobieństwo sprawia, że zaliczamy obrazy jako powiązane ze sobą, jednak nie dotyczy to wyłącznie bodźców wzrokowych. Warto o tym pamiętać, tworząc kategorie, podkategorie i podpodkategorie menu.

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.

1 komentarz do wpisu “Zasady grupowania wizualnego – psychologia Gestalt cz. I”

Dodaj komentarz