Oliver har lige været i Beijing i Kina. På Silk Street Market fandt han et produkt tilsvarende Orbit, som han skulle give 20 kr. for, og som virker fint. Det giver ham lyst til at undersøge, om der er mulighed for at købe et Tracker Finder-produkt i Kina og sælge det i Danmark. På Alibaba.com – en hjemmeside, hvor man kan købe produkter fremstillet i Asien, lykkes det ham at finde en Tracker Finder til 4 kr., hvis han køber 100 stk. ad gangen.

Gå ind på www.alibaba.com eller en anden hjemmeside, der sælger produkter fremstillet i Asien, og søg efter Tracker Finder.

I denne case forestiller vi os, at du/I skal hjælpe Oliver med at bygge en hjemmeside til hans forretning – en webshop.

For at hjælpe Oliver skal du/I bruge, hvad du/I har lært i dette forløb om interaktionsdesign. Og I får også nye informationer undervejs, som skal være med til at hjælpe jer i arbejdsprocessen.

I løbet af blokdagen kommer I gennem en række overvejelser, når en hjemmeside skal udvikles.

• Hvem er målgruppen?

• Hvem er bruger?

• Hvilke funktioner skal hjemmeside indeholde?

• Hvordan er konkurrencesituationen?

• Hvilke behov skal hjemmeside opfylde?

Dertil kommer, at I skal tegne en prototype inden I selv udarbejder en hjemmeside, der kan fungere som Olivers webshop.

NB! I skal lave en webshop, men betalingsfunktionen skal kun illustreres, den skal ikke fungere i praksis.

8.30-9.30 Observation og dataindsamling

Til løsning af den første opgave skal I gennemgå de 5 trin nedenfor.

Husk at I først skal diskutere, hvad casen går ud på.

Opgaven skal løses i dette dokument.

1. Diskuter casen og det stillede problem i gruppen

2. Foretag en analyse af målgruppen (se Målgrupper). Hvem tror I er målgruppen til jeres produkt og dermed hjemmesiden?

3. Foretag en analyse af brugerne. Definer den primære, sekundære og evt. den tertiære bruger (se Principper for interaktionsdesign). Hvem vil brugerne være? Kunne der tænkes at være mere end en slags brugere, og hvem kunne det være?

4. Foretag en funktionsanalyse. Definer den primære, sekundære og den tertiære funktion på webshoppen (se Principper for interaktionsdesign). Hvad er hjemmesidens primære funktion? Hvad kan den sekundære og tertiære funktion tænkes at være?

5. Foretag en analyse af konkurrencesituationen. Hvilke hjemmesider på markedet tilbyder samme eller lignende services? 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: Målgruppe, funktion og konkurrencesituation.

Opgaven skal løses i dette dokument.

Afleveres 9.30 på Lectio eller Teams - I får besked af jeres underviser.

Opgaven sendes over beskeder på Lectio.

9.40-10.00 Brainstorm

I skal nu brainstorme.

Til inspiration kan I starte med at se videoen om brainstorming:

Normalt ville vi bede jer om at finde post-it-sedler og skriveredskaber frem og følg nedenstående opskrift. Det er selvfølgelig lidt svært, når I sidder hver for sig.

En god ide kan derfor være at dele et dokument, hvor alle i gruppen kan skrive ideer. Husk at bruge nedenstående opskrift:

1. Først skal I reformulere problemet eller målet som en løsningsrettet sætning startende med “Hvordan kan vi…” , f.eks. “Hvordan kan vi tiltrække flere besøgende til vores website?”.

2. I skal derefter vælge den bedste “Hvordan kan vi …”-sætning.

3. Herefter skal I læse og forstå reglerne for brainstorming (Kilde: D.school, Stanford University):

• Døm ikke egne eller andres idéer

• Gå efter kvantitet

• En samtale ad gangen

• Opfordr til vilde idéer

• Byg videre på andres idéer

• Bevar fokus på emnet

• Vær visuel (og dokumenter)

4. I skal nu skrive jeres idéer ned på post-its (i dag bliver det på det delte dokument), og placerer dem på en væg eller bord. Vær obs på tidsbegrænsningen, så I ikke får tid til at censurere jer selv for meget.

5. Endelig skal I sortere i ideerne. I skal sortere ideerne efter gennemføringsgraden og målgruppen.

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.

10.00-10.40 Identificer behov og krav

I skal nu beslutte jer for følgende omkring den hjemmeside, I selv skal udvikle:

• Brugerspecifikation

• Funktionsspecifikation

• Specifikation af persona

• Specifikation af scenarie

(Bemærk at I allerede har arbejdet med nogle af punkterne. Men jeres brainstorm kan have ændret jeres opfattelse).

Husk at I kan læse mere her!

Produkt#2: Produktbeskrivelse og brugerrapport for jeres egen hjemmeside.

Brug dette dokument til besvarelsen.

Afleveres 10.40 på Lectio eller Teams.

10.50-11.20 Generer design

Tegn en skitse over jeres hjemmeside med fokus på den overordnede ide og også gerne detaljer i interaktionen.

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

Løs opgaven i dette dokument.

Afleveres 11.20 på Lectio eller Teams.

11.20-11.50 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 tegning 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).

12.20-14.30 Lav en hjemmeside

I skal nu lave en hjemmeside.

Når I laver hjemmesiden kan I fx bruge Google Sites (denne hjemmeside er lavet i Google Sites) eller Wix.

I har måske ikke prøvet at lave en hjemmeside før. Det kan derfor virke uoverskueligt at gå i gang. Det er forståeligt.

Men: Vores erfaring med mange elever viser, at det er meget nemt at arbejde med og let at lære!

I skal naturligvis lave hjemmesiden med udgangspunkt i dagens tidligere arbejde. Det vil sige, at jeres prototyper skal bruges, når I designer hjemmesiden.

Når I laver hjemmesiden skal I huske:

• Hvem er målgruppen?

• Hvad er de primære funktioner?

• Hvordan arbejder I med farver og kontraster?

• Hvordan har I brugt Gestaltlovene?

• Har I tænkt over affordance og mapping?

• Har I overvejet Molichs brugervenligheds-parametre:?

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.

I kan finde Screencast-O-matic her: https://screencast-o-matic.com/

Produkt#4: 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 + Screencast-O-matic video.

Afleveres 14.30 på Lectio eller Teams.