Stappenplan projectdeel 1

Week 1

In de eerste week besteed je aan de projectvoorbereiding.

De voorbereiding bestaat uit:

 

Debriefing

In de praktijk is een briefing meestal een gesprek met de klant. In dit gesprek moet je er achter komen:

In een debriefing leg je alle afspraken vast die je met de klant hebt gemaakt. De debriefing is altijd gericht aan de klant en wordt vaak als bijlage bij een mail verstuurd. Voor meer informatie over de debriefing kun je vinden in de training briefing/debriefing. De debriefing maak je meteen na de briefing.

 

Onderzoek product

Voor het onderzoek naar het product en de concurrentie ga je minstens 10 kleine webshops met vergelijkbare producten beoordelen. De kwaliteit van een website beoordelen is niet altijd even makkelijk. We hebben vaak al binnen een paar seconden ons eerste oordeel klaar. Jij moet leren professioneel oordeel te geven over een website. Je moet verder kijken dan alleen een slecht of heel goed grafisch design.

Hieronder vind je een checklist met 25 piunten waarop je de sites gaat beoordelen.

Content

  1. Doel: Is het duidelijk waar de site voor staat en wat je er kunt doen/vinden?
  2. Beknopt: Is de informatie ‘to the point’, met name op de homepage?
  3. Relevant: Is de informatie relevant, gezien het thema van de site?
  4. Informatief: Zijn de teksten op de site informatief?
  5. Sitemap: Is een overzichtelijke sitemap aanwezig?

SEO

  1. Indexatie: Zijn de verschillende pagina’s binnen de site geïndexeerd door Google?
  2. Metatags: Hebben de pagina’s unieke title tags, descriptions en relevante keywords?
  3. URL’s: Zijn de gebruikte URLs zoekmachine vriendelijk?
  4. Flash/Javascript: Wordt het gebruik van Flash/Javascript in de navigatie vermeden?
  5. Teksten: Zijn de teksten op de juiste zoektermen geoptimaliseerd?

Usability

  1. Doelgroepen: Worden de verschillende doelgroepen goed bediend?
  2. Layout: Is de layout overzichtelijk en is alles makkelijk te vinden?
  3. Navigatie: Is er duidelijke en consistente navigatie en een logische indeleing van functies op een pagina?
  4. Conversieproces: Is er een goede opzet van het conversieproces (bijv. contactformulier, bestellingen)?
  5. Call-to-action: wordt de gebruiker uitgenodigd om verder te klikken en de artikelen te kopen?

User interface design

  1. Uitstraling: Heeft de site een betrouwbare, professionele en verzorgde uitstraling?
  2. Balans: Is er voldoende ruimte zodat er balans is tussen diverse elementen?
  3. Huisstijl: Is er een heldere en consistente huisstijl gebruikt?
  4. Multimedia: Wordt er gebalanceerd gebruik gemaakt van multimedia?
  5. Typografie: Is er goed gebruik gemaakt van typografie?

Techniek

  1. W3C standaarden: Voldoet de site aan de W3C standaarden?
  2. Browser support: Worden de belangrijkste browsers ondersteund?
  3. Snelheid: Laadt de website binnen afzienbare tijd?
  4. Betrouwbaar: Werkt de site zonder fouten?
  5. Links: Zijn er geen foutieve links binnen de huidige website?

Schrijf in je verslag de url's van de sites die je hebt bekeken met hierna jouw bevindingen per deelonderwerp en vraag.

Als voorbeeld :

Content:

Bij de meeste sites wordt het doel duidelijk gemaakt op de indexpagina door de de tagline en de eerste kop. Een goed voorbeeld hiervan is de site chocostar:

Op mijn eigen site wil ik daarom.......

 

Onderzoek naar doelgroep

Voor het onderzoek naar de doelgroep ga je 3 personen uit de doelgroep interviewen en observeren. Je laat op internet zoeken naar jouw product. Tijdens het werken kijk je wat ze doen en stel je vragen waarom ze zo doen.

Gebruik in ieder geval de volgende:


Dit onderzoek verwerk je in een verslag. Ook maak je een persona.

 

Producten

Alle producten sla je op in je container, waar je een goede mappenstructuur maakt voor het project. Mail de projectbegeleiders de url.

De producten worden beoordeeld door je projectbegeleider. Je mag pas verder wanneer de producten zijn goedgekeurd!!

 

Beoordelingscriteria

 

(naar boven)

 

Week 2

In week 2 begin je met het maken van de userstory's. Je geeft aan de userstory's een prioriteit met behulp van MoSCoW. Kijk voor meer informatie nog een keer naar de UXD-module User in Magister. Vanuit de userstory's maak je de inventarisatie. Van de "flow" van het bestellen en betalen teken je een activiteitendiagram. Met deze producten ga je terug naar je testpersonen. Je vraagt ze om een cardsorting uit te voeren en je laat de het activiteitendiagram doorlopen.

