Gränssnittsdesignmönster: Beprövade lösningar på vanliga användbarhetsproblem

Sonja Hoffmann Senast uppdaterad den 21 oktober 2020
11 Min.
Designmönster för användargränssnitt
Senast uppdaterad den 21 oktober 2020

Hur ska din webbplats meny struktureras? Varför är det lättare för vissa webbplatsoperatörer att få prenumeranter än andra? Vad får användare att fylla i eller ignorera formuläret på din webbplats? Som designer har jag behandlat frågor om användargränssnittsdesign och webb användbarhet – du hittar svaren i den här artikeln.

Vad är designmönster för användargränssnitt?

Designmönster för användargränssnitt är bibliotek med användbarhetsproblem som redan har analyserats och lösts. Dessa bör dock inte antas en-till-en. De ger dock en omfattande grund för en harmonisk användarupplevelse. Användargränssnittsmönster är utformade för att underlätta och påskynda arbetsflödet.

Fler tips om UX Design & Web Användbarhet

Som beskrivs i den här artikeln hjälper god användbarhet till att vägleda dina användare smidigt genom din webbplats, produkt eller varumärke.

Formel för designmönster för användargränssnitt

Hur vet du vilka designmönster som är lämpliga för din webbplats och hur du använder dem korrekt? I sin e-bok Mobile UI Design Patterns utformade Chris Bank följande tillvägagångssätt:

  • Problemidentifiering: Vad försöker användaren uppnå på din webbplats och vilka problem stöter den på? Försök att formulera problemen i en enda mening.
  • Lösningsmetod: Har andra designers löst detta problem? I så fall, hur?
  • Verkliga-exempel: Titta på exempel och gå igenom dem som användare. Försök att analysera vad som hjälpte dig att lösa en specifik uppgift. Tänk på vad som fick dig att tänka , eller kanske till och med orolig. 
  • Använd: Sammanfatta resultaten av din analys. Hur kan du implementera dem på din webbplats för att ge besökarna mervärde? Vilka designmönster ska du göra utan? Om du har en stilguide bör du inkludera dina resultat där.

4 kategorier av gränssnittsdesignmönster

Gränssnittsdesignmönster kan delas in i fyra kategorier, som jag kortfattat kommer att presentera för dig i det här avsnittet. Tyvärr kommer jag inte att kunna täcka alla UI-designmönster. Om du vill fördjupa dig i ämnet erbjuder webben dig nästan obegränsade möjligheter att läsa vidare. Några användbara resurser relaterade till gränssnittsdesignmönster är:

1. De vanligaste navigeringselementen

Navigering är ett av de viktigaste elementen i interaktionen för användaren: det fungerar inte bara som en innehållsförteckning för din sida utan också som en guide. Det faktum att det vanligtvis placeras högst upp eller på sidan var ursprungligen främst av hierarkiska skäl. Med navigeringen visar vi användaren snabbt vad han kan göra på vår webbplats och var han för närvarande befinner sig.

Tack vare år av praxis har vi internaliserat denna kunskap i en sådan utsträckning att trenden mot minimalism inte behöver sluta i navigeringen. Designmönster är därför ganska anpassningsbara - eller de måste till och med anpassas för att din sida ska fungera.

skärmdump-www.castoretpollux.com-2020.06.11-18-05-59
Castor & Pollux webbplats

Castor et Pullex har följt UI Pattern-reglerna och fortfarande skräddarsytt dem individuellt på sin sida: en navigering som finns i den övre högra skärmen och blir "klibbig" när du rullar. Logotypen som upprepade gånger tar användaren tillbaka till "den säkra fristaden" - hemsidan.

En webbplats som i sig tillåter mycket interaktion och därmed verkar nästan lite kaotisk, får en trevlig användbarhet genom användning av redan välkända designlösningar.

"Klibbiga" navigering, som beskrivs i ovanstående exempel, är en underbar uppfinning i webbdesign. Du kan inte bara visa imponerande animationer med dem - de gör också att din webbplats besökare får från "A till B" snabbare. Med One Pagers fungerar de också som en röd tråd: användaren vet var han är och vad han redan har sett.

Detsamma gäller för brödsmulor: för små sidor är de inte mycket meningsfulla. På mer komplexa sidor kan de dock göra underverk. De hjälper inte bara användaren att orientera sig hemma, utan också att hoppa tillbaka till vilken plats som helst i navigeringen.

Ett annat sätt att använda dessa mönster är i följande exempel:

