Explorarea principiilor Gestalt ale designului

Publicat: 2022-03-11

Ascultă versiunea audio a acestui articol

Spațiul negativ a fost mult timp un element de bază al designului bun. Lăsarea unui spațiu alb în jurul elementelor unui design este primul lucru care vă vine de obicei în minte. Dar apoi există modele care folosesc acel spațiu alb pentru a deduce un element care nu este de fapt acolo (săgeata ascunsă între E și X în logo-ul FedEx vine imediat în minte ca exemplu).

spațiul negativ este unul dintre elementele și principiile cheie ale designului — „E” și „x” din sigla FedEx creează o săgeată în spațiul negativ dintre ele.

Creierul uman este excepțional de bun în a completa spațiile goale dintr-o imagine și a crea un întreg care este mai mare decât suma părților sale. De aceea vedem fețe în lucruri precum frunzele copacilor sau crăpăturile de pe trotuar.

Acest principiu este una dintre cele mai importante idei care stau la baza principiilor gestalt ale percepției vizuale. Cea mai influentă propunere timpurie scrisă despre teorie a fost publicată de Max Wertheimer în legile sale Gestalt ale organizării perceptive din 1923, deși discuția lui Wolfgang Kohler din 1920 despre Physical Gestalten conține, de asemenea, multe idei influente pe acest subiect.

Indiferent cine a propus primul ideile (au existat eseuri care datează încă din 1890), principiile gestalt sunt un set important de idei pe care orice designer trebuie să le învețe, iar implementarea lor poate îmbunătăți foarte mult nu doar estetica unui design, ci și funcționalitatea și ușurința în utilizare.

În cei mai simpli termeni, teoria gestaltului se bazează pe ideea că creierul uman va încerca să simplifice și să organizeze imagini sau desene complexe care constau din multe elemente, prin aranjarea subconștient a părților într-un sistem organizat care creează un întreg, mai degrabă decât doar un serie de elemente disparate. Creierul nostru este construit pentru a vedea structura și tiparele, pentru ca noi să înțelegem mai bine mediul în care trăim.

Există șase principii individuale asociate în mod obișnuit cu teoria gestalt: asemănarea , continuarea , închiderea , proximitatea , figura/solul și simetria și ordinea (numită și pragnanz ). Există, de asemenea, câteva principii suplimentare, mai noi, uneori asociate cu gestalt, cum ar fi soarta comună.

Similitudine

Este natura umană să grupăm asemenea lucruri împreună. În gestalt, elementele similare sunt grupate vizual, indiferent de apropierea lor între ele. Ele pot fi grupate după culoare, formă sau dimensiune. Asemănarea poate fi folosită pentru a lega elementele care ar putea să nu fie chiar unul lângă celălalt într-un design.

exemplu al principiului gestalt al similitudinii — Pătratele de aici sunt toate la distanță egală și au aceeași dimensiune, dar le grupăm automat după culoare, chiar dacă nu există nicio rimă sau motiv pentru plasarea lor.

Desigur, puteți face lucrurile diferite dacă doriți să le faceți să iasă în evidență din mulțime. Acesta este motivul pentru care butoanele pentru îndemnuri sunt adesea concepute într-o culoare diferită de restul paginii, astfel încât să iasă în evidență și să atragă atenția vizitatorului asupra acțiunii dorite.

În designul UX, utilizarea similitudinii le face clar vizitatorilor care articole sunt asemănătoare. De exemplu, într-o listă de caracteristici care utilizează elemente de design repetitive (cum ar fi o pictogramă însoțită de 3-4 rânduri de text), principiul similarității ar facilita scanarea acestora. În schimb, schimbarea elementelor de design pentru caracteristicile pe care doriți să le evidențiați le face să iasă în evidență și le conferă mai multă importanță în percepția vizitatorului.

Chiar și lucruri la fel de simple precum să te asiguri că linkurile dintr-un design sunt formatate în același mod se bazează pe principiul similarității în modul în care vizitatorii tăi vor percepe organizarea și structura site-ului tău.

Continuare

Legea continuității presupune că ochiul uman va urma calea cea mai netedă atunci când vede liniile, indiferent de modul în care liniile au fost de fapt trasate.

un exemplu al principiului gestalt al continuităţii — Ochiul tinde să dorească să urmeze linia dreaptă de la un capăt la celălalt al acestei figuri și linia curbă de sus în jos, chiar și atunci când liniile își schimbă culoarea la jumătatea drumului.

