UX Design &web-brugervenlighed: Hvad ligger der bag brugeroplevelsen?

Sonja Hoffmann Senest opdateret den 21. oktober 2020
8 Min.
Anvendelighed til UX-design
Senest opdateret den 21. oktober 2020

Brugeroplevelse (UX) Design, brugervenlighed, Human Interface Design og Human Centered Design - dette er blot nogle af de vilkår, vi i stigende grad konfronteres med. Men hvad er det? Hvorfor skal du være særligt interesseret i brugervenlighed og brugeroplevelse som webdesigner? Og hvordan kan du tilføje ux, selvom du ikke har en UX-designer i dit team?

I min sidste artikel om harmonisk webdesign, viste jeg dig, hvordan du opretter dit eget design retningslinjer. Men harmonisk webdesign er kendetegnet ved flere faktorer - det er derfor, jeg rigsret dig i dag brugeroplevelsen:

UX Design &web-brugervenlighed: Hvad ligger der bag brugeroplevelsen?

Hvorfor skulle jeg tage mig af UX?

Mange tyske designere jeg kender har en stærk baggrund i kommunikation design - så de kommer fra retning af de trykte medier. Her oprettes sofistikerede kompositioner, der præsenterer et præcist budskab.

I udskriftsdesign er kommunikationsstien klar: Der er en sender (for eksempel en plakat eller brochure) og en modtager (den, som mediet er målrettet mod). Modtageren har intet mere at gøre end at modtage meddelelsen, at forstå den og derefter at træffe en (køb) beslutning.

Webdesign er på den anden side interaktivt: Ikke kun sendes en meddelelse her, men snarere genereres en samtale. 

Brugeroplevelse: brugeroplevelsen

Siden internettets begyndelse har virksomheder beskæftiget sig med de psykologiske aspekter af disse interaktioner. På det tidspunkt var der dog ingen omtale af UX designere, men af menneskelig interaktion designere - og erhvervet var generelt langt mindre udbredt, end det er i dag.

Hvad er brugeroplevelse?

Brugeroplevelse i henhold til dagens standard starter ikke, når du besøger et websted og stopper ikke med at forlade det. Det beskriver snarere hele oplevelsen, som en bruger har med mærket eller produktet - fra den første til den sidste kontakt.

Men jeg vil begrænse mig til det underområde, der er direkte relateret til en hjemmeside: brugervenlighed. Vejen gennem vores produkt skal derfor være så behagelig og problemfri som muligt. Du bør dog ikke ignorere budgettet og virksomhedens interne krav.

God brugervenlighed kan ikke påvirke dine salgstal ubetydeligt. Det, der driver mig personligt, er pligten som webstedsoperatør til ikke at frustrere brugeren.

Affordances, Signifiers og Feedback

Kort sagt beskriver Affordance, hvad der generelt er muligt. Ved hjælp af en skrivebordsskærm som et eksempel ville dette være muligheden for at "klikke". Da det ville være inaktivt og frustrerende, hvis du skulle klikke vilkårligt overalt på hjemmesiden, installerer vi signifiers (indikatorer). Disse viser brugeren, hvor noget er muligt og hvad. 

En af de mest berømte signifiers er en knap. Det begrænser interaktionsoverfladen. Vi ved, at hvis vi klikker her, vil der ske noget. Dette forstærkes normalt af hover-effekter – eller når markøren bliver til en pegefinger, når jeg svæver over den. Det er også signifiers.

Hvad er Affordances, Signifiers og Feedback?

Affordance beskriver, hvilken interaktion der generelt er mulig. Signifiers (indikatorer) signalerer, at interaktion er mulig. Feedback sikrer på den anden side, at brugeren ved, at deres interaktion har udløst noget.

Den aktive tilstand af knappen viser mig som feedback, at der skete noget, da jeg klikkede på det. Alle tre processer fusionerer og kan hjælpe med at gøre dit websted mere brugervenligt fra starten som grundlæggende spørgsmål.

  1. Hvilke interaktioner er generelt mulige?
  2. Hvordan viser jeg mine brugere, at de er mulige?
  3. Hvordan ved de, at de gjorde det "rigtige"?

Evnen til at interagere defineres ofte af den enhed, der får adgang til websiden: På en (standard) stationær computer er det ikke muligt at stryge og røre ved, mens der ikke er nogen hover-effekt på mobile enheder.

Dette er netop, hvad der skal tages i betragtning, når man vælger signifiers. For eksempel gør links kun bliver klart, når jeg svæver over dem med musen? Så en mobil besøgende ikke klar over, at interaktion er muligt på alle. 

Brugere interagerer fysisk og digitalt

Affordances og signifiers kan også gå ud over din hjemmeside interface. Din besøgende kan blive påvirket af eksterne omstændigheder eller bruge visse interaktioner anderledes end oprindeligt planlagt. For eksempel er browserens tilbage-knap en kendsgerning, der er placeret uden for dit websted. 

Hvis den besøgende ved et uheld navigerede til en del af din side, hvor vedkommende ikke kan finde det, de vil have, er det sandsynligt, at vedkommende navigerer ved hjælp af tilbage-knappen i stedet for linkene på din side. 

