den mänskliga hjärnan är trådbunden för att se struktur, logik och mönster. Det hjälper oss att förstå världen. På 1920-talet utvecklade en grupp tyska psykologer teorier om hur människor uppfattar världen runt dem, kallade Gestaltprinciper.
till exempel, Vad ser du när du tittar på den här bilden?,
Källa: det inspirerade ögat
om du är som de flesta ser du förmodligen en triangel. Men i verkligheten finns det bara tre vita pac-män.”Vi ser triangeln eftersom våra hjärnor tar den tvetydiga visuella informationen och organiserar den till något som är meningsfullt för oss—något bekant, ordnat, symmetriskt och som vi förstår.
När denna kognitiva process sparkar in, hoppar våra sinnen från att förstå alla element som individuella och orelaterade komponenter till att se hela formen som helhet., Och som ett resultat uppfattar vi former och föremål där ingen skapades.
för att ytterligare illustrera denna process, kolla in GIF nedan. Din hjärna ser en hund gå, men det är inget annat än en serie rörliga prickar.
källa: Gizmodo
det här är enkla exempel, men de visar vilka genvägar våra hjärnor gör hela tiden för att snabbt förstå världen.
vilka är Gestaltprinciperna?,
dessa genvägar kallas Gestalt-principerna för visuell perception, och de beskriver hur våra hjärnor skapar struktur som standard. Men varför är förstå detta viktigt för webb och mobil design?
varför designers bör bry sig om Gestaltprinciperna
stora designers förstår den kraftfulla roll som psykologi spelar i visuell uppfattning. Vad händer när någons öga möter dina design skapelser? Hur reagerar deras sinne på meddelandet din pjäs delar?, – Laura Busche, varumärkesstrateg på Autodesk
Tänk på det citatet i en minut. När människor först ser dina mönster, hur upplever de dem? För att förstå vad som gör UI-designarbetet måste du förstå psykologin för mänsklig uppfattning.
den grundläggande lag som styr en Gestaltprincip är att vi tenderar att beställa vår erfarenhet på ett sätt som är regelbundet, ordnat och igenkännligt. Det här gör det möjligt för oss att skapa mening i en komplex och kaotisk värld., Och att ha en solid förståelse för hur dessa principer fungerar hjälper dig på tre sätt.
- de hjälper dig att avgöra vilka designelement som är mest effektiva i en given situation. Till exempel när du ska använda visuell hierarki, bakgrundsskuggning, gradienter och hur du grupperar liknande objekt och skiljer olika.
- dessa psykologiska principer har makt att påverka vår visuella uppfattning, vilket gör det möjligt för designers att rikta vår uppmärksamhet mot specifika fokuspunkter, få oss att vidta specifika åtgärder och skapa beteendeförändring.,
- och slutligen, på högsta nivå, Gestalt principer hjälper dig att utforma produkter som löser kundens problem eller möta användarens behov på ett sätt som är vacker, tilltalande och intuitivt att använda.
i den här artikeln kommer vi att diskutera sju Gestalt lagar eller principer som direkt gäller för modern design, och dela några exempel på hur de används i UI design. Det här är inte en uttömmande lista, men du börjar snabbt märka att det finns en överlappning mellan många av principerna och att de alla arbetar flytande. Nu dyker vi in.,
- Figure-ground
- likhet
- närhet
- gemensam region
- kontinuitet
- stängning
- brännpunkt
princip #1: figure-ground
figure-ground-principen säger att människor instinktivt uppfattar objekt som antingen i förgrunden eller bakgrunden. De sticker antingen ut framträdande i framsidan (figuren) eller recede in i baksidan (marken).,
Källa: en dvärg som heter Warren
i bilden ovan, till exempel ser ditt öga omedelbart ett vitt äpple som sitter på en svart bakgrund.
denna bestämning kommer att ske snabbt och undermedvetet i de flesta fall. Figur / Mark låter oss veta vad vi ska fokusera på och vad vi säkert kan ignorera i en komposition. – Steven Bradley, Webbdesigner
När människor använder din webbplats eller mobilapp är en av de första sakerna de gör på varje skärm för att bestämma vilken som är figuren och vilken som är marken.,
exempel på figure-ground-principen
Basecamp-hemsidan har en massa grafik, text, formulär och annan information. Och på grund av figurgrundprincipen kan du omedelbart berätta att du bör fokusera på innehållet i de vita förgrundsområdena.
AngelList använder principen figure-ground på två sätt nedan. Först sitter texten och logotypen på vänster sida av sidan tydligt ovanpå bakgrundsbilden. För det andra står den vita texten i menyn till höger ovanpå den svarta bakgrunden.,
princip #2: likhet
principen om likhet säger att när saker verkar likna varandra grupperar vi dem tillsammans. Och vi tenderar också att tro att de har samma funktion.
i den här bilden verkar det till exempel finnas två separata och distinkta grupper baserade på form: cirklarna och rutorna.
Källa: Creative Beacon
en mängd olika designelement, som färg och organisation, kan användas för att skapa liknande grupper., I bilden nedan, till exempel, även om alla former är desamma, är det tydligt att varje kolumn representerar en distinkt grupp:
källa: Andy Rutledge
exempel på likhetsprincipen
GitHub använder likhetsprincipen på två sätt på sidan nedan. För det första använder de det för att skilja olika sektioner. Du kan omedelbart berätta att den grå sektionen på toppen tjänar ett annat syfte än den svarta sektionen, som också är skild från och annorlunda än den blå sektionen.,
För det andra använder de också färgen blå för att skilja länkar från vanlig text och för att kommunicera att all blå text delar en gemensam funktion.
princip #3: närhet
principen om närhet anger att saker som är nära varandra verkar vara mer relaterade än saker som är placerade längre ifrån varandra.
källa: Andy Rutledge
närhet är så kraftfull att den åsidosätter likheten mellan färg, form och andra faktorer som kan skilja en grupp objekt.,
källa: Steven Bradley
Lägg märke till de tre grupperna av svarta och röda prickar ovan? Objektens relativa närhet har ett ännu starkare inflytande på gruppering än färg gör.
exempel på närhetsprincipen
närheten i varje bild och dess motsvarande text kommunicerar att de är relaterade till varandra.
och Vice använder den för att skilja mellan bilder, rubriker, beskrivningar och annan information för var och en av dess berättelser.,
Princip #4: gemensam region
principen om gemensam region är mycket relaterad till närhet. Det står att när objekt ligger inom samma stängda region uppfattar vi dem som grupperade tillsammans.
källa: Smashing Magazine
att lägga till gränser eller andra synliga hinder är ett bra sätt att skapa en uppfattad separation mellan grupper av objekt—även om de har samma närhet, form, färg etc.,
exempel på den gemensamma regionprincipen
i exemplet från Pinterest nedan används den gemensamma regionprincipen för att separera varje pin-inklusive dess foto, titel, beskrivning, bidragsgivare och andra detaljer—från alla andra stift runt den.
och det används i Facebook—exemplet nedan för att kommunicera att kommentarerna, gillar och interaktioner är associerade med det här specifika inlägget-och inte de andra inläggen som omger det.,
princip #5: kontinuitet
principen om kontinuitet anger att element som är ordnade på en linje eller kurva uppfattas vara mer relaterade än element som inte finns på linjen eller kurvan.
källa: Smashing Magazine
i bilden ovan, till exempel verkar de röda prickarna i den krökta linjen vara mer relaterade till de svarta prickarna på den krökta linjen än till de röda prickarna på den raka horisontella linjen., Det beror på att ditt öga naturligt följer en linje eller en kurva, vilket gör fortsättning en starkare signal om relatedness än likheten av färg.
exempel på kontinuitetsprincipen
Amazon använder kontinuitet för att kommunicera att var och en av produkterna nedan är likartad och relaterad till varandra.
Sprig använder den för att förklara trestegsprocessen för att använda sin app.
och Credit Karma använder den för att illustrera de fördelar som deras tjänster tillhandahåller.,
princip #6: stängning
principen om stängning säger att när vi tittar på ett komplext arrangemang av visuella element tenderar vi att leta efter ett enda, igenkännligt mönster.
med andra ord, när du ser en bild som har saknade delar, kommer din hjärna att fylla i ämnena och göra en komplett bild så att du fortfarande kan känna igen mönstret.
källa: Eduard Volianskyi
När du till exempel tittar på bilden ovan ser du troligtvis en zebra trots att bilden bara är en samling svarta former., Ditt sinne fyller i den saknade informationen för att skapa ett igenkännligt mönster baserat på din erfarenhet.
exempel på stängningsprincipen
stängningsprincipen används ofta i logodesigner hos en mängd olika företag, inklusive IBM, NBC, Zendesk och Funding Circle.
princip #7: kontaktpunkt
brännpunktsprincipen säger att det som sticker ut visuellt kommer att fånga och hålla tittarens uppmärksamhet först.,
källa: Smashing Magazine
När du tittar på bilden ovan, till exempel, det första du märker är den Röda torget eftersom det är annorlunda än alla svarta cirklar runt den. Det är den första punkten av intresse som griper din uppmärksamhet, och därifrån flyttar din uppmärksamhet till andra delar av bilden.
exempel på brännpunktsprincipen
Twilio använder brännpunktsprincipen för att dra ditt öga till deras call-to-action-knapp.,
och i exemplet nedan kombinerar Instacart brännpunktsprincipen med figurgrundprincipen för att dra ögat mot den vita förgrunden och sedan till den gröna knappen ”Hitta butiker”.
slutliga tankar
om du förstår hur det mänskliga sinnet fungerar är det lättare att rikta människors uppmärksamhet på rätt plats. Och att hålla dessa principer top-of-mind hjälper dig att hålla användaren i mitten av din produktutvecklingsprocess., Om du vill lära dig mer om Gestaltprinciperna för visuell uppfattning rekommenderar vi att du kollar in resurserna nedan.,
vidare läsning:
- enkelhet, symmetri och mer: Gestalt teori och designprinciper det gav upphov till
- designprinciper: visuell Perception och principerna för Gestalt
- designerns Guide till Gestalt teori
- Andy Rutledge femdelade serien Om Gestalt perception:
- Del 1: figur-mark relationer
- del 2: likhet
- del 3: närhet, enhetlig samhörighet och god fortsättning
- del 4: gemensamt öde
- Del 5: stängning
vill du veta mer?,
för att lära dig hur UserTesting kan hjälpa dig att förstå dina kunder genom On-demand mänsklig insikt, kontakta oss här.