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

Sonja Hoffmann Uppdaterad den 21 oktober 2020
8 Min.
UX Design användbarhet
Senast uppdaterad den 21 oktober 2020

User Experience (UX) Design, Användbarhet, Human Interface Design och Human Centered Design - det är bara några av de termer som 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 sista artikel om harmonisk webbdesign Jag visade dig hur du skapar dina egna designriktlinjer. Men harmonisk webbdesign kännetecknas av flera faktorer - det är därför jag åtala dig 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 vet har en stark bakgrund inom kommunikationsdesign, så de kommer från riktning utskriftsmedia. 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, att förstå det och sedan göra ett (köp) beslut.

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

Användarupplevelse: användarupplevelsen

Sedan början av Internet, företag har behandlat de psykologiska aspekterna av dessa interaktioner. På den tiden fanns det dock inget omnämnande av UX designers, men av mänsklig interaktion designers - och yrket var i allmänhet mycket mindre vanligt än det är idag.

Vad är användarupplevelse?

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

Jag skulle dock vilja begränsa mig till det delområde som är direkt relaterat till en webbplats: användbarhet. Vägen genom vår produkt bör 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. Vad driver mig personligen är skyldigheten som en webbplats operatör att inte frustrera användaren.

Affordances, Signifiers och Feedback

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

En av de mest kända signifiers ä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 hover effekter - eller när markören förvandlas till ett pekfinger när jag svävar över den. Det här är också signifiers.

Vad är affordances, 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.

Den aktiva-tillstånd av knappen visar mig som feedback att något hände när jag klickade på den. Alla tre processer går samman och kan bidra 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 det "rätta"?

Möjligheten att interagera definieras ofta av den enhet som kommer åt webbsidan: på en (vanlig) stationär dator är det inte möjligt att svepa och trycka, medan det inte finns någon hovringseffekt på mobila enheter.

Detta är precis vad som måste beaktas när signifiers. Till exempel blir länkar bara tydliga när jag hovrar över dem med musen? Då inser en mobil besökare inte att interaktion är möjlig alls. 

Användare interagerar fysiskt och digitalt

Affordances och signifiers kan också gå utöver din webbplats gränssnitt. Besökaren kan påverkas av yttre omständigheter eller använda vissa interaktioner annorlunda ä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 sidan där de inte kan hitta vad de vill ha, är det troligt att de navigerar med bakåtknappen i stä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 den mobila versionen. Men jag kom ihåg att jag redan hade kommit åt webbplatsen via appen, där allt visades i standardläget i engelska. Sedan dess har jag bara tillgång till den mobila webbplatsen via "app" omväg, eftersom jag kan minnas detta och eftersom jag föredrar att göra två klick mer än att klicka runt på en mobil sida 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 "fel" metoder, men du kan planera för detta beteende och även 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, vi måste också designa och programmera för dessa användare.

Eftersom det är värre än till exempel att komma åt sidan via appen, eller använda bakåtknappen, är det när sidbesökaren ger upp helt - vare sig det beror på 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ändbarhet testning?

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 människor som faktiskt använder webbplatsen efteråt. Eftersom verkligen grov användbarhet fel uppstår med nästan varje användare. 

Det viktiga är att du inte kan berätta för testare vad man ska göra eller hur man får där. 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 ämnet, desto mer oförfalskad resultatet.

De 4 olika indikatorerna

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

1. Explicit signifier

Explicita signifiers består av en uppmaning i textform, 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 välbekanta formuleringar och avstå från förment kreativa formuleringar. 

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

"SEE MORE" ä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 varsel. 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 förvånande ä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 vet. Så det är värt att inte uppfinna hjulet på nytt här. Istället rekommenderas för en bättre användbarhet av din webbplats när det handlar om de etablerade mönstren. 

Detta kan tydligt ses i exemplet med en sida av en (slumpmässigt vald) 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 (kontakt) direkt.

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

3. Dold Signifier

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

Dolda signifiers har fördelen att de gör layouten ser ren och snygg. Så 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 höjd 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 uppmaningar när du hovrar. 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 designers utvecklat en plan B: Om du klickar på bilden du kommer till en stor vy där alla möjliga interaktioner är synliga.

Det är intressant hur man löser det hela i pekskärmen version. Å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 är också mycket intuitivt. När vi söker efter navigeringen brukar vi rulla uppåt. 

De ytterligare uppmaningarna, 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 ändras från mobilen till skrivbordsversionen, eller vice versa, skulle användningen av samma ikoner få dig att känna dig kunna klara snabbare. Detta gör användningen smidigare. Användbarheten förbättras därmed positivt.

4. Metaforisk signifier

Ett förstoringsglas som anger att fältet Sök 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 webbplatsens användbarhet. 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?
Copyright: 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 har att pausa och fråga sig själv , "Vad är egentligen erbjuds 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 plats på ett sådant sätt att det inte blir något avbrott? Förmodligen inte. Beroende på den information som presenteras kan vissa avbrott, riktad reflektion och lätt 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å rätt sätt för ditt eget projekt.

Rekommenderad läsning

En av de mest kända böckerna om användbarhet är "Få mig inte att tänka!" av Steve Krug. Titeln här är program och i slutändan vad varje användbarhet strategi handlar om.

  • "Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability", 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ändarupplevelse design? Vilka processer kan du rekommendera? Använd kommentarsfunktionen. Vill du ha fler tips på 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.

Kommentarer om den här artikeln

Skriv en kommentar

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