Stappenplan

Stap 1

De eerste stap besteed je aan de projectvoorbereiding. Een aantal opdrachten doe je individueel en een aantal samen met een medestudent die hetzelfde product gekozen heeft.

De voorbereiding bestaat uit:

 

Uren inschatten en tijdschrijven (individueel)

Als je gaat werken voor een opdrachtgever/bij een bedrijf moet je weten hoeveel uren je nodig hebt om een project af te ronden. Daarnaast moeten de uren die je maakt doorberekend worden aan de klant. Wanneer je als freelancer gaat werken wordt je betaald voor de uren die je werkt.

Je gaat inventariseren welke (deel)producten je moet maken en maakt daarbij een inschatting van de tijd die je nodig denkt te hebben per (deel)product. Gebruik hiervoor het tijdschrijfformulier. Maak een totaaltelling van de ingeschatte uren.

Deze ureninschatting plaats je als .pdf in je container.

Per onderdeel noteer je hoe lang je er echt over gedaan hebt en wat het resultaat is. Plaats het tijdschrijfformulier na elke stap als .pdf in je container.

 

Onderzoek naar regels, tips en eisen (met een medestudent)

Voor het onderzoek naar regels, tips en eisen bestuderen jullie de onderstaande links:

Noteer hoe jullie deze onderdelen in je eigen webshop gaan verwerken.

Bijvoorbeeld:

In mijn webshop ga ik het Kamer van Koophandelnummer in de footer vermelden.

Dit onderzoek verwerk jullie in een verslag, het verslag plaats je als .pdf in je container. Vermeld in het verslag ook hoe jullie de taken verdeeld hebben/wie welk onderdeel heeft gedaan.

 

Onderzoek product en concurrentie (met een medestudent)

Voor het onderzoek naar het product en de concurrentie gaan jullie minstens 6 kleine webshops met vergelijkbare producten beoordelen. De kwaliteit van een website beoordelen is niet altijd even makkelijk.

Je gebruikt hierbij onderstaande checklijst. Voor elk punt (totaal 18 punten) maak je minimaal 1 screenshot van een goed, of juist fout, voorbeeld van de 6 onderzochte webshops. Bij elk screenshot beschrijf je je bevindingen en je conclusie voor je eigen webshop.

Bijvoorbeeld:

 

