Elin Rødseth

UX/Interaksjonsdesigner

Deltakende design

Ramme: Selvstendig skoleoppgave med fokus på deltakende design og universell utforming
Mål: Identifisere og løse en tilgjengelighetsutfordring 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 og gjennomføring av brukerintervju

Forberedelsen til brukerintervjuet besto av utforming av samtykkeskjema og en semistrukturert intervjuguide, samt gjennomføring av et pilotintervju. Selve intervjuet ble gjennomført hjemme hos brukeren for å sikre en mest mulig realistisk setting. Brukeren ble presentert for Arngren.net, og spørsmålene gikk gradvis fra åpne og generelle til mer spesifikke, med hovedfokus på navigasjon. Intervjuet ble dokumentert gjennom anonymisert transkribering og feltnotater, og underveis 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 forberedte en workshop å for å lage og teste lo-fi prototyper. 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

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 vurderer at herobilde 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. I et scenario med flere brukere ville jeg i vektlagt tilbakemeldingene i større grad.