UX Design & Web Usability: Hvad ligger der bag brugeroplevelsen?

Sonja Hoffmann Senest opdateret den 21.
8 Min.
UX Design Brugervenlighed
Senest opdateret den 21.

Brugeroplevelse (UX) Design, Brugervenlighed, Human Interface Design og Human Centreret Design - disse er blot nogle af de vilkår, vi i stigende grad konfronteret 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 Jeg viste dig, hvordan du opretter dine egne retningslinjer for design. Men harmonisk webdesign er kendetegnet ved flere faktorer - det er derfor, jeg anklage dig i dag brugeroplevelsen:

UX Design & Web Usability: Hvad ligger der bag brugeroplevelsen?

Hvorfor skal jeg beskæftige sig med UX?

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

I printdesign er kommunikationsvejen klar: Der er en sender (f.eks. en plakat eller brochure) og en modtager (den, som mediet er målrettet mod). Modtageren har ikke andet at gøre end at modtage meddelelsen, at forstå den og derefter at træffe en (køb) beslutning.

Webdesign, på den anden side, er interaktiv: ikke kun en besked sendes her, men snarere en samtale er genereret. 

Brugeroplevelse: brugeroplevelsen

Siden internettets begyndelse har virksomhederne 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 nutidens standard starter ikke, når du besøger et websted og ikke holder op med at forlade det. Den beskriver snarere hele den oplevelse, som en bruger har med brandet eller produktet – fra den første til den sidste kontakt.

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

God brugervenlighed kan ikke i ubetydelig grad påvirke dine salgstal. Hvad driver mig personligt er pligten som en hjemmeside operatør ikke at frustrere brugeren.

Affordances, signifiers og feedback

Kort sagt, Affordance beskriver, hvad der generelt er muligt. Ved hjælp af en skrivebordsskærm som et eksempel, ville dette være mulighed for at "klikke". Da det ville være tomgang og frustrerende, hvis du var nødt til at 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 interaktionoverfladen. Vi ved, at hvis vi klikker her, vil der ske noget. Dette forstærkes normalt af svæveeffekter – 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 derimod, 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å den. Alle tre processer fusionere og kan bidrage til 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 er ofte defineret af den enhed, der får adgang til websiden: på en (standard) stationær computer, aflæse og touch er ikke muligt, mens der ikke er nogen svæveeffekt på mobile enheder.

Det er netop, hvad der skal tages i betragtning, når man vælger betegnerne. Bliver links for eksempel kun tydelige, når jeg holder musen over dem? Så en mobil besøgende ikke klar over, at interaktion er muligt på alle. 

Brugerne interagerer fysisk og digitalt

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

Hvis den besøgende ved et uheld kommer til at navigere til en del af din side, hvor vedkommende ikke kan finde det, de ønsker, 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 bestiller ofte flyrejser gennem en udenlandsk tjenesteudbyder, hvis side ikke vises på tysk eller engelsk som standard. Pludselig kunne jeg ikke finde sprogindstillingerne via mobilversionen. Men jeg huskede, at jeg allerede havde adgang til hjemmesiden via app, hvor alt blev vist i standard engelsk tilstand. Siden da har jeg kun adgang til den mobile hjemmeside via "app" omvej, fordi jeg kan huske dette, og fordi jeg foretrækker at gøre to klik mere end at klikke rundt på en mobil side i frustration.

Men du skal også være opmærksom på, at du ikke kan "re-uddanne" 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 der er nok alternativer.

Et andet godt eksempel, der allerede har forårsaget hovedpine for hver af os er brugen af forældede browsere eller Internet Explorer, som desværre stadig er udbredt. Nogle layouts vises ikke så kreativt værdifulde som i Firefox eller Chrome, for eksempel. Selv om dette er irriterende, 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 app, eller ved hjælp af tilbage-knappen, er det, når den besøgende giver op helt - det være sig fordi at bruge vores hjemmeside skaber for meget frustration, eller fordi der er for få alternativer til fejlhåndtering.

Hvorfor usability Test?

Af den måde, 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 brutto usability fejl opstår med næsten hver bruger. 