Checklijst

    Vindbaar

  1. Op welke plaats staat de site in de zoekresulaten van Google? Geef aan welke zoekwoorden je ingetikt hebt.
  2. Welke beschrijving staat er onder de link. Geef aan welke tekst of woorden, naar jouw idee,
    uitnodigen om naar de site te gaan?

    3. Teksten

  3. Welke tekst maakt meteen duidelijk wat je op de site kunt? Waar staat deze tekst?
  4. Is er niet te veel tekst gebruikt? Is de informatie beknopt en nodigt deze uit tot lezen?
  5. Is de indeling (hiërarchie: gebruik van verschillende niveau's koppen en platte tekst) overzichtelijk en gebruiksvriendelijk? Korte alinea's (vijf regels per alinea) met een kop die de lading dekt.

    6. Usability (gebruiksvriendelijk)

  6. Aan welke elementen kun je zien voor welke doelgroep de site is?
  7. Waaraan kun je zien op welke pagina je bent?
  8. Waaraan kun je zien waar je binnen de site naar toe kan?
  9. Wat vind je van de lay-out? Is alles netjes uitgelijnd?
  10. Door welke onderdelen wordt je echt verleid tot de aanschaf van het product?
  11. Is het makkelijk om een product aan te schaffen? Waaraan zie je dat?
  12. Vind je de site betrouwbaar? Waarom?

    13. Grafisch design

  13. Is er een huisstijl en wordt deze op de hele website gebruikt?
  14. Wat vind je van de verhouding tekst/afbeeldingen?
  15. Zijn de lettertypen die gebruikt zijn prettig leesbaar? Is er gebruik gemaakt van schreef- of schreefloze letters?

    16. Techniek

  16. Is de site valide (HTML en CSS)?
  17. Ziet de site er in verschillende browser hetzelfde uit?
  18. Is de site goed zichtbaar op mobile?

Dit onderzoek verwerk jullie in een verslag, het verslag plaats je als .pdf in je container. Vermeld in het verslag ook hoe jullie de taken verdeeld hebben/wie welk onderdeel heeft gedaan.

 

Onderzoek naar doelgroep (individueel)

Voor het onderzoek naar de doelgroep ga je 2 personen uit de doelgroep interviewen en observeren. Noteer naam, leeftijd en woonplaats van de testpersonen (maak, als het mag, een foto). Je zult deze testpersonen bij elke stap in het proces nodig hebben.

Je laat op internet zoeken naar het product. Tijdens het onderzoek kijk je wat de testpersoon doet en stel je vragen waarom hij/zij het zo doet.

Gebruik het script uit de training:

  • Stel je voor aan je testpersoon. Leg uit het doel uit van de test.
  • Stel hierna de volgende vragen en let op wat de persoon doet:
    • Stel je wilt het product kopen. Zou je hiervoor internet gebruiken? 
    • Welke browser en apparaat gebruik je hier dan voor?  
  • Laat de testpersoon het apparaat pakken die zij/hij meestal gebruikt en geef de volgende opdrachten:
    • Begin bij http://www.google.com en doe alsof je het product wilt gaan kopen. Vertel hierbij hardop wat je denkt!
    • Welk zoekwoord gebruik je?  Waar let je op bij de zoekresultaten? 
    • Klik één van de resultaten aan en bekijk de pagina een paar seconde. Kijk nu weg en vertel wat je hebt onthouden van de pagina (zonder te spieken!) 
      • Is het meteen duidelijk wat je kunt doen op deze site?
    • Kijk naar een paar sites en kies je favoriete site uit.
      • Waarom spreekt deze site je het meest aan? 
    • Probeer het product te vinden op de site. 
    • Nu je het product hebt gevonden, ga door het bestelproces, maar klik niet op de laatste knop om te bestellen. 
      • Vertel wat je vindt van het bestelproces. 
    • Ga nu naar een andere site en kies hier ook het product uit.  
      • Welke site heeft je voorkeur? Waarom?      
    • Als je het kon, hoe zou je de site verbeteren?     
  • Bedank je testpersoon voor zijn medewerking

Dit onderzoek verwerk je in een verslag met conclusies, het verslag plaats je als .pdf in je container.

 

Gebruikersprofiel en persona (individueel)

Een gebruikersprofiel is een denkbeeldige beschrijving van de gebruiker. Je maakt het gebruikersprofiel aan de hand van dit formulier. Beantwoord alle vragen zo uitgebreid mogelijk. Zo krijg je een duidelijk beeld van de fictieve persoon. Welke krant iemand leest, welke tv-programma's iemand kijkt, etc. zegt veel over die persoon.

Van daaruit maak je een persona in Photoshop. Dit is een verbeelding van de fictieve persoon uit de doelgroep. Tijdens alle stappen kijk je steeds terug naar de persona. Je toetst of de producten die je bedenkt geschikt zijn voor deze persoon. Zou deze persoon het product kopen? Zie hiervoor UXD-module User.

Het formulier van het gebruikersprofiel plaats je als .pdf in je container.

De persona als plaats je als .jpg in je container.

 

Je mag pas naar stap 2 wanneer de producten zijn goedgekeurd!!

 

Producten en criteria

(naar boven)

Stap 2

Bij stap 2 houd je je bezig met het functioneel en visueel concept. Een aantal opdrachten doe je individueel en een aantal samen met een medestudent die hetzelfde product gekozen heeft.

 

User story's en MoSCoW (met een medestudent)

Bij stap 2 begin jullie met het maken van de user story's. Jullie beschrijven alle doelen (minimaal 50) die een gebruiker kan/wil uitvoeren.

Bijvoorbeeld:

Als een geregistreerde gebruiker, wil ik een nieuw wachtwoord kunnen aanvragen zodat ik weer toegang kan krijgen als ik mijn wachtwoord vergeten ben.

Jullie geven aan de user story's een prioriteit met behulp van MoSCoW.

In je projectgroepje bespreken jullie de user story's en vullen deze aan en verbeteren deze.

Kijk voor meer informatie over user story's en MoSCow naar de UXD-module Design

De user story's met prioriteiten plaats je als .pdf in je container. Vermeld hierbij ook hoe jullie de taken verdeeld hebben/wie welk onderdeel heeft gedaan.

 

Inventarisatie (met een medestudent)

Vanuit de user story's maak je de inventarisatie. Je bedenkt per user story wat de gebruiker nodig heeft om die story uit te voeren.

Voorbeeld:

Als een geregistreerde gebruiker, wil ik een nieuw wachtwoord kunnen aanvragen zodat ik weer toegang kan krijgen als ik mijn wachtwoord vergeten ben.

Inventarisatie:

Het resultaat van deze inventarisatie zet je in een exceldocument.

Dit document plaats je als .pdf in je container. Vermeld hierbij ook hoe jullie de taken verdeeld hebben/wie welk onderdeel heeft gedaan.

Voor de gebruikerstest (cardsorting) schrijf je deze inventarisatie op post-its per user story.

Kijk voor meer informatie over inventarisatie naar de UXD-module Design

 

Activiteitendiagram (met een medestudent)

Van de "flow" van het bestellen en betalen teken jullie een activiteitendiagram, vanaf het moment dat een klant iets bestelt (in de winkelwagen stopt) tot en met de bevestigingsmail dat de bestelling en betaling geslaagd is. Denk hierbij aan keuzes zoals: met of zonder account bestellen, is het factuuradres ook het bezorgadres, verder winkelen of afrekenen.

Kijk voor meer informatie over het activiteitendiagram naar de UXD-module Design

Het activiteitendiagram plaats je als .jpg in je container. Vermeld hierbij ook hoe jullie de taken verdeeld hebben/wie welk onderdeel heeft gedaan.

 

Moodboard (individueel)

De sfeer van je visuele concept leg je vast in een moodboard. Met welke belofte ga je het product aan de doelgroep verkopen, welke emotie spreek je aan? Spreekt het jouw persona aan?

Het moodboard plaats je als .jpg in je container.

Voorbeelden van moodboards:

 

Styleboard (individueel)

De vormgeving van de user interface bereid je voor door het maken van een styleboard. Het styleboard bevat minstens:

Kijk voor meer informatie over het styleboard naar de UXD-module Design

Het styleboard plaats je als .jpg in je container.

Voorbeelden van hoe een styleboard er uitziet zie je hieronder, LET OP hierin staan niet alle onderdelen die jij moet plaatsen in je styleboard.

 

 

Gebruikerstest (individueel)

Met de post-its van de inventarisatie, het activiteitendiagram en het styleboard ga je terug naar je twee testpersonen.

Je vraagt de testpersonen om een zgn. cardsorting uit te voeren. Hierbij laat je de testpersonen de post-its bekijken en plaatsen onder een te bepalen kopje/pagina. Alle user story's komen op deze manier aan bod en je ontdekt dat de testpersonen misschien onderdelen missen, onderdelen overbodig vinden of onderdelen op een andere plaats willen dan jij in gedachte had. Deze feedback noteer je zodat je deze kunt verwerken. Je maakt een foto van de uiteindelijke cardsorting van alle testpersonen (totaal twee foto's).

