Elin Rødseth

UX/Interaksjonsdesigner

Deltakende design

Ramme: Selvstendig skoleoppgave med fokus på participatory design-metodikk
Mål: Identifisere og løse en UU-utfordring på Arngren.net. Forbedre navigasjon gjennom brukerinnsikt.
Mann i workshop-situasjon
Deltakende design workshop

Universell utforming og WCAG

Ved gjennomgang av Arngren.net fant jeg brudd på samtlige WCAG prinsipper. Jeg valgte å fokusere på suksesskriterie 3.2.3 - konsekvent navigasjon.

Brukertesting og kvalitativ innsikt

Deltakeren

Deltakeren er en mann som til daglig jobber med backend-utvikling.

Forberedelse til brukerintervju

Jeg utformet et samtykkeskjema og en semistrukturert intervjuguide. Jeg gjennomførte pilotintervju, og gjorde noen justeringer.

Gjennomføring av brukerintervju

Jeg gjennomførte intervjuet hjemme hos brukeren for en realistisk setting. Brukeren ble presentert for Arngren.net og spørsmålene gikk fra å være åpne og generelle til å kretse rundt fokus for testen: navigasjon. Intervjuet ble dokumentert med anonymisert transkribering og feltnotater. Underveis i intervjuet ble deltakeren utsatt for en situasjonsbetinget funksjonsnedsettelse i form av distraksjoner fra en hund.

Skjermbilde av Arngren.net

Koding

Jeg kodet tekstmaterialet fra intervjuene med bruk av åpen koding, hvor kategoriene manifestere seg etter hvert som materialet ble lest. Jeg kodet etter fragment fordi det flere steder var ulike koder representert i samme setning. Hver kategori ble representert av en farge.

Jeg forsøkte å se ekstra godt etter fragmenter som beskrev brukerens opplevelse av navigasjonen.

Skjermbilde av kodet intervju
Skjermbilde av kodet intervju

Brukersitater

"Du får jo en palett av muligheter med en gang, så hvis man ikke går dit med et spesifikt produkt i tankene, så får du masse forslag"
"Sånn sett ligner det jo kanskje mer på en fysisk butikk hvor du kan se deg rundt i et rom og så gå dit du vil"
"Jeg vil få levert og betale, sånn som jeg vil. Bare putte i handlekurven, og så blir jeg glad og fornøyd"
"Jeg ville ønsket meg pallett sånn som nå og søkebokser og kategorier i tillegg"
"Jeg søker etter mening. Hvorfor er det så mye forskjellige farger? Hvorfor!"

Isolasjon av problemet

Basert på innsikten fra kodingen isolerte jeg problemet oppsummert i tre punkter:

  • Informasjon om kjøpsprosess
  • Meny/kategorisering
  • Konsekvent presentasjon

Designideen min gikk ut på å forbedre alle tre punkter med hovedvekt på meny/kategorisering. Jeg ønsket å lage færre og tydeligere kategorier, og samtidig begrense visuelt støy for å gjøre navigasjonen lettere å oppfatte.

Bygging av lo-fi prototype

Jeg lagde en lo-fi prototype bestående av A3 ark som representanter for landingssiden på Arngrens.net og løse papirkomponenter som representanter for knapper, logoer og bilder.

Workshop med lo-fi prototype komponenter
Workshop med lo-fi prototype komponenter

Brukertest med lo-fi prototype

Under brukertesten ønsket jeg å måle brukervennlighet på brukertilfredshet.

Brukeren ble presentert for en nærmest blank flate med løse komponenter og tegneutstyr. Brukeren involverte seg og lagde en lo-fi prototype. Løsningen inkluderte en venstremeny, hovedkategorier midt på siden, tydelig informasjon om kjøpsprosess, en åpen handlekurv på høyre side og en bloggseksjon i footer.

For å legge til rette for videre utforskning la jeg opp et løsningsforslag. Brukeren likte deler av det og lagde til slutt en tredje versjon som han sa seg fornøyd med. Denne gangen inkluderte prototypen et herobilde, en collage, og flere kategorier enn i det originale forslaget.

Det var fortsatt viktig for brukeren med tydelighet rundt kjøpsprosess og enklere navigasjon.

Brukertest med lo-fi prototype

Vurdering av brukerens forslag

Jeg gjorde en heuristisk gjennomgang av brukerens lo-fi prototype og oppdaget at mange av forslagene kommer i konflikt med god praksis for brukervennlighet. Bla. Nielsens heuristikk nr. 8: Estetisk og minimalistisk design, og Hicks law: Jo flere valg en bruker får, desto lengre tid tar det å ta en beslutning.

Jeg tolker at det ikke er heldig å presentere to ulike menyvarianter på siden. I tillegg er det lite mobilvennlig.

Ideen med åpen handlekurv er heller ikke mobilvennlig, og i tillegg bryter den med Nielsens heuristikk 2 og 4 som oppfordrer til bruk av etablerte konvensjoner. Her taler også Jakobs Law for å holde seg til løsninger brukerne kjenner fra andre flater.

Disse kognitive prinsippene er også grunnen til at jeg ikke ønsket å implementere blogg i footer.

Hi-fi prototype

Jeg laget en prototype av landingssiden i desktopformat.

Etter brukerens innspill implementerte jeg tydelig informasjon om kjøpsprosess i form av posten, postnord og vippslogo i header, søkefelt, herobilde og collage. I intervjuet utrykte brukeren begeistring for palletten av muligheter og retroestetikken som finnes på Arngrens.net, og jeg mener at herobilde og collage kan bidra til å holde på følelsen av at man har kommet til en nettside med et uvanlig og spektakulært utvalg.

Siden funksjonene i brukergrensesnittet påvirkes av estetikken rundt (Kurosu og Kashimura, 1995) implementerte jeg bilder og farger for å skape en reell kontekst for navigasjon.

Hi-fi prototype av Arngren landingsside

Akseptansetest

Brukeren min likte ikke forslaget jeg la frem. Han savnet de elementene han selv hadde foreslått.

"Det var ikke dette jeg ønsket meg. Jeg liker det ikke"

Jeg valgte å stå ved avgjørelsene begrunnet i avsnittet over, og gjorde ingen endringer basert på akseptansetesten.