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.
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.
Identificer behov og krav
Generer design
Byg en interaktiv version
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.
Når I har læst både "Problem og Case" samt "Iterativ design - en process" er i klar til at gå videre til Opgave 2.
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.
Udfyld dette dokument til besvarelsen.
Afleveres på Lectio kl. 9.30.
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.
Afleveres på Lectio 10.00.
Eksempel på en skitse...
Lav en papirprototype som udkast til 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. Se eks. på papirprototype nedenfor.
Jeres prototype skal selvfølgelig tage udgangspunkt i De 5 skridt til godt interaktionsdesign (Principper for interaktionsdesign 2) og Molichs brugervenlighedsparametre (Design af interaktion).
Afleveres på Lectio kl. 11.00.
I skal nu lave en hjemmeside.
Når I laver hjemmesiden skal I bruge Googlesites (denne hjemmeside er lavet i Google Sites). Det er nemt at arbejde i Googlesites, og der er stadig mulighed for selvstændighed og at lave et design der matcher jeres skitser. I må ikke bruge Wix eller lignende skabelonbaserede programmer, 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! Vi vurderer jeres hjemmesidedesign sammenlignet med jeres skitse.
Hjemmesiden skal indeholde:
Landing page (forside)
Mindst 4 undersider med udgangspunkt i teksten fra opgave 1.1. kom med eksempler på mindst 10 varer med beskrivelser og billeder.
En imiteret købsproces (kurv, betaling, osv.)
Sign up til nyhedsbrev
Bør være færdig kl. 13.00. Skal ikke afleveres på Lectio men benyttes til opgave 6.
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.
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.
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.
7. I opsummerer problemerne fra testen i 5-10 linjer.
8. I udfylder skemaet fra brugervenlighedstesten (se eks. her).
9. I kommer med ideer til, hvordan problemerne kan løses, eller produktet kan forbedres.
10. I skriver en konklusion på testen – som passer til jeres formålsbeskrivelse i 5-10 linjer.
Når hjemmesiden og brugervenlighedstesten er færdig skal I indspille en video på fx ScreenPal , hvor I grundigt beskriver hjemmesidens brugervenlighed og de problemer, der kom frem under testen. Husk at bruge fagbegreber.
Produkt#3: Lav en screenPal video, hvor I gennemgår jeres hjemmeside og grundigt beskriver
hjemmesidens opbygning, hvort I sammenligner papirprototypen med den endelige hjemmeside med fokus på ligheder og forskelle
brugertyper og niveauer af grænseflader
brug af Normans designprincipper og kontrast, typografisk hierarki samt Gestaltlovene på hjemmesiden
brugervenlighedstesten med evalueringen og de problemer, der kom frem under testen
Varighed 6-7 min.
Som aflevering angives link til hjemmesiden og link Screenpal videoen. I kan f.eks. uploade den til youtube (skjult) og sende os linket i et dokument.
Afleveres på Lectio 14.30.