Poznawanie Gestalt zasad projektowania

Posłuchaj wersji audio tego artykułu

negatywna przestrzeń od dawna jest podstawą dobrego designu. Pozostawienie białej przestrzeni wokół elementów projektu jest pierwszą rzeczą, która zwykle przychodzi na myśl. Ale są projekty, które używają tej białej spacji, aby wywnioskować, że element, którego w rzeczywistości nie ma (strzałka ukryta między E i X w logo FedEx natychmiast przychodzi na myśl jako przykład).

litery „E” i „x” w logo FedEx tworzą strzałkę w przestrzeni ujemnej 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 jego części. Dlatego widzimy twarze na liściach drzew lub pęknięciach chodników.

zasada ta jest jedną z najważniejszych idei leżących u podstaw gestalt zasad percepcji wzrokowej., Najbardziej wpływową propozycją napisaną na temat teorii był Max Wertheimer w 1923 roku w jego Gestalt laws of perceptual organization, chociaż Wolfgang Köhler w 1920 roku omówił Gestalten fizyczny również wiele wpływowych pomysłów na ten temat.

niezależnie od tego, kto pierwszy zaproponował te pomysły (istnieją eseje sięgające już 1890 roku), Zasady gestalt są ważnym zestawem pomysłów do nauki dla każdego projektanta, a ich realizacja może znacznie poprawić nie tylko estetykę projektu, ale także jego funkcjonalność i łatwość obsługi.,

najprościej mówiąc, teoria gestalt opiera się na idei, ż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 serię 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ą gestaltu: podobieństwo, kontynuacja, zamknięcie, bliskość, figura/grunt i symetria& porządek (zwany także prägnanz). Istnieją również pewne dodatkowe, nowsze Zasady czasami związane z gestaltem, takie jak wspólny los.

podobieństwo

to ludzka natura grupować rzeczy razem. W gestalt podobne elementy są wizualnie grupowane, niezależnie od ich bliskości do siebie. Można je pogrupować według koloru, kształtu lub rozmiaru., Podobieństwo może być używane do łączenia elementów, które mogą nie znajdować się obok siebie w projekcie.

tutaj kwadraty są jednakowo rozmieszczone i tego samego rozmiaru, ale automatycznie grupujemy je według koloru, nawet jeśli nie ma rymu ani powodu do ich umieszczenia.

oczywiście możesz sprawić, że rzeczy będą różne, jeśli chcesz, aby wyróżniały się z tłumu., Dlatego przyciski wywołania do działania są często zaprojektowane w innym kolorze niż reszta strony—dzięki czemu wyróżniają się i przyciągają uwagę odwiedzającego do żądanej akcji.

w projektowaniu UX, używanie podobieństw wyjaśnia odwiedzającym, które przedmioty są podobne. Na przykład, na liście cech wykorzystujących powtarzalne elementy projektu (takie jak ikona z 3-4 linijkami tekstu), zasada podobieństwa ułatwiłaby ich skanowanie., Natomiast zmiana elementów projektu dla funkcji, które chcesz wyróżnić, sprawia, że wyróżniają się i nadaje im większe znaczenie w percepcji użytkownika.

nawet tak proste rzeczy, 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ę witryny.

kontynuacja

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

oko ma tendencję do podążania za prostą linią z jednego końca tej figury do drugiego i zakrzywioną linią 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 oka 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ą, umieszczenie przedmiotów w serii w linii w naturalny sposób przyciągnie oko z jednego przedmiotu do następnego. Poziome suwaki są jednym z takich przykładów, podobnie jak powiązane oferty produktów na stronach takich jak Amazon.

Zamknięcie

Zamknięcie to jedna z najfajniejszych zasad gestaltu, o której pisałem już na początku tego utworu. Chodzi o to, ż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 oczom podążać za czymś w rodzaju kropkowanej linii do jej końca., Ale bardziej złożone aplikacje są często postrzegane w logo, jak to dla World Wildlife Fund. Brakuje dużych fragmentów konturu pandy, ale twój mózg nie ma problemu z wypełnieniem brakujących sekcji, aby zobaczyć całe zwierzę.

zasada gestalt zamknięcia jest pięknie zilustrowana w logo World Wildlife Fund. Mózg dopełnia białe kształty, mimo że nie są dobrze zdefiniowane.,

Zamknięcie 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 UI design jest pokazanie częściowego obrazu zanikającego na ekranie użytkownika, aby pokazać mu, że jest więcej do znalezienia, jeśli przesunie palcem w lewo lub w prawo. Bez częściowego obrazu, czyli,, jeśli wyświetlane są tylko pełne obrazy, mózg nie od razu interpretuje, że może być więcej do zobaczenia, a zatem użytkownik jest mniej skłonny do przewijania (ponieważ zamknięcie jest już widoczne).

