den perceptuella processen gör att vi kan uppfatta världen genom våra sinnen av syn, lukt, ljud, smak och beröring. I synnerhet bearbetar vårt visuella system stora mängder information i sin miljö. Snarare än att uppfatta element separat organiserar vår hjärna mönster, föremål och former i hela former som vi kan förstå.

gestaltgrupperingsprinciperna för visuell uppfattning beskriver denna organisation som en uppsättning principer som förklarar hur vi uppfattar och organiserar denna enorma mängd visuella stimuli. Gestaltprinciperna-likhet, närhet, stängning, figurjord, fortsättning och gemensamt öde-är ett populärt verktyg som används av designers för att visuellt organisera information. Som visuell designer och nu interaktionsdesigner tillämpar jag dessa principer regelbundet för att skapa relationer och skillnader mellan element i mina mönster. Att förstå hur dessa principer fungerar och hur man använder dem i dina mönster ger starkare och mer engagerande arbete.

är du redo att förbättra dina mönster? Låt oss börja med att gräva i likhet.

likhet

gestalt-principen om likhet säger att element som liknar uppfattas vara mer relaterade än element som är olika. Likhet hjälper oss att organisera objekt genom deras relation till andra objekt inom en grupp och kan påverkas av attributen färg, storlek, form och orientering.

använda färg för att tilldela relationer

likhet påverkas särskilt av färg. I exemplet nedan märker du hur de färgade formerna har en stark effekt när det gäller att tilldela en gruppering eller relation, även när olika former ingår.

använda storlek för att tilldela relationer

storlek är ett annat användbart verktyg vi kan använda för att skapa likhet. I exemplet nedan gör likhet i storlek att de större formerna sticker ut och bildar en grupp, även om alla former är desamma.

använda Form för att tilldela relationer

form är användbar vid gruppering efter likhet, men den har den svagaste grupperingseffekten jämfört med färg och storlek. I exemplet som ses här får Form oss att tolka element som kolumner med cirklar och rutor, i motsats till rader med alternerande cirklar och rutor.

använda orientering för att tilldela relationer

orientering kan också användas för att gruppera efter likhet. Genom att vrida några av rutorna i denna grupp med 45 grader görs en separat gruppering som uppfattas som relaterad. De verkar nästan röra sig i en liknande riktning jämfört med formerna runt dem. Detta berör faktiskt gestalt-principen om gemensamt öde, en princip som vi kommer in i en framtida artikel. Men gärna hoppa framåt och Google det (efter att du läst den här artikeln, förstås!). Det är en fascinerande princip som händer ofta runt omkring dig.

mer om färg

som tidigare nämnts påverkas likheten särskilt av färg och kan åsidosätta andra attribut. Vi kan till exempel åsidosätta exemplet med likhet i form genom att lägga till färg. Nu uppfattar vi alternerande rader av röda och vita former i motsats till kolumner med cirklar och rutor. Ge det ett försök. Försök att se kolumnerna i cirklar och rutor. Möjligt men ganska tufft nu, eller hur?

dessutom kan färg åsidosätta storlek. När vi lägger till färg i exemplet med likhet i storlek skapar vi två grupperingar separata från varandra. Nu uppfattar vi de stora röda rutorna som en grupp och den enda stora vita torget som en separat, orelaterad (och ensam) grupp.

dessa två exempel illustrerar hur kraftfull färg kan vara för att tilldela relationer mellan element. Försök använda färg i ditt arbete för att skilja element och du kommer bli förvånad över hur mycket starkare dina grupperingar är.

likhet i praktiken

När vi utformar kan vi använda likhet för att förmedla organisation och föreningar genom att visa vilka element som är relaterade eller inte relaterade till varandra. Till exempel grupperas de två sektionerna som visas på Salons webbplats nedan efter deras relativa storlekar. Vi uppfattar tydligt två separata grupper, med topphistorier till vänster och mest lästa till höger. Även om båda sektionerna ger samma funktion — visar artiklar att läsa — gruppering efter storlek tilldelar mer framträdande till vänster gruppering, vilket gör att Salon kan styra uppmärksamheten på sina bästa historier.

däremot tilldelar bristen på storleksskillnader i det här exemplet från Amazon ingen särskild betydelse för någon sektion. Trots detta uppnås likhet fortfarande genom användning av upprepning av liknande storlek och form, vilket får oss att uppfatta rader av objekt.

liknande färganvändning

vi vet att färg är en stark indikator på likhet, vilket hjälper till att organisera och göra innehåll förståeligt. I detta exempel från Cars.com, liknande färganvändning hjälper oss att skilja mellan vad som är en rubrik, kroppskopia och länktext. (Fullständig information: jag arbetar på Cars.com som interaktionsdesigner.) Genom att använda distinkta färger för vart och ett av dessa element förväntar vi oss att de fungerar på samma sätt och, när det gäller den blå länktexten, att bete sig på samma sätt.

