Odkrywanie zasad projektowania Gestalt

Opublikowany: 2022-03-11

Posłuchaj wersji audio tego artykułu

Negatywna przestrzeń od dawna jest podstawą dobrego projektowania. Pierwsze, co zwykle przychodzi do głowy, to pozostawienie pustej przestrzeni wokół elementów projektu. Ale są też projekty, które wykorzystują tę białą przestrzeń do wywnioskowania elementu, którego w rzeczywistości nie ma (strzałka ukryta między E i X w logo FedEx od razu przychodzi na myśl jako przykład).

negatywna przestrzeń to jeden z kluczowych elementów i zasad projektowania — Litery „E” i „x” w logo FedEx tworzą strzałkę w ujemnej przestrzeni między nimi.

Ludzki mózg jest wyjątkowo dobry w wypełnianiu luk w obrazie i tworzeniu całości, która jest większa niż suma jej części. To dlatego widzimy twarze w przedmiotach takich jak liście drzew lub pęknięcia na chodniku.

Ta zasada jest jedną z najważniejszych idei leżących u podstaw gestaltowych zasad percepcji wzrokowej. Najbardziej wpływowa wczesna propozycja napisana na temat tej teorii została opublikowana przez Maxa Wertheimera w jego prawach organizacji percepcyjnej Gestalt z 1923 r., chociaż dyskusja Wolfganga Kohlera na temat fizycznego Gestalten z 1920 r. zawiera również wiele wpływowych pomysłów na ten temat.

Niezależnie od tego, kto jako pierwszy zaproponował idee (były eseje już w 1890 r.), zasady gestalt są ważnym zbiorem pomysłów, których może się nauczyć każdy projektant, a ich wdrożenie może znacznie poprawić nie tylko estetykę projektu, ale także jego funkcjonalność i przyjazność dla użytkownika.

Mówiąc najprościej, teoria gestalt opiera się na założeniu, że ludzki mózg będzie próbował uprościć i uporządkować złożone obrazy lub projekty, które składają się z wielu elementów, podświadomie układając części w zorganizowany system, który tworzy całość, a nie tylko szereg różnych elementów. Nasze mózgi są zbudowane tak, aby widzieć strukturę i wzorce, abyśmy mogli lepiej zrozumieć środowisko, w którym żyjemy.

Istnieje sześć indywidualnych zasad powszechnie związanych z teorią gestalt: podobieństwo , kontynuacja , zamknięcie , bliskość , figura/podstawa oraz symetria i porządek (zwane także pragnanz ). Z gestaltem wiążą się czasem dodatkowe, nowsze zasady, takie jak wspólny los.

Podobieństwo

Grupowanie podobnych rzeczy jest w ludzkiej naturze. W gestalt podobne elementy są wizualnie pogrupowane, niezależnie od ich bliskości. Można je pogrupować według koloru, kształtu lub rozmiaru. Podobieństwo można wykorzystać do powiązania elementów, które mogą nie znajdować się tuż obok siebie w projekcie.

przykład zasady podobieństwa gestalt — Wszystkie kwadraty tutaj są rozmieszczone w równych odstępach i mają ten sam rozmiar, ale automatycznie grupujemy je według koloru, nawet jeśli nie ma żadnego rymowania ani powodu do ich umieszczenia.

Oczywiście możesz sprawić, że rzeczy będą się różnić, jeśli chcesz, aby wyróżniały się z tłumu. Właśnie dlatego przyciski wezwania do działania są często zaprojektowane w innym kolorze niż reszta strony — dzięki czemu wyróżniają się i zwracają uwagę odwiedzających na pożądane działanie.

W projektowaniu UX użycie podobieństwa wyjaśnia odwiedzającym, które elementy są podobne. Na przykład w przypadku listy funkcji wykorzystującej powtarzające się elementy projektu (takie jak ikona, której towarzyszą 3-4 wiersze tekstu), zasada podobieństwa ułatwiłaby ich przeglądanie. W przeciwieństwie do tego, zmiana elementów projektu na cechy, które chcesz podkreślić, sprawi, że będą się wyróżniać i nada im większe znaczenie w percepcji odwiedzających.

Nawet rzeczy tak proste, jak upewnienie się, że linki w całym projekcie są sformatowane w ten sam sposób, opiera się na zasadzie podobieństwa w sposobie, w jaki odwiedzający będą postrzegać organizację i strukturę Twojej witryny.

Kontynuacja

Prawo ciągłości zakłada, że ludzkie oko będzie podążać najgładszą ścieżką podczas oglądania linii, niezależnie od tego, jak linie zostały narysowane.

