Bruk av Participatory Design (PD) metodikken for å løse en UU-utfordring

6 uker
Studentprosjekt - Fagskolen Kristiania
Individuell oppgave

------------------------------------------------------------------ Prototyping, Deltakende design, Brukertesting, UX-research, Iterativ utvikling, Informasjonsarkitektur
------------------------------------------------------------------

Introduksjon

Arngren.net er en unik og nostalgisk nettbutikk som tar deg tilbake til internettets tidlige dager. Med et kaotisk og fargerikt design, tilbyr Arngren.net et bredt spekter av produkter fra elektriske biler for barn til elektronikk og hobbyutstyr. Siden skiller seg ut med sin uortodokse layout og ustrukturerte produktkategorisering, som kan være både en visuell reise og en real navigasjonsutfordring.

Dette prosjektet er et skoleprosjekt som tar sikte på å transformere brukeropplevelsen på Arngren.net. Med fokus på universell utforming og deltakende designmetoder, har prosjektet som mål å forbedre tilgjengeligheten og navigasjonsstrukturen på nettstedet. Gjennom omfattende brukertesting og iterativ prototyping, var målet å skape en mer brukervennlig, intuitiv og estetisk tiltalende nettbutikk for Arngren.

Innsiktsarbeid

I første fase av prosjektet ble det utført grundig research for å forstå utfordringene ved Arngren.net. Dette inkluderte utvikling og gjennomføring av intervjuer for å samle inn data om brukeropplevelsen og nettstedets tilgjengelighet. Innsiktene fra denne fasen dannet grunnlaget for videre arbeid med participatory design, prototyping og designforbedringer.

Utforming av intervjuguiden
Jeg utformet en semi-strukturert intervjuguide for deltakende design på Arngren.net ved å bruke forelesningsmaterialet som grunnlag. For å videre forbedre intervjuguiden, brukte jeg ChatGPT til å generere et førsteutkast, som jeg deretter justerte for å passe mine behov bedre.

Pilotintervju og revidering av intervjuguide
Etter å ha gjennomført et pilotintervju og mottatt tilbakemeldinger, gjorde jeg følgende endringer i guiden:

Introduksjon:
La større vekt på deltakernes personlige erfaringer for å fremme åpne diskusjoner.

Generelle oppfatninger:
La til spørsmål om hvordan designvalg, som tekstformatering og fargevalg, påvirker tilgjengeligheten.

Spesifikke utfordringer:
Utvidet spørsmålene for å utforske hvordan navigasjonshjelpemidler og multimedieelementer påvirker brukeropplevelsen.

Intervjujusteringer:
Introduserte et sterkere fokus på deltakerens tilbakemeldinger for målrettet redesign basert på deres innsikt.

Gjennomføring av intervju

Intervjuet ble gjennomført tidlig om morgenen hjemme over en kopp kaffe, noe som skapte en avslappet atmosfære. Deltakeren var engasjert og ga utfyllende svar, dette førte til at intervjuet var effektivt og produktivt. Selv om intervjuet var omtrent 15 minutter kortere enn de anbefalte 30 minuttene, var den tiden jeg fikk, svært innsiktsfull.

Viktige sitater fra intervjuet:

"Dette var veldig rotete."

"Dette ser ut som en typisk reklameside fra tidlig internett."

"Selv om det er mange farger, er ingenting kategorisert på en fornuftig måte."

"Jeg håper ingen lager slike sider lenger."

Gjennom denne innsikten ble det tydelig at det er et stort behov for å forbedre både den visuelle presentasjonen og navigasjonsstrukturen på Arngren.net. Prosjektet fokuserte videre på å implementere disse forbedringene gjennom iterative designprosesser og kontinuerlig brukertesting for å sikre at nettstedet ble mer brukervennlig og tilgjengelig for alle.

Designidéer

Basert på intervjuinnsiktene, ble flere designforbedringsideer utviklet, hvor jeg valgte å legge hovedfokus på den første:

Strukturerte seksjoner/kolonner:
Kategorisere menyer, bilder og produkter tydelig.

Filter- og søkefunksjoner:
Tillate brukere å raskt finne ønsket innhold.

Hierarkisk navigasjonsstruktur:
Reflektere innholdskategoriseringen for intuitiv navigering.

Utarbeiding av LoFi Prototype #1

Intervjuinnsiktene førte til et stort fokus på å forbedre kategoriseringen på siden, samt å sikre at bildene i hver underkategori hadde samme størrelse. Tilbakemeldinger fra en sesjon i klassen om prototyping viste behovet for mer fleksibilitet i de tidlige designfasene for å fremme mer meningsfull brukerinteraksjon og tilbakemeldinger.