Voorbeeld van cardsorting:

Je laat de testpersonen het activiteitendiagram doorlopen. Ook hier zullen de testpersonen feedback geven op de flow. Heb je aan alle stappen gedacht? Bijvoorbeeld: kan het product als cadeautje worden ingepakt en verzonden naar een andere persoon? Noteer de feedback die je krijgt.

Je vraagt aan de testpersonen feedback op het styleboard. Voelen zij zich aangesproken door de vormgeving? Zijn alle onderdelen aanwezig? (zie beoordelingscriteria)

De resultaten van de gebruikerstest verwerk je in een verslag (tekst en foto's), het verslag plaats je als .pdf in je container.

Je mag pas naar stap 3 wanneer deze producten zijn goedgekeurd!!

 

Producten en criteria

  • user story's
    • de story's beschrijven alle doelen die de gebruiker kan/wil uitvoeren op de website (minimaal 50 story's)
    • de user story's geven blijk van een eigen idee over de functionaliteit van de webshop
    • de prioriteit van de story's is aangegeven met MoSCoW
  • inventarisatie
    • de inventarisatie is per user story uitgevoerd
    • de inventarisatie is op post-its geschreven
    • je hebt nog GEEN pagina's ingedeeld
  • activiteitendiagram
    • geeft een volledig beeld van de stappen van het bestel- en betaalproces
    • is gemaakt volgens de standaard (juiste symbolen)
  • gebruikerstesten
    • de testen zijn uitgevoerd met minstens 2 testpersonen (naam en leeftijd vermelden)
    • de testen zijn vastgelegd met foto's
    • je hebt de feedback van de gebruikers vastgelegd en verwerkt
  • moodboard
    • geeft een goed beeld van waar je naar toe wilt met de creatie
  • styleboard
    • het styleboard bevat minstens:
      • typografie en stijl van koppen <h1>, <h2>, enz.
      • typografie en stijl van platte tekst (meerdere regels)
      • menu/navigatie (met hover en activelink)
      • opsomming
      • kleuren
      • formuliervelden
      • knoppen, call to action button(s)
      • logo
      • stijl van visuals
  • tijdschrijfformulier
    • je hebt de tijd en het resultaat bijgehouden

 