Proximity

Proximity odnosi się do tego, jak bliskie są sobie elementy. Najsilniejsze relacje bliskości są te między nakładającymi się obiektami, ale samo grupowanie obiektów w jeden obszar może również mieć silny efekt bliskości.

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

Weźmy tę grupę kółek, na przykład:

jedyną rzeczą odróżniającą grupę po lewej od tych po prawej jest bliskość linii. A jednak twój mózg interpretuje obraz po prawej stronie jako trzy odrębne grupy.

przykład formularza USPS PDF, w którym zasada gestalt zbliżeniowy zaburza UX., Ze względu na to, że etykiety pól są bliżej pól pod nimi, ludzie błędnie uwierzyliby, że to miejsce, w którym informacje trafiają do „c.” i ” d.”, jednak informacje powinny być dostarczane w polach nad etykietami tekstowymi.

w projektowaniu UX bliskość jest najczęściej używana, aby zmusić użytkowników do grupowania pewnych rzeczy razem bez użycia rzeczy takich jak twarde granice. Umieszczając podobne rzeczy bliżej siebie, z przestrzenią pomiędzy każdą grupą, widz natychmiast odbierze organizację i strukturę, którą chcesz, aby postrzegali.,

figura/Grunt

zasada figury / grunt jest podobna do zasady zamknięcia, ponieważ wykorzystuje sposób, w jaki mózg przetwarza negatywną przestrzeń. Prawdopodobnie widziałeś przykłady tej zasady unoszące się 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 uważa za znajdujące się na pierwszym planie obrazu (rysunek lub punkt ogniskowy), a tłem (obszar, na którym spoczywają figury)., Gdzie rzeczy się interesujące jest, gdy pierwszy plan i tło rzeczywiście zawierają dwa różne obrazy, jak to:

niektórzy ludzie będą natychmiast zobaczyć drzewo i ptaki podczas oglądania logo Zoo w Pittsburghu & PPG Aquarium, podczas gdy inni zobaczą goryla i lwa wpatrujących się w siebie.

kolejny świetny przykład rysunku/Zasady gestalt ziemi.,

prostszy przykład można zobaczyć na tym obrazie, przedstawiającym dwie twarze tworzące świecznik lub wazon między nimi:

w tej słynnej iluzji stworzonej przez duńskiego psychologa Edgara Rubina, widz zwykle przedstawia dwie interpretacje kształtu—dwie twarze lub wazon. To kolejny doskonały przykład zasady figury / podłoża.

ogólnie rzecz biorąc, twój mózg zinterpretuje większy obszar obrazu jako podłoże, 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 postać, a co jest postrzegane jako ziemia.

zasada figure / ground 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 wyskakuje okno modalne, a reszta witryny zanika w tle lub gdy kliknięty jest pasek wyszukiwania i zwiększa się kontrast między nim a resztą witryny.,

symetria i porządek

prawo symetrii i porządku jest również znane jako prägnanz, niemieckie słowo oznaczające „dobrą figurę.”Zasada ta mówi, że twój 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 „prägnanz”:

twój mózg zinterpretuje obraz po lewej stronie 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.

Common Fate

chociaż common fate nie był pierwotnie uwzględniony w teorii gestalt, został on dodany. W projektowaniu UX nie można przeoczyć jego przydatności., Zasada ta mówi, że ludzie będą grupować rzeczy, które wskazują lub poruszają się w tym samym kierunku.

w naturze widzimy to w stadach ptaków lub ławicach ryb. Składają się z kilku 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 jest postrzegane jako jedna jednostka podczas lotu w tym samym kierunku i tym samym dzieląc wspólny los., (by Martin Adams on Unsplash)

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

Zasady Gestalt w projektowaniu UX

podobnie jak w przypadku każdej Zasady psychologicznej, nauka włączania zasad percepcji wzrokowej gestalt do pracy projektowej 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ę, która sprawia, że użytkownik czuje się komfortowo na stronie internetowej, nawet jeśli jest to ich pierwsza wizyta.

Zasady Gestalt są stosunkowo łatwe do włączenia do prawie każdego projektu i mogą szybko podnieść projekt, który wydaje się przypadkowy lub jakby walczył o uwagę użytkownika na taki, który oferuje płynną, naturalną interakcję, która prowadzi użytkowników do działania, które chcesz, aby podjęli.