przykład zasady ciągłości gestalt — Oko ma tendencję do podążania za linią prostą od jednego końca tej figury do drugiego i linią krzywą od góry do dołu, nawet gdy linie zmieniają kolor w połowie.

Ta kontynuacja może być cennym narzędziem, gdy celem jest poprowadzenie wzroku odwiedzającego w określonym kierunku. Będą podążać najprostszą ścieżką na stronie, więc upewnij się, że najważniejsze części, które powinni zobaczyć, mieszczą się w tej ścieżce.

Ponieważ oko w naturalny sposób podąża za linią, umieszczanie przedmiotów w szeregu w linii w naturalny sposób przyciąga wzrok od jednego przedmiotu do drugiego. Jednym z przykładów są suwaki poziome, podobnie jak powiązane listy produktów w witrynach takich jak Amazon.

Zamknięcie

Zamknięcie to jedna z najfajniejszych zasad gestalt, o której wspomniałem już na początku tego utworu. To pomysł, że twój mózg wypełni brakujące części projektu lub obrazu, aby stworzyć całość.

W najprostszej formie zasada zamknięcia pozwala oku podążać za linią przerywaną aż do końca. Jednak w logo często widuje się bardziej złożone aplikacje, na przykład w przypadku World Wildlife Fund. Brakuje dużych fragmentów konturu pandy, ale twój mózg nie ma problemu z wypełnieniem brakujących części, aby zobaczyć całe zwierzę.

Gestaltowa zasada zamknięcia jest pięknie zilustrowana w logo pandy World Wildlife Fund. Mózg uzupełnia białe kształty, nawet jeśli nie są one dobrze zdefiniowane.

Closure jest dość często używane w projektowaniu logo, z innymi przykładami, w tym dla USA Network, NBC, Sun Microsystems, a nawet Adobe.

Innym bardzo ważnym przykładem zamknięcia w pracy w UX i projektowaniu interfejsu użytkownika jest pokazanie częściowego obrazu znikającego z ekranu użytkownika, aby pokazać mu, że można znaleźć więcej, gdy przesunie palcem w lewo lub w prawo. Bez częściowego obrazu, tj. jeśli wyświetlane są tylko pełne obrazy, mózg nie od razu zinterpretuje, że może być więcej do zobaczenia, a zatem użytkownik jest mniej skłonny do przewijania (ponieważ zamknięcie jest już widoczne).

Poszukiwani niezależni projektanci UI z siedzibą w USA

Bliskość

Bliskość odnosi się do tego, jak blisko siebie znajdują się elementy. Najsilniejsze relacje bliskości występują między nakładającymi się obiektami, ale samo zgrupowanie obiektów w jednym obszarze może również mieć silny efekt bliskości.

Oczywiście jest też odwrotnie. Umieszczając przestrzeń między elementami, możesz dodać separację nawet wtedy, gdy ich inne cechy są takie same.

Weźmy tę grupę kręgów, na przykład:

zasada bliskości gestalt zilustrowana grupami kół — Jedyne, co odróżnia grupę po lewej stronie od tych po prawej, to bliskość linii. A jednak twój mózg interpretuje obraz po prawej jako trzy odrębne grupy.

przykład zbliżeniowej zasady gestalt w działaniu upośledzającym ux — Przykład formularza PDF USPS, w którym zasada gestalt zbliżenia wpływa negatywnie na UX. Ze względu na to, że etykiety pól są bliżej pól pod nimi, ludzie błędnie sądzą, że właśnie tam trafiają informacje dla „c”. i „d.” Jednak informacje mają być podane w polach nad etykietami tekstowymi.

W projektowaniu UX najczęściej używa się bliskości, aby skłonić użytkowników do grupowania pewnych rzeczy bez użycia takich rzeczy, jak twarde granice. Umieszczając podobne rzeczy bliżej siebie, z przestrzenią pomiędzy każdą z grup, widz natychmiast zorientuje się w organizacji i strukturze, którą chcesz, aby postrzegał.

Figura/ziemi

Zasada figury/podłoża jest podobna do zasady domknięcia, ponieważ wykorzystuje sposób, w jaki mózg przetwarza negatywną przestrzeń. Prawdopodobnie widziałeś przykłady tej zasady krążące w memach w mediach społecznościowych lub jako część logo (jak wspomniane już logo FedEx).

Twój mózg rozróżni obiekty, które uzna za znajdujące się na pierwszym planie obrazu (figurę lub punkt centralny) od tła (obszar, na którym spoczywają figury). Ciekawie robi się wtedy, gdy pierwszy plan i tło faktycznie zawierają dwa różne obrazy, takie jak ten:

