Problem og case

I skal designe og konstruere en webshop til en tøjbutik, som sælger børnetøj. 

Tøjbutikken Drømmebørn åbner en butik, som sælger børnetøj til børn i alderen 0-15 år og får adresse på Jægersborggade på Nørrebro, hvilket udvalget af tøj også afspejler. Prisklassen en middel til dyrt, hvad de selv vil betragte som smart og casual. Desuden lægger de vægt på at de sælger tøj til børn og ikke bare tøj til drenge eller piger. De har derfor ikke indrettet deres butik efter køn, men har farvekoordineret ophængningen af tøjet, således at blåt tøj hænger sammen, ved siden af brunt tøj, som igen hænger ved siden af lyserødt, etc. 

Denne indretning og fravælgelse af kønnet tøj, ønsker de også at webshoppen skal afspejle. De lægger vægt på at de ikke vil have en drenge og pige kategori på webshoppen. Til gengæld ønsker de at kunderne kan søge efter tøj ud fra farver, størrelser, tøjtype (fx bukser, trøje, etc.) og alder. Der må gerne være andre kategorier end disse. De ønsker desuden at webshoppen afspejler deres værdier og butikkens kommende indretning, således at der er en stilistisk sammenhæng. Emneordene er: casual, Nørrebro smart, lidt dyrt men også tilgængeligt for de fleste, der er villige til at bruge lidt flere penge på tøj til deres børn. 

Iterativ design - en process

Nu skal I i gang med den iterative designproces. 

Det betyder, at I nu skal arbejde med de fire faser I kan se i modellen nedenfor.

1. Identificer behov og krav

2. Generer design

3. Byg en interaktiv version

4. Evaluer design

Undervejs i processen skal I vurdere, om det er nødvendigt at gå tilbage til tidligere iterationer for at revidere tidligere processer. Se Design af interaktion, hvis I har brug for mere information.   

Identificer behov og krav

Først skal I identificere behov og krav ud fra den beskrivelse i fik af butikken, deres produkter og en analyse af markedet for børnetøj. I analysen skal I gennemgå nedenstående punkter, som også skal med i rapporten.

• Formuler kravene (klart og præcist, se ovenstående beskrivelse af butikken)

• Målgruppeanalyse (Minervamodellen) inklusiv segmentsvariabler. 

• Brugerspecifikation (primær, sekundær og tertiær bruger).

• Funktionsspecifikation (primær, sekundær og tertiær funktion på webshoppen).

• Persona og scenarium. 

• Analyse af konkurrencesituationen (hvilke hjemmesider tilbyder samme eller lignende produkter? Hvordan ser de ud? Hvordan er de opbygget, struktureret og designet? Hvem er deres målgrupper? Hvordan kan I differentiere jer fra dem, hvis I sælger lignende produkter?)  

Produkt#1: Behov og kravsrapport for jeres egen hjemmeside. 

Brug dette dokument til besvarelsen.

Afleveres på Lectio. 

Generer design 

Tegn en skitse over jeres hjemmeside med fokus på den overordnede ide og også gerne detaljer i interaktionen. Skitsen skal indeholde mindst forsiden og et eksempel på en underside, der viser en vare. I skal allerede her tænke over designet og designprincipperne. 

Produkt#2: Skitse over overordnet ide med detaljer for interaktion. 

Løs opgaven i dette dokument.

Afleveres på Lectio 

Byg interaktiv version

Lav en papirprototype over jeres hjemmeside med alle de undersider og interaktionsmuligheder, som den skal indeholde. 

At lave en papirprototype betyder, at I laver en masse skitser over jeres hjemmeside.

I skal indtegne så mange detaljer som overhovedet muligt, når I udarbejder jeres prototype.

Jeres prototype skal selvfølgelig tage udgangspunkt i De 5 skridt til godt interaktionsdesign (Principper for interaktionsdesign 2) og Molichs brugervenlighedsparametre (Design af interaktion).

Lav en hjemmeside

I skal nu lave en hjemmeside.

Når I laver hjemmesiden kan I bruge Googlesites (denne hjemmeside er lavet i Google Sites). Det er nemt at arbejde i Googlesites, men der er stadig mulighed for selvstændighed og at lave et design der matcher jeres skitser. Wix anbefales ikke, da der er for mange skabeloner og derfor ikke stor mulighed for selvstændighed i designet.  

I skal naturligvis lave hjemmesiden med udgangspunkt i dagens tidligere arbejde. Det vil sige, at jeres prototyper skal bruges, når I designer hjemmesiden. Hjemmesiden SKAL være identisk med prototypen! 

Evaluering af brugervenlighed

Gennemfør en brugervenlighedstest (se mere her) og her.

En brugervenlighedstest er en kvalitativ test, hvor man sætter rigtige brugere (eller brugerrepræsentanter) til at afprøve og evaluere en løsning. Testen følger metoden beskrevet i lektion 5 i dette forløb. Det er en velstruktureret proces, hvor der f.eks. kan gøres brug af video til dokumentation af problemerne. Når problemerne er identificeret, kan der udarbejdes forslag til forbedringer. Disse visualiseres i en prototype, som kommenteres af brugeren.

I skal nu evaluere brugeroplevelsen i forbindelse med et jeres hjemmeside. 

Opgaven er opdelt i trin.

Før testen:

1. I formulerer nogle konkrete opgaver, som brugeren skal løse på jeres hjemmeside, og så formulerer I nogle spørgsmål, I kan stille brugeren før og efter testen. 

Det er vigtigt, at I forsøger at udfordre testpersonerne, så I får grundige input til jeres hjemmeside.

Udførelse af testen:

2. Så er I klar til at teste.

3. Bed testpersonen ”tænke højt”. 

4. Når opgaven er løst så gennemfør et ”efter” interview. 

5. Både interviews og testudførelsen kan optages på Video. 

6. Under testen registrerer I, hvilke problemer brugeren havde.

Efter testen:

7. I opsummerer problemerne fra testen

8. I kommer med ideer til, hvordan problemerne kan løses, eller produktet kan forbedres

9. I skriver en konklusion på testen – som passer til jeres formålsbeskrivelse

Når hjemmesiden og brugervenlighedstesten er færdig skal I indspille en video på fx Screencast-O-matic, hvor I grundigt beskriver hjemmesidens brugervenlighed og de problemer, der kom frem under testen. Husk at bruge fagbegreber.

Produkt#3: Lav en screencast-O-matic-video, hvor I grundigt beskriver hjemmesidens brugervenlighed og de problemer, der kom frem under testen. Varighed max 5 min.

Som aflevering angives link til hjemmesiden og link Screencast-O-matic-videoen.