Utforska Gestaltprinciperna för Design

Utforska Gestaltprinciperna för Design

lyssna på ljudversionen av den här artikeln

negativt utrymme har länge varit en stapelvara i bra design. Att lämna vitt utrymme runt element i en design är det första som vanligtvis kommer att tänka på. Men då finns det mönster som använder det vita utrymmet för att dra slutsatsen ett element som inte är faktiskt där (pilen dold mellan E och X i FedEx-logotypen kommer omedelbart att tänka på som ett exempel).

”E” och ”x” i FedEx-logotypen skapar en pil inom det negativa utrymmet mellan dem.,

den mänskliga hjärnan är exceptionellt bra på att fylla i ämnena i en bild och skapa en helhet som är större än summan av dess delar. Det är därför vi ser ansikten i saker som trädblad eller trottoarsprickor.

denna princip är en av de viktigaste bakomliggande idéerna bakom gestaltprinciperna för visuell uppfattning., Det mest inflytelserika tidiga förslaget om teorin publicerades av Max Wertheimer i hans 1923 Gestaltlagar i perceptuell organisation, även om Wolfgang Köhlers 1920-diskussion om fysisk Gestalten också innehåller många inflytelserika idéer om ämnet.

oavsett vem som först föreslog idéerna (det har funnits uppsatser som går tillbaka så långt som 1890), är gestalt-principerna en viktig uppsättning idéer för alla designer att lära sig, och deras genomförande kan förbättra inte bara estetiken hos en design utan också dess funktionalitet och användarvänlighet.,

i de enklaste termerna är gestaltteori baserad på tanken att den mänskliga hjärnan kommer att försöka förenkla och organisera komplexa bilder eller mönster som består av många element, genom att omedvetet arrangera delarna i ett organiserat system som skapar en helhet, snarare än bara en serie olika element. Våra hjärnor är byggda för att se struktur och mönster för att vi bättre ska kunna förstå den miljö vi lever i.,

det finns sex individuella principer som vanligtvis förknippas med gestaltteori: likhet, fortsättning, stängning, närhet, figur/mark och symmetri & ordning (även kallad prägnanz). Det finns också några ytterligare, nyare principer som ibland är förknippade med gestalt, såsom vanligt öde.

likhet

det är mänsklig natur att gruppera som saker tillsammans. I gestalt grupperas liknande element visuellt, oavsett deras närhet till varandra. De kan grupperas efter färg, form eller storlek., Likhet kan användas för att knyta samman element som kanske inte är precis bredvid varandra i en design.

rutorna här är alla lika fördelade och samma storlek, men vi grupperar dem automatiskt efter färg, även om det inte finns någon rim eller anledning till deras placering.

självklart kan du göra saker olika om du vill få dem att sticka ut från mängden., Det är därför knappar för uppmaningar är ofta utformade i en annan färg än resten av en sida—så de sticker ut och drar besökarens uppmärksamhet åt önskad åtgärd.

i UX design, med likhet gör det klart för dina besökare vilka objekt som är likadana. Till exempel, i en funktionslista med repetitiva designelement (till exempel en ikon tillsammans med 3-4 rader text), skulle likhetsprincipen göra det enkelt att skanna igenom dem., Att ändra designelementen för funktioner som du vill markera gör att de sticker ut och ger dem större betydelse för besökarens uppfattning.

även saker så enkelt som att se till att länkar i en design är formaterade på samma sätt bygger på principen om likhet i hur dina besökare kommer att uppfatta organisation och struktur på din webbplats.

fortsättning

kontinuitetslagen innebär att det mänskliga ögat kommer att följa den smidigaste vägen när du tittar på linjer, oavsett hur linjerna faktiskt ritades.,

ögat tenderar att vilja följa den raka linjen från ena änden av denna siffra till den andra, och den böjda linjen från toppen till botten, även när linjerna ändrar färg halvvägs igenom.

denna fortsättning kan vara ett värdefullt verktyg när målet är att styra en besökares öga i en viss riktning. De kommer att följa den enklaste vägen på sidan, så se till att de viktigaste delarna de ska se faller inom den vägen.,

eftersom ögat naturligt följer en linje, kommer att placera objekt i en serie i en linje naturligtvis dra ögat från ett objekt till nästa. Horisontella reglagen är ett sådant exempel, som är relaterade produktlistor på webbplatser som Amazon.

stängning

stängning är en av de coolaste gestalt principerna och en jag redan berört i början av detta stycke. Det är tanken att din hjärna kommer att fylla i de saknade delarna av en design eller bild för att skapa en helhet.

i sin enklaste form tillåter stängningsprincipen ditt öga att följa något som en prickad linje till slutet., Men mer komplexa applikationer ses ofta i logotyper, som För World Wildlife Fund. Stora bitar av konturen för panda saknas, men din hjärna har inga problem att fylla i de saknade sektionerna för att se hela djuret.

gestalt-principen om stängning illustreras vackert i World Wildlife funds panda-logotyp. Hjärnan fullbordar de vita formerna, även om de inte är väldefinierade.,

stängning används ganska ofta i logotypdesign, med andra exempel, inklusive de för USA-nätverket, NBC, Sun Microsystems och även Adobe.