przykład relacji figura-podłoże tworzące elementy i zasady projektowania — Niektórzy ludzie natychmiast zobaczą drzewo i ptaki podczas oglądania logo Pittsburgh Zoo & PPG Aquarium, podczas gdy inni zobaczą goryla i lwa wpatrujących się w siebie.

świetny przykład zasady gestalt figura-ziemia — Kolejny świetny przykład zasady gestalt figura/ziemi.

Prostszy przykład można zobaczyć na tym obrazie, na którym dwie twarze tworzą między sobą świecznik lub wazon:

prosty przykład zasady figura-podstawa, zasada projektowania gestalt — W tej słynnej iluzji opracowanej przez duńskiego psychologa Edgara Rubina, widzowi zazwyczaj przedstawiane są dwie interpretacje kształtów – dwie twarze lub wazon. To kolejny doskonały przykład zasady figura/grunt.

Mówiąc ogólnie, Twój mózg zinterpretuje większy obszar obrazu jako ziemię, a mniejszy jako figurę. Jak pokazano na powyższym obrazku, widać jednak, że jaśniejsze i ciemniejsze kolory mogą wpływać na to, co jest postrzegane jako figura, a co jest postrzegane jako ziemia.

Zasada figury/podłoża może być bardzo przydatna, gdy projektanci produktów chcą wyróżnić punkt centralny, szczególnie gdy jest on aktywny lub używany — na przykład, gdy pojawia się okno modalne, a reszta witryny znika w tle lub gdy pasek wyszukiwania jest klikany i zwiększa się kontrast między nim a resztą witryny.

Zapisz się na blog projektowy Toptal i otrzymaj nasz eBook

Symetria i porządek

Prawo symetrii i porządku znane jest również jako pragnanz , niemieckie słowo oznaczające „dobrą figurę”. Zasada ta mówi, że mózg będzie postrzegał niejednoznaczne kształty w tak prosty sposób, jak to tylko możliwe. Na przykład monochromatyczna wersja logo olimpijskiego jest postrzegana jako seria nakładających się okręgów, a nie zbiór zakrzywionych linii.

Oto kolejny dobry przykład zasady projektowania gestalt „ pragnanz ”:

złożony przykład zasady pragnanza, kolejna zasada gestalt

Twój mózg zinterpretuje obraz po lewej jako prostokąt, okrąg i trójkąt, nawet jeśli kontury każdego z nich są niekompletne, ponieważ są to prostsze kształty niż ogólny obraz.

Wspólny los

Chociaż wspólny los nie był pierwotnie uwzględniony w teorii gestalt, od tego czasu został dodany. W projektowaniu UX nie można pominąć jego użyteczności. Ta zasada mówi, że ludzie grupują rzeczy, które wskazują lub zmierzają w tym samym kierunku.

W naturze widzimy to w takich rzeczach jak stada ptaków lub ławice ryb. Składają się z wielu pojedynczych elementów, ale ponieważ poruszają się pozornie jako jeden, nasze mózgi grupują je razem i uważają za jeden bodziec.

stado ptaków ilustruje zasadę wspólnego losu — Stado ptaków jest postrzegane jako pojedyncza jednostka lecąca w tym samym kierunku i tym samym dzieląca wspólny los. (Martin Adams na Unsplash)

Jest to bardzo przydatne w UX, ponieważ animowane efekty stają się coraz bardziej powszechne w nowoczesnym designie. Zauważ, że elementy wcale nie muszą się poruszać, aby skorzystać z tej zasady, ale muszą sprawiać wrażenie ruchu.

Zasady Gestalt w projektowaniu UX

Jak w przypadku każdej zasady psychologicznej, nauka włączania zasad percepcji wizualnej gestalt do swoich prac projektowych może znacznie poprawić wrażenia użytkownika. Zrozumienie, jak działa ludzki mózg, a następnie wykorzystanie naturalnych tendencji danej osoby, tworzy bardziej płynną interakcję, dzięki której użytkownik czuje się komfortowo w witrynie, nawet jeśli jest to jego pierwsza wizyta.

Zasady Gestalt są stosunkowo łatwe do włączenia do niemal każdego projektu i mogą szybko podnieść projekt, który wydaje się przypadkowy lub walczy o uwagę użytkownika, do takiego, który oferuje bezproblemową, naturalną interakcję, która prowadzi użytkowników do działania, które chcesz, aby wykonali.

• • •

Dalsza lektura na blogu Toptal Design:

Zasady projektowania: wprowadzenie do hierarchii
Najlepsze praktyki projektowania interfejsu użytkownika i typowe błędy
Jak korzystać z potężnych zasad Gestalt w projektowaniu (z infografiką)
Kompleksowy przewodnik po architekturze informacji
Popraw swój UX dzięki zasadom udanego projektowania interakcji