Skaparna av denna webbplats har antagit kunskapen om den mobila hamburgermenyn: å ena sidan för att underlätta en minimalistisk navigering av deras webbplats, vilket inte är främmande för användaren. Å andra sidan, för att fortfarande ge din produkt tillräckligt med utrymme för att vara i förgrunden.

screenshot-demodern.com
Exempel projekterar av Demodern

Något har kommit ur trenden – men minst lika användbart – är så kallade ryttare i navigering. De påminner om ett arkiveringssystem och förstås snabbt och intuitivt av användare. Även här fungerar den halvkvalificerade lika bra i den nedbantade versionen som i originalversionen.

Under tiden används ryttare alltmer som modala flikar för att visa innehåll som ska vara sammanlänkat. Som modala flikar har de också fördelen att sidor inte behöver laddas om helt för att visa annat innehåll. Särskilt på produktsidorna i butiker baserade på WooCommerce Vi ser dem ofta, som i följande exempel: 

Gränssnittsdesignmönster: Beprövade lösningar på vanliga användbarhetsproblem
Vy över Atlantic Patio

Därefter ett mindre minimalistiskt exempel på jämförelse:

Gränssnittsdesignmönster: Beprövade lösningar på vanliga användbarhetsproblem
Exempelsida med bambukläder

Ofta baseras användargränssnittsmönster på interaktioner i den verkliga världen. Därför är det viktigt att aldrig förlora de fysiska egenskaperna ur sikte och / eller att ändra dem avsiktligt. Detta innebär att användaren inte längre intuitivt kan förstå dessa åtgärder och deras konsekvenser. För att illustrera detta har jag anpassat ovanstående exempel en gång:

skärmdump-bambooclothing.co.uk-2020.06.11-18-33-55_modified

Mappstrukturens fysiska egenskaper finns inte längre. Flikarna ser nu ut som felplacerade navigeringselement. Elementens tillhörighet är något förlorad – de verkar nästan slumpmässigt arrangerade.

Spillmenyer och knapparna "Hoppa till sektion"

För att slutföra vår lista får spillmenyer och knapparna "Hoppa till avsnitt" inte saknas. Knapparna "Hoppa till sektion" finns vanligtvis i det nedre vänstra hörnet. De tillåter användaren att navigera tillbaka till toppen av sidan med ett klick. Särskilt med One Pagers är Jump to Section Buttons meningsfullt: De sparar tid och förhindrar frustration genom lång rullning.

Rullgardinsmenyer har faktiskt mindre av sitt ursprung för att förbättra användbarheten av sidor. De är utformade för att spara utrymme och rymma mer innehåll i navigeringen. Dessutom ser din design mer snygg och tydligare ut. Nedrullningsbara menyer är bland de designmönster som ofta kallas antimönster - eftersom de inte riktigt gör det lättare att navigera på webbsidan. Nedrullningsbara menyer, men rekommenderas fortfarande. När allt kommer runt är deras funktion känd och lärd. Indikatorer för en rullgardinsmeny är ofta de nedåtriktade fiskbensmönstren.

Gränssnittsdesignmönster: Beprövade lösningar på vanliga användbarhetsproblem
Ehires hemsida

Knappar och länkar som jag medvetet bara adresserar kort i den här artikeln, eftersom de borde vara välkända för varje designer. Det finns knappast några gränser för design och animering av knappar. Deras stil beror vanligtvis på den visuella layouten för den information som erbjuds. De bör vara tydligt synliga i sidans primära färg och placeras för att grupperas med relevant innehåll.

Detsamma gäller länkar: de behöver inte längre visas i blått med ett understreck, som de brukade vara. Men deras existens måste vara tydlig och framför allt enhetlig. Omfattande kunskap om knappar finns här.

Pagination – att dela innehåll på flera sidor – är särskilt viktigt för e-handelsbutiker som erbjuder ett större antal produkter. Detta används för att erbjuda innehåll på flera sidor, minska laddningstiden och dela upp innehållet i lättsmälta avsnitt. Tidningar, som FAZ, använder också pagination för att dela upp längre artiklar.

skärmdump-www.faz.net-2020.06.13-15-49-43
Exempel på FAZ

Dessutom, som har kommit in i trenden under de senaste åren, är så kallad "fet sidfot" nu en av de lärda UI-mönstren. Här kan du till exempel länka till ofta besökta undersidor, lagra dina kontaktuppgifter och visa lagligt innehåll som inte har förlorat något hierarkiskt i den primära navigeringen. 

