Fagartikkel

Interaksjonsdesign for god brukeropplevelse

Interaksjonsdesign handler om å planlegge hvordan en bruker skal samhandle med en digital tjeneste. Brukeren og brukerens behov skal være i sentrum når du lager interaksjonsdesign.

Ei hånd trykker på en knapp som ser ut som en blink. Rundt knappen er det mange små ulike ikoner, for eksempel et hjerte, et fly, ei klokke, et brev, et hus, en snakkeboble, ei lyspære. Illustrasjon. — Godt interaksjonsdesign sørger for intuitiv navigasjon slik at brukeren enkelt finner fram til relevant innhold. Bilde: Gregory Baldwin / CC BY-NC-SA 4.0

Designer du interaksjon, planlegger du navigasjonen og samhandlingen en bruker skal ha på en nettside, i en app eller i en programvare. Du vil, fremst av alt, bidra til en god og smertefri brukeropplevelse.

Tenk deg at du går inn på en nettside eller en app for å løse en brukeroppgave. Du skal bestille en billett, for eksempel. Hvordan bidrar interaksjonsdesignet til at du får en god brukeroppevelse? Finner du informasjon og interaksjonsfeltene du trenger, der du trenger dem?

Målet med interaksjonsdesign er å skape tjenester der brukerne får gjort det de skal. Nettsider med for mange valg og ulogisk framdrift eller plassering av elementer er frustrerende å navigere i. Du skal gjøre det enkelt for brukeren å samhandle med tjenesten du designer.

Hicks lov

Dess flere valg en bruker har foran seg, dess vanskeligere kan det bli å velge.

Psykolog William Edmund Hick

Lag et design brukeren forstår

Lenker og knapper må være tydelig utformet og plassert. Da vet brukeren om noe er klikkbart og finner funksjonen der han eller hun forventer det. Begynner brukeren å lure, blir fokuset på brukeroppgaven underordnet. Brukeren blir negativt innstilt til tjenesten og får i verste fall ikke gjort det han eller hun skulle.

For å sikre en god brukeropplevelse, skal brukeren slippe å tenke. Navigasjon og oppsett må være selvforklarende. Du vil at brukeren skal få besvart alle spørsmål og gjennomført alle ønskede brukeroppgaver.

Hvilken informasjon får brukeren i dette designet?

Finn ut hvem brukeren er og møt brukerbehovene

Det du tror brukeren trenger, vil ikke nødvendigvis være det samme som brukeren faktisk har behov for. Sett deg inn i brukeren og brukerbehovene.

Bruk kjernemodellen under planlegging av nettinnhold og brukertest underveis for å sikre nettinnhold brukeren vil ha.

Eksempel: en buss-app, to opplevelser

Disse brukerne har hatt ulike opplevelser når de har brukt en ny og fancy buss-app.

Opplevelse 1

Jeg var inne på forsida til bybuss-appen i går og fantastiske animasjoner av en buss møtte meg. Det så ut som bussen kjørte inn på busstoppet og kjørte videre. Videre leste jeg inspirerende sitater om hvorfor det er lurt å velge buss og fikk vite mer om historikken til bybussen her i byen. Det var så vakkert visuelt at jeg valgte å fordype meg i bybussens nettsider i stedet for å finne bussavgangen og haste videre til bussen.

Opplevelse 2

Jeg hadde det travelt etter skolen på vei til jobb. Da jeg gikk inn på buss-appen for å finne neste buss, kom det først en slags bussanimasjon som tok lang tid å laste, derfra måtte jeg skrolle til en knapp for å skru av og gå videre. Da kom det mange bilder og sitater om bruk av buss. Det var ingen knapper eller menyer som tok meg til bussrutene, og jeg brukte mange minutter på å finne fram til det jeg trengte å vite. Jeg ble irritert og frustrert og rakk heller ikke bussen.

Læring

Brukeren bruker en bussapp for å løse et behov kjapt, ikke for å se en vakker og fancy side med mye "fyllstoff" som gjør det vanskelige å løse brukeroppgavene.

Tips for å skape et godt interaksjonsdesign