Voor het visueel concept maak je een mindmap. Door te brainstormen bedenk je een goede communicatieboodschap. De sfeer van het product leg je vast in een moodboard.

De vormgeving van de userinterface bereidt je voor door het maken van twee styleboards. Je vraagt aan je testpersonen feedback op de styleboards.

 

Producten

  • userstory's
  • MoSCoW
  • inventarisatie
  • activiteitendiagram
  • foto's/ verslag gebruikerstesten (cardsorting)
  • mindmap
  • moodboard
  • styleboards
  • tijdschrijfformulier

 

Je mag pas verder wanneer deze producten zijn goedgekeurd!!

 

Beoordelingscriteria

  • userstory's
    • de story's beschrijven alle doelen en taken van die de gebruiker kan/wil uitvoeren op de website
    • de userstory's geven blijkt 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 userstory uitgevoerd
    • je hebt nog geen pagina's ingedeeld
  • activiteitendiagram
    • geeft een volledig beeld van de stappen van het bestel- en betaalproces
  • gebruikerstesten
    • de testen zijn uitgevoerd met minstens 3 testpersonen
    • je hebt de feedback van de gebruikers verwerkt
  • mindmap
    • geeft een goed inzicht hoe je bent gekomen tot een creatieve communicatieboodschap
  • moodboard
    • geeft een goed beeld van waar je naar toe wilt met de creatie
  • Styleboard
    • het styleboard bevat minstens:
      • typografie en stijl van <h1> <h2> enz
      • typografie en stijl van platte tekst
      • knoppen
      • menu
      • opsomming
      • kleuren
      • formuliervelden
      • logo
      • stijl van visuals
  • tijdschrijfformulier
    • je hebt de tijd en het resultaat bijgehouden

 

(naar boven)

Week 3

In week 3 maak je het functionele ontwerp, het interactie ontwerp en het visuele ontwerp van de website. Een goed ontwerp bestaat uit een ontwerp voor verschillende devices. In dit project moet je ontwerp zeker geschikt zijn voor desktop en laptop. Je kunt extra punten verdienen wanneer je ook ontwerpt voor mobile devices.

Je begint met alle elementen uit de inventarisatie te verdelen over de verschillende pagina's in vorm van wireframe-schetsen. Wanneer je tevreden bent over de indeling, zet je de schetsen om in een aanklikbaar digitaal fuctioneel prototype die je hebt gemaakt in Axure. Wanneer je liever werkt met html, dan mag je de wireframes uitwerken in html. Let er dan wel op dat het alleen functioneel prototype is. Dus zonder kleuren en visuals. Je zorgt er voor dat ook het activiteitendiagrom omgezet is in wireframes van de opeenvolgende schermen. Het betalingsysteem mag je simuleren.

Het functionel prototype laat je testen door je testgebruikers.

Het visuele ontwerp bestaat uit een voorbeeld van alle unieke pagina's. Dit betekent bijvoorbeeld dat je maar één productpagina hoeft uit te werken.

Je bereidt ook de realisatie voor. Dit wil zeggen dat je de teksten schrijft en alle visuals verzamelt en geschikt maakt voor publicatie op web.

 

Producten

  • wireframe schetsen
  • digitaal functioneel prototype
  • feedbackverslag gebruikerstest
  • visueel ontwerp
  • visuals en teksten
  • tijdschrijfformulier

Je mag pas verder wanneer deze producten zijn goedgekeurd!!

Beoordelingscriteria

 

(naar boven)

Week 4 en 5

In deze weken maak je het definitieve ontwerp in vorm van een visueel prototype gemaakt in html/ css eventueel aangevuld met javascript/ jquery. Wanneer je hebt gekozen om de website resonsief te maken, dan mag je gebruik maken van Bootstrap. Werk zoveel mogelijk de interactieve elementen zoals fotogaleries en menu's uit.

Aan het eind van week 5 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?


Afsluitende vragen:

  • Wil je deze site in de toekomst te gebruiken om soort gelijke 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?

Producten

Beoordelingscriteria

 

(naar boven)

Week 6

In week 6 ga je de feedback van de gebruikerstest verwerken. Je werkt naar een definief ontwerp. Hierna valideer je de website. Aan het eind van de week presenteer je de website aan de klas.

Je werkt ook de je container bij. Aan het eind van de week moeten alle (deel)producten in de container geplaatst zijn. Je ordent ze per werkproces

Producten

 

Beoordelingscriteria

 

 

(naar boven)