proces percepcji pozwala nam postrzegać świat poprzez zmysły wzroku, węchu, dźwięku, smaku i dotyku. W szczególności nasz system wizualny przetwarza ogromne ilości informacji w swoim otoczeniu. Zamiast postrzegać elementy oddzielnie, nasz mózg organizuje wzory, przedmioty i kształty w całe formy, które możemy zrozumieć.

Zasady grupowania gestalt percepcji wzrokowej opisują tę organizację jako zbiór zasad, które wyjaśniają, w jaki sposób postrzegamy i organizujemy tę ogromną ilość bodźców wzrokowych. Zasady gestalt-podobieństwo, bliskość, zamknięcie, figura-Grunt, ciągłość i wspólny los – są popularnym narzędziem używanym przez projektantów do wizualnego organizowania informacji. Jako visual designer, a obecnie interaction designer, stosuję te zasady na bieżąco do tworzenia relacji i różnic między elementami w moich projektach. Zrozumienie, jak działają te zasady i jak je wykorzystać w swoich projektach, daje mocniejszą i bardziej angażującą pracę.

czy jesteś gotowy, aby poprawić swoje projekty? Zacznijmy od podobieństwa.

podobieństwo

zasada gestalt podobieństwa mówi, że elementy, które są podobne, są postrzegane jako bardziej powiązane niż elementy, które są niepodobne. Podobieństwo pomaga nam organizować obiekty poprzez ich powiązanie z innymi obiektami w grupie i może mieć wpływ na atrybuty koloru, rozmiaru, kształtu i orientacji.

używanie koloru do przypisywania relacji

podobieństwo ma szczególny wpływ na kolor. W poniższym przykładzie zauważ, że kolorowe kształty mają silny wpływ na przypisywanie grup lub relacji, nawet jeśli uwzględniono różne kształty.

używanie rozmiaru do przypisywania relacji

rozmiar jest kolejnym użytecznym narzędziem, którego możemy użyć do tworzenia podobieństwa. W poniższym przykładzie podobieństwo rozmiaru powoduje, że większe kształty wyróżniają się i tworzą grupę, mimo że wszystkie kształty są takie same.

rozmiar sprawia, że większe kwadraty wydają się ważniejsze niż otaczające kształty.

używanie Shape do przypisywania relacji

Shape jest przydatne w grupowaniu według podobieństwa, ale ma najsłabszy efekt grupowania w porównaniu do koloru i rozmiaru. W tym przykładzie kształt powoduje, że elementy interpretujemy jako kolumny okręgów i kwadratów, w przeciwieństwie do rzędów naprzemiennych okręgów i kwadratów.

używanie orientacji do przypisywania relacji

orientacja może być również używana do grupowania według podobieństwa. Obracając niektóre kwadraty w tej grupie o 45 stopni, tworzy się oddzielne zgrupowanie, które jest postrzegane jako powiązane. Prawie wydają się poruszać razem w podobnym kierunku w porównaniu z kształtami wokół nich. To rzeczywiście dotyka gestalt zasady wspólnego losu, zasady, którą omówimy w przyszłym artykule. Ale nie krępuj się, aby przejść do przodu i Google to (po przeczytaniu tego artykułu, oczywiście!). To fascynująca zasada, która zdarza się często wokół ciebie.

więcej o kolorze

jak wspomniano wcześniej, kolor ma szczególny wpływ na podobieństwo i może zastąpić inne atrybuty. Na przykład, możemy nadpisać przykład podobieństwa w kształcie, dodając kolor. Teraz widzimy naprzemienne rzędy czerwonych i białych kształtów w przeciwieństwie do kolumn kół i kwadratów. Spróbuj. Spróbuj zobaczyć kolumny kół i kwadratów. Możliwe, ale teraz dość trudne, prawda?

dodatkowo kolor może nadpisać rozmiar. Kiedy dodamy kolor do przykładu podobieństwa w rozmiarze, tworzymy dwie oddzielne grupy. Teraz postrzegamy duże czerwone kwadraty jako jedną grupę, a pojedynczy duży biały kwadrat jako oddzielną, niepowiązaną (i samotną) grupę.

te dwa przykłady ilustrują, jak potężny może być kolor w przypisywaniu relacji między elementami. Spróbuj użyć koloru w swojej pracy do rozróżniania elementów, a będziesz zaskoczony, jak dużo silniejsze są Twoje grupy.

podobieństwo w praktyce

Kiedy projektujemy, możemy użyć podobieństwa do przekazania organizacji i skojarzeń, pokazując, które elementy są ze sobą powiązane, a które nie. Na przykład dwie sekcje pokazane poniżej na stronie salonu są pogrupowane według ich względnych rozmiarów. Wyraźnie dostrzegamy dwie oddzielne grupy, z najważniejszymi historiami po lewej i najbardziej czytanymi po prawej. Chociaż obie sekcje zapewniają tę samą funkcję — wyświetlanie artykułów do czytania — Grupowanie według rozmiaru przypisuje większą widoczność lewej grupie, co pozwala Salon kierować uwagę na ich najważniejsze historie.

natomiast brak różnic wielkości w tym przykładzie z Amazon nie przypisuje szczególnego znaczenia żadnej sekcji. Mimo to podobieństwo nadal osiąga się poprzez zastosowanie powtórzeń o podobnej wielkości i kształcie, co powoduje, że dostrzegamy rzędy przedmiotów.

podobne użycie kolorów

wiemy, że kolor jest silnym wskaźnikiem podobieństwa, pomagającym uporządkować i uczynić treść zrozumiałą. W tym przykładzie z Cars.com, podobne użycie kolorów pomaga nam odróżnić to, co jest nagłówkiem, kopią ciała i tekstem linku. (Pełna wersja: pracuję w Cars.com jako projektant interakcji.) Używając odrębnych kolorów dla każdego z tych elementów, oczekujemy, że będą one funkcjonować podobnie, a w przypadku niebieskiego tekstu linku zachowywać się podobnie.

