Vad är Gestaltprinciperna & hur man tillämpar dem

Vad är Gestaltprinciperna & hur man tillämpar dem
Rick Davis

En av de mest inflytelserika psykologiska teorierna inom UX och interaktionsdesign är Gestaltteorin. Teorin grundades av tyska psykologer och ordet "Gestalt" betyder "gestalt". formulär eller . form Som namnet antyder är tanken bakom gestaltprinciperna att människor uppfattar grupper av föremål som mönster snarare än enskilda föremål.

Det finns många artiklar om Gestaltprinciperna, men inte så många av dem hjälper dig att förstå hur du kan tillämpa dem i ditt arbete som UX/UI-designer. Den här artikeln ger dig några idéer om hur du kan använda Gestaltprinciperna för att skapa bättre UX- och UI-design som hjälper människor att nå sina mål med mindre ansträngning.

Lagen om likhet

Principen om likhet säger att när objekt är fysiskt lika tenderar vi att gruppera dem tillsammans och antar att de har den samma funktionalitet I bilden nedan är det till exempel ganska lätt att skilja den linje som innehåller vinröda röda cirklar från resten av bilden på grund av dess annorlunda färg.

Ett exempel på likhetsprincipen. Foto av författaren.

Användning av likheter i UX- och UI-design

Låt oss föreställa oss att ditt företag har utvecklat en app som heter "Il Mio Chef" och som används av italienare i USA och Kanada (vi kommer att använda den i resten av artikeln). I en färsk rapport som din UX-forskare gav dig står det att när det gäller att beställa italiensk mat, bryr sig användarna mest om vilka restauranger som ligger närmast dem. Vi vill ju alla ha våralasagne eller pizza som levereras medan den fortfarande är färsk och varm, eller hur?

Se även: 7 lysande sätt att använda Auto Trace

För att göra det enkelt för våra appanvändare att se vilka restauranger som ligger närmast dem kan vi använda principen om likhet genom att markera dessa restauranger i användargränssnittet. I bilden nedan kan du se hur det gör stor skillnad att markera dessa alternativ med gult (till höger) genom att visuellt betona skillnaden mellan de närmaste restaurangerna och de restauranger som ligger längre bort. Så här kan dukan använda principen om likhet för att hjälpa användarna att snabbt hitta det de söker.

Användning av Gestaltprincipen om likhet. Bild av författaren.

Lagen om närhet

Principen om närhet innebär att objekt som befinner sig nära varandra verkar vara mer relaterade Till exempel har den första bilden och den andra bilden lika många cirklar, men i den andra bilden är vissa kolumner närmare varandra och ger intryck av att ha tre olika grupper i stället för en stor grupp.

Närhet - exempel 1 - en stor grupp. Bild av författaren.

Närhet - exempel 2 - tre olika grupper. Bild av författaren.

Användning av närhet i UX- och UI-design

Låt oss ta ett exempel från området informationsvisualisering.

Låt oss föreställa oss att du är en chef som vill se hur din app "Il Mio Chef" presterar. Du vill titta på KPI:er som mäter ekonomisk prestanda, användarnas engagemang och tillfredsställelse. Till en början skapar din specialist på informationsvisualisering instrumentpanelen nedan som får dig och alla andra chefer att gå vilse i siffrorna och ställa ännu fler frågor. Efter en månad är det många av er somsluta använda instrumentpanelen helt och hållet.

KPI-instrumentpanel - Il Mio Chef. Bild av författaren.

Nu går du tillbaka till din specialist på informationsvisualisering och ber henne att göra det lättare för folk att förstå helheten genom att göra om instrumentpanelen. Principen om närhet kommer väl till pass i det här fallet, och du kan se den nya designen nedan. Den innehåller tre grupper uppdelade efter typ av KPI och hjälper alla att förstå hur appen klarar sig ekonomiskt.Genom att gruppera objekt tillsammans och använda mer vitt utrymme mellan grupperna kan du hjälpa användarna att smälta informationen snabbare.

Användning av Gestaltprincipen för närhet i utformningen av instrumentpaneler. Bild av författaren.

Lagen om kontinuitet

Principen om kontinuitet säger att när ögat börjar följa ett objekt fortsätter det att följa "rörelsen" i den riktningen tills det möter ett annat objekt. Denna rörelse hjälper oss att uppfatta objektet som en del av samma väg som vi måste gå för att hitta information. Bilden nedan visar hur vi kan använda principen om kontinuitet för att skapa sådana visuella mönster som vägleder ögat.ögat i en viss riktning.

Ett exempel på kontinuitetsprincipen. Bild av författaren.

Att använda kontinuitet i UX- och UI-design

Din UX-forskare presenterade en ny rapport som visar att den främsta motivationen för användarna att använda appen "Il Mio Chef" är att utforska mat, eftersom den ger dem tillgång till nya italienska restauranger varje vecka. Du tittar på måttet som visar hur många gånger människor sveper genom alternativen med den nuvarande UI-designen i bilden nedan (vänster sida) och ser att de aldrig sveper mer än två gånger pågenomsnitt för att se vilka alternativ som finns tillgängliga för dem.

Med hjälp av kontinuitetsprincipen (höger sida på bilden nedan) hjälpte din UX-designer till att öka det antalet till cirka 10 svep i genomsnitt. Hur gick det till? Genom att dölja en del av bilden och lyfta fram det faktum att du måste svepa till vänster eller höger för att se vad som finns där fick användarnas ögon vägledning för att bokstavligen skapa en "svep"-rörelse och blev mer motiverade att utforska fler restauranger ochDetta är något som den tidigare utformningen inte motiverade dig att göra alls, även om du redan är motiverad att göra det.

Se även: Hur man skapar en portfölj för grafisk design + 16 bästa exempel

Användning av Gestaltprincipen för kontinuitet i UX/UI-design. Bild av författaren.

Sammanfattningsvis Om du använder de Gestaltprinciper som presenteras i den här artikeln i din UX- och UI-design kan du hjälpa dina användare att hitta information snabbare och smälta den bättre. Dessutom kan du öka deras tillfredsställelse med din produkt genom att motivera dem att utföra de åtgärder som de älskar mest.

Omslaget innehåller konstverk av Miklos Philips, redigerat i Vectornator.




Rick Davis
Rick Davis
Rick Davis är en rutinerad grafisk designer och bildkonstnär med över 10 års erfarenhet i branschen. Han har arbetat med en mängd olika kunder, från små startups till stora företag, och hjälpt dem att uppnå sina designmål och lyfta sitt varumärke genom effektiva och effektfulla bilder.Rick är utexaminerad från School of Visual Arts i New York City och brinner för att utforska nya designtrender och teknologier och ständigt tänja på gränserna för vad som är möjligt inom området. Han har en djup expertis inom programvara för grafisk design och är alltid angelägen om att dela med sig av sina kunskaper och insikter med andra.Utöver sitt arbete som designer är Rick också en engagerad bloggare, och är dedikerad till att täcka de senaste trenderna och utvecklingen inom världen av grafisk designprogramvara. Han tror att dela information och idéer är nyckeln till att främja en stark och levande designgemenskap och är alltid angelägen om att få kontakt med andra designers och kreativa online.Oavsett om han designar en ny logotyp för en kund, experimenterar med de senaste verktygen och teknikerna i sin studio eller skriver informativa och engagerande blogginlägg, är Rick alltid engagerad i att leverera bästa möjliga arbete och hjälpa andra att nå sina designmål.