Sidfoten fungerar sedan delvis som en annan strukturerad innehållsförteckning på sidan. Men det kan också stå som en slags teaser för mer information. När användaren har bläddrat igenom din sida kan sidfoten fortfarande erbjuda honom relevant innehåll - till exempel intressanta artiklar, sociala medielänkar & co. - som håller dem upptagna med din produkt.

2. Input & Output: Kontakt- och prenumerationsformulär

Förutom dataskyddsriktlinjerna är det också värt att fokusera på användarnas behov. Särskilt på mobila enheter kan ett ingångsformulär snabbt leda till frustration: Den redan lilla skärmen, den fysiska miljön under användning, den temporala aspekten samt en eventuell instabil anslutning kan snabbt representera ett nervöst tårtest. Lyckligtvis finns det några designmönster som redan har tagit itu med dessa problem.

Tips:

Som i allmänhet på webben gäller följande: så kort som möjligt, så länge som det behövs. Studier har visat att lägga till värdelösa frågor är en kollaps i deltagandet och kan potentiellt kosta mycket pengar.

I följande har jag skapat en fiktiv form för att visa dig de viktigaste principerna: 

Formuläret
Principer för indataformulär
  1. Ögonspårningstester har visat att vi behandlar information snabbare när den är ordnad uppifrån och ner, istället för från vänster till höger. Därför är det lämpligt att placera rubriken ovanför formulärfältet och bara skapa en kolumn.
  2. Det är bra att ge användaren ett exempel på indata i förutbestämda platshållare – så att den information som krävs visualiseras i förväg. Du bör undvika lemlästade nummerposter, eftersom de bara komplicerar indata. De bör också programmeras för att vara toleranta mot utrymmen.
  3. Felhantering är ett viktigt och komplext ämne. Asterisk och det röda kantade inmatningsfältet har visat sig här som användargränssnittsmönster. Helst bör fälten vara självförklarande. Ändå bör du alltid förvänta dig att något inte fungerar. Erbjuder därför olika hjälpalternativ. Det finns flera möjligheter till detta: en infoknapp, som erbjuder möjlig hjälp när du håller muspekaren. Eller poppa upp små modals om formuläret inte har skickats.
  4. Det är ett bra ställe att ge feedback så snart du skriver. När det gäller lösenord har det också visat sig ge användaren en kvalitativ bedömning av hur säkert lösenordet han har valt. 
  5. Flerstegsformen har flera psykologiska fördelar. Till en början är det tydligare och mindre skrämmande. Om användaren sedan också visas med hjälp av en indikator (här laddningsfältet) där han är i formuläret, vet han exakt vad som kommer. Det är mindre troligt att sluta i förtid. Personuppgifter ska alltid efterfrågas i slutet av formuläret. När allt kommer kommer från, om din webbplatsbesökare redan har fyllt i formuläret i stor utsträckning, blir det svårare för honom att ge upp den tid som redan investerats utan resultat. Det är också tillrådligt att helt enkelt be om information som faktiskt behövs och även att motivera begäran. Om du ber dina användare att registrera sig för något är det lämpligt att ange en fördel för dem - "Få alltid de bästa erbjudandena först". I det sista steget bör du ge en liten översikt över vad som händer härnäst – och vad användaren kan förvänta sig och när.

Dessutom bör dina formulär innehålla automatisk fyllning (via data som lagras i webbläsaren) och igenkänning av information (till exempel att lägga till staden efter att ha anget ett postnummer). Vari, särskilt när det gäller WordPress många formulär som redan har inkluderats som standard. 

Om möjligt bör du undvika eller åtminstone hålla användningen av Captchas till ett minimum. Enligt denna studie kan captchas orsaka 30 procent mindre interaktion med formen.

3. Strukturera ditt innehåll

Som webbplatsoperatör bör du särskilt undersöka hur innehållet på din webbplats är strukturerat: Hjälper de dina besökare att hitta sin väg genom din webbplats? Är ditt innehåll lättillgängligt och kan du förstå deras hierarki? 

Frågan om enkel tillgänglighet tilltalar särskilt användare som ser din webbplats under ändrade förhållanden. Till exempel hos personer med färgseende och synnedsättning. Om du vill fördjupa dig i ämnet tillgänglighet och tillgänglighet hittar du mer information här: 