Hvordan interaktioner bevidst bruges "forkert" - et eksempel

Jeg booker ofte flyrejser gennem en udenlandsk tjenesteudbyder, hvis side som standard ikke vises på tysk eller engelsk. Pludselig kunne jeg ikke finde sprogindstillingerne via mobilversionen. Jeg huskede dog, at jeg allerede havde fået adgang til webstedet via appen, hvor alt blev vist i standard engelsk tilstand. Siden da har jeg kun fået adgang til mobilwebstedet via "app"-omvejen, fordi jeg kan huske dette, og fordi jeg foretrækker at gøre to klik mere end at klikke rundt på en mobilside i frustration.

Men du skal også være opmærksom på, at du ikke kan "omskole" dine brugere. Du kan ikke slippe af med sådanne "forkerte" praksis, men du kan planlægge for denne adfærd og også sørge for, at der er nok alternativer.

Et andet godt eksempel, der allerede har forårsaget hovedpine for hver enkelt af os, er brugen af forældede browsere eller Internet Explorer, som desværre stadig er udbredt. Nogle layouts vises f.eks. ikke så kreativt værdifulde som i Firefox eller Chrome. Selvom dette er irriterende, er vi også nødt til at designe og programmere for disse brugere.

Fordi det er værre end for eksempel at få adgang til siden via appen eller bruge tilbage-knappen, er det, når sidebesøgende giver helt op - det være sig fordi brug af vores websted skaber for meget frustration, eller fordi der er for få alternativer til fejlhåndtering.

Hvorfor usability test?

Forresten er det bedst at finde ud af en sådan adfærd ved at observere dem. Den, der tester hjemmesiden, er relativt ubetydelig. Det er ikke nødvendigt at finde folk, der rent faktisk bruger webstedet bagefter. Fordi virkelig grov usability fejl opstår med næsten alle brugere. 

Det vigtige er, at du ikke kan fortælle testeren, hvad de skal gøre, eller hvordan man kommer hvorhen. Nøglen er at identificere og registrere potentielle forhindringer og komplikationer for at gøre dit websted mere brugervenligt. Jo mindre du fortæller emnet, jo mere uforfalsket resultatet.

De 4 forskellige indikatorer

Hvilke signaler kan du sætte på din side for at fremhæve interaktioner? Vi skelner mellem fire forskellige kategorier, som jeg kort præsenterer for Dem.

1. Eksplicit signifier

Eksplicitte signifiers består af en prompt i tekstform, f.eks. Disse findes ofte sammen med andre indikatorer, f.eks. Disse bør være så klare og koncise som muligt. Derudover bør man ty til velkendte formuleringer og dispensere fra angiveligt kreative formuleringer. 

Genkendelsesværdien giver brugeren mulighed for med næsten sikkerhed at vide, hvilket resultat han kan forvente under en interaktion.

"SE MERE" er et eksempel på en simpel eksplicit signifier.

UX Design &web-brugervenlighed: Hvad ligger der bag brugeroplevelsen?
https://www.lonelyplanet.com/portugal/lisbon

2. Design mønstre: Mønstre og konventioner

Designmønstre er tilbagevendende design, som vi er blevet så vant til, at de ikke længere har brug for nogen forklaring eller yderligere varsel. Der er relativt mange af dem. 

For eksempel kan alle være opmærksomme på, at hvis du klikker på logoet, føres tilbage til indekssiden. Eller at blå understreget tekst er et link. Navigationslinjen på et websted, som vi bruger det i dag, er også et sådant fænomen. Vi forventer dem visse steder på den ene side. Vi ved, at Nav Bar fungerer som vores indhold og guider os gennem hjemmesiden. En menulinje, der bliver til et Hamburger-ikon på mobile enheder, behøver heller ingen yderligere forklaring. 

Fælles mønstre, vi har lært i løbet af de sidste par år

Det overraskende er, at disse mønstre også ofte er internationale. Du ser dette især godt, hvis du vil orientere dig på en side, hvis sprog du ikke kender. Så det er værd ikke at genopfinde hjulet her. I stedet anbefales det til en bedre brugervenlighed af dit websted, når det drejer sig om de etablerede mønstre. 

Dette kan tydeligt ses i eksemplet på en side med en (tilfældigt udvalgt) restaurant i Moskva. Selvom jeg hverken kan tale russisk eller læse kyrillisk, kan jeg straks se, hvordan jeg kan navigere gennem siden. Jeg kan se, hvilket navigationspunkt jeg er i, og jeg er i stand til at filtrere de vigtigste oplysninger (kontakt) med det samme.

UX Design &web-brugervenlighed: Hvad ligger der bag brugeroplevelsen?
https://bulka.cafe/

3. Skjult signifier

Disse kan kun ses gennem en bestemt handling, såsom at svæve og rulle. 

Skjulte signifiers har den fordel, at de får layoutet til at se rent og ryddeligt ud. Så du kan gøre dit design slankere. 

