UI Design Patterns: Beprövade lösningar på vanliga användbarhetsproblem

Sonja Hoffmann 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ändarna att fylla i eller ignorera formuläret på din webbplats? Som designer har jag behandlat frågor om användargränssnitt design och webb användbarhet - du hittar svaren i den här artikeln.

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

Användargränssnitt (UI) Design mönster är bibliotek av 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. Gränssnittsmönster är utformade för att underlätta och påskynda arbetsflödet.

Fler tips om UX Design & Web Usability

Liksom i den här artikeln God användbarhet hjälper till att guida användarna smidigt genom din webbplats, produkt eller varumärke.

Formel för gränssnittsdesignmönster

Hur vet du vilka designmönster som är lämpliga för din webbplats och hur du använder dem på rätt sätt? Chris Bank kommenterade i sin e-bok Designmönster för mobilt användargränssnitt Följande förfarande:

  • 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? Om så är fallet, hur?
  • Verkliga-livet-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 viss 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 genomföra dem på din webbplats för att öka värdet för besökarna? Vilka designmönster ska du klara dig utan? Om du har en stilguide bör du inkludera dina resultat där.

4 kategorier av UI Design Mönster

UI Design Mönster kan delas in i fyra kategorier, som jag kommer att kortfattat presentera för dig i detta avsnitt. Tyvärr kommer jag inte att kunna täcka alla UI designmönster. Om du vill gräva djupare i ämnet, erbjuder webben dig nästan obegränsade möjligheter att läsa vidare. Några användbara resurser relaterade till designmönster för användargränssnitt är:

1. De vanligaste navigeringselementen

Navigering är en av de viktigaste delarna av interaktion för användaren: det fungerar inte bara som en innehållsförteckning för din sida, men också som en guide. Det faktum att det vanligtvis placeras på toppen eller sidan var ursprungligen främst av hierarkiska skäl. Med navigeringen visar vi användaren i korthet vad han kan göra på vår webbplats och var han för närvarande finns.

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 navigering. Designmönster är därför ganska anpassningsbara - eller de måste ens anpassas för din sida att fungera.

skärmdump-www.castoretpollux.com-2020.06.11-18-05-59
Webbplats för Castor & Pollux

Castor et Pullex har följt UI Mönster regler och ändå skräddarsytt dem individuellt till sin sida: en navigering som ligger i den övre högra skärmen och blir "klibbig" när du bläddrar. Logotypen som upprepade gånger tar användaren tillbaka till "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 med hjälp av redan välkända designlösningar.

"Sticky" navigationar, som beskrivs i ovanstående exempel, är en underbar uppfinning i webbdesign. Inte bara kan du visa imponerande animationer med dem, de gör också 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 ströbröd: för små sidor, gör de inte mycket mening. På mer komplexa sidor kan de dock göra underverk. De hjälper inte bara användaren att orientera sig hemma, men också att hoppa tillbaka till någon plats i navigeringen.

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

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

screenshot-demodern.com
Exempel på projekt av Demodern (av det moderna)

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

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

UI Design Patterns: Beprövade lösningar på vanliga användbarhetsproblem
Vy över Atlanten Uteplats

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

UI Design Patterns: Beprövade lösningar på vanliga användbarhetsproblem
Exempel på sidan Bambu Kläder

Ofta UI mönster är baserade på interaktioner i den verkliga världen. Därför är det viktigt att aldrig glömma de fysiska egenskaperna 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. Tillhörigheten av elementen är något förlorad - de verkar nästan slumpmässigt arrangerade.

Spillmenyer och knapparna "Hoppa till avsnitt"

För att slutföra vår lista får spillmenyer och "Hoppa till sektion"-knappar inte saknas. "Hoppa till sektion"-knapparna finns vanligtvis i det nedre vänstra hörnet. De tillåter användaren att navigera tillbaka till början av sidan med ett klick. Speciellt med One Pagers, Hoppa till avsnitt knappar vettigt: De sparar tid och förhindra frustration genom långa 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 snyggt och tydligare. Rullgardinsmenyer är bland de designmönster som ofta kallas anti-mönster - eftersom de egentligen inte gör det lättare att navigera på webbsidan. Rullgardinsmenyer, men rekommenderas fortfarande. När allt kommer om är deras funktion känd och lärd. Indikatorer för en rullgardinsmeny är ofta de nedåtgående fiskbensmönstren.

