Mange av oss utviklere tenker ikke så mye på design i det daglige, og mange løsninger der ute har “bare blitt til” uten noe grunnlag i design. Jeg har nå svettet meg gjennom et av Google sine UX-sertifiseringer, tygget alt, og spyttet (deler av det) ut på gullfat til dere for å gi mer innsikt i hvordan en designer jobber. Men først, hva er egentlig UX?
😍 UX, eller user experience, er et begrep som refererer til totalopplevelsen en bruker har ved anvendelse av et produkt, tjeneste eller et system.
For å få til en god brukeropplevelse, bør løsningen være:
- Anvendelig – med et klart design, struktur og formål
- Rettferdig – for mennesker med ulike evner og bakgrunner
- Fornøyelig – fremkalle positive følelser
- Nyttig – løser brukerens utfordring
Rettferdig design
La oss dvele litt ved «rettferdig», for dette er egentlig min oversettelse av begrepet equitable. Dette begrepet er kjernen i det som kalles equity-focused design.
💙 Equity-focused design handler om å designe for grupper som historisk sett har vært underrepresentert eller oversett når produkter utvikles. Det innebærer å sikre at produktet er både tilgjengelig og rettferdig for alle kjønn, etnisiteter og evner.
Men er ikke dette bare universell utforming eller inkluderende design? La oss se litt nærmere på det.
Vi kan se på tilgjengelighet som en skala. Nederst på skalaen finner vi universell utforming. Denne tilnærmingen sørger for å forutse og fjerne hindringer for å sørge for at produktet er tilgjengelig for brukere med flest mulig mennesker uavhengig av evner. Dette er en reaktiv metode som motvirker ekskludering av brukere. Ett hakk opp finner vi inkluderende design. I inkluderende design jobber man aktivt for å forstå og innpasse mangfold i løsningen på en proaktiv måte. Målet er å aktivt fremme et større mangfold blant brukere. På toppen ligger equity-focused design som går enda mer inn for å endre eksisterende systematisk urettferdighet, og er dermed en transformerende metode.
Det er viktig å tenke på tilgjengelighet, ikke bare fordi det er godt for et utvalg av mennesker, men også fordi det ofte er til nytte for oss alle. Dette forklares ofte med The Curb Cut Effect. En curb cut er et område der fortauet flater ut mot veien, ofte ved gangfelt, slik at overgangen mellom fortau og vei ikke blir så brå. Slike overganger ble først lagd som en løsning for rullestolbrukere, men er nå også nyttig for syklister, barnevogner, el-sparkesykler, varetransport og lignende.
Design Thinking
Design thinking er en kreativ tilnærming til problemløsning innen UX. Det er et rammeverk som består av fem faser som gjentas iterativt, i likhet med Scrum. Nå som vi er kjent med de overordnede egenskapene av en brukervennlig løsning, kan vi ta for oss de ulike stegene i design thinking.
- Empathize – sett deg inn i brukernes sko og forstå deres utfordringer, ønsker og behov i den konteksten eller miljøet der løsningen vil bli bruk
- Define – analyser funnene fra empatifasen og identifiser de viktigste utfordringene som trenger en løsning, og hvorfor de er viktige
- Ideate – kom med ulike løsninger og velg de mest lovende for å prototypere
- Prototype – lag prototyper av løsningene
- Test – utfør tester med potensielle brukere for å evaluere prototypene og samle verdifull tilbakemelding som kan veilede videre iterasjon og forbedring
Nå tenker du kanskje «det tar sikkert 100 år, det orker jeg ikke 😩», men man kan faktisk gjennomføre en mini-versjon av denne prosessen på så lite som en uke, også kjent som en design sprint. Merk at ikke alle utfordringer lar seg løse med en design sprint, noen ganger er det større ammunisjon som må til.
En designsprint er en tidsavgrenset prosess med de fem fasene fra design thinking rammeverket. Det er en spesifikk implementeringsplan for å løse en designutfordring innenfor en streng tidsramme, vanligvis fem hele arbeidsdager.
La oss gå inn på hvert av disse stegene for å lære mer om hva de innebærer, og hvilke verktøy en designer (kanskje du? ✨) vil bruke i hver fase.
💕 Empathize
Empathize fasen handler om å forstå brukeren best mulig. Dette kan gjøres på ulike måter, enten der er intervju, spørreundersøkelser eller annet. For å få styr på den store informasjonsflommen man blir møtt med i møte med mennesker bruker man ofte en empathy map.
🗺️ En empathy map er et lettfattelig diagram som forklarer alt designerne har lært om en type bruker. Én bruker eller aggregert (hele brukersegmentet eller en gruppe av lignende brukere).
Diagrammet har ulike utforminger, men de fleste følger et oppsett med brukeren i midten og fire felt for utsagn, tanker, handlinger og følelser. Her er et eksempel med «Ole» som uttrykker frustrasjon rundt timebestilling hos legen.
I tillegg til et empathy map vil man utarbeide en liste med såkalte pain points, som er utfordringer brukeren opplever. Sammen vil disse danne grunnlaget for videre arbeid: personas.
En persona i UX verdenen er en oppfunnet karakter som representerer et brukersegment. Det er vanskelig å ta i betraktning alle brukerne man skal lage en løsning for, og det er derfor hjelpsomt å generalisere der man kan. Det er typisk et kort med bilde, demografisk info, mål og utfordringer, bakgrunnshistorie og et utsagn. Det er dog ingen grenser for hva en persona kan inneholde, så lenge det er nyttig for designprosessen. Her er et eksempel på en persona for en «pasient-app».
Når man har laget seg noen slike kort, så kan man begynne å utlede user stories for å videre konkretisere behovene til de ulike brukergruppene.
📖 En user story er en fiktiv historie på én setning som fortelles fra en personas synspunkt for å inspirere og informere designbeslutninger. Den introduserer brukeren, beskriver en hindring og angir det endelige målet.
I dette eksempelet kunne det ha vært
«Som en gammel pensjonist med begrensede digitale ferdigheter, ønsker jeg å administrere mine timer på en enkel og intuitiv måte, slik at jeg kan opprettholde min uavhengighet og ta vare på min helse uten å være avhengig av andre».
For å illustrere hvordan brukeren vil interagere med løsningen, bruker en designer user journeys og user journey maps. En user journey er en persons opplevelse i løpet av en økt med bruk av et nettsted eller en applikasjon, som består av en rekke handlinger som utføres for å oppnå et bestemt mål. Disse tas videre til å lage en user journey map, en mer detaljert oversikt over handlingene kombinert med tanker og følelser knyttet til brukerreisen. Personen i reisen er gjerne en persona utarbeidet tidligere.
Poenget med å kartlegge en slik reise er å finne ut hvilke steg som utgjør en god reise, også kjent som en happy path, og hvilke steg bidrar til en unhappy/sad path der brukeren ikke når målet sitt. Den ultimate reisen kalles en golden path.
📝 Define
I define fasen er det på tide å ta alle funnene fra forrige fase og konkretisere det til såkalte problem statements.
❓ En problem statement oppsummerer hvem brukeren er, hva de trenger fra et design og hvorfor. Utsagnet bør samordne teamet om hvilke problemer de skal fokusere på, og være bredt nok til å gi kreativ frihet, men snevert nok til å kunne løses med en praktisk designløsning.
Disse utsagnene har som regel dette formatet:
[Navn på persona] er en [type bruker] som trenger [type brukeropplevelse] fordi [fordeler med brukeropplevelsen].
For eksempel:
Rolf er en pensjonist som trenger en intuitiv booking av legetimer fordi det vil spare han tid i telefonen som kunne blitt brukt på barnebarn.
Etter problem statements følger vanligvis hypothesis statements som et svar på hva som kan være den beste løsningen til problemet. Disse hypotesene følger ofte dette formatet:
Hvis [handling], så [utfall].
For eksempel:
Hvis Rolf kan enkelt bestille timer hos legen, så vil han få mer tid til overs i hverdagen og oppleve mindre frustrasjon.
Disse problem-løsning parene vil danne grunnlaget for neste fase.
💡 Ideate
Denne fasen kjennetegnes av idémyldring uten forsøk på å dømme eller evaluere noen av ideene. Det er flere måter å gjøre dette på.
For eksempel kan man utføre det som heter competitive audit der man ser på andre bedrifter for å få inspirasjon til hva man bør gjøre selv, men mest av alt hva man ikke bør gjøre i sin egen løsning. Dette er ikke en form for plagiat, men heller en vurdering av det eksisterende markedet.
En annen kjent teknikk er rapid sketching eller Crazy Eights der man tar et A4 ark og deler det i 8 deler, for å så skissere en ide på hver del. På denne måten kan man få ut mange ideer på kort tid.
🦾 Prototype
Før man lager en løsning bør man lage et design som kan testes med potensielle brukere. Det er flere ulike grader av design som beskriver hvor nært den likner en faktisk løsning: low-fidelity og high-fidelity.
Low-fidelity løsninger har lav kompleksitet og ser ikke så flotte ut, men de lar oss teste mange ting veldig fort. Et eksempel er en wireframe.
🖼️ En wireframe er en visuell representasjon eller skisse av en nettside eller et applikasjonsgrensesnitt. Den skisserer strukturen, layouten og funksjonaliteten til et design, vanligvis med fokus på plasseringen av grensesnittkomponenter.
En wireframe er som regel ikke-interaktiv og inneholder ingen bilder eller tekst. Et hakk videre finner man en mockup, som ligger et sted mellom wireframe og en prototype. En mockup er visuelt lik sluttproduktet, men inneholder ingen interaksjon slik som en prototype gjør.
En prototype er da en high-fidelity representasjon, som er «komplett» i både design og interaksjon. Alle disse representasjonene har sin plass i ulike deler av designprosessen, og det er fordeler og ulemper med hvert av disse. Uavhengig av hvilken representasjon man går for, så bør man passe på å følge Gestalt-prinsipper som er et sett med regler som forklarer hvordan hjernen prosesserer og organiserer visuell stimuli. For eksempel sier likhetsprinsippet at ting som ser like ut antas til å ha samme funksjon. I praksis betyr dette at to knapper som ser like ut på en skjerm bør utføre samme handling, og at brudd på dette prinsippet vil kunne forvirre brukeren og bidra til en negativ brukeropplevelse.
Etisk design
30 dagers gratis lydbok? Ja, takk! Men husk å avslutte abonnementet ditt før tiden går ut, ellers blir du belastet hundrevis av kroner. Vi vil ikke minne deg på dette, selvfølgelig, for ellers hadde vi aldri tjent penger. Høres kjent ut? Dette er kjent som forced continuity i UX verden, en av de dødelige syndene en UX designer kan begå.
Ja, selvfølgelig liker man sine egne, gamle, ekle møbler, om man ikke melder seg på dette nyhetsbrevet! Dette er et eksempel på confirmshaming der brukeren føler på skam når de ikke gjør en viss handling som løsningen oppfordrer til. Dette er jo ganske åpenbart ikke brukersentrert design, og bør aldri brukes av en anstendig designer som bryr seg om brukeren.
🧪 Test
Du har intervjuet folk, laget dine personas, brukt en million år i Figma på å lage shiny prototyper, hva nå? Den viktigste og mest avgjørende delen, testing!
Denne siste fasen vil gi deg tilbakemeldinger på arbeidet du har gjort, og bidra til neste iterasjon av design thinking prosessen. Det er mange måter å utføre testing på, blant annet usability testing. Denne metoden tester funksjonaliteten av en løsning ved å observere brukere som utfører en rekke med predefinerte oppgaver. Dette kan gjøres online, også kjent som unmoderated usability study, eller fysisk, en moderated usability study. Før man gjennomfører en slik test, er det viktig å sikre at utvalget av brukere som skal delta, representerer det mangfoldet man ønsker å adressere med løsningen. Man bør derfor ikke bare teste intern i teamet, men legge inn en innsats for å få representert ulike typer mennesker.
Underveis i testingen bør man huske på Hawthorne effect som sier at mennesker oppfører seg annerledes når de vet de blir observert. Det betyr at testpersonene dine vil kanskje prøve å være «flinke» fordi de vet de blir observert. Derfor er det viktig å presisere at man er ute etter å teste løsningen, og ikke personen selv eller personens evner.
Etter gjennomført testing er det viktig å organisere funnene på en måte som gir verdi. I UX bruker man ofte affinity diagram.
🤝 Et affinity diagram er en metode for oppsummering som organiserer data i grupper med felles temaer eller sammenhenger.
💕 Empathize
Neida, men det er virkelig en iterativ prosess!
Kilder
Adobe Firefly til AI bilde-generering
https://www.coursera.org/professional-certificates/google-ux-design?
