Guide: UX Design proces

User Experience er den værdi, dit website giver brugerne, når de anvender dit website; Hvordan oplever de dit website? Hvilke følelser får de?

De fleste websites fokuserer ofte på brugervenlighed, hvor det skal være nemt og overskueligt at navigere rundt:

Brugerne skal uden besvær have mulighed for at komme fra A til B og derved udføre den ønskede handling, som kunne være at finde et givent produkt på en webshop og efterfølgende købe det.

Hvorfor arbejder vi med User Experience Design?

I designbranchen er der en række “best practices” og fremgangsmåder, når det kommer til webdesign og UX. Det er både gældende, hvis du skal have en helt ny hjemmeside, men også gældende hvis du allerede er online: Så kan der løbende arbejdes med at optimere hele brugeroplevelsen (UX) – men hvordan kan det egentligt være, at man skal bruge energi på dette? Og hvorfor bør du fokusere på UX? 

Det er der flere gode grunde til:

• For at give dine besøgende så god en oplevelse som muligt, da det forbedrer brugernes opfattelse af din virksomhed og produkter, hvilket øger sandsynligheden for et køb.
• For bedre at kunne forstå hvilke mål dine besøgende har, når de anvender din hjemmeside.

Designprocessen ved UX har nogle steps, som næsten altid er uundgåelige:

I en tidlig fase skal du først og fremmet definere og forstå din målgruppe: Hvem anvender din hjemmeside? Er der tale om kvindelige pensionister eller teenagere?

I takt med at du kommer længere i designfasen, bør du validere om dine udsagn holder stik og du skal spørge dig selv: Designer vi i den rigtige retning?

“Design adds value faster than it adds costs.” — Joel Spolsky, stifter af  Trello

Sådan ser vores UX Design proces ud

Det er naturligvis forskelligt fra bureau til bureau, hvordan der arbejdes med UX design og hvordan processen ser ud. Der er aldrig en “korrekt” metode, men det handler ofte om research, gentagelse og testing.

Derfor er følgende process, og dette blogindlæg, skrevet med udgangspunkt i interne metoder hos Grafikr ApS. Derudover er det skrevet i en simplificeret udgave hvor enkelte elementer også er undladt, så det er nemmere at forstå.

Lad os dykke ned i de enkelte begreber i UX-processen

Forstå

Før vores digitale designere kan begynde at designe den (kommende) hjemmeside, så er det vigtigt, at vi har defineret og forstået hvilket problem, som vores kunde sidder med; Hvad er den absolut største pain?

Derefter definerer vi bl.a. følgende:

• Hvem er websites brugere? (Se eventuelt vores indlæg: “Design til kunden, ikke til dig selv“)
• Hvilke værdier har kundens virksomhed?
• Hvad er normen for industien?
• Hvad er det overordnede mål med hjemmesiden?

Herfra brainstormer vi med kunden og fastlægger retningslinjerne, så projektet og designet kommer godt fra start. Det er altafgørende at lave et grundigt stykke forarbejde, inden man (hovedløst) kaster sig ud i at designe.

Aktiviteter undervejs “forstå”-fasen:

• Opsætning af heatmaps
• Indsamling af data fra Google Analytics
• Analyse af data

Afslutningsvis i denne fase diskuteres brugernes adfærd på hjemmesiden: Hvad er årsagen til, at de navigerer, som de gør?  Til sidst har vi afklaret følgende:

• Personas
• User stories
• Adfærd

Undersøg

Definér og klargør hvad der skal undersøges:

• Har vi arbejdet med lignende projekter eller udfordringer før?
  
• Hvad er omverdens holdning til den nuværende løsning/webdesign?

Som det første, sætter vi os i slutbrugernes position og ser webdesignet fra deres vinkel og forholder os kritisk til hvordan de enkelte elementer skal opfattes: Hvor er menuen på mobil? Hvad betyder den knap? Hvordan søger jeg på hjemmesiden?