Această continuare poate fi un instrument valoros atunci când scopul este de a ghida privirea unui vizitator într-o anumită direcție. Ei vor urma cea mai simplă cale de pe pagină, așa că asigurați-vă că părțile cele mai vitale pe care ar trebui să le vadă se încadrează în acea cale.

Deoarece ochiul urmează în mod natural o linie, plasarea articolelor dintr-o serie într-o linie va atrage în mod natural ochiul de la un articol la altul. Glisoarele orizontale sunt un astfel de exemplu, la fel ca și listele de produse asociate de pe site-uri precum Amazon.

Închidere

Închiderea este unul dintre cele mai tari principii gestalt și unul pe care l-am atins deja la începutul acestei piese. Este ideea că creierul tău va completa părțile lipsă dintr-un design sau dintr-o imagine pentru a crea un întreg.

În cea mai simplă formă, principiul închiderii permite ochiului să urmeze ceva ca o linie punctată până la capăt. Dar aplicații mai complexe sunt adesea văzute în logo-uri, ca cea pentru World Wildlife Fund. Bucăți mari din conturul panda lipsesc, dar creierul tău nu are nicio problemă să completeze secțiunile lipsă pentru a vedea întregul animal.

Principiul gestalt al închiderii este ilustrat frumos în logo-ul panda al World Wildlife Fund. Creierul completează formele albe, chiar dacă nu sunt bine definite.

Închiderea este destul de des folosită în designul logo-ului, cu alte exemple, inclusiv cele pentru USA Network, NBC, Sun Microsystems și chiar Adobe.

Un alt exemplu foarte important de închidere la locul de muncă în designul UX și UI este atunci când afișați o imagine parțială care se estompează de pe ecranul utilizatorului pentru a le arăta că există mai multe de găsit dacă glisează la stânga sau la dreapta. Fără o imagine parțială, adică dacă sunt afișate doar imagini complete, creierul nu interpretează imediat că ar putea fi mai multe de văzut și, prin urmare, este mai puțin probabil ca utilizatorul să deruleze (deoarece închiderea este deja evidentă).

Doriți designeri de interfață de utilizare independenți cu normă întreagă din SUA

Proximitate

Proximitatea se referă la cât de apropiate sunt elementele unele de altele. Cele mai puternice relații de proximitate sunt cele dintre subiecte suprapuse, dar doar gruparea obiectelor într-o singură zonă poate avea și un efect puternic de proximitate.

Este adevărat și contrariul, desigur. Punând spațiu între elemente, puteți adăuga separare chiar și atunci când celelalte caracteristici ale acestora sunt aceleași.

Luați acest grup de cercuri, de exemplu:

principiul gestalt al proximității ilustrat cu grupuri de cercuri — Singurul lucru care diferențiază grupul din stânga de cei din dreapta este apropierea liniilor. Și totuși creierul tău interpretează imaginea din dreapta ca trei grupuri distincte.

exemplu de principiu gestalt de proximitate în acțiune care afectează ux — Un exemplu de formular PDF USPS în care principiul gestalt de proximitate afectează UX. Datorită faptului că etichetele câmpurilor sunt mai aproape de câmpurile de sub ele, oamenii ar crede în mod eronat că acolo se îndreaptă informațiile pentru „c”. și „d”. Cu toate acestea, informațiile ar trebui să fie furnizate în câmpurile de deasupra etichetelor de text.

În designul UX, proximitatea este folosită cel mai adesea pentru a-i determina pe utilizatori să grupeze anumite lucruri împreună fără a utiliza lucruri precum granițele dure. Apropiind lucrurile asemănătoare, cu spațiu între fiecare grup, spectatorul va înțelege imediat organizarea și structura pe care doriți să le perceapă.

Figura/Teren

Principiul figură/sol este similar cu principiul închiderii prin faptul că profită de modul în care creierul procesează spațiul negativ. Probabil ați văzut exemple ale acestui principiu plutind în meme-uri pe rețelele sociale sau ca parte a logo-urilor (cum ar fi logo-ul FedEx deja menționat).

Creierul tău va distinge între obiectele pe care le consideră a fi în prim-planul unei imagini (figura sau punctul focal) și fundalul (zona pe care se sprijină figurile). Unde lucrurile devin interesante este atunci când prim-planul și fundalul conțin de fapt două imagini distincte, ca aceasta:

un exemplu de relație figură-fond care formează elemente și principii de proiectare — Unii oameni vor vedea imediat copacul și păsările când vor vedea sigla pentru Grădina Zoologică din Pittsburgh și Acvariul PPG, în timp ce alții vor vedea gorila și leul uitându-se unul la celălalt.

