creierul uman este conectat pentru a vedea structura, logica și modelele. Ne ajută să înțelegem lumea. În anii 1920, un grup de psihologi germani au dezvoltat teorii despre modul în care oamenii percep lumea din jurul lor, numite principii Gestalt.
de exemplu, ce vezi când te uiți la această imagine?,
Sursa: ochiul inspirat
Dacă sunteți ca majoritatea oamenilor, probabil că vedeți un triunghi. Dar, în realitate, tot ce este acolo sunt trei „bărbați pac” albi.”Vedem triunghiul deoarece creierul nostru ia informația vizuală ambiguă și o organizează în ceva care are sens pentru noi—ceva familiar, ordonat, simetric și pe care îl înțelegem.când acest proces cognitiv începe, mintea noastră sare de la înțelegerea tuturor elementelor ca componente individuale și fără legătură cu vederea întregii forme ca întreg., Și ca rezultat, percepem forme și obiecte în care nici unul nu a fost creat.
pentru a ilustra în continuare acest proces, consultați GIF-ul de mai jos. Creierul vede un câine de mers pe jos, dar nu este nimic mai mult decât o serie de puncte în mișcare.
Sursa: Gizmodo
Acestea sunt simple exemple, dar ele demonstrează tipuri de comenzi rapide creierul nostru face tot timpul pentru a face rapid sens al lumii.
care sunt principiile Gestalt?,
aceste scurtături sunt cunoscute sub numele de principiile Gestalt ale percepției vizuale și detaliază modul în care creierul nostru creează structura în mod implicit. Dar de ce înțelegerea acestui lucru este importantă pentru designul web și mobil?
de ce designerii ar trebui să aibă grijă de principiile Gestalt
marii designeri înțeleg rolul puternic pe care îl joacă psihologia în percepția vizuală. Ce se întâmplă atunci când ochiul cuiva întâlnește creațiile dvs. de design? Cum reacționează mintea lor la mesajul pe care piesa dvs. îl împărtășește?, —Laura Busche, Conținut de Brand Strategist la Autodesk
Gândiți-vă la acest citat pentru un minut. Când oamenii văd pentru prima dată desenele tale,cum le experimentează? Pentru a înțelege ce face UI design de lucru, trebuie să înțeleagă psihologia percepției umane.
legea fundamentală care guvernează un principiu Gestalt este că tindem să ne ordonăm experiența într-o manieră regulată, ordonată și recunoscută. Aceasta este ceea ce ne permite să creăm sens într-o lume complexă și haotică., Și având o înțelegere solidă a modului în care funcționează aceste principii vă va ajuta în trei moduri.acestea vă vor ajuta să determinați ce elemente de design sunt cele mai eficiente într-o anumită situație. De exemplu, când să utilizați ierarhia vizuală, umbrirea fundalului, gradienții și cum să grupați articole similare și să le distingeți pe cele diferite.
- Figura-sol
- Similitudine
- de Proximitate
- regiune Comună
- Continuitate
- de Închidere
- punct Focal
Principiul #1: figura-sol
figura-sol principiu afirmă că oamenii instinctiv percep obiectele ca fiind în prim-plan sau fundal. Ele fie ies în evidență în față (figura), fie se retrag în spate (pământul).,
Sursa: un pitic numit Warren
în imaginea de mai sus, de exemplu, ochiul tău vede instantaneu un măr alb așezat pe un fundal negru.
această determinare va avea loc rapid și subconștient în majoritatea cazurilor. Figura / sol ne permite să știm ce ar trebui să ne concentrăm și ce putem ignora în siguranță într-o compoziție. – Steven Bradley, web designer
când oamenii folosesc site-ul sau aplicația mobilă, unul dintre primele lucruri pe care le fac pe fiecare ecran este de a determina care este cifra și care este motivul.,
exemple ale principiului figure-ground
pagina de pornire Basecamp are o grămadă de grafică, text, formulare și alte informații. Și din cauza principiului figura-sol, vă pot spune imediat că ar trebui să se concentreze pe conținutul în zonele de prim-plan alb.
AngelList utilizează principiul figura-sol în două moduri de mai jos. În primul rând, textul și logo-ul din partea stângă a paginii stau clar în partea de sus a imaginii de fundal. În al doilea rând, textul alb din meniul din dreapta se află în partea de sus a fundalului negru.,
principiul #2: similitudine
principiul similitudinii afirmă că atunci când lucrurile par a fi similare între ele, le grupăm împreună. Și, de asemenea, tindem să credem că au aceeași funcție.
de exemplu, în această imagine, se pare că există două grupuri separate și distincte bazate pe formă: cercurile și pătratele.
Sursa: Creative Far
O varietate de elemente de design, cum ar fi culoarea și organizație, pot fi utilizate pentru a stabili grupuri similare., În imaginea de mai jos, de exemplu, chiar dacă toate formele sunt la fel, e clar că fiecare coloană reprezintă un grup distinct:
Sursa: Andy Rutledge
Exemple de similitudine principiu,
GitHub folosește similitudinea principiu în două moduri pe pagina de mai jos. În primul rând, îl folosesc pentru a distinge diferite secțiuni. Puteți spune imediat că secțiunea gri din partea de sus servește unui scop diferit de secțiunea neagră, care este, de asemenea, separată și diferită de secțiunea albastră.,în al doilea rând, folosesc și culoarea albastră pentru a distinge legăturile de textul obișnuit și pentru a comunica faptul că tot textul albastru împărtășește o funcție comună.
principiul #3: proximitatea
principiul proximității afirmă că lucrurile care sunt apropiate par a fi mai înrudite decât lucrurile care sunt distanțate mai departe.
Sursa: Andy Rutledge
proximitatea este atât de puternică încât suprascrie similitudinea culorii, a formei și a altor factori care ar putea diferenția un grup de obiecte.,
Sursa: Steven Bradley
observați cele trei grupuri de puncte negre și roșii de mai sus? Apropierea relativă a obiectelor are o influență și mai puternică asupra grupării decât culoarea.
exemple ale principiului proximității
apropierea fiecărei imagini și textul corespunzător comunică faptul că acestea sunt legate între ele.
și Vice îl folosește pentru a distinge între imagini, titluri, descrieri și alte informații pentru fiecare dintre poveștile sale.,
principiul #4: regiunea comună
principiul regiunii comune este foarte legat de proximitate. Acesta afirmă că atunci când obiectele sunt situate în aceeași regiune închisă, le percepem ca fiind grupate împreună.
Sursa: Smashing Magazine
Adăugarea de borduri sau alte vizibile bariere este o modalitate foarte bună de a crea un percepute de separare între grupuri de obiecte—chiar dacă au aceeași proximitate, forma, culoare, etc.,în exemplul de pe Pinterest de mai jos, principiul regiunii comune este utilizat pentru a separa fiecare pin, inclusiv fotografia, titlul, descrierea, contribuitorul și alte detalii, de toate celelalte Pinuri din jurul său.
Și este folosit în Facebook exemplu de mai jos pentru a comunica faptul că comentarii, îi place, și interacțiunile sunt asociate cu acest post specific și nu pe alte posturi din jur.,
Principiul #5: continuitatea
principiul continuității afirmă că elementele care sunt dispuse pe o linie sau curba sunt percepute a fi mai legate decât elemente care nu sunt pe linie sau curba.
Sursa: Smashing Magazine
În imaginea de mai sus, de exemplu, puncte roșii în linie curbă par a fi mai legate de punctele negre de pe linie curbată decât la puncte roșii pe linie dreaptă orizontală., Asta pentru că ochiul tău urmează în mod natural o linie sau o curbă, făcând continuarea un semnal mai puternic de relaționare decât similitudinea culorii.Amazon folosește continuitatea pentru a comunica că fiecare dintre produsele de mai jos este similar și legat unul de celălalt.
Sprig îl folosește pentru a explica procesul în trei pași pentru a utiliza aplicația lor.
și Credit Karma îl folosește pentru a ilustra beneficiile pe care le oferă serviciile lor.,
principiul #6: închidere
principiul închiderii afirmă că atunci când privim un aranjament complex de elemente vizuale, tindem să căutăm un singur model, recunoscut.cu alte cuvinte, când vedeți o imagine care are părți lipsă, creierul dvs. va completa spațiile libere și va face o imagine completă, astfel încât să puteți recunoaște modelul.
Sursa: Eduard Volianskyi
De exemplu, atunci când te uiți la imaginea de mai sus veți vedea cel mai probabil, o zebră, chiar dacă imaginea este doar o colecție de forme negre., Mintea ta completează informațiile lipsă pentru a crea un model de recunoscut bazat pe experiența ta.
Exemple de închiderea principiu,
închiderea principiu este folosit de multe ori în logo design la o varietate de companii, inclusiv IBM, NBC, Zendesk, și de Finanțare Cerc.
Principiul #7: punct focal
punctul focal principiu prevede că tot ce iese în evidență vizual va capta și reține atenția privitorului în primul rând.,
Sursa: Smashing Magazine
Când te uiți la imaginea de mai sus, de exemplu, primul lucru pe care observați este pătrat roșu pentru că e diferit de toate cercurile negre din jurul ei. Este primul punct de interes care îți atrage atenția și de acolo atenția ta se mută în alte părți ale imaginii.
exemple ale principiului punctului focal
Twilio folosește principiul punctului focal pentru a atrage atenția asupra butonului de apel la acțiune.,
în exemplul de mai jos, Instacart combină punctul focal principiu, cu figura-sol principiu să atragă ochiul alb din prim-plan, și apoi la verde „găsi magazine” buton.
gânduri finale
dacă înțelegeți cum funcționează mintea umană, este mai ușor să direcționați atenția oamenilor către locul potrivit. Și păstrarea acestor principii top-of-mind vă va ajuta să păstrați utilizatorul în centrul procesului de dezvoltare a produsului., Dacă doriți să aflați mai multe despre principiile Gestalt ale percepției vizuale, vă recomandăm să consultați resursele de mai jos.,
bibliografie:
- Simplitate, Simetrie și Mai mult: Gestalt Teoria Și Principiile De Proiectare a Dat Naștere La
- Principii de Proiectare: Percepția Vizuală Și Principiile Gestalt
- Designerului Ghid pentru Teoria Gestalt
- Andy Rutledge serie de cinci parte pe Gestalt percepție:
- Partea 1: Figura-Sol Relații
- Partea 2: Similitudinea
- Partea 3: Proximitate, Uniforme Conectare, precum și Continuarea Bun
- Partea 4: Destin Comun
- Partea 5: Închidere
Doriți să aflați mai multe?,
pentru a afla cum UserTesting vă poate ajuta să vă înțelegeți clienții prin informații umane la cerere, contactați-ne aici.