närhet

gestalt principen om närhet säger att element som är närmare varandra uppfattas vara mer relaterade än element som är längre ifrån varandra. Som med likhet hjälper närhet oss att organisera objekt genom deras släktskap med andra objekt. Närhet är den starkaste principen för att indikera objektets släktskap, vilket hjälper oss att förstå och organisera information snabbare och mer effektivt.

exemplen på cirklar nedan visar hur närhet kan användas för att hjälpa oss att uppfatta objekt som relaterade. Som vi ser här sprids cirklarna ut och uppvisar ingen relation, där var och en uppfattas som ett separat objekt.

men när cirklarna dras i nära närhet till varandra tilldelas de en relation och uppfattas inte längre som separata objekt.

White Space

White space är ett ovärderligt verktyg för att skapa närhet. Att ta samma grupp av cirklar och lägga till mellanslag hjälper oss att uppfatta saker annorlunda. Nu, till vänster, får närheten till formerna oss att uppfatta de två grupperna som kolumner, var och en sin egen grupp. Till höger får närheten till formerna oss att uppfatta de två grupperna som rader, igen var och en sin egen grupp. Använd vitt utrymme i dina mönster för att stärka grupperingar samt att skilja dem från andra element.

närhetens kraft

närhet är tillräckligt stark för att övervinna andra element av variation. Lägg märke till hur närhet fortfarande vinner ut även när andra attribut, såsom färg och form, läggs till. Försök som de kanske, färg och form övermanna Inte närheten här och varje gruppering uppfattas fortfarande som ett separat element.

närhet i praktiken

När vi organiserar information i våra mönster kan vi använda närhet för att skapa relationer mellan element för att hjälpa till att förstå informationen som presenteras. Till exempel, genom att gruppera dessa bilder från Apple Store tillsammans i närheten, tilldelar vi en relation till hela gruppen. Vi uppfattar dem som relaterade och förväntar oss att innehållet ska vara liknande.

men när vi tar bort mittkolumnen uppfattar vi plötsligt två separata grupper och förväntar oss olika innehåll mellan dem.

kombinera närhet och likhet

gruppering efter närhet kan också kombineras med likhet för att skapa starkare relationer. Sett i detta exempel från Amazon får gruppering efter närhet och likhet i storlek oss att uppfatta två separata grupperingar och tilldelar mer framträdande till vänstergruppen.

närhet och hierarki

närhet är utmärkt för att organisera hierarkiska element. I det här exemplet från Crate & Barrel grupperas alternativen under vanliga rubriker, vilket skapar relationer, vilket gör skanning och hitta information mycket enklare.

När rubrikerna tas bort och alternativen grupperas utan närhet förlorar vi de relationer som skapades och det blir mycket svårare att snabbt skanna och hitta den önskade informationen. Prova själv. Gå vidare och se hur snabbt du kan hitta kaffemuggar i grupperingen med rubriker kontra grupperingen utan rubriker. Lite svårare att snabbt hoppa till det, eller hur?

slutsats

att förstå hur man använder likhet och närhet för att påverka relationerna mellan element i ditt arbete hjälper dig att skapa mönster som möjliggör enklare organisation och förbättrar användbarheten av ditt arbete. Använd likhet och närhet för att skapa både relationer och skillnader mellan element i dina mönster. Experimentera med användning av vitt utrymme, färg, storlek, form och orientering av element och blanda båda principerna tillsammans för att producera mycket starka och engagerande relationer.

i nästa del av denna serie kommer vi att titta på stängning och figurjord och utforska hur dessa två gestalt-principer använder positivt och negativt utrymme för att skapa enkla men kraftfulla relationer.

resurser och bra läser

• Gestalt principer på Scholarpedia.
• ”Organisationslagar i perceptuella former”: Text av Max Wertheimers seminalpapper från 1923.
• universella principer för Design reviderad och uppdaterad: 125 sätt att förbättra användbarheten, påverka uppfattningen, öka överklagandet, fatta bättre designbeslut och undervisa genom design, av William Lidwell, Kritina Holden och Jill Butler. Rockport Pub, 2010.
• informationsvisualisering: uppfattning för Design, av Colin Ware. Elsevier, 2012.

• designprinciper: Visuell uppfattning och principerna för Gestalt
• ansluta och separera element genom kontrast och likhet
• Kompositionsbalans, symmetri och asymmetri
• hur du förbättrar ditt e-Postarbetsflöde med modulär Design
• förbättra användarupplevelsen med realtidsfunktioner

(ml, da, og, jb, il)