Udover førnævnte heatmap, så er det ekstra godt hvis vi kan komme i kontakt med brugerne af hjemmesiden. Drejer det sig om en B2B-hjemmeside, hvor brugerne har et login, så er det ofte ligetil at etablere en kontakt: Her vil vi gerne undersøge hvilke udfordringer de har, når de anvender hjemmesiden. Så kan vi sammenligne kundens pain med brugernes pain; Mon de har samme opfattelse og problemer?

Skitser

Det tredje step i vores “UX design proces” handler om at skitsere sine idéer, som kan gøres på en iPad eller et whiteboard – eller pen og papir, hvis man er lidt mere oldschool 😉

Denne fase er en gentagende process: Testing og evaluering af wireframes og mockups drøftes i design-teamet – men også med udviklerne, som I sidste ende er dem, der skal vække det nye design til livs.

Aktiviteter undervejs i “sketch”-fasen:

• Skriv idéer ned
• Arbejd på simple skitser
• Kommunikation med kunde/beslutningstager: Hvad synes de om idéen?
• Ret i skitser efter feedback

Design

Når skitserne er på plads, skal der nu designes prototyper: Her får de grove wireframes fra tidligere tilføjet “styling”, så designet begynder at se mere realistisk ud. Derudover bliver de enkelte user flows og det overordnede sitemap fastlagt,

Denne fase inkluderer altså:

• Sitemap
• User flow
• Billeder og grafik
• Ikoner
• Farveskema

Et af målene i denne fase er at opnå den endelige “look and feel”, som gør en stor forskel fra de tidligere rå skitser: Nu vækker designet følelser, man kan se detaljerne og man kan fornemme hvordan websitet skal forme sig.

Hvilket tech-stack bruger vi?

• Design: Invision, Figma eller Sketch
• Billedemateriale:  Helst kundens egne billeder, ellers Shutterstock og UnSplash
• Dokumentdeling: DropBox
• Intern kommunikation: Slack
• Projektstyring: Podio

Implementering

Når alle designfiler er godkendt internt og fra kunden, kan udviklingsfasen startes. Her begynder udviklingsafdelingen at opsætte den nye hjemmeside, som altid stræber efter at levere et resultat, der er 1:1 med designet. Arbejdet bliver løbende revideret af design-teamet, så det sikres, at den rette styling og de ønskede effekter opnås.

Vigtige elementer under “implemeterings”-processen:

• Implementering af webfont
• Farveskema
• Animationer og transitions
• Hover-effekter
• “Call to action”-elementer, som f.eks. knapper

Når hjemmesiden er kodet færdig, skal den testes inden den bliver udgivet: Det bliver enten gjort af en anden kollega –  eller en person udefra, hvorefter eventuelle fejl udbedres.

Analysering

Denne fase handler ikke om at analysere selve websitet, men først og fremmest om at analysere den interne process, så den løbende kan forbedres. Vi kan stille os følgende spørgsmål:

• Hvor i fasen gik vores processer godt? Hvad skyldes dette?
• Hvor oplevede vi store udfordringer? Og hvorfor?
• Hvordan har feedback fra kunden været?
• Løser det nye produkt (læs: hjemmeside) kundens pain?
• Har vi mulighed for at forbedre det leverede produkt?

På den måde opkvalificerer vi os konstant som team og kan levere vores løsninger mere effektivt.

—

Ps., Begrebet “user experience design” stammer fra Don Norman, som I 1995 var “VP of the advanced Technology Group” hos Apple, hvor han udtalte følgende:

“I invented the term because I thought human interface and usability were too narrow. I wanted to cover all aspects of the person’s experience with the system including industrial design, graphics, the interface, the physical interaction, and the manual.”

Uanset om du er digital designer, eller driver en webshop, så håber jeg, at et indblik i vores UX design proces kan inspirere dig til at skabe din egen proces og metoder. Ydermere skulle det gerne have belyst vigtigheden af et gennemarbejdet UX design og et indblik i hvilket arbejde, der ligger bag.