Fra innsikt til praksis

Ser vi på verden vi lever i så opplever vi den på ulike måter, uansett alder, erfaring og forventninger.

Skal du designe noe, er det derfor viktig å jobbe med nettopp både innsikt og UX for å få et grep om hvem du designer noe for.

For ved siden av å skaffe seg verdifull innsikt om kundene og forretningen, og det å identifisere overlappet mellom de to, handler det om å bruke disse innsiktene til å skape en forandring.   

Ved hjelp av en smidig design thinking-tankegang i bunnen skal vi i denne artikkelen bygge en bro mellom nettopp denne innsikten og praksis.

Det er her user experience (UX), aka brukeropplevelser på norsk, kommer inn.

Denne artikkelen vil handle om:

• Hvordan du kan utnytte ditt innovative potensiale maksimalt.
• Hva UX egentlig er?
• Hvordan du går fra innsikt til mockups.
• 5 gode UX prinsipper.
• UX i praksis.

Slik utnytter du ditt innovative potensiale maksimalt

 

En ting er å forstå noe, en annen er å bruke forståelsen til å skape noe nytt og bedre.

Når man står overfor store komplekse prosjekter, som for eksempel et større IT-prosjekt, finnes det ikke bare én perfekt løsning. Det finnes mange mulige løsninger.

Design thinking handler derfor ikke om prosesser isolert sett, men det å forstå komplekse problemer og hvordan man erkjenner og får ny viten om noe. Å utvikle og lære, raffinere og evaluere det vi lærer.

I ItumX bruker vi en menneskesentrert og smidig design-tenkende tilnærming for å få mest mulig verdi ut av ethvert prosjekt. Målet er å skape nye og meningsfulle løsninger for mennesker.

Les mer om tilnærmingen her. 

ItumX sin prosjektmodell. 

I en forenklet versjon av vår prosjektmodell, kan man si at design thinking er hvordan vi klarer å binde den røde tråden fra en fase i prosessen til den neste, skaper noe nytt, blir klokere og tar det videre på en ny måte.

Fase 1. Digital strategi og innsikt. 

• Markedsstrategi og forretningsmål.
• Trend- og konkurrentanalyse.
• Why workshop.
• Kunde- og stakeholderintervjuer.
• Personas og kundereiser.
• Analyse av eksisterende data.
• Business Case/ROI-mål.
• Risiko- og stakeholderanalyse.
• Digital visjon.

 

Fase 2.Konsept og analyse. Teknisk innsikt.

• Engagement Goals.
• Strategisk roadmap.
• Wireframes.
• UX-konsept/prototyping.
• Feature liste.
• Informations- og SEO-arkitektur.
• Innholds-struktur.
• Scoping (Minimal Viable Product).
• IT-arkitektur.
• Prosjektplanlegging.

 

Fase 3. Implementering og lansering.

Smidig utvikling i sprinter.

Innhold og Q&A:

• Optimaliseringsplan.
• Komponentmanual.
• Innhold.
• UI design.
• Test/QA.
• Brukertest og evaluering.

Teknisk implementering:

• User stories.
• Product backlog grooming.
• Sprint planning.
• Utvikling og integrasjoner.
• Show & tell.

Kontinuerlig lansering av dellevaranser:

• Akseptansetest.
• Lansering.
• Lessons learned.
• Hosting og vedlikehold.
• Innholds-QA.
• Review av universell utforming.
• Opplæring.

 

Fase 4. Optimalisering og verdirealisering. 

• KPI-monitoring.
• A/B-testing.
• Personalisering.
• SEO- og Analytics-QA.
• UX og CRO.
• Kontinuerlige forbedringer.

 

Steget fra innsikt til det praktiske arbeidet, favner så faget UX.

Hva er egentlig UX? 

 

UX er en brukerfokusert designprosess som tar utgangspunkt i brukerens behov.

Arbeidsprosessen brukes for å skape meningsfulle og relevante opplevelser for brukeren gjennom å tenke på hvordan en bruker opplever og føler det når de bruker et produkt uten å skape frustrasjon og friksjon.

Det handler rett og slett om å forsøke å skape en så bra relasjon og opplevelse som mulig mellom menneske og objekt, i vårt tilfelle digitale enheter eller programvare, gjennom å hele tiden analysere og justere designet for å fjerne denne såkalte friksjonen.

UX er med andre ord hele verdikjeden fra øyeblikket noen for eksempel «møter» et produkt, en tjeneste eller en nettside, kjøper en vare, varen distribueres, mottas og brukes.

 

Hvorfor, hva og hvordan? 

En UX-designer stiller seg også spørsmålene hvorfor, hva og hvordan.

1. Hvorfor handler om å bli kjent med brukernes motivasjoner, verdier og holdninger.
2. Hva adresserer hvilken funksjon og egenskaper et produkt eller en tjeneste kan ha.
3. Hvordan ser på funksjonalitetens design på en universell utformet og estetisk tilfredsstillende måte.

 

