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:

• 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.

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.

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:?

Når hjemmesiden er færdig skal I indspille en video på fx Screencast-O-matic, hvor I grundigt beskriver hjemmesidens brugervenlighed.

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 demonstrerer designet og interaktionen på siderne (tag udgangspunkt i punkterne ovenfor, men udvid gerne!).

Varighed max 3 min.

Som aflevering angives link til hjemmesiden + Screencast-O-matic video.

Afleveres 14.30 på Lectio eller Teams.