(naar boven)

Stap 3 (individueel)

Bij stap 3 maak je het functionele, het interactie ontwerp en het visuele ontwerp van de website. In dit project moet je ontwerp geschikt zijn voor desktop en laptop.

 

Wireframes

Je begint met alle elementen uit de inventarisatie te verdelen over de verschillende pagina's in vorm van wireframe-schetsen. Je zorgt ervoor dat ook het activiteitendiagram omgezet is in wireframes van de opeenvolgende schermen. Vergeet ook niet de onderdelen uit je verslag over regels, tips en eisen mee te nemen. Bijvoorbeeld: KvK- en BTW-nummer (dit zijn ook user story's).

Kijk voor meer informatie over wireframes naar de UXD-module Design

De wireframes scan je in en plaats je als .jpg in je container.

 

Functioneel prototype

Wanneer je tevreden bent over de indeling, zet je de schetsen om in een aanklikbaar digitaal fuctioneel prototype die je maakt in Adobe XD. Wanneer je liever werkt met html, dan mag je de wireframes uitwerken in html. Let er dan wel op dat het alleen een functioneel prototype is. Dus zonder kleuren en visuals. De betalingsflow moet je simuleren (alle stappen tot en met de bevestigingsmail).

Kijk voor meer informatie over het functioneel prototype naar de UXD-module Design

Deel de Adobe XD bestanden en plaats de links in je container.

 

Voorbereiding realisatie

Je bereidt ook de realisatie voor. Dit wil zeggen dat je de teksten met koppen schrijft en alle visuals verzamelt en geschikt maakt voor publicatie op web (opslaan voor web in Photoshop op het juiste formaat en zo klein mogelijk (kb)).

Voorbeeld voorbereiding tekst:

Voorbeeld screenshot linksmap:

 

De teksten plaats je als .pdf in je container, het screenshot van je linksmap (met alle details: naam, afmetingen, grootte Kb, etc.) plaats je als .jpg in je container.

 