De har dog også nogle ulemper. De findes kun af brugeren, hvis de enten ved, at de findes, eller hvis de ved et uheld udfører den udløsende interaktion. Derfor er disse signaler ikke egnede til vigtige, men højst til sekundære opfordringer til handling (opfordring til handling).

Derudover skal du være opmærksom på, at der muligvis skal findes en separat løsning for hver enhed, når du bruger skjulte signifiers.

Et godt eksempel er givet af Pinterest:

Pinterest

I skrivebordsversionen vises nye kald til handlinger, når der peges. Da brugeren intuitivt klikker på billedet for at tilføje det til deres samling, er det usandsynligt, at funktionen går uopdaget. Ikke desto mindre har designerne udviklet en plan B: Hvis du klikker på billedet, kommer du til en stor visning, hvor alle mulige interaktioner er synlige.

Det er interessant, hvordan man løser det hele i touch-screen version. Igen er der skjulte interaktioner – men til andre formål.

UX Design &web-brugervenlighed: Hvad ligger der bag brugeroplevelsen?

I venstre billede kan du se den generelle oversigt over siden. Menuen nedenfor kommer kun ind, når brugeren ruller op - hvilket i første omgang virker ukendt, men er også meget intuitivt. Når vi søger efter navigationen, ruller vi normalt op. 

De yderligere opfordring til handling, som med desktopversionen, er dog kun tilgængelige, når du faktisk har klikket på billedet. Således er de ikke længere skjulte betegnere. 

Det, der overraskede mig, var imidlertid, at Pinterest bruger to forskellige ikoner til den samme interaktion i de to versioner. Fra en brugervenlighed perspektiv, tror jeg ikke, det er anbefalet. Hvis brugeren skifter fra mobilen til desktopversionen eller omvendt, vil brugen af de samme ikoner få dig til at føle dig i stand til at klare dig hurtigere. Dette gør brugen mere glat. Brugervenligheden er således positivt forbedret.

4. Metaforisk signifier

Et forstørrelsesglas, der angiver, at søgefeltet er placeret her. Den konvolut, der repræsenterer afsendelse af meddelelser. Knappen, der signalerer, at du kan trykke på den. Alle principper har det til fælles, at vi kender dem fra den virkelige verden. 

Deres anvendelighed i den digitale verden er blevet et design mønster. Du skal dog være forsigtig: Hvis du bruger en metaforisk indikator med et ændret symbol, kan dette forvirre dine brugere.

Hvis du f.eks. bruger en postkasse i stedet for den velkendte konvolut, kan det skade brugbarheden af dit websted. Hvorfor? Brugeren skal holde pause og overveje det næste trin. Han må sætte spørgsmålstegn ved, om dette symbol matcher det, han ønsker at opnå.

UX Design &web-brugervenlighed: Hvad ligger der bag brugeroplevelsen?
Ophavsret: https://www.iconfinder.com/icons/2296974/email_inbox_letter_mail_mailbox_icon_icon

Konklusion

Brugervenlighed betyder ikke kun, at dine besøgende på en eller anden måde vil finde vej gennem webstedet. Brugervenlighed betyder, at fokus her er på den besøgende holistisk - "rejsen" gennem din side skal være så problemfri som muligt. 

Hver afbrydelse - hver gang brugeren er nødt til at holde pause og spørge sig selv , "Hvad der faktisk tilbydes her? Hvad sker der, når jeg klikker på det? Kommer jeg tilbage? Hvor er jeg nu? Hvordan kom jeg hertil?" er kontraproduktivt.

Er det muligt at bygge et websted på en sådan måde, at der ikke er nogen afbrydelse? Sandsynligvis ikke. Afhængigt af de fremlagte oplysninger kan visse afbrydelser, målrettede refleksioner og mindre frustration endda være ønskelige.

Det er vigtigt at kende de forskellige værktøjer, så du kan bruge dem korrekt til dit eget projekt.

Anbefalet læsning

En af de mest berømte bøger om brugervenlighed er "Få mig ikke til at tænke!" af Steve Krug. Titlen her er program og i sidste ende, hvad enhver usability tilgang handler om.

  • "Don't Make Me Think, Revisited: En sund fornuft tilgang til Web Usability," Steve Krug
  • "The Design of Everyday Things", Donald A. Norman
  • https://www.uxpin.com/ tilbyder nogle meget interessante e-bøger til gratis download
Dine spørgsmål om brugeroplevelse

Hvilke spørgsmål har du om Web Usability og User Experience Design? Hvilke processer kan du anbefale? Brug kommentarfunktionen. Vil du have flere tips om webdesign og udvikling? Følg os derefter på Twitter, Facebook eller via vores nyhedsbrev.

Efter at have studeret spildesign og kreativ skrivning i grønne Auckland, Sonja Hoffmann har specialiseret sig i web- og appdesign og dets udvikling. Hendes fokus er på gamification og udforske brugernes motivation og dens erfaringer, kombineret med en passion og nysgerrighed for teknologiske tendenser.

Kommentarer til denne artikel

Skriv svar på en

Din e-mailadresse vil ikke blive offentliggjort. Obligatoriske felter er markeret med *.