Strona główna » Wzorce projektowe

Zasady grupowania percepcyjnego i psychologia postaci

4 stycznia 2011 napisała Iga [ 5 odpowiedzi ] Drukuj wpis

Po raz kolejny, po teorii przepływu, sięgam do psychologii. Zarówno psychologia poznawcza, jak i społeczna, dają nam wiele wskazówek co do tego, jak projektować interakcje. Szczególnie przydatna w projektowaniu interfejsów jest znajomość psychologii postaci (gestalt).

Psychologia postaci, wywodząca się ze szkoły berlińskiej, zakłada, że zjawiska psychiczne trzeba rozumieć jako zorganizowane całości (a nie jako odrębne, proste elementy percepcyjne), a całość jest czymś więcej, niż sumą części. To tak jak z muzyką, melodie postrzegamy jako całość, a nie jako zestawienie odrębnych nut. Podobnie jest z postrzeganiem interfejsu jako całości, a nie tylko pojedynczych elementów graficznych. Z psychologii postaci wywodzi się kilka praw, których znajomość pomaga zrozumieć percepcję człowieka i projektować bardziej użyteczne interfejsy.

Prawo podobieństwa

Grupujemy elementy o podobnym wyglądzie. W poniższym obrazku dostrzegamy więc zgrupowane w rzędy niebieskie i szare kulki (z powodu koloru) oraz zgrupowane w kolumny figury (z powodu kształtu i ukierunkowania). Nasz wzrok automatycznie grupuje elementy o podobnym wyglądzie, czy to z powodu ich wielkości, kształtu, czy to koloru.

Prawo podobieństwa

Prawo podobieństwa

Cennik letsfreckle.com nie wymaga od nas czytania treści, aby wiedzieć, który przycisk dotyczy którego planu. Pomimo sporej odległości między nazwą a przyciskiem akcji, użytkownik z łatwością zidentyfikuje właściwą pozycję. Dzieje się tak dzięki użyciu tego samego stylu obu obszarów (kolor tła i czcionki). Z kolei Arc90 wykorzystują kolor do grupowania członków zespołu w odpowiednie specjalizacje zawodowe. Ballpark stosuje do grupowania percepcyjnego elementów także kształt i styl ikon, odróżniając w ten sposób dwa poziomy menu nawigacyjnego.

Prawo podobieństwa wykorzystuje się dość powszechnie do wskazywania użytkownikom aktywnych elementów na stronie – linków, przycisków, klikanych obszarów. Dlatego w dobrych projektach stosuje się najwyżej trzy style dla linków czy konsekwentne i odrębne style dla akcji pierwszorzędnych i drugorzędnych. Dobry przykład daje Goldenline.pl, który spójnie stosuje jeden kolor dla wszystkich linków. W ten sposób użytkownicy szybko uczą się identyfikować klikane elementy, łącząc je w grupę elementów o tych samych właściwościach.

Podobieństwo CTA i opisów w cenniku letsfreckle.com

Podobieństwo CTA i opisów w cenniku letsfreckle.com

Grupowanie członków zespołu przy użyciu kolorów na arc90.com

Grupowanie członków zespołu przy użyciu kolorów na arc90.com

Pogrupowanie pozycji w menu w dwa poziomy w aplikacji ballpark.com

Pogrupowanie pozycji w menu w dwa poziomy w aplikacji ballpark.com

Konsekwentnie stosowany kolor czcionki dla linków na goldenline.pl

Konsekwentnie stosowany kolor czcionki dla linków na goldenline.pl

Prawo bliskości

Prawo bliskości mówi, że nasz umysł grupuje sąsiadujące ze sobą elementy. Dlatego na obrazku widzimy 6 rzędów niebieskich kulek po lewej stronie i 5 kolumn po prawej. Jedyną różnicą jest odległość między kulkami.

Prawo bliskości

Prawo bliskości

Przykład Linkedin.com pokazuje, że sama zasada bliskości wystarczy, aby nasz umysł łączył w grupę dwa elementy, w tym przypadku odpowiednie stanowisko z odpowiednią osobą. Jest to szczególnie przydatny mechanizm dla poprawy użyteczności wszelkich formularzy. Bardzo dobrze pokazał to Ian na przykładzie JetBlue.com. W pierwotnej wersji krótkiego formularza niejasne było, których pól dotyczy opis „OR” (lub). Wystarczy przybliżyć do siebie odpowiednie pola i oddalić od reszty, aby stało się to oczywiste. Inny przykład ze strony szkola.findling.pl pokazuje, jak nawet subtelne przybliżenie etykiet do właściwych pól ułatwia identyfikację i poprawia czytelność formularza.