ett annat mycket viktigt exempel på stängning på jobbet i UX och UI-design är när du visar en partiell bild som bleknar av användarens skärm för att visa dem att det finns mer att hitta om de sveper åt vänster eller höger. Utan en partiell bild, dvs,, om bara fullständiga bilder visas, tolkar hjärnan inte omedelbart att det kan finnas mer att se, och därför är din användare mindre benägna att rulla (eftersom Stängningen redan är uppenbar).

närhet

närhet refererar till hur nära element är varandra. De starkaste närhet relationer är de mellan överlappande ämnen, men bara gruppera objekt i ett enda område kan också ha en stark närhet effekt.

motsatsen är naturligtvis också sant., Genom att sätta utrymme mellan element kan du lägga till separation även när deras andra egenskaper är desamma.

ta denna grupp av cirklar, till exempel:

det enda som skiljer gruppen till vänster från dem till höger är närheten till linjerna. Och ändå tolkar din hjärna bilden till höger som tre olika grupper.

a USPS PDF form exempel där närhet gestalt principen försämrar UX., På grund av att fältetiketterna ligger närmare fälten under dem, skulle folk felaktigt tro att det är där informationen går till ” C ”och” d”. ändå ska informationen tillhandahållas i fälten ovanför textetiketterna.

i UX design används närhet oftast för att få användare att gruppera vissa saker tillsammans utan att använda saker som hårda gränser. Genom att sätta som saker närmare varandra, med utrymme mellan varje grupp, kommer betraktaren omedelbart att hämta på den organisation och struktur du vill att de ska uppfatta.,

figur / Mark

figur/markprincipen liknar stängningsprincipen genom att den utnyttjar hur hjärnan behandlar negativt utrymme. Du har förmodligen sett exempel på denna princip som flyter runt i memes på sociala medier, eller som en del av logotyper (som FedEx-logotypen som redan nämnts).

din hjärna kommer att skilja mellan de objekt som den anser vara i förgrunden av en bild (figuren eller brännpunkten) och bakgrunden (det område där siffrorna vilar)., Där saker blir intressanta är när förgrunden och bakgrunden faktiskt innehåller två distinkta bilder, så här:

vissa människor kommer omedelbart att se trädet och fåglarna när du tittar på logotypen för Pittsburgh Zoo & PPG Aquarium, medan andra kommer att se gorillan och lejonet stirrar på varandra.

ett annat bra exempel på figure/ground gestalt-principen.,

ett enklare exempel kan ses med den här bilden, av två ansikten som skapar en ljusstake eller vas mellan dem:

i denna berömda illusion som utvecklats av den danska psykologen Edgar Rubin presenteras betraktaren vanligtvis med två formtolkningar—två ansikten eller en vas. Det är ett annat utmärkt exempel på figuren / markprincipen.

generellt sett kommer din hjärna att tolka det större området av en bild som marken och ju mindre som figuren., Som visas i bilden ovan kan du dock se att ljusare och mörkare färger kan påverka vad som ses som figuren och vad som ses som marken.

figure / ground-principen kan vara mycket praktisk när produktdesigners vill markera en kontaktpunkt, särskilt när den är aktiv eller används—till exempel när ett modalfönster dyker upp och resten av webbplatsen bleknar i bakgrunden, eller när en sökfält klickas på och kontrasten ökas mellan den och resten av webbplatsen.,

symmetri och ordning

lagen om symmetri och ordning är också känd som prägnanz, det tyska ordet för ”bra figur.”Vad denna princip säger är att din hjärna kommer att uppfatta tvetydiga former på så enkelt sätt som möjligt. Till exempel ses en monokrom version av den olympiska logotypen som en serie överlappande cirklar snarare än en samling krökta linjer.,

Här är ett annat bra exempel på gestalt design principle ”prägnanz”:

din hjärna kommer att tolka bilden till vänster som en rektangel, cirkel och triangel, även när konturerna av varje är ofullständiga eftersom de är enklare former än den övergripande bilden.

Common Fate

medan common fate inte ursprungligen ingick i gestalt-teorin har det sedan dess lagts till. I UX design kan dess användbarhet inte förbises., Denna princip säger att människor kommer att gruppera saker som pekar på eller rör sig i samma riktning.

i naturen ser vi detta i saker som flockar av fåglar eller fiskskolor. De består av en massa enskilda element, men eftersom de rör sig till synes som en, grupperar våra hjärnor dem tillsammans och betraktar dem som en enda stimulans.

en flock fåglar ses som en enda enhet när de flyger i samma riktning och därmed delar ett gemensamt öde., (av Martin Adams på Unsplash)

Detta är mycket användbart i UX som animerade effekter blivit vanligare i modern design. Observera att element faktiskt inte behöver röra sig för att dra nytta av denna princip, men de måste ge intryck av rörelse.

Gestalt principer i UX Design

som med alla psykologiska princip, lära sig att införliva den visuella uppfattningen principer gestalt i ditt designarbete kan avsevärt förbättra användarupplevelsen., Att förstå hur den mänskliga hjärnan fungerar och sedan utnyttja en persons naturliga tendenser skapar en mer sömlös interaktion som gör att en användare känner sig bekväm på en webbplats, även om det är deras första besök.

Gestalt principer är relativt lätt att införliva i nästan alla design och kan snabbt höja en design som verkar slumpartat eller som det kämpar för en användares uppmärksamhet på en som erbjuder en sömlös, naturlig interaktion som guidar användarna mot den åtgärd du vill att de ska ta.

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *