UX Design & Web Användbarhet: Vad ligger bakom användarupplevelsen?

Sonja Hoffmann Senast uppdaterad den 21 oktober 2020
8 Min.
Användbarhet för UX-design
Senast uppdaterad den 21 oktober 2020

User Experience (UX) Design, Användbarhet, Human Interface Design och Human Centered Design - det här är bara några av de termer vi alltmer konfronteras med. Men vad är det? Varför ska du vara särskilt intresserad av användbarhet och användarupplevelse som webbdesigner? Och hur kan du lägga till ux även om du inte har en UX-designer i ditt team?

I min senaste artikel om harmonisk webbdesign visade jag dig hur du skapar dina egna designriktlinjer. Harmonisk webbdesign kännetecknas dock av flera faktorer – Det är därför jag inför riksrätt idag användarupplevelsen:

UX Design & Web Användbarhet: Vad ligger bakom användarupplevelsen?

Varför ska jag ta itu med UX?

Många svensk Designers jag känner har en stark bakgrund inom kommunikationsdesign, så de kommer från tryckmediernas riktning. Här skapas sofistikerade kompositioner som presenterar ett exakt budskap.

I utskriftsdesign är kommunikationsbanan tydlig: det finns en sändare (till exempel en affisch eller broschyr) och en mottagare (den som mediet riktar sig till). Mottagaren har inget mer att göra än att ta emot meddelandet, förstå det och sedan fatta ett (köp) beslut.

Webbdesign är å andra sidan interaktiv: inte bara skickas ett meddelande hit, utan snarare genereras en konversation. 

Användarupplevelse: användarupplevelsen

Sedan internets början har företag hanterat de psykologiska aspekterna av dessa interaktioner. På den tiden nämndes dock inte UX-designers, utan mänskliga interaktionsdesigners – och yrket var i allmänhet mycket mindre vanligt än det är idag.

Vad är användarupplevelse?

Användarupplevelse enligt dagens standard börjar inte när du besöker en webbplats och slutar inte lämna den. Snarare beskriver det hela upplevelsen som en användare har med varumärket eller produkten - från den första till den sista kontakten.

Jag vill dock begränsa mig till det delområde som är direkt relaterat till en webbplats: användbarhet. Vägen genom vår produkt ska därför vara så trevlig och sömlös som möjligt. Du bör dock inte ignorera budgeten och företagets interna krav.

God användbarhet kan inte obetydligt påverka dina försäljningssiffror. Det som driver mig personligen är skyldigheten som webbplatsoperatör att inte frustrera användaren.

Överkomliga priser, signatärer och feedback

Enkelt uttryckt beskriver Affordance vad som i allmänhet är möjligt. Med en skrivbordsskärm som exempel skulle detta vara alternativet att "klicka". Eftersom det skulle vara inaktivt och frustrerande om du var tvungen att klicka urskillningslöst var som helst på webbplatsen installerar vi signifiers (indikatorer). Dessa visar användaren var något är möjligt och vad. 

En av de mest kända undertecknarna är en knapp. Det begränsar interaktionsytan. Vi vet att om vi klickar här kommer något att hända. Detta förstärks vanligtvis av hovringseffekter – eller när markören förvandlas till ett pekfinger när jag svävar över den. Dessa är också signifiers.

Vad är prisvärda, signifiers och feedback?

Affordance beskriver vilken interaktion som i allmänhet är möjlig. Signifiers (indikatorer) signalerar att interaktion är möjlig. Feedback, å andra sidan, säkerställer att användaren vet att deras interaktion har utlöst något.

Knappens aktiva tillstånd visar mig som feedback att något hände när jag klickade på den. Alla tre processerna smälter samman och kan hjälpa till att göra din webbplats mer användarvänlig från början som grundläggande frågor.

  1. Vilka interaktioner är i allmänhet möjliga?
  2. Hur visar jag mina användare att de är möjliga?
  3. Hur vet de att de gjorde "rätt"?

Möjligheten att interagera definieras ofta av enheten som kommer åt webbsidan: på en (standard) stationär dator är svepning och beröring inte möjlig, medan det inte finns någon hovringseffekt på mobila enheter.

Det är precis vad som måste beaktas när man väljer undertecknarna. Blir länkar till exempel bara tydliga när jag håller muspekaren över dem? Då inser en mobil besökare inte att interaktion är möjlig alls. 

Användare interagerar fysiskt och digitalt

Överkomliga priser och signifiers kan också gå utöver ditt webbplatsgränssnitt. Din besökare kan påverkas av yttre omständigheter eller använda vissa interaktioner på ett annat sätt än vad som ursprungligen var avsett. Till exempel är webbläsarens bakåtknapp ett faktum som finns utanför din webbplats. 

Om besökaren av misstag navigerade till en del av din sida där de inte kan hitta vad de vill ha, är det troligt att de navigerar med hjälp av bakåtknappen istället för länkarna på din sida. 

Hur interaktioner avsiktligt används "felaktigt" - ett exempel

Jag bokar ofta flyg via en utländsk tjänsteleverantör vars sida inte visas på tyska eller engelska som standard. Plötsligt kunde jag inte hitta språkinställningarna via mobilversionen. Jag kom dock ihåg att jag redan hade kommit åt webbplatsen via appen, där allt visades i standard engelskt läge. Sedan dess har jag bara kommit åt mobilwebbplatsen via "appens" omväg, för jag kan komma ihåg detta och för att jag föredrar att göra två klick mer än att klicka runt på en mobilsida i frustration.

Men du bör också vara medveten om att du inte kan "omskola" dina användare. Du kan inte bli av med sådana "felaktiga" metoder, men du kan planera för det här beteendet och också se till att det finns tillräckligt med alternativ.

Ett annat bra exempel som redan har orsakat huvudvärk för var och en av oss är användningen av föråldrade webbläsare eller Internet Explorer, som tyvärr fortfarande är utbredd. Vissa layouter verkar inte lika kreativt värdefulla som i Firefox eller Chrome, till exempel. Även om detta är irriterande måste vi också designa och programmera för dessa användare.

Eftersom det är värre än att till exempel komma åt sidan via appen, eller använda bakåtknappen, är det när sidbesökaren ger upp helt – vare sig det är för att använda vår webbplats skapar för mycket frustration eller för att det finns för få alternativ till felhantering.

Varför användbarhetstestning?

Förresten är det bäst att ta reda på sådana beteenden genom att observera dem. Den som testar webbplatsen är relativt obetydlig. Det är inte nödvändigt att hitta personer som faktiskt använder webbplatsen efteråt. Eftersom riktigt grova användbarhetsfel uppstår med nästan alla användare. 

Det viktiga är att du inte kan berätta för testaren vad du ska göra eller hur du kommer dit. Nyckeln är att identifiera och registrera potentiella hinder och komplikationer för att göra din webbplats mer användarvänlig. Ju mindre du berättar för objektet, desto mer oförfalskat blir resultatet.

De fyra olika indikatorerna

Vilka signaler kan du sätta på din sida för att markera interaktioner? Vi skiljer mellan fyra olika kategorier, som jag kortfattat presenterar för er.

1. Uttrycklig signaär

Explicita undertecknare består av en fråga i textformulär, till exempel "Klicka här". Dessa finns ofta tillsammans med andra indikatorer, till exempel kontaktformulär eller knappar. Dessa bör vara så tydliga och koncisa som möjligt. Dessutom bör man tillgripa bekanta formuleringar och avstå från förment kreativa formuleringar. 

Igenkänningsvärdet gör det möjligt för användaren att med största säkerhet veta vilket resultat han kan förvänta sig under en interaktion.

"SE MER" är ett exempel på en enkel explicit signifier.

UX Design & Web Användbarhet: Vad ligger bakom användarupplevelsen?
https://www.lonelyplanet.com/portugal/lisbon

2. Designmönster: Mönster och konventioner

Designmönster är återkommande mönster som vi har blivit så vana vid att de inte längre behöver någon förklaring eller ytterligare meddelande. Det finns relativt många av dem. 

Alla kanske till exempel är medvetna om att om du klickar på logotypen kommer det att leda tillbaka till indexsidan. Eller att blå understruken text är en länk. Navigeringsfältet på en webbplats som vi använder den idag är också ett sådant fenomen. Vi förväntar oss dem på vissa ställen på ena sidan. Vi vet att Nav Bar fungerar som vårt innehåll och guidar oss via webbplatsen. En menyrad som förvandlas till en Hamburger-ikon på mobila enheter behöver inte heller någon ytterligare förklaring. 

Vanliga mönster vi har lärt oss under de senaste åren

Det överraskande är att dessa mönster också ofta är internationella. Du ser detta särskilt bra om du vill orientera dig på en sida vars språk du inte känner till. Så det är värt att inte uppfinna hjulet på nytt här. Istället rekommenderas för en bättre användbarhet på din webbplats när du hanterar de etablerade mönstren. 

Detta framgår tydligt av exemplet på en sida på en (slumpmässigt utvald) restaurang i Moskva. Även om jag varken kan tala ryska eller läsa kyrilliska, kan jag omedelbart se hur jag kan navigera genom sidan. Jag ser vilken navigeringspunkt jag är i och jag kan filtrera bort den viktigaste informationen (kontakten) direkt.

UX Design & Web Användbarhet: Vad ligger bakom användarupplevelsen?
https://bulka.cafe/

3. Dold signaär

Dessa kan bara ses genom en viss åtgärd, till exempel hovring och rullning. 

Dolda signifiers har fördelen att de får layouten att se ren och snygg ut. Så att du kan göra din design smalare. 

Men de har också vissa nackdelar. De hittas bara av användaren om de antingen vet att de finns eller om de av misstag utför den utlösande interaktionen. Därför är dessa signaler inte lämpliga för viktiga, men på sin mest för sekundära uppmaningar till åtgärder (uppmaning till åtgärder).

När du använder dolda signifiers bör du dessutom vara medveten om att en separat lösning kan behöva hittas för varje enhet.

Ett bra exempel ges av Pinterest:

Pinterest

I skrivbordsversionen visas nya call to actions när du håller muspekaren. Eftersom användaren intuitivt klickar på bilden för att lägga till den i sin samling är det osannolikt att funktionen går oupptäckt. Ändå har formgivarna utvecklat en plan B: Om du klickar på bilden kommer du till en stor vy där alla möjliga interaktioner är synliga.

Det är intressant hur man löser det hela i pekskärmsversionen. Återigen finns det dolda interaktioner - men för andra ändamål.

UX Design & Web Användbarhet: Vad ligger bakom användarupplevelsen?

I den vänstra bilden kan du se den allmänna översikten över sidan. Menyn nedan kommer bara in när användaren rullar upp - vilket först verkar obekant, men också mycket intuitivt. När vi söker efter navigeringen brukar vi scrolla upp. 

De ytterligare call-to-actions, som med skrivbordsversionen, är dock bara tillgängliga när du faktiskt har klickat på bilden. Således är de inte längre dolda signifiers. 

Det som förvånade mig var dock att Pinterest använder två olika ikoner för samma interaktion i de två versionerna. Ur ett användbarhetsperspektiv tror jag inte att det rekommenderas. Om användaren byter från mobilen till skrivbordsversionen, eller vice versa, skulle användningen av samma ikoner få dig att känna dig kapabel att klara dig snabbare. Detta gör användningen smidigare. Användbarheten förbättras därmed positivt.

4. Metaforisk signifier

Ett förstoringsglas som anger att sökfältet finns här. Kuvertet som representerar att skicka meddelanden. Knappen som signalerar att du kan trycka på den. Alla principer har gemensamt att vi känner dem från den verkliga världen. 

Deras användbarhet i den digitala världen har blivit ett designmönster. Du måste dock vara försiktig: Om du använder en metaforisk indikator med en modifierad symbol kan detta förvirra dina användare.

Om du till exempel använder en brevlåda i stället för det välkända kuvertet kan det skada användbarheten på din webbplats. Varför? Användaren måste pausa och överväga nästa steg. Han måste ifrågasätta om denna symbol matchar vad han vill uppnå.

UX Design & Web Användbarhet: Vad ligger bakom användarupplevelsen?
Upphovsrätt: https://www.iconfinder.com/icons/2296974/email_inbox_letter_mail_mailbox_icon_icon

Slutsats

Användbarhet betyder inte bara att dina besökare på något sätt kommer att hitta sin väg genom webbplatsen. Användbarhet innebär att fokus här ligger på besökaren holistiskt – "resan" genom din sida ska vara så sömlös som möjligt. 

Varje avbrott – varje gång användaren måste pausa och fråga sig själv , "Vad erbjuds faktiskt här? Vad händer när jag klickar på den? Kommer jag tillbaka? Var är jag? Hur kom jag hit?" är kontraproduktivt.

Är det möjligt att bygga en webbplats på ett sådant sätt att det inte finns något avbrott? Förmodligen inte. Beroende på den information som presenteras kan vissa avbrott, riktad reflektion och liten frustration till och med vara önskvärda.

Det är viktigt att känna till de olika verktygen så att du kan använda dem på lämpligt sätt för ditt eget projekt.

Rekommenderad läsning

En av de mest kända böckerna om användbarhet är "Don't make me think!" av Steve Krug. Titeln här är program och i slutändan vad varje användbarhetsmetod handlar om.

  • "Få mig inte att tänka, återbesökt: Ett sunt förnuft tillvägagångssätt för webb användbarhet," Steve Krug
  • "Utformningen av vardagliga saker", Donald A. Norman
  • https://www.uxpin.com/ erbjuder några mycket intressanta e-böcker för gratis nedladdning
Dina frågor om användarupplevelse

Vilka frågor har du om webb användbarhet och användarupplevelsedesign? Vilka processer kan du rekommendera? Använd kommentarsfunktionen. Vill du ha fler tips på 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 *.