Utarbeiding av LoFi Prototype #2

I den andre iterasjonen introduserte jeg dynamiske elementer med bevegelige deler for bedre manipulering og testing. Til tross for disse endringene, var prototypen fortsatt for rigid og begrenset i brukerinteraksjonen.

Observerte problemer:

• Utilstrekkelig antall kolonner.
• Uklar navigasjon for å gå tilbake til tidligere sider.
• Manglende interaktive elementer som 'call to action'-knapper.

Videreutvikling av LoFi Prototype #2

Før brukertesten forberedte jeg et bredere utvalg av komponenter, som ulike ruter, menyer og knapper. Dette inkluderte både en versjon med flere kolonner og en uten noen kolonner for å gi større fleksibilitet til deltakeren.

Valg av testmetode

Jeg valgte en oppgavebasert brukertest for å måle prototypens effektivitet og brukertilfredshet og observere hvordan deltakeren interagerer med prototypen i realistiske scenarioer for å identifisere spesifikke bruksutfordringer.

Viktige punkter fra brukertest 1

Sju hovedpunkter kom fram fra den første brukertesten, som fremhevet områder for forbedring:

Konsistent navigasjon:
Klar og konsistent navigasjonsstruktur.

Kategori og undertemaer:
Godt definert og visuelt konsistent kategorisering.

Innholdspresentasjon:
Strukturert presentasjon av produkter med klare beskrivelser.

Filtrering og navigasjonsvalg:
Nyttig filtreringssidepanel for rask tilgang til ønskede varer.

Tilgjengelighet og informasjonsknapper:
Viktige knapper som "Kontakt oss" bør være lett tilgjengelige.

Minimalistisk tilnærming:
Redusere visuell støy for en brukervennlig opplevelse.

Søkefunksjonalitet:
Implementere en søkefunksjon for enkel navigasjon.

Måling av brukervennlighet

Efficacy:
Vurderte hvor godt deltakeren kunne utføre forhåndsdefinerte oppgaver.

Satisfaction:
Prioriterte brukertilbakemeldinger om designets estetikk og interaksjon.

Efficiency:
Ikke fokusert på hastighet da det ikke var kritisk for prosjektets hensikt i denne fasen.

Videreutvikling av design

Basert på deltakerens tilbakemeldinger fokuserte jeg på å løse deltakerens bekymringer om overveldende visuell presentasjon og inkonsekvent fargebruk, for å forbedre nettstedets tilgjengelighet og brukervennlighet.

Viktige punkter fra brukertest 2

Den andre brukertesten på en høyoppløst prototype viste betydelige forbedringer:

• Deltakeren fant fortsatt toppen av siden rotete på grunn av annonser.

• Inkonsekvente skrifttyper i venstremenyen forstyrret enhetsfølelsen.

• Forbedret bildepresentasjon og produktkategorisering ble positivt bemerket.

Videre iterasjoner på design

Etter brukertest nummer 2 valgte jeg å initiere et fullstendig redesign av Arngrens nettsted, med et minimalistisk og visuelt tiltalende oppsett. Dette inkluderte:

• Omstrukturert navigasjon og forbedret kategorisering av sidemenyen.

• En forenklet toppmeny med kun ett søkefelt.

• En redesignet, mer innbydende logo.

Til tross for ønsket om breadcrumbs, inkluderte jeg det ikke, for å fokusere på WCAG 1.3.2, som vektlegger meningsfull innholdsrekkefølge.

Forankring i WCAG, designprinsipper og heuristikker

Heuristikker (Nielsen's heuristics)

Estetisk og minimalistisk design:
Forenklet design hjelper brukeren å fokusere på innholdet.

Konsistens og standarder:
Sikret en enhetlig brukeropplevelse ved å følge plattformstandarder.

Designprinsipper

Kontrast:
Bruk av flere grønne nyanser for høy kontrast.

Hierarki:
Klarere kategorisering ved bruk av størrelse, farge og plassering.

White Space:
Økt bruk av white space for å unngå visuell forvirring.

Enhet:
Konsistent stil og fargebruk for en helhetlig brukeropplevelse.

WCAG-suksesskriterium

1.3.2 Meningsfylt rekkefølge:
Sikrer at innholdet presenteres i en logisk rekkefølge som hjelper brukere, inkludert de med hjelpeteknologier, å navigere effektivt.