Zastosowanie bliskości do pogrupowania osób i ich stanowisk na Linkedin.com

Zastosowanie bliskości do pogrupowania osób i ich stanowisk na Linkedin.com

Zastosowanie prawa bliskości dla poprawy użyteczności formularza na przykładzie jetblue.com

Zastosowanie prawa bliskości dla poprawy użyteczności formularza na przykładzie jetblue.com

Zastosowanie prawa bliskości dla poprawy użyteczności formularza na szkola.findling.pl

Zastosowanie prawa bliskości dla poprawy użyteczności formularza na szkola.findling.pl

Prawo dobrej kontynuacji

Elementy tworzące linię lub krzywą postrzegane są jako elementy związane ze sobą – o czym mówi prawo dobrej kontynuacji. Pomimo, że na poniższym rysunku rozróżniamy dwa kolory, to jednak nasza percepcja grupuje kulki nie ze względu na ich barwę, ale na położenie, dostrzegając tworzące się dwie linie.

Prawo dobrej kontynuacji

Prawo dobrej kontynuacji

Prawo dobrej kontynuacji jest wykorzystywane nie tylko dla zobrazowania procesów, jak w przykładzie strony domatu.pl. Wrażenie dobrej kontynuacji może być bardziej subtelne, a mimo to kierować uwagą odbiorcy. Bardzo dobrze pokazał to Shawn Borsky na przykładzie strony webcontact.de, na której „ruch” rakiety kieruje uwagę odbiorcy na markę. Jeszcze subtelniej widać ten mechanizm na stronie popla.pl, na której pojawiające się z komórki miasto kieruje uwagę odbiorcy od smartfona, do formularza i podstawowych przycisków akcji.

Wykorzystanie prawa dobrej kontynuacji do diagramu na stronie domatu.pl

Wykorzystanie prawa dobrej kontynuacji do diagramu na stronie domatu.pl

Kierowanie uwagą użytkownika na stronie webcontact.de

Kierowanie uwagą użytkownika na stronie webcontact.de

Kierowanie uwagą użytkownika na stronie popla.pl

Kierowanie uwagą użytkownika na stronie popla.pl

Zasada minimum percepcji

Reguły  grupowania percepcyjnego wiążą się z bardziej ogólną zasadą minimum percepcji. Według niej spostrzegamy zawsze najprostsze organizacje, które pasują do wzorca wzrokowego. Jeśli dany obszar interfejsu stosuje różne bodźce wzrokowe (kolor, odległość, kształt itd.), to ludzki umysł będzie kierował się tymi bodźcami, które będzie mu najłatwiej przetworzyć. Trzeba więc mocno uważać w doborze elementów i mieć na uwadze wszystkie, a nie tylko jedną zasadę grupowania percepcyjnego.

W najbliższym moim wpisie pokażę kilka kolejnych zasad wywodzących się z psychologii postaci.

Warto poczytać:

Zimbardo, P.G. (2004) Psychologia i życie. Warszawa: PWN

Bradley, S. (2010) Gestalt Principles: How Are Your Designs Perceived?

Scholarpedia – Gestalt principles

Autorka

Iga Mościchowska

www: http://witflow.com
Managing Partner i UX Director w firmie WitFlow. Z zamiłowania projektant interakcji i badacz użyteczności, z wykształcenia socjolog. Szkoli, wykłada na AGH, występuje na konferencjach branżowych. Pracowała m.in. dla marek: Amica, Agora, eBay Classifieds, Egmont, Maspex Wadowice, MSZ, Polskapresse, PWN.pl, Vattenfall, a także dla licznych startupów. Czytaj więcej
Tagi: ,
  • eN

    popla.pl jest raczej przykładem w jaki sposób zmarnowano ten pomysł, wchodząc na stronę widzę miasto które zasłania telefon w brzydki postrzępiony sposób, zamiast wyłaniać się z niego. W miniaturce to jeszcze jakoś wygląda, ale na stronie to już porażka.

  • http://uxbite.com Iga

    Zapewne można było to wykonać lepiej, jak wszystko ;)

  • Pingback: Warsztaty: A user user manual z Chrisem Nodderem | Agile Surfing

  • Wojciech

    Kolejny świetny artykuł tej autorki. Czytam jeden po drugim. Krótko, zwięźle i z przykładami. Czekam z niecierpliwością na kolejne. Pozdrawiam autorkę!

  • Bluenka

    figura – tło – postać widziana w tle; to co jest tłem
    może być też figurą