Fagartikkel

Interaksjonsdesign for god brukaroppleving

Interaksjonsdesign handlar om å planlegge korleis ein brukar skal samhandle med ei digital teneste. Brukaren og behovet til brukaren skal vere i sentrum når du lagar interaksjonsdesign.

Ei hand trykker på ein knapp som ser ut som ein blink. Rundt knappen er det mange små ulike ikon, til dømes eit hjarte, eit fly, ei klokke, eit brev, eit hus, ei snakkeboble, ei lyspære. Illustrasjon. — Godt interaksjonsdesign sørger for intuitiv navigasjon slik at brukaren enkelt finn fram til relevant innhald. Bilete: Gregory Baldwin / CC BY-NC-SA 4.0

Designar du interaksjon, planlegg du navigasjonen og samhandlinga ein brukar skal ha på ei nettside, i ein app eller i ei programvare. Du vil, fremst av alt, bidra til ei god og smertefri brukaroppleving.

Tenk deg at du går inn på ei nettside eller ein app for å løyse ei brukaroppgåve. Du skal bestille ein billett, til dømes. Korleis bidrar interaksjonsdesignet til at du får ei god brukaroppeving? Finn du informasjon og interaksjonsfelta du treng, der du treng dei?

Målet med interaksjonsdesign er å skape tenester der brukarane får gjort det dei skal. Nettsider med for mange val og ulogisk framdrift eller plassering av element er frustrerande å navigere i. Du skal gjere det enkelt for brukaren å samhandle med tenesta du designar.

Hicks lov

Dess fleire val ein brukar har framfor seg, dess vanskelegare kan det bli å velje.

Psykolog William Edmund Hick

Lag eit design brukaren forstår

Lenkjer og knappar må vere tydeleg forma og plasserte. Då veit brukaren om noko er klikkbart og finn funksjonen der han eller ho forventar det. Byrjar brukaren å lure, blir fokuset på brukaroppgåva underordna. Brukaren blir negativt innstilt til tenesta og får i verste fall ikkje gjort det han eller ho skulle.

For å sikre ei god brukaroppleving, skal brukaren sleppe å tenkje. Navigasjon og oppsett må vere sjølvforklarande. Du vil at brukaren skal få svart på alle spørsmål og gjennomført alle dei ønskte brukaroppgåvene.

Kva informasjon får brukaren i dette designet?

Finn ut kven brukaren er og møt brukarbehova

Det du trur brukaren treng, vil ikkje nødvendigvis vere det same som brukaren faktisk har behov for. Set deg inn i brukaren og brukarbehova.

Bruk kjernemodellen under planlegging av nettinnhald og brukartest undervegs for å sikre nettinnhald brukaren vil ha.

Døme: ein buss-app, to opplevingar

Desse brukarane har hatt ulike opplevingar når dei har brukt ein ny og fancy buss-app.

Oppleving 1

Eg var inne på framsida til bybuss-appen i går og fantastiske animasjonar av ein buss møtte meg. Det såg ut som bussen køyrde inn på busstoppet og køyrde vidare. Vidare las eg inspirerande sitat om kvifor det er lurt å velje buss og fekk vite meir om historikken til bybussen her i byen. Det var så vakkert visuelt at eg valde å fordjupe meg i nettsidene til bybussen i staden for å finne bussavgangen og haste vidare til bussen.

Oppleving 2

Eg hadde det travelt etter skulen på veg til jobb. Då eg gjekk inn på buss-appen for å finne neste buss, kom det først ein slags bussanimasjon som tok lang tid å laste, derfrå måtte eg skrolle til ein knapp for å skru av og gå vidare. Då kom det mange bilete og sitat om bruk av buss. Det var ingen knappar eller menyar som tok meg til bussrutene, og eg brukte mange minutt på å finne fram til det eg hadde bruk for. Eg vart irritert og frustrert og rakk heller ikkje bussen.

Læring

Brukaren bruker ein bussapp for å løyse eit behov kjapt, ikkje for å sjå ei vakker og fancy side med mykje "fyllstoff" som gjer det vanskelege å løyse brukaroppgåvene.

Tips for å skape eit godt interaksjonsdesign

Design av skjerminnhald kan leggje til rette for samhandling mellom brukar og nettside på fleire måtar. Her får du nokre tips.

1. Val av ord

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

Bruk enkle og klare ord som gjer det tydeleg for brukaren kva han eller ho kan gjere på nettsida. Dette er viktig på handlingsknappar. Bruker du for lange ord, kan det bli for tungt å lese, og det blir for mykje tekst på handlingsknappen. "Søk", "send" og "last ned" korte og greie tekstar til handlingsknappar.

2. Visuelle element

Ikon av forenkla handlevogn. Illustrasjon. — Ikon med handlevogn blir ofte brukt på sider med netthandel. Bilete: Stina Åshildsdatter Grolid / CC BY-SA 4.0

Bilete, ikon og typografi kan gi mykje støtte til orda. Menneske er visuelt orienterte. Fokus på det visuelle kan gjere sida betre å bruke viss ho har eit behageleg design og er tiltalande for brukaren.

Visuelle element kan utfylle teksten slik at det ikkje treng å bli så mykje tekst. Til dømes er eit ikon av ei handlevogn ofte brukt saman med tekst for å illustrere handlekorg eller kjøp.

3. Ta omsyn til kvar og korleis produktet blir brukt

Hand held ein smarttelefon med eit satelittkart på skjermen. Bybilete i bakgrunnen. Foto. — Det er viktig å tenke over sannsynlege brukssituasjonar og einingar for nettsida eller appen. Bilete: Science Photo Library / CC BY-NC-SA 4.0

Tenk over kvar brukaren er når nettsida blir brukt, og kva slags eining som skal brukast. Er det ein app for eit busselskap eller ein treningsapp, er det meir sannsynleg at brukaren er på farten og bruker mobilen.

Enkelte nettsider blir brukte både i nettlesarar på datamaskin og på mobil og kan sjå svært ulike ut. Ulike brukssituasjonar og einingar gir ulike behov for korleis interaksjonsdesignet skal formast.

4. Tid og plassering

Kvadrat med fire kvadrat inni. I dei fire kvadrata står bokstavane A, B, C og D. A er markert. Under kvadratet er ei blå pil som peiker frå venstre mot høgre. Tre sirklar på pila. Sirkelen lengst til venstre er blå, sirkelen i midten har eit blått omriss, og sirkelen lengst til høgre har eit grått omriss. Illustrasjon. — Den blå navigasjonslinja nedst nede hjelper brukaren å orientere seg kor langt han eller ho har komme i eit forløp. Bilete: Johannes Leiknes Nag / CC BY-SA 4.0

Design ei nettside slik at brukaren kan orientere seg. Ikon som viser utvikling, både med eller utan lyd, kan vise framdrifta i ein prosess. For eit nettkurs kan fullførte leksjonar uthevast, til dømes, slik at dei skil seg frå leksjonar som ikkje er starta på. Det er òg viktig at brukaren kjem tilbake til den sist besøkte leksjonen.

På nettstader med avansert struktur og mange undernivå og mange sider må brukaren kunne orientere seg i eit hierarki. Ei mogleg løysing er ein klikkbar brødsmulesti. Han viser både struktur og kvar brukaren er.

Døme på brødsmulesti

Framside > Sko > Vintersko > Skomodell Snow Trekker

Kjelder

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. Henta 13. november 2021 frå https://usabilitygeek.com/introduction-interaction-design/