Om du har en blogg eller en onlinetidning kanske du känner till problemet: Du har mycket intressant innehåll som du vill erbjuda så jämnt som möjligt. Ett lämpligt designmönster är den så kallade "artikellistan". Här kategoriserar du ditt innehåll och visar bara ett litet utdrag åt gången. På så sätt kan du snabbt visa många ämnen utan att översvämma användarna med information. Ett trevligt exempel visas här RAIDBOXES :

RAIDBOXES WP unboxed
Vy över WordPress Tidningen wp unboxed

Denna division gör det möjligt för användaren att flyga över hela innehållet enligt intresseområden och därmed hitta snabbare vad som intresserar honom.

För att du ska kunna erbjuda visst innehåll utan distraktion kan du använda modala rutor. Dessa ligger över resten av din sida och gör det möjligt för användaren att bara fokusera på sitt innehåll. Detta kan vara nödvändigt och viktigt. Observera dock att dessa modals också är mer av ett antimönster: i princip blockerar de användaren från vilket manöverutrymme som helst så länge modalen är öppen.

Modala rutor kan dock hjälpa dina besökare att förstå ditt innehåll bättre. Men modala lådor som är för vanliga eller till synes orättvist utlösta kan snabbt orsaka frustration och en känsla av hjälplöshet.

Lightbox- och helskärmsläge tillhör också denna kategori. Å ena sidan tillåter de din användare att titta närmare på valt innehåll. Å andra sidan gör de någon annan interaktion omöjlig. Därför är det alltid viktigt att erbjuda minst en försvinnande punkt. Särskilt kända här är att klicka på ett X i den övre högra delen av bilden eller klicka utanför rutan för att stänga den igen.

Bildspel är också ett populärt sätt att visa bilder. En åtskillnad görs mellan automatisk uppspelning och manuellt navigerade bildspel. Gallerier listas ofta som miniatyrbilder och förstoras sedan med bildspel och/eller ljuslådor.

Här ska du i första hand agera enligt funktionen: Vilken typ av bilder representerar du? Måste de vara tillgängliga som helskärm? Och vad är viktigast: ditt innehåll som helhet eller de enskilda bilderna? Är det värt att tillgripa andra alternativ – till exempel ett förstoringsglas som förstorar dina bilder när du svävar? Det senare är särskilt populärt inom e-handel.

Skärmbild Unsplash användargränssnitt designmönster
Miniatyrvy på unsplash.com

unsplash.com använder en blandning av bildgalleri och ljuslådor. Bilderna visas dock inte som miniatyrbilder. Varför? Unsplash är en plattform som bara erbjuder bilder för nedladdning. Detta innebär att användarna måste kunna välja för eller emot bilden direkt vid första anblicken. För att kunna fatta detta beslut måste bildupplösningen vara relativt god. Miniatyrbilder skulle vara för små för det. Och att klicka på varje bild individuellt eller navigera genom ett bildspel skulle minimera sidans effektivitet många gånger om.

Under hela implementerings- och designprocessen får du aldrig förlora frågan om värde och betydelse ur sikte.

4. Spela sociala kanaler

Detta gäller mönster som hjälper till att vägleda dina användare till dina sociala mediekanaler och / eller göra social interaktion enklare för dem. Detaljerade exempel hittar du här.

Slutsats

Slutligen kan jag rekommendera två huvudinflygningar. Besök först och analysera så många webbplatser som möjligt för att samla inspiration: Hur har andra designers löst vissa problem eller inte löst dem? Vad gör mig frustrerad när jag surfar på nätet? När blev jag senast positivt överraskad – och varför? 

För det andra, kom alltid ihåg att du inte är användaren. Besökare på din webbplats tänker förvånansvärt annorlunda än du. Du kanske inte känner till din produkt ännu. Utför därför flera tester upprepade gånger för att bedöma vad användbarhet på din webbplats faktiskt är.

Vilka frågor har du till Sonja om UI Patterns?

Använd kommentarsfunktionen. Vill du bli informerad om nya inlägg och tips om webbdesign och utveckling? Följ oss sedan på Twitter, Facebook eller via vårt nyhetsbrev.

Efter att ha studerat speldesign och kreativt skrivande i lummiga Auckland, Sonja Hoffmann specialiserar sig på webb- och appdesign och dess utveckling. Hennes fokus ligger på gamification och utforska användarmotivation och dess erfarenhet, tillsammans med en passion och nyfikenhet för tekniska trender.

Liknande artiklar

Kommentarer om den här artikeln

Skriva en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade med *.