UI Design Patterns: Beprövade lösningar på vanliga användbarhetsproblem
Webbplats för Ehire (på väg mot mera

Knappar och länkar jag medvetet bara adress kort i den här artikeln, eftersom de bör vara väl kända för varje designer. Det finns knappast några gränser för design och animering av knappar. Deras stil beror oftast på den visuella layouten av den information som erbjuds. De bör vara väl synliga i Sidans primära färg och placeras på ett sådant sätt att de 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 du får här.

Sidnumrering – 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ält avsnitt. Tidningar, såsom FAZ, använder också sidnumrering för att dela upp längre artiklar.

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

Också, som har kommit in i trenden under de senaste åren, så kallade "fett sidfot" är nu en av de inlärda UI mönster. 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å din sida. Men det kan också stå som ett slags teaser för mer information. När användaren har bläddrat igenom din sida, kan sidfoten fortfarande erbjuda honom relevant innehåll - såsom intressanta artiklar, sociala medier länkar & co. - som håller dem upptagna med din produkt.

2. Input & Output: Kontakta och prenumerera formulär

Förutom riktlinjerna för dataskydd är det också värt att fokusera på användarnas behov. Speciellt på mobila enheter kan en inmatningsform snabbt leda till frustration: Den redan lilla skärmen, den fysiska miljön under användning, den tidsmässiga aspekten samt en möjlig instabil anslutning kan snabbt representera ett nervöst tårtest. Lyckligtvis finns det några designmönster som redan har tagit upp dessa frågor.

Tips:

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

I det 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årning tester har funnit att vi behandlar information snabbare när den är ordnad uppifrån och ned, 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 skapa endast 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 styckade nummerposter, eftersom de bara komplicerar indata. De bör också programmeras 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 gränssnittsmönster. Helst bör fälten vara självförklarande. Ändå bör du alltid förvänta sig att något inte fungerar. Därför är det viktigt att erbjuda olika möjligheter till hjälp. Det finns flera sätt att göra detta: en informationsknapp som ger möjlig hjälp när du hovrar. Eller poppar upp små modals om formuläret inte framgångsrikt skicka.
  4. Det är ett bra ställe att ge feedback så fort 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. Multistegsformen 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 lastningsfältet) där han är i formuläret, vet han exakt vad som kommer. Det är mindre sannolikt att sluta i förtid. Personlig information bör alltid tillfrågas i slutet av formuläret. När allt kommer omkring, om din webbplats besökare redan har fyllt i formuläret i stor utsträckning, kommer det att bli 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 dig för något, är det lämpligt att ange en fördel för dem - "Alltid få 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 erkännande av information (t.ex. lägga till staden efter att ha angett 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. Högt av denna studie captchas kan orsaka 30 procent mindre interaktion med formuläret.

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 rätt på 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ättningar. 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 nättidning, kanske du vet problemet: Du har en hel del 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 innehållet 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 visar 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 sidan och tillåter användaren att fokusera endast på dess innehåll. Detta kan vara nödvändigt och viktigt. Observera dock att dessa modaler också är mer av ett anti-mönster: i princip blockerar de användaren från allt manöverutrymme 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 fullscreen-läge tillhör också denna kategori. Å ena sidan tillåter de din användare att ta en närmare titt på valt innehåll. Å andra sidan gör de någon annan interaktion omöjlig. Det är därför det alltid är viktigt att erbjuda minst en försvinnande punkt. Särskilt väl känt 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 distinktion 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 agera främst enligt funktionen: Vilken typ av bilder representerar du? Måste de vara tillgängliga som en 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 svävar? Det senare är särskilt populärt inom e-handel.

Designmönster för skärmbild ta bort fransgränssnittet
Miniatyrvy på unsplash.com

unsplash.com använder en blandning av bildgalleri och ljuslådor. Bilderna visas dock inte som miniatyrer. 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 mot bilden vid första anblicken. För att kunna fatta detta beslut måste bildupplösningen vara relativt bra. Miniatyrer skulle vara för liten för det. Och klicka på varje bild individuellt eller navigera genom ett bildspel skulle minimera effektiviteten på sidan många gånger om.

Under hela implementerings- och designprocessen får du aldrig glömma bort frågan om värde/värde och betydelse.

4. Spela sociala kanaler

Detta gäller mönster som hjälper användarna till dina sociala medier och/eller underlättar social interaktion för dem. Detaljerade exempel på detta finns här Läsa.

Slutsats

Slutligen kan jag rekommendera två huvudsakliga tillvägagångssätt. Först besök 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 frustrerar mig när jag surfar på nätet? När var sista gången jag blev positivt överraskad - och varför? 

För det andra, kom alltid ihåg att du inte är användaren. Besökare på din webbplats tycker förvånansvärt annorlunda från dig. Du kanske inte känner till din produkt än. 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 gränssnittsmönster?

Använd kommentarsfunktionen. Du vill bli informerad om nya inlägg och tips om webbdesign och utveckling? Följ oss sedan på TwitterFacebook eller via vår 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ändarnas motivation och dess erfarenhet, tillsammans med en passion och nyfikenhet för tekniska trender.

Liknande artiklar

Kommentarer om den här artikeln

Skriv en kommentar

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