UX versus UI? 

 

Der UX står for user experience – altså brukeropplevelse, står UI for user interface – brukergrensesnitt, det grafiske uttrykket til en nettside, en applikasjon eller et produkt.

Ser man strengt på det, kan man skille mellom de to på følgende måte:

Der UX er basert på vitenskap og gjør valg basert på fakta, er UI kunst og gjør valg basert på følelser, smak og meninger.

UX fokuserer på brukervennlighet, funksjonalitet og logikk. UI på design, farger og typografi.

Men til tross det er visse fundamentale forskjeller mellom fagene, utelukker de ikke hverandre. En god brukeropplevelse er avhengig av et bra brukergrensesnitt, og vise versa. De kan ikke leve uten hverandre.

 

Fra innsikt til mockups. Value proposition canvas på 1-2-3

 

Et nyttig verktøy å ta i bruk når man skal lage designskisser eller modeller (mockups), er å ta utgangspunkt i et value-proposition canvas – et verdiforslagslerret.

Her brukes dataene hentet fra innsiktsfasen som så konkretiseres ved hjelp av personas.

Gjennom å kartlegge denne typen kunnskap får man en ganske bra oversikt over hvilke utfordringer og muligheter som finnes i eksisterende og nye produkter.

Samtidig ser man de ulike kundetypenes pains, gains og aktiviteter, slik at disse kan adresseres og prioriteres riktig.

Disse møtes i det som kalles en problem-solution-fit hvor verdikartet ditt møter kundens profil, og når produktene eller tjenestene dine løser et problem.

Et eksempel på hvordan dette kan se ut:

Her settes alt i relasjon til hverandre og man ser hvilke muligheter som finnes av pain-relievers, gain creators og produkter eller tjenester som kan skapes for å gi reell verdi.

Prioriteringsmatrisen gir deg så en oversikt over hva som gir verdi med minst mulig innsats på kortest mulig tid, og en mulighet til å prioritere oppgaver i veien videre.

User flows og wireframes 

Når du nå har fått en oversikt over hva som bør prioriteres når, kan det være nyttig å lage enkle skisser eller wireframes slik at man får en struktur på saker og ting.

Poenget med skissene er at nettsiden din har en hensikt og et mål fra starten av.

En wireframe er enkelt forklart den strukturelle oppbygningen av nettsiden med alle elementer den skal inneholde, uten designet på toppen.

Wireframesene bidrar til å synliggjøre informasjonsstruktur, navigasjon og innhold på en enkel måte.

User flows er en visuell fremstilling av hvordan brukerne dine vil bevege seg gjennom nettsiden for å fullføre en bestemt oppgave eller oppnå et bestemt mål.

På denne måten får du en oversikt over hvor mange sider du faktisk trenger for å nå målet ditt, og forsikrer deg at alle "call to action" (CTA), sendes til den riktige landingssiden.

 

5 UX prinsipper 

 

Det er et hav av gode retningslinjer å forholde seg til i det stadig voksende UX-landskapet, men for å gjøre det enkelt, tar vi for oss følgende fem som kan være gode å ha i bakhodet.

1. Jakob’s Law

 

“Users spend most of their time on other sites, and they prefer your site to work the same way as all the other sites they already know.”

Brukerne tilbringer faktisk mer av tiden sin på andre nettsider enn din. Det innebærer at brukeren også rent konkret foretrekker og forventer seg en viss type atferd og funksjoner av din nettside.

Derfor er det uhyre viktig at innsiktsfasen inkluderer hvilke andre typer produkter, tjenester og nettsider brukerne faktisk bruker, slik at man kan ta lærdom i det og slippe å oppfinne hjulet på nytt.

Samtidig fjerner du all friksjon som kan påvirke brukeropplevelsen, og gjør opplevelsen så intuitiv som mulig.

 

2. Fitts’s Law

 

“The time to acquire a target is a function of the distance to and size of the target.”

Denne loven forteller at tiden det krever å nå et mål er en funksjon av forholdet mellom avstanden til målet og målets størrelse.

Det høres kanskje litt knotete ut, men det betyr for eksempel at CTA-knapper skal være store nok til at brukeren kan bruke dem og finne dem fort, eller at mobilversjonen av nettsiden din er tilpasset brukernes hender og skjermstørrelsen til forskjellige enheter.

I den midterste mobilen i eksemplet over, ser du at man har valgt å legge visse funksjoner helt nede i skjermen, slik at de er lett tilgjengelig for tomlene til brukeren som faktisk holder mobilen.

 

3. Hick’s Law 

 

“The time it takes to make a decision increase with the number and complexity of choices available.”

Hicks lov beskriver hvor lang tid det tar for et menneske å fatte en beslutning om en funksjon basert på antallet muligheter og hvor komplekse de er.

