Gestalt · Law of similarity

Zasada podobieństwa Gestalt (law of similarity)

1050 kropek w równych odstępach. Różni je tylko kolor.

Każda kropka stoi w tej samej odległości od sąsiadek i ma ten sam kształt. Słowo czytasz tylko dlatego, że część z nich jest czerwona. To zasada podobieństwa: co wygląda tak samo, oko uznaje za jedną grupę, nawet z daleka. Sprawdź, co wygrywa: kolor czy kształt →

  1. 02Kolor czy kształt
  2. 03Co tu się klika
  3. 04Trzy media
  4. 05Kiedy podobieństwo zawodzi
  5. 06Pytania

Kolor czy kształt?

Max Wertheimer, ten sam, który opisał zasadę bliskości, zauważył w 1923 roku, że oko grupuje też po wyglądzie. Kolor, kształt, rozmiar. W tej siatce odstępy ani razu się nie zmieniają, a mimo to widzisz raz kolumny, raz rzędy.

48 takich samych kropek w równych odstępach. Widzisz siatkę i nic więcej. Odstępy się nie zmieniły. Co druga kolumna jest czerwona i siatka od razu rozpada się na kolumny. Znowu jeden kolor, ale co drugi rząd to kwadraty. Teraz widzisz rzędy. Kolor i kształt naraz. Kolumny czy rzędy? Większość ludzi widzi kolumny, bo kolor grupuje mocniej niż kształt.

Co tu się klika?

W interfejsie prawo podobieństwa mówi, co działa tak samo. Gdy każdy link ma inny styl, a zwykły tekst wygląda jak link, użytkownik zaczyna zgadywać.

Każdy link wygląda inaczej, a czerwone „Pro” wygląda jak link, choć nic nie robi. Co tu się klika? Zaznaczmy, co naprawdę się klika: trzy linki w trzech stylach. „Pro” jest tylko informacją. Wszystkie linki dostają ten sam wygląd. „Pro” staje się etykietą i przestaje udawać link. To, co wygląda tak samo, działa tak samo. Nie trzeba jeździć kursorem i sprawdzać.

ta sama rola = ten sam wygląd

Link wszędzie wygląda jak link, przycisk jak przycisk. A to, co się nie klika, nie udaje, że się klika. Na tym stoi każdy design system.

Ta sama zasada, trzy media.

Podobieństwo porządkuje wszędzie tam, gdzie elementy muszą stać w równej siatce. Odstępów nie ruszasz, grupy robi kolor.

  1. 01

    Wykres

    Kolor w legendzie i kolor linii to ta sama informacja. Czytelnik łączy je bez strzałek i podpisów.

  2. 02

    Kalendarz

    Weekendy w innym kolorze. Tygodnie widać od razu, choć wszystkie dni stoją w równej siatce.

  3. 03

    Statusy

    Ten sam status zawsze wygląda tak samo. Po kilku dniach nikt nie czyta etykiet, wystarczy rzut oka.

Wytłaczanka z dwudziestoma czterema jajkami w równej siatce. Druga i czwarta kolumna to jajka barwione na czerwono.AI

Kiedy podobieństwo zawodzi?

Kolor grupuje mocno, więc łatwo nim przesadzić albo powiedzieć coś, czego się nie chciało.

ProblemCo z tym zrobić
Za dużo kolorówGdy każdy element ma własny kolor, nic się z niczym nie łączy. Wybierz kilka kolorów i każdemu daj jedno znaczenie.
Sam kolorOkoło jeden na dwunastu mężczyzn słabo odróżnia czerwień od zieleni. Wspieraj kolor kształtem, ikoną albo podpisem.
Fałszywe podobieństwoTekst w kolorze linku wygląda na klikalny, karta jak przycisk wygląda na przycisk. Co wygląda tak samo, musi działać tak samo.
Za mała różnicaDwa prawie te same odcienie szarości oko bierze za jeden. Jeśli coś ma być osobną grupą, niech różni się wyraźnie.
Dwadzieścia identycznych guzików w równej siatce. Rzędy czerwone przeplatają się z kremowymi.AI

Pytania o zasadę podobieństwa.

  1. 01

    Czym jest zasada podobieństwa?

    To jedna z zasad psychologii Gestalt: elementy podobne do siebie kolorem, kształtem, rozmiarem albo fakturą postrzegamy jako grupę, nawet gdy stoją daleko od siebie.

  2. 02

    Zasada czy prawo podobieństwa?

    To samo. W polskich książkach spotkasz obie nazwy, po angielsku to law of similarity. Należy do tej samej rodziny co zasada bliskości, domknięcia i ciągłości.

  3. 03

    Co grupuje mocniej: kolor czy kształt?

    Najczęściej kolor. Dlatego kolor zostaw na najważniejsze grupy, na przykład wszystko, co się klika, a kształt i rozmiar na podziały drugiego rzędu.

  4. 04

    Czym się różni od zasady bliskości?

    Bliskość grupuje odstępami, podobieństwo wyglądem. Najlepiej, gdy mówią to samo: podobne elementy stoją razem. Gdy się kłócą, oko się gubi.

Pinezki w równej siatce pięć na pięć. Czerwone główki biegną po przekątnej, reszta jest kremowa.AI

Podobieństwo w trzech zdaniach.

  1. 01Co wygląda podobnie, oko łączy w grupę, nawet z daleka.
  2. 02Każdej roli daj jeden wygląd i trzymaj się go wszędzie.
  3. 03Co wygląda inaczej, musi być czymś innym.

Spójnie.

Branding, design i AI w pracy grafika.mikirobi.ai
01/07