bliskość

zasada Gestalt bliskości mówi, że elementy, które są bliżej siebie, są postrzegane jako bardziej powiązane niż elementy, które są dalej od siebie. Podobnie jak w przypadku podobieństwa, bliskość pomaga nam organizować obiekty poprzez ich powiązanie z innymi obiektami. Bliskość jest najsilniejszą zasadą Wskazywania pokrewieństwa obiektów, pomagając nam zrozumieć i zorganizować informacje szybciej i sprawniej.

przykłady okręgów poniżej pokazują, w jaki sposób można wykorzystać bliskość, aby pomóc nam postrzegać obiekty jako powiązane. Jak tu widzimy, kręgi są rozłożone, nie wykazując żadnego związku, a każdy z nich jest postrzegany jako oddzielny przedmiot.

jednak, gdy koła są przyciągane do bliskiej odległości przestrzennej od siebie, są przypisywane do relacji i nie są już postrzegane jako oddzielne obiekty.

biała przestrzeń

biała przestrzeń jest nieocenionym narzędziem do tworzenia bliskości. Wzięcie tej samej grupy kół i dodanie spacji pomaga nam inaczej postrzegać rzeczy. Teraz, po lewej stronie, bliskość kształtów sprawia, że postrzegamy dwie grupy jako kolumny, każda z nich ma własną grupę. Po prawej stronie bliskość kształtów powoduje, że obie grupy postrzegamy jako rzędy, z których każda ma swoją własną grupę. Użyj białej przestrzeni w swoich projektach, aby wzmocnić grupy, a także odróżnić je od innych elementów.

Siła bliskości

bliskość jest wystarczająco silna, aby pokonać inne elementy zmienności. Zauważ, że bliskość nadal wygrywa, nawet jeśli dodano inne atrybuty, takie jak kolor i kształt. Staraj się jak mogą, kolor i kształt nie obezwładniają tutaj bliskości, a każda grupa jest nadal postrzegana jako oddzielny element.

bliskość w praktyce

kiedy organizujemy informacje w naszych projektach, możemy wykorzystać bliskość do tworzenia relacji między elementami, aby pomóc w zrozumieniu prezentowanych informacji. Na przykład grupując te obrazy ze sklepu Apple Store w bliskiej odległości, przypisujemy relację do całej grupy. Postrzegamy je jako powiązane i oczekujemy, że treść będzie podobna.

jednak, gdy usuniemy kolumnę środkową, nagle dostrzegamy dwie oddzielne grupy i oczekujemy różnych treści między nimi.

łączenie bliskości i podobieństwa

Grupowanie według bliskości może być również połączone z podobieństwem, aby stworzyć silniejsze relacje. Widziane w tym przykładzie z Amazon, grupowanie przez bliskość i podobieństwo wielkości powoduje, że dostrzegamy dwie oddzielne grupy i przypisuje większą widoczność grupie lewej.

bliskość i hierarchia

bliskość jest doskonała do organizowania elementów hierarchicznych. W tym przykładzie z Crate & Barrel, opcje są zgrupowane w wspólnych nagłówkach, tworząc relacje, co znacznie ułatwia skanowanie i wyszukiwanie informacji.

gdy nagłówki są usuwane, a opcje są pogrupowane bez bliskości, tracimy utworzone relacje i znacznie trudniej jest szybko zeskanować i znaleźć poszukiwane informacje. Spróbuj sam. Śmiało i zobacz, jak szybko możesz znaleźć kubki do kawy w grupie z nagłówkami w porównaniu do grupy bez nagłówków. Trochę trudniej jest szybko do niego wskoczyć, prawda?

podsumowanie

zrozumienie, jak wykorzystać podobieństwo i bliskość, aby wpłynąć na relacje między elementami w pracy, pomoże Ci stworzyć projekty, które ułatwią organizację i poprawią użyteczność twojej pracy. Użyj podobieństwa i bliskości, aby stworzyć zarówno relacje, jak i różnice między elementami w swoich projektach. Eksperymentuj z wykorzystaniem białej przestrzeni, koloru, rozmiaru, kształtu i orientacji elementów i połącz obie zasady, aby stworzyć bardzo silne i angażujące relacje.

w następnej części tej serii przyjrzymy się zamknięciu i figure-ground i zbadamy, w jaki sposób te dwie zasady gestalt wykorzystują przestrzeń pozytywną i negatywną do tworzenia prostych, ale potężnych relacji.

zasoby i dobre Lektury

• Zasady Gestalt na Scholarpedii.
• „prawa organizacji w formach percepcyjnych”: tekst przełomowej pracy Maxa Wertheimera z 1923 roku.
• uniwersalne zasady projektowania poprawione i zaktualizowane: 125 sposobów na zwiększenie użyteczności, wpływanie na percepcję, zwiększenie atrakcyjności, podejmowanie lepszych decyzji projektowych i nauczanie poprzez projektowanie, William Lidwell, Kritina Holden i Jill Butler. Rockport Pub 2010
• Wizualizacja informacji: percepcja dla projektowania, Colin Ware. Elsevier, 2012.

• zasady projektowania: Percepcja wzrokowa i zasady Gestalt
• łączenie i oddzielanie elementów poprzez kontrast i podobieństwo
• równowaga kompozycyjna, symetria i asymetria
• Jak poprawić przepływ pracy poczty e-mail dzięki modułowej konstrukcji
• poprawa doświadczenia użytkownika dzięki funkcjom czasu rzeczywistego

(ml, da, og, JB, il)