Jo flere muligheter, jo lengre tid vil det ta.

UX i praksis

Noen hovedelementer for et suksessfullt design er:

 

Visuelt hierarki  

Bruk visuelle hierarki slik at brukerne på en enkel og intuitiv måte kan forstå hva som er viktig og hva som hører sammen.

Prinsippet handler om å arrangere elementer på en landingsside for å vise i hvilken rekkefølge de er viktige.

Det viktigste kommer først og resten av innholdet følger en omvendt pyramide av viktighet.

På den måten sørger du for at brukerens reise gjennom innholdet flyter best mulig, samtidig som du reduserer tiden det vil ta brukeren å finne innholdet hen leter etter.

Tenk på egenskaper som størrelse, farge, kontrast, justeringen av elementer, repetisjon og elementers nærhet til hverandre.

 

Navigasjon 

Hold deg til en enkel navigasjon med begrensede valgmuligheter. Bruk brødsmulelenker («breadcrumbs») på siden for å hjelpe brukeren orientere seg.

Gjennom intuitive brødsmulelenker vet brukeren hvor hen er på nettsiden din og ser bedre hvordan den er organisert.

 

Innhold

Et bra innhold innebærer blant annet velskrevne tekster, gode overskrifter, og en brødtekst som er lett å lese.

En god kjøreregel er å ha korte avsnitt og setninger, en fornuftig bruk av mellomtitler og et godt språk. Hold det enkelt. Bruk mellomtitlene til å bryte teksten og gjøre det lettere for leseren å navigere og finne frem i innholdet ditt.

(Disse kjørereglene er også smarte fra et SEO-perspektiv. Bruk sekundære søkeord i mellomtitlene og husk å bruke h2, h3 osv.).

 

Bilder og visuelle elementer

Den siste delen handler det om å fange brukerens oppmerksomhet.

Dette kan du gjøre gjennom å bruke relevante bilder og eller visuelle elementer som lokker brukerens interesse og blikk.

Studier viser at mennesker husker 80% av hva de ser og bare 20% av det de leser. Så bildene vi bruker i kommunikasjonen vår har faktisk mye å si.

Bilder fanger brukerens oppmerksomhet og kan kommunisere komplekse budskap i løpet av sekunder. Men husk at de må være relevante, og ikke bare et «pent påfyll».

Det er som regel faktisk ved et bilde leseren starter sin leseropplevelse på en landingsside, så plasser og bruk dem klokt.

 

Call to action

Gjennom en CTA ønsker du at brukeren skal gjøre noe på nettsiden din. Det kan for eksempel være å legge noe i handlekurven, melde seg på et nyhetsbrev, eller abonnere på en tjeneste.

En god huskeregel er at en bra CTA alltid skal skape en verdi hos brukeren.

Se gjerne på CTA-knappene som dører som guider brukeren videre på sin reise. Står de overfor for mange dører blir de bare forvirret eller fortapt.

Både du og brukeren har som regel et ønsket mål (desired outcome) med nettsiden / besøket. Prøv å gjøre det så enkelt å oppnå som mulig.

Hva skal man så skrive på CTA-knappen?

Ordene du skriver på en knappen er veldig viktige. Gjør det så lettfattelig som mulig for brukeren å forstå hva som skjer når hen trykker på knappen. Du må skape en verdi for brukeren i handlingen du ønsker de skal gjøre. 

Hvorfor skal brukeren trykke på knappen?

Hvilken verdi gir det brukeren å trykke på knappen?

Svar på hva som vil skje når man bruker knappen.

CTA-knapper og design

Ser man så på hvordan man skal designe knappene, er det viktig at knappene faktisk ser ut som knapper.

Bruk farger og kontraster, eller whitespace, som får knappen til å skille seg ut fra resten av designet på siden.

Men husk alltid å A/B-teste knappene for å forsikre deg at knappene er optimalisert for dine besøkende.

Du kan teste både teksten, fargene og kontrastene for å finne ut hva som funker best for dine brukere.

Lesemønster

Det finnes mange forskjellige måter en besøkende skanner siden din på avhengig av hva slags innhold, struktur og design du har på nettsiden din.

Har du lite innhold og tekst, skanner de gjerne i et Z-mønster.

Har du mye tekst og innhold, eller sider som inneholder en video, er F-mønsteret mer vanlig.

Som du kan se er det mange ting du må tenke på når du skal designe digitale løsninger. Kravene til grundig kompetanse er mange, og kunnskapen som trengs favner et bredt felt.

Ønsker du bistand i dine utfordringer, eller trenger hjelp til veien videre, er du mer enn gjerne velkommen til å ta kontakt med oss i dag.

 

Denne artikkelen er basert på et webinar om UX som ble holdt av Robert Macli, vår senior UX-designer som har mange års erfaring med å jobbe med brukeropplevelser. Du kan se hele webinaret på vår YouTube kanal her.