ludzki mózg jest podłączony do struktury, logiki i wzorców. Pomaga nam zrozumieć świat. XX wieku grupa niemieckich psychologów opracowała teorie dotyczące sposobu postrzegania przez ludzi otaczającego ich świata, zwane zasadami Gestalt.
na przykład, co widzisz patrząc na to zdjęcie?,
źródło: the Inspired Eye
Jeśli jesteś jak większość ludzi, prawdopodobnie widzisz Trójkąt. Ale w rzeczywistości, wszystko, co jest tam są trzy białe ” pac men.”Widzimy Trójkąt, ponieważ nasze mózgi przyjmują niejednoznaczne informacje wizualne i organizują je w coś, co ma dla nas sens—coś znajomego, uporządkowanego, symetrycznego i co rozumiemy.
Kiedy rozpoczyna się ten proces poznawczy, nasze umysły przeskakują od rozumienia wszystkich elementów jako pojedynczych i niepowiązanych elementów do postrzegania całego kształtu jako całości., W rezultacie dostrzegamy formy i przedmioty, których nie stworzono.
aby jeszcze bardziej zilustrować ten proces, sprawdź GIF poniżej. Twój mózg widzi chodzącego psa, ale to nic więcej niż seria ruchomych kropek.
źródło: Gizmodo
są to proste przykłady, ale pokazują rodzaje skrótów, które nasz mózg robi cały czas, aby szybko zrozumieć świat.
jakie są zasady Gestalt?,
te skróty są znane jako Gestalt Zasady percepcji wzrokowej, i szczegółowo, jak nasze mózgi tworzą strukturę domyślnie. Ale dlaczego zrozumienie tego jest ważne dla projektowania stron internetowych i mobilnych?
Dlaczego projektanci powinni dbać o zasady Gestalt
wielcy projektanci rozumieją potężną rolę, jaką psychologia odgrywa w percepcji wzrokowej. Co się stanie, gdy czyjeś oko spotka Twoje projekty? Jak ich umysł reaguje na wiadomość, którą przekazujesz?, – Laura Busche, strateg treści marki w Autodesk
zastanów się przez chwilę nad tym cytatem. Kiedy ludzie po raz pierwszy widzą Twoje projekty, jak je doświadczają? Aby zrozumieć, co sprawia, że projektowanie interfejsu użytkownika działa, musisz zrozumieć psychologię ludzkiej percepcji.
podstawowym prawem rządzącym zasadą Gestalt jest to, że mamy tendencję do porządkowania naszych doświadczeń w sposób regularny, uporządkowany i rozpoznawalny. To właśnie pozwala nam kreować znaczenie w złożonym i chaotycznym świecie., A posiadanie solidnego zrozumienia, jak te zasady działają, pomoże ci na trzy sposoby.
- pomogą Ci określić, które elementy projektu są najskuteczniejsze w danej sytuacji. Na przykład, kiedy używać hierarchii wizualnej, cieniowania tła, gradientów oraz jak grupować podobne elementy i rozróżniać różne.
- te zasady psychologiczne mają wpływ na naszą percepcję wzrokową, co pozwala projektantom skierować naszą uwagę na określone punkty skupienia, skłonić nas do podjęcia konkretnych działań i stworzyć zmianę behawioralną.,
- i wreszcie, na najwyższym poziomie, Zasady Gestalt pomagają projektować produkty, które rozwiązują problem klienta lub spełniają potrzeby użytkownika w sposób piękny, przyjemny i intuicyjny w użyciu.
w tym artykule omówimy siedem praw Gestalt lub zasad, które mają bezpośrednie zastosowanie do nowoczesnego projektowania, i podzielimy się kilkoma przykładami, w jaki sposób są one wykorzystywane w projektowaniu interfejsu użytkownika. Nie jest to wyczerpująca lista, ale szybko zauważysz, że wiele zasad nakłada się na siebie i że wszystkie działają ze sobą płynnie. A teraz zanurzmy się.,
- figura-Ziemia
- podobieństwo
- bliskość
- wspólny region
- ciągłość
- Zamknięcie
- punkt ogniskowy
Zasada #1: figura-Ziemia
zasada figura-Ziemia mówi, że ludzie instynktownie postrzegają obiekty jako znajdujące się na pierwszym planie lub w tle. Albo wyróżniają się widocznie z przodu (figura) lub cofają się w tył (Ziemia).,
źródło: karzeł o imieniu Warren
na powyższym obrazku na przykład twoje oko natychmiast widzi białe jabłko siedzące na czarnym tle.
w większości przypadków określenie to nastąpi szybko i podświadomie. Rysunek / podłoże pozwala nam wiedzieć, na czym powinniśmy się skupić i co możemy bezpiecznie zignorować w kompozycji. – Steven Bradley, projektant stron internetowych
Kiedy ludzie korzystają z twojej strony internetowej lub aplikacji mobilnej, jedną z pierwszych rzeczy, które robią na każdym ekranie, jest określenie, która jest cyfrą, a która ziemią.,
przykłady Zasady figure-ground
Strona główna Basecamp zawiera wiele grafik, tekstów, formularzy i innych informacji. A ze względu na zasadę figure-ground, możesz od razu powiedzieć, że powinieneś skupić się na treści w białych obszarach pierwszego planu.
Angelist wykorzystuje zasadę liczbowo-gruntową na dwa sposoby poniżej. Po pierwsze, tekst i logo po lewej stronie wyraźnie znajdują się na górze obrazu tła. Po drugie, biały tekst w menu po prawej stronie stoi na czarnym tle.,
Zasada #2: podobieństwo
zasada podobieństwa mówi, że gdy rzeczy wydają się być do siebie podobne, grupujemy je razem. I mamy też tendencję do myślenia, że mają tę samą funkcję.
na przykład na tym obrazku wydają się być dwie oddzielne i odrębne grupy oparte na kształcie: okręgi i kwadraty.
źródło: Creative Beacon
różne elementy projektu, takie jak kolor i organizacja, mogą być używane do tworzenia podobnych grup., Na przykład na poniższym obrazku, mimo że wszystkie kształty są takie same, jasne jest, że każda kolumna reprezentuje odrębną grupę:
źródło: Andy Rutledge
przykłady Zasady podobieństwa
GitHub wykorzystuje zasadę podobieństwa na dwa sposoby na poniższej stronie. Po pierwsze, używają go do rozróżniania różnych sekcji. Możesz od razu powiedzieć, że szara sekcja na górze służy innemu celowi niż czarna sekcja, która jest również oddzielona i inna niż sekcja niebieska.,
Po Drugie, używają również koloru niebieskiego, aby odróżnić linki od zwykłego tekstu i przekazać, że cały niebieski tekst ma wspólną funkcję.
zasada #3: bliskość
zasada bliskości mówi, że rzeczy, które są blisko siebie wydają się być bardziej powiązane niż rzeczy, które są oddalone od siebie.
źródło: Andy Rutledge
bliskość jest tak potężna, że nadpisuje podobieństwo koloru, kształtu i innych czynników, które mogą różnicować grupę obiektów.,
źródło: Steven Bradley
zauważyłeś trzy grupy czarnych i czerwonych kropek powyżej? Względna bliskość obiektów ma jeszcze silniejszy wpływ na grupowanie niż kolor.
przykłady Zasady bliskości
bliskość każdego obrazu i odpowiadającego mu tekstu komunikuje, że są one ze sobą powiązane.
i Vice używa go do rozróżniania obrazów, nagłówków, opisów i innych informacji dla każdej z jego historii.,
Zasada #4: wspólny region
zasada wspólnego regionu jest wysoce związana z bliskością. Stwierdza ona, że gdy obiekty znajdują się w tym samym zamkniętym regionie, postrzegamy je jako zgrupowane razem.
źródło: Smashing Magazine
dodawanie obramowań lub innych widocznych barier to świetny sposób na stworzenie postrzeganej separacji między grupami obiektów—nawet jeśli mają taką samą odległość, kształt, kolor itp.,
przykłady zasady wspólnego regionu
w poniższym przykładzie z Pinteresta zasada wspólnego regionu służy do oddzielania każdego Pina—w tym jego zdjęcia, tytułu, opisu, współpracownika i innych szczegółów—od wszystkich innych pinów wokół niego.
i jest używany w poniższym przykładzie Facebook, aby poinformować, że komentarze, Polubienia i interakcje są związane z tym konkretnym postem—a nie innymi postami, które go otaczają.,
Zasada # 5: ciągłość
zasada ciągłości mówi, że elementy ułożone na linii lub krzywej są postrzegane jako bardziej powiązane niż elementy nie na linii lub krzywej.
źródło: Smashing Magazine
na powyższym obrazku na przykład czerwone kropki w zakrzywionej linii wydają się bardziej powiązane z czarnymi kropkami na zakrzywionej linii niż z czerwonymi kropkami na prostej poziomej linii., To dlatego, że twoje oko naturalnie podąża za linią lub krzywą, czyniąc kontynuację silniejszym sygnałem związku niż podobieństwo koloru.
przykłady zasady ciągłości
Amazon wykorzystuje ciągłość do komunikowania, że każdy z poniższych produktów jest podobny i ze sobą powiązany.
Sprig używa go do wyjaśnienia trzyetapowego procesu korzystania z aplikacji.
i Credit Karma wykorzystuje go do zilustrowania korzyści, jakie zapewniają ich usługi.,
zasada #6: Zamknięcie
zasada zamknięcia mówi, że gdy patrzymy na złożony układ elementów wizualnych, zwykle szukamy jednego, rozpoznawalnego wzoru.
innymi słowy, gdy zobaczysz obraz, który zawiera brakujące części, Twój mózg wypełni puste miejsca i utworzy kompletny obraz, abyś mógł nadal rozpoznawać wzór.
źródło: Eduard Volianskyi
na przykład, gdy spojrzysz na powyższe zdjęcie, najprawdopodobniej zobaczysz zebrę, mimo że obraz jest tylko zbiorem czarnych kształtów., Twój umysł wypełnia brakujące informacje, aby stworzyć rozpoznawalny wzór na podstawie Twojego doświadczenia.
przykłady zasady zamknięcia
zasada zamknięcia jest często używana w projektach logo w różnych firmach, w tym IBM, NBC, Zendesk i krąg finansowania.
zasada #7: punkt ogniskowy
zasada punktu ogniskowego stwierdza, że to, co wyróżnia się wizualnie, uchwyci i przytrzyma punkt ogniskowy.najpierw uwaga widza.,
źródło: Smashing Magazine
gdy spojrzysz na obrazek powyżej, pierwszą rzeczą, którą zauważysz, jest czerwony kwadrat, ponieważ różni się od wszystkich czarnych okręgów wokół niego. Jest to pierwszy punkt zainteresowania, który przyciąga twoją uwagę, a stamtąd twoja uwaga przenosi się do innych części obrazu.
przykłady Zasady punktu ogniskowego
,
w poniższym przykładzie Instacart łączy zasadę punktu ogniskowego z zasadą figury-podłoża, aby przyciągnąć wzrok do białego pierwszego planu, a następnie do zielonego przycisku „Znajdź sklepy”.
myśli końcowe
Jeśli rozumiesz, jak działa ludzki umysł, łatwiej jest skierować uwagę ludzi we właściwe miejsce. Przestrzeganie tych zasad pomoże Ci utrzymać użytkownika w centrum procesu rozwoju produktu., Jeśli chcesz dowiedzieć się więcej o zasadach Gestalt percepcji wzrokowej, zalecamy zapoznanie się z poniższymi zasobami.,
Czytaj dalej:
- prostota, symetria i więcej: teoria gestaltu i zasady projektowania, które dała początek
- zasady projektowania: percepcja wzrokowa i zasady gestaltu
- Przewodnik projektanta po teorii gestaltu
- pięcioczęściowa seria Andy 'ego Rutledge' a dotycząca percepcji gestaltu:
- Część 1: relacje figura-Grunt
- część 2: podobieństwo
- Część 3: bliskość, jednolite połączenie i dobra kontynuacja
- część 4: wspólny los
- Część 5: Zamknięcie
chcesz dowiedzieć się więcej?,
aby dowiedzieć się, w jaki sposób UserTesting może pomóc ci zrozumieć Twoich klientów poprzez intuicję na żądanie, skontaktuj się z nami tutaj.