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:

Varför hantera UX-design?

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.

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 ha en betydande inverkan på dina försäljningssiffror. Det som driver mig personligen är plikten som webbplatsoperatör:är inte att frustrera användaren.

Överkomliga priser, signatärer och feedback

Enkelt uttryckt beskriver överkomliga priser vad som i allmänhet är möjligt. Med hjälp av exemplet på en skrivbordsskärm skulle detta vara möjligheten att "klicka". Eftersom det skulle vara inaktivt och frustrerande om du var tvungen att klicka slumpmässigt överallt på webbplatsen, inkluderar 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.

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

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 till interaktion definieras ofta av den enhet som används för att komma åt webbplatsen: på en (standard) stationär dator är svepning och beröring inte möjlig, medan det på mobila enheter inte finns någon hovringseffekt.

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

Affordances 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 annorlunda än ursprungligen avsett. Webbläsarens bakåtknapp är till exempel en situation 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. Med mobilversionen kunde jag plötsligt inte hitta språkinställningarna längre. Jag kom dock ihåg att jag redan hade kommit åt webbplatsen en gång via appen, där allt sedan visades i standardläge på engelska. Sedan dess kommer jag bara åt mobilwebbplatsen via omvägens "app", eftersom jag kan komma ihåg den och eftersom jag hellre gör två klick till än klickar 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ästa sättet att ta reda på sådana beteenden genom att observera. Vem som testar webbplatsen är relativt obetydlig. Det är inte nödvändigt att hitta personer som faktiskt använder sidan efteråt. Eftersom riktigt grova användbarhetsfel uppstår med nästan alla användare. 

Det viktiga är att du inte får berätta för testaren vad man ska göra eller hur man kommer dit. Det som är allt och slut är att identifiera och notera möjliga hinder och komplikationer för att göra din webbplats mer användarvänlig. Ju mindre du säger till ämnet, desto mer oförfalskad 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.

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 bör till exempel vara medvetna om att klick på logotypen leder tillbaka till indexsidan. Eller att blå understruken text representerar en länk. Navigeringsfältet på en webbplats – som vi använder det idag – är också ett sådant fenomen. Vi förväntar oss dem på vissa ställen på en sida. Vi vet att Nav Bar fungerar som en synopsis för oss och guidar oss via webbplatsen. En menyrad som förvandlas till en hamburgerikon på mobila enheter behöver inte längre 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.

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:

I skrivbordsversionen visas nya uppmaningar när du håller muspekaren. Eftersom användaren intuitivt klickar på bilden för att lägga till den i sin samling, kommer funktionen sannolikt inte att gå oupptäckt. Ändå har formgivarna utvecklat en plan B: Om du klickar på bilden får du 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.

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. 

Den ytterligare uppmaningen – som med skrivbordsversionen – är dock endast tillgänglig när du faktiskt har klickat på bilden. Således är de inte längre dolda signifiers. 

Jag blev dock förvånad över att Pinterest använder två olika ikoner för samma interaktion i de två versionerna. Ur ett användbarhetsperspektiv tror jag inte att detta rekommenderas. Om användaren växlar från mobilen till skrivbordsversionen, eller vice versa, skulle användningen av samma ikoner leda till en snabbare väg runt. 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 postlåda i stället för det välkända kuvertet kan detta skada användbarheten på din webbplats. Varför? Användaren måste stanna upp och tänka på nästa steg. Han måste ifrågasätta om denna symbol motsvarar vad han vill uppnå.

Slutsats om UX Design & Web Usability

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.

• "Don't Make Me Think: A Common Sense Approach to Web Usability" av Steve Krug
• "Design av vardagliga saker" av Donald A. Norman
• UX Pin erbjuder intressanta e-böcker för gratis nedladdning