Det vigtige er, at du ikke kan fortælle testeren, hvad de skal gøre, eller hvordan man kommer hvor. Det centrale er at identificere og registrere potentielle forhindringer og komplikationer for at gøre dit websted mere brugervenligt. Jo mindre du fortæller motivet, 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 i forbindelse med andre indikatorer, f.eks. De bør være så klare og præcise som muligt. Desuden 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 betegner.

UX Design & Web Usability: Hvad ligger der bag brugeroplevelsen?
https://www.lonelyplanet.com/portugal/lisbon

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

Design mø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 klikke på logoet vil føre tilbage til indekssiden. Eller at blå understreget tekst er et link. Navigationslinjen på en hjemmeside, som vi bruger det i dag, er også sådan et 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 ønsker at orientere dig selv 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 der beskæftiger sig med de etablerede mønstre. 

Dette kan tydeligt ses i eksemplet med en side af en (tilfældigt udvalgt) restaurant i Moskva. Selv om jeg hverken kan tale russisk eller læse kyrillisk, kan jeg straks se, hvordan jeg kan navigere gennem siden. Jeg kan se, hvilken navigation punkt jeg er i, og jeg er i stand til at bortfiltrere de vigtigste oplysninger (kontakt) med det samme.

UX Design & Web Usability: Hvad ligger der bag brugeroplevelsen?
https://bulka.cafe/

3. Skjult signifier

Disse kan kun ses gennem en bestemt handling, såsom svævende og rullende. 

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

Men de har 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 sekundære opfordringer til handling (opfordring til handling).

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

Et godt eksempel er givet af Pinterest:

Pinterest

I skrivebordsversionen vises der nye kald til handlinger, når der holdes markøren over dem. Da brugeren intuitivt klikker på billedet for at tilføje det til deres samling, funktionen er usandsynligt, at gå uopdaget. Ikke desto mindre har designerne udviklet en plan B: Hvis du klikker på det billede, du kommer 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 Usability: Hvad ligger der bag brugeroplevelsen?

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

Men de ekstra opfordring til handlinger, som med desktopversionen, er kun tilgængelige, når du rent faktisk har klikket på billedet. Således er de ikke længere skjulte betegnere. 

Hvad overraskede mig, var imidlertid, at Pinterest bruger to forskellige ikoner til den samme interaktion i de to versioner. Fra et usability perspektiv, tror jeg ikke, det er anbefalet. Hvis brugeren skifter fra mobil til desktop-versionen, eller omvendt, vil brugen af de samme ikoner få dig til at føle dig i stand til at klare hurtigere. Dette gør brugen mere glat. Anvendeligheden forbedres således positivt.

4. Metaforisk signifier

Et forstørrelsesglas, der angiver, at feltet Søg er placeret her. Den konvolut, der repræsenterer afsendelse af meddelelser. Den knap, 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 designmønster. Men du skal være forsigtig: Hvis du bruger en metaforisk indikator med et modificeret symbol, kan det forvirre dine brugere.

Hvis du for eksempel bruger en postkasse i stedet for den velkendte konvolut, kan det beskadige brugervenligheden af dit websted. Hvorfor? Brugeren skal sætte det næste trin på pause og overveje det næste trin. Han må sætte spørgsmålstegn ved, om dette symbol svarer til, hvad han ønsker at opnå.

UX Design & Web Usability: Hvad ligger der bag brugeroplevelsen?
Copyright: https://www.iconfinder.com/icons/2296974/email_inbox_letter_mail_mailbox_icon_icon

Konklusion

Brugervenlighed betyder ikke bare, at dine besøgende en eller anden måde vil finde vej gennem webstedet. Brugervenlighed betyder, at fokus her er på den besøgende holistisk - den "rejse" 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 er der faktisk tilbydes her? Hvad sker der, når jeg klikker på det? Vil jeg komme tilbage? Hvor er jeg? Hvordan kom jeg hertil?" virker mod hensigten?

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 overvejelser 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: A Common Sense Approach to Web Usability", Steve Krug
  • "Design af dagligdags ting," 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. Du ønsker flere tips om webdesign og udvikling? Så følg os på KvidreFacebook 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.

Lignende artikler

Kommentarer til denne artikel

Skriv en kommentar

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