mare exemplu al principiului gestalt figura-sol — Un alt exemplu grozav al principiului gestalt figura/sol.

Un exemplu mai simplu poate fi văzut cu această imagine, a două fețe care creează un sfeșnic sau o vază între ele:

un exemplu simplu de principiu figura-fond, un principiu de design gestalt — În această faimoasă iluzie dezvoltată de psihologul danez Edgar Rubin, privitorului i se prezintă de obicei două interpretări de forme — două fețe sau o vază. Este un alt exemplu excelent al principiului figură/sol.

În termeni generali, creierul tău va interpreta zona mai mare a unei imagini ca sol și cea mai mică ca figură. Totuși, așa cum se arată în imaginea de mai sus, puteți vedea că culorile mai deschise și mai închise pot influența ceea ce este privit ca figură și ceea ce este văzut ca sol.

Principiul figură/sol poate fi foarte util atunci când designerii de produse doresc să evidențieze un punct focal, în special atunci când este activ sau în uz – de exemplu, când apare o fereastră modală și restul site-ului se estompează în fundal sau când se face clic pe o bară de căutare și se crește contrastul între aceasta și restul site-ului.

Abonați-vă la blogul de design Toptal și primiți cartea noastră electronică

Simetrie și ordine

Legea simetriei și a ordinii este cunoscută și sub numele de pragnanz , cuvântul german pentru „figură bună”. Ceea ce spune acest principiu este că creierul tău va percepe forme ambigue într-un mod cât mai simplu posibil. De exemplu, o versiune monocromă a logo-ului Olimpic este văzută ca o serie de cercuri suprapuse, mai degrabă decât o colecție de linii curbe.

încă unul dintre principiile de design gestalt, principiul pragnanz este ilustrat cu sigla olimpiadelor

Iată un alt exemplu bun al principiului de design gestalt „ pragnanz ”:

un exemplu complex al principiului pragnanz, un alt principiu gestalt

Creierul tău va interpreta imaginea din stânga ca dreptunghi, cerc și triunghi, chiar și atunci când contururile fiecăruia sunt incomplete, deoarece acestea sunt forme mai simple decât imaginea generală.

Soarta comună

Deși soarta comună nu a fost inclusă inițial în teoria gestalt, ea a fost adăugată de atunci. În designul UX, utilitatea sa nu poate fi trecută cu vederea. Acest principiu afirmă că oamenii vor grupa lucruri care indică sau se mișcă în aceeași direcție.

În natură, vedem acest lucru în lucruri precum stoluri de păsări sau bancuri de pești. Sunt alcătuite dintr-o grămadă de elemente individuale, dar pentru că se mișcă aparent ca una, creierul nostru le grupează și le consideră un singur stimul.

un stol de păsări ilustrează principiul destinului comun — Un stol de păsări este privit ca o singură unitate atunci când zboară în aceeași direcție și, prin urmare, împărtășește o soartă comună. (de Martin Adams pe Unsplash)

Acest lucru este foarte util în UX, deoarece efectele animate devin mai răspândite în designul modern. Rețineți că elementele nu trebuie de fapt să se miște pentru a beneficia de acest principiu, dar trebuie să dea impresia de mișcare.

Principiile Gestalt în UX Design

Ca și în cazul oricărui principiu psihologic, învățarea de a încorpora principiile percepției vizuale ale gestalt în munca de proiectare poate îmbunătăți considerabil experiența utilizatorului. Înțelegerea modului în care funcționează creierul uman și apoi exploatarea tendințelor naturale ale unei persoane creează o interacțiune mai fluidă, care îl face pe utilizator să se simtă confortabil pe un site web, chiar dacă este prima vizită.

Principiile Gestalt sunt relativ ușor de încorporat în aproape orice design și pot ridica rapid un design care pare întâmplător sau ca luptă pentru atenția unui utilizator la unul care oferă o interacțiune perfectă, naturală, care îi ghidează pe utilizatori spre acțiunea pe care doriți să o întreprindă.

• • •

Citiri suplimentare pe Blogul Toptal Design:

Principii de proiectare: Introducere în ierarhie
Cele mai bune practici de design UI și greșeli comune
Cum să folosiți principiile Gestalt puternice în design (cu infografic)
Ghidul cuprinzător al arhitecturii informaționale
Îmbunătățiți-vă UX cu aceste principii de design de interacțiune de succes