Design av skjerminnhold kan legge til rette for samhandling mellom bruker og nettside på flere måter. Her får du noen tips.

1. Valg av ord

Bilde av en oval form med svak skyggeeffekt under. Det står "Send" inni ovalen. Illustrasjon. — Eksempel på handlingsknapp. Bilde: Stina Åshildsdatter Grolid / CC BY-SA 4.0

Bruk enkle og klare ord som gjør det tydelig for brukeren hva han eller hun kan gjøre på nettsiden. Dette er viktig på handlingsknapper. Bruker du for lange ord, kan det bli for tungt å lese, og det blir for mye tekst på handlingsknappen. "Søk", "send" og "last ned" korte og greie tekster til handlingsknapper.

2. Visuelle elementer

Ikon av forenklet handlevogn. Illustrasjon. — Ikon med handlevogn brukes ofte på sider med netthandel. Bilde: Stina Åshildsdatter Grolid / CC BY-SA 4.0

Bilder, ikoner og typografi kan gi mye støtte til ordene. Mennesker er visuelt orienterte. Fokus på det visuelle kan gjøre siden bedre å bruke hvis den har et behagelig design og er tiltalende for brukeren.

Visuelle elementer kan utfylle teksten slik at det ikke trenger å bli så mye tekst. For eksempel er et ikon av ei handlevogn ofte brukt sammen med tekst for å illustrere handlekurv eller kjøp.

3. Ta hensyn til hvor og hvordan produktet brukes

Hånd holder en smarttelefon med et satelittkart på skjermen. Bybilde i bakgrunnen. Foto. — Det er viktig å tenke over sannsynlige brukssituasjoner og enheter for nettsiden eller appen. Bilde: Science Photo Library / CC BY-NC-SA 4.0

Tenk over hvor brukeren er når nettsiden brukes, og hva slags enhet som skal brukes. Er det en app for et busselskap eller en treningsapp, er det mer sannsynlig at brukeren er på farten og bruker mobilen.

Enkelte nettsider blir brukt både i nettlesere på datamaskin og på mobil og kan se svært ulike ut. Ulike brukssituasjoner og enheter gir ulike behov for hvordan interaksjonsdesignet skal utformes.

4. Tid og plassering

Kvadrat med fire kvadrater inni. I de fire kvadratene står bokstavene A, B, C og D. A er markert. Under kvadratet er ei blå pil som peker fra venstre mot høyre. Tre sirkler på pila. Sirkelen lengst til venstre er blå, sirkelen i midten har et blått omriss, og sirkelen lengst til høyre har et grått omriss. Illustrasjon. — Den blå navigasjonslinja nederst hjelper brukeren å orientere seg hvor langt han eller hun har kommet i et forløp. Bilde: Johannes Leiknes Nag / CC BY-SA 4.0

Design en nettside slik at brukeren kan orientere seg. Ikoner som viser utvikling, både med eller uten lyd, kan vise framdriften i en prosess. For et nettkurs kan fullførte leksjoner utheves, for eksempel, slik at de skiller seg fra leksjoner som ikke er startet på. Det er også viktig at brukeren kommer tilbake til den sist besøkte leksjonen.

På nettsteder med avansert struktur og mange undernivåer og mange sider må brukeren kunne orientere seg i et hierarki. En mulig løsning er en klikkbar brødsmulesti. Den viser både struktur og hvor brukeren befinner seg.

Eksempel på brødsmulesti

Forside > Sko > Vintersko > Skomodell Snow Trekker

Kilder

Dalen, O. og Rønjum, E.H. (2013). Slik lykkes du endelig med innhold på nett. Fagbokforlaget Vigmostad & Bjørke.

Interaction Design Foundation (u.å.). The Basics of User Experience Design. https://www.interaction-design.org/ebook

Krug, S. (2014). Don`t Make Me Think Revisited. A Common Sense Approach to Web and Mobile Usability. New Riders Publishing.

Smith, A. (u.å.). A Brief Introduction to Interaction Design. UsabilityGeek. Hentet 13. november 2021 fra https://usabilitygeek.com/introduction-interaction-design/