Visueel ontwerp

Het visuele ontwerp bestaat uit voorbeelden van alle unieke pagina's: productoverzicht, productpagina, winkelmandje, inloggen/registreren, betaling, bevestiging, over ons, etc. Je maakt een mini-webshop met 12 producten. Als je ervoor kiest om bijvoorbeeld 6 producten op de productoverzichtspagina te plaatsen dan heb je 2 productoverzichtspagina's. Je hoeft dan maar één productpagina uit te werken want deze zien er hetzelfde uit. Je visuele ontwerp maak je in Photoshop.

Voorbeeld visueel ontwerp van de productoverzichtspagina:

Alle unieke pagina's van het visuele ontwerp plaats je als .jpg in je container.

 

Gebruikerstest

Het functioneel prototype laat je testen door je testpersonen. Geef de testpersonen opdrachten aan de hand van de user story's zoals bijvoorbeeld:

  • een product te bestellen en afrekenen
  • inloggen
  • registreren
  • een product bij een vriend(in) laten bezorgen
  • iets uit de winkelmand verwijderen
  • etc.

Observeer en noteer de opmerkingen die gemaakt worden. Beschrijf de conclusies en verbeterpunten.

De resultaten van de gebruikerstest verwerk je in een verslag, dit verslag plaats je als .pdf in je container.

Je mag pas naar stap 4 wanneer deze producten zijn goedgekeurd!!

 

Producten en criteria

 

(naar boven)

Stap 4 (individueel) Start niet later dan dinsdag 6 juni!

 

Eerste versie definitief ontwerp

In deze stap maak je de eerste versie van het definitieve ontwerp in vorm van een visueel prototype gemaakt in html/css.

Plaats de link naar de eerste versie van het definitieve ontwerp in je container.

 

Gebruikerstest

Aan het eind van stap 4 staat de website online en test je de website. Je gebruikt hiervoor het volgende testscript:

Laat de testpersoon plaats nemen achter de computer en stel ze de volgende vragen

  • Ga naar [url webshop].
  • Vind de juiste [een product uit de webshop]. Ga door het koopproces.
  • Heb je gevonden waar je naar aan het zoeken was? Als dit niet een test was, zou je de aankoop hebben gedaan? Waarom of waarom niet?
  • Als het nodig is om de aankoop te retourneren en je geld terug te krijgen, hoe zou je dat doen?
  • Heb je vertrouwen in dat deze site een terugbetaling zou geven?
  • Ervaar je de winkel als betrouwbaar? Waarom?
  • Registreer jezelf als nieuwe klant
  • Log in als bestaande klant
  • Bestel een product en laat het bezorgen bij een vriend(in) als cadeautje
  • Plaats een product in het winkelmandje en verwijder het
  • Probeer de verschillende betalingsmogelijkheden uit


Afsluitende vragen:

  • Wil je deze site in de toekomst te gebruiken om soortgelijke producten aan te schaffen (leg dan uit waarom of waarom niet)?
  • Hoe zou je deze site te verbeteren?
  • Wat vond je leuk aan [URL]?
  • Zou je [de site] aanbevelen aan vrienden of collega's?

De resultaten van de gebruikerstest verwerk je in een verslag, dit verslag plaats je als .pdf in je container.

 

Producten en criteria

 

(naar boven)

Stap 5 (individueel en optioneel)

Definitieve ontwerp

In stap 5 ga je de feedback van de gebruikerstest verwerken. Je werkt naar een definitief ontwerp. Je zet de puntjes op de i. Hierna zet je de webshop online en valideer je de website. Aan het eind van de week presenteer je de website aan de klas.

De webshop staat online, je zet de link in je container. Je plaatst screenshots van de validatie (HTML en CSS) als .png in je container.

Je werkt ook je container bij. Aan het eind van het project moeten alle (deel)producten in de container geplaatst zijn.

 

Producten en criteria

(naar boven)