Reader. Datum: Versie: 1.0 Projectgroep: CMD D Naam: Alexander van der Kooij Student nr.:

Reader

Datum: Versie: Projectgroep: Naam: Student nr.: Docent:

13‐02‐2013 1.0 CMD‐D‐1.03 Alexander van der Kooij 12027766 P. Esser

Alexander van der Kooij

12027766

Inhoud 1.

Inleiding .............................................................................................................................. 4

2.

De CMD ontwerpmethode ................................................................................................. 5 2.1

2.1.1

Het model ............................................................................................................. 5

2.1.2

Divergeren en convergeren .................................................................................. 5

2.1.3

Look & Listen ........................................................................................................ 6

2.1.4

Create Concepts ................................................................................................... 6

2.1.5

Design Details ....................................................................................................... 7

2.1.6

Make it real .......................................................................................................... 7

2.2 3.

De ontwerpfasen LL, CC, DD en MiR............................................................................ 5

Itereren, evalueren en reflecteren .............................................................................. 7

Look & Listen ...................................................................................................................... 8 3.1

Gereedschappen om te divergeren ............................................................................. 8

3.1.1

PACT ..................................................................................................................... 9

3.1.2

Observeren ........................................................................................................... 9

3.1.3

Interviews ........................................................................................................... 10

3.1.4

Benchmarking ..................................................................................................... 10

3.1.5

Heuristic evaluation ........................................................................................... 10

3.1.6

Enquêtes ............................................................................................................. 11

3.1.7

Userneeds ........................................................................................................... 11

3.1.8

Onderzoeksvragen ............................................................................................. 11

3.1.9

Business goals ..................................................................................................... 12

3.1.10 Omgevingsanalyse .............................................................................................. 12 3.2

4

Gereedschappen om te convergeren ........................................................................ 13

3.2.1

Persona’s ............................................................................................................ 13

3.2.2

Taakmodellen ..................................................................................................... 14

3.2.3

CJM ..................................................................................................................... 14

3.2.4

Differentiation charts ......................................................................................... 15

3.2.5

Design Principles ................................................................................................ 15

3.2.6

Functionele eisen ............................................................................................... 16

3.2.7

Niet‐functionele eisen ........................................................................................ 16

3.2.8

MoSCoW ............................................................................................................. 16

Create Concepts ............................................................................................................... 18 4.1

Gereedschappen om te divergeren in conceptfase .................................................. 18

4.1.1

Creatieve technieken ......................................................................................... 18 2


Moodboards ....................................................................................................... 19

4.1.3

Metaforen .......................................................................................................... 19 Sitemap ............................................................................................................... 20

4.2.2

Style tiles ............................................................................................................ 21

4.2.3

Vlekkenplannen .................................................................................................. 22

4.2.4

Visuele hiërarchie ............................................................................................... 22

Design Details ................................................................................................................... 23 Gereedschappen om te divergeren ........................................................................... 23

5.1.1

Design patterns .................................................................................................. 23

5.1.2

Lo‐fi (paper) prototyping & testing .................................................................... 24

5.1.3

Conceptual scenario’s ........................................................................................ 24

5.1.4

Storyboarden ...................................................................................................... 24

5.2

7

Gereedschappen om te convergeren in conceptfase ............................................... 20

4.2.1

5.1

6


5.2.1

Sitemap ............................................................................................................... 25

5.2.2

Content plan ....................................................................................................... 25

5.2.3

Flowcharts .......................................................................................................... 26

5.2.4

Wireframes & annotations ................................................................................. 27

5.2.5

Style guides ......................................................................................................... 28

Realisatie .......................................................................................................................... 29 6.1

Divergeren in de realisatiefase .................................................................................. 29

6.2


6.2.1

Hi‐fi prototyping & testing ................................................................................. 29

6.2.2

Experience testing .............................................................................................. 30

Bronvermelding: ............................................................................................................... 31

3

12027766

4.1.2 4.2

5


1. Inleiding In deze reader ga ik stap voor stap beschrijven wat je allemaal moet doorlopen om een website te gaan bouwen. Het bestaat uit 4 fase Look and listen, Create concepts, Design Details en Realise. Per fase moet je meerdere stappen doorlopen om deze juist af te sluiten en als resultaat een volledig werkende website met de juiste documentatie te krijgen. Deze reader dient voor jezelf als naslag werk zodat als je ooit weer eens een website bouwt precies weet wat je moet doen bij welke stap. De onderdelen die een bron bevatten zijn volgens de APA norm verwerkt.

4

12027766


2. De CMD ontwerpmethode 2.1

De ontwerpfasen LL, CC, DD en MiR

2.1.1 Het model

Figuur 1(Het figuur laat de 4 fases zien in het ontwerpproces). Reprinted from “kick-off project D (pp 7)”. 2013

Wat is het: Het model geeft aan welke stappen je moet doorlopen tijdens het bouwen van een website. Het geeft aan wanneer je welke stap hebt en in welke volgorde. Waarom gebruik je het: Je gebruikte het om via de juiste manier door het proces te gaan zodat alles duidelijk is en duidelijk blijft. Het is erg overzichtelijk en makkelijk om door de stappen heen te gaan. Hoe gebruik je het: Je gaat stap voor stap na om het hele model te doorlopen dit zorgt voor de juiste documentatie en het correct maken van een website. Waar moet je op letten als je het gaat gebruiken: Je moet goed opletten dat je geen stap overslaat omdat je het zelf niet nodig vind dit kan later verwarrend en ongunstig uitkomen.

2.1.2 Divergeren en convergeren

Figuur 2(Het figuur laat de werking zien van de stappen diverge en converge). Reprinted from “Reader inhoudsopgave en instructies Project D”. 2013

5

12027766


12027766

Wat is het: Dit model laat de stap divergeren en convergeren zien. Het laat je creatief nadenken en op de juiste ideeën komen. Waarom gebruik je het: Je gebruikt het om de meest goede ideeën te bedenken en alle ideeën vervolgens goed op elkaar aan te laten sluiten. Hoe gebruik je het: Eerst doe je de stap divergeren. In deze stap laat probeer je zo creatief mogelijk te zijn en gaat ideeën bedenken. Daarna ga je over naar de stap convergeren. Nu ga je alle ideeën op schrijven en ze sorteren. Nadat je alles hebt gesorteerd ga je beslissingen maken welke ideeën blijven en welke je toch weglaat. Je kunt ideeën weglaten omdat ze je bijvoorbeeld niet kan realiseren of omdat ze niet origineel zijn. Uiteindelijk zul je maar een paar ideeën overhouden die goed op elkaar aansluiten. Waar moet je op letten als je het gaat gebruiken: Je moet goed opletten dat je jezelf niet te veel beperkt maar jezelf vrij laat zijn met het bedenken van ideeën. Je moet zorgen dat je op de juiste manier handelt. Dit kun je doen door verschillende soort technieken. Hers(2012)

2.1.3 Look & Listen Wat is het: Dit is de eerste fase van het model zie (van der Kooij (2013) 2.1.1 Het model) je gaat hier vooral onderzoek doen naar gebruikers de opdrachtgever en het bedrijf zelf. Waarom gebruik je het: Je gaat onderzoek doen om inzicht te krijgen waarvoor je het product maakt en door wie het gebruikt gaat worden. Met deze gegevens kun je bijvoorbeeld eisen en voorwaarden opstellen. Hoe gebruik je het: Je stelt een verslag op doormiddel van de volgende onderwerpen: Onderzoeksvragen, Businessgoals, doelgroepanalyse, User needs, concurrentieanalyse/ benchmark, omgevingsanalyse en conclusies en aanbevelingen. Waar moet je op letten als je het gaat gebruiken: Je moet er goed opletten dat je deze fase van het model niet te gemakkelijk doorloopt maar juist zorgvuldig als je deze fase niet goed afhandelt zal dit gevolgen hebben. Of gebruikers kunnen er niet goed mee overweg of je opdrachtgever zegt: “maak het maar opnieuw”.

2.1.4 Create Concepts Wat is het: Dit is de tweede fase van het model zie (van der Kooij (2013) 2.1.1 Het model). De naam zegt het al je gaat een concept maken van je website. Waarom gebruik je het: Dit kun je bijvoorbeeld gebruiken om de style van de website vast te stellen en om een lofi prototype temaken zodat de opdrachtgever een akkoord kan geven om naar de volgende fase te gaan. Hoe gebruik je het: Je stelt een verslag op doormiddel van de volgende onderwerpen: Conceptbeschrijving, Sitemap, Wireframes, Style tile, Visuele uitwerking en de verantwoording. Waarnodig gebruik je beeldmateriaal met een inleiding Waar moet je op letten als je het gaat gebruiken: Je gaat al beginnen met het ontwerp van de website hierdoor moet je goed opletten wel keuzes je maakt in je design welke typografie welke kleuren en welke visuele beelden. Je moet zorgen dat alles overeenkomt met de eisen en voorwaarden en verantwoord dit.

6


12027766

2.1.5 Design Details Wat is het: Dit is de derde fase van het model zie(van der Kooij (2013) 2.1.1 Het model). Dit is de fase waar je je design meer gaat specificeren. Waarom gebruik je het: Het is eigenlijk bijna het zelfde als de create concepts fase. Je gaat alleen alles specificeren. Zoals je lofi prototype. Deze ga je omzetten naar een hifi prototype. Hoe gebruik je het: Je gaat eigenlijk de create concepts fase meer uitwerken. Zoals de style tyle waar je een style guide van maakt en de lofi protype waar je een hifi prototype van maakt. Ook maak je een contentplan, hierin verwerk je alles wat op de website komt te staan bijvoorbeeld plaatjes en tekst. Waar moet je op letten als je het gaat gebruiken: Je moet nu opgaan letten dat je alles heel nauwkeurig uitwerkt omdat je nu al tegen het einde van je project aanloopt. Probeer alles zo goed als af te maken zodat dit juist kan presenteren.

2.1.6 Make it real Wat is het: Dit is de laatste fase van het model zie(van der Kooij (2013) 2.1.1 Het model). Dit is de fase waar je je ontwerp gaat realiseren. Waarom gebruik je het: Dit gebruik je om het ontwerp om te zetten naar een werkend platform. Hoe gebruik je het: Je gaat een website maken doormiddel van coderen. Hiervoor kun je bijvoorbeeld HTML, CSS, JavaScript en PHP voor gebruiken. Eventueel kun je ook kiezen om er een CMS (content management systeem) in te verwerken. Waar moet je op letten als je het gaat gebruiken: Je moet opletten dat je het ontwerp uitwerkt in de meest recente script die er op dat moment is.

2.2

Itereren, evalueren en reflecteren

Wat is het: Dit houd in dat je gaat testen wat er van de opdracht verwacht wordt. Je kijkt bijvoorbeeld of de doelgroep correct is vastgesteld en hoort het wel bij het bedrijf. Waarom gebruik je het: Dit helpt je nog in het begin om te kijken of er nog iets veranderd moet worden aan de opdracht voordat je begint. Hoe gebruik je het: Het is eigenlijk simpel kijken of alles correct qua inhoud van de opdracht en alle informatie die je erbij hebt gekregen van het bedrijf. Waar moet je op letten als je het gaat gebruiken: Je moet alles goed nakijken zodat als er iets niet klopt dat je alles op tijd veranderd en/of aangeeft.

7


3. Look & Listen Wat is het: Dit is de eerste fase van het model zie (van der Kooij (2013) 2.1.1 Het model) je gaat hier vooral onderzoek doen naar gebruikers de opdrachtgever en het bedrijf zelf. Waarom gebruik je het: Je gaat onderzoek doen om inzicht te krijgen waarvoor je het product maakt en door wie het gebruikt gaat worden. Met deze gegevens kun je bijvoorbeeld eisen en voorwaarden opstellen. Hoe gebruik je het: Je stelt een verslag op doormiddel van de volgende onderwerpen: Onderzoeksvragen, Businessgoals, doelgroepanalyse, User needs, concurrentieanalyse/ benchmark, omgevingsanalyse en conclusies en aanbevelingen. Waar moet je op letten als je het gaat gebruiken: Je moet er goed opletten dat je deze fase van het model niet te gemakkelijk doorloopt maar juist zorgvuldig als je deze fase niet goed afhandelt zal dit gevolgen hebben. Of gebruikers kunnen er niet goed mee overweg of je opdrachtgever zegt: “maak het maar opnieuw”.

3.1

Gereedschappen om te divergeren

Zie Figuur hoofdstuk 2.1.2 Wat is het: Dit zijn onderdelen die je helpen om zo creatief mogelijk te gaan nadenken. Waarom gebruik je het: Je gebruikt al deze gereedschappen om zo creatief mogelijk te denken en dus zoveel mogelijk ideeën te verzinnen. Hoe gebruik je het: Deze fase heb je pas afgerond als je al deze gereedschappen hebt doorgelopen en netjes hebt geformuleerd. Waar moet je op letten als je het gaat gebruiken: Je moet er vooral op letten dat je standaard de stappen 3.1.1 t/m 3.1.5 doorloopt om een goede basis te bouwen. Verder moet je deze taken heel serieus nemen om betrouwbare informatie te krijgen.

8

12027766


12027766

3.1.1 PACT Wat is het: PACT staat voor:  P People (mensen)  A Activities (activiteiten)  C Context (context)  T Technology (technologie) Het zegt het al een beetje, het is een document waar je doormiddel van de onderwerpen vaststelt voor bijvoorbeeld wie je het maakt en wat de context is . Waarom gebruik je het: Het helpt je om goed en snel een lijstje te maken met de doelgroep voor jou product. Activiteiten die het product moet kunnen uitvoeren. In welke context je product moet voldoen. En met welke technologie het moet kunnen samen werken bijvoorbeeld gps ontvangst of mobiele telefoon. (Benyon, 2010, p45) Hoe gebruik je het: Door naar de gekregen documenten te kijken die je van je opdrachtgever hebt gekregen ga je een lijstje maken met als onderwerpen people, activities, context en technology. Je vult bij alles zo gedetailleerd mogelijk in wat je weet. Als je denkt dat je nog iets mist kun je het altijd laten controleren of zelf verder onderzoek doen. Waar moet je op letten als je het gaat gebruiken: Je moet het echt zeker weten als je iets invult omdat dit belangrijk is voor al je volgende stappen. Als je je doelgroep bijvoorbeeld verkeerd invult en je gaat bijvoorbeeld de verkeerde doelgroep interviewen(3.1.3) dan kun je alles opnieuw gaan doen.

3.1.2 Observeren Wat is het: Hierbij ga je de doelgroep observeren om te weten te komen hoe ze reageren op iets of hoe ze handelen. Je kunt als hulp middel een observatieformulier maken om nog gedetailleerdere antwoorden te krijgen. Waarom gebruik je het: Je gebruikt dit om meer over je doelgroep te weten te komen en zo meer human centered (gericht op de gebruiker) te werken. Hoe gebruik je het: Je gaat de gebruiker observeren dit kan ik een ruimte zijn waar jij de gebruiker een opdracht geeft om uit te voeren of gewoon ergens in de stad om de gebruiker onbewust te observeren. Nadat jij de gebruiker hebt geobserveerd kun je hem een formulier laten invullen om meer te weten te komen over hem en zijn ervaring. (Benyon, 2010, p 165‐166) Waar moet je op letten als je het gaat gebruiken: Je moet er opletten dat je het juiste observeert en de juiste doelgroep. Ook moet je er opletten als je een formulier maakt dat je de juiste vragen stelt.

9


12027766

3.1.3 Interviews Wat is het: Dit is wat directer dan het observeren. Je hebt een bepaalde tijd om vragen te stellen en je kunt je hierop voorbereiden. Je weet dus wat je wilt vragen en wat je doel is. Waarom gebruik je het: Je gebruikt dit om precies te weten te komen wat je wilt weten van je doelgroep. Het is veel gedetailleerder dan een observatieformulier. Hoe gebruik je het: Je hebt 3 soorten interviews: Structured interview, semi‐structured interview en unstructured interview. (Benyon, 2010, p152‐156) De namen zeggen het al seen beetje. Structured interview is meer een gestructureerde interview waar vooral de interviewer de vragen stelt en de gebruiker alleen beantwoord. Semi‐structured interview is een interview waar je wat meer vrijheid hebt in de interview. De laatste unstructured interview is een interview waar je niet op voorbereid bent en gewoon simpele vragen stelt en de gebruiker ook vrijer is in tegen antwoorden geven. Waar moet je op letten als je het gaat gebruiken: Je moet er wel opletten als je een interview doet met een doel dat je het best kan kiezen voor een gestructureerde interview vanwege dat je dan het meeste kans hebt om de juiste gegevens te krijgen van de gebruiker.

3.1.4 Benchmarking Wat is het: Benchmark dit kun je ook wel vergelijken met concurrentieanalyse. Hierin ga je kijken welke concurrenten je hebt en wie met wat zich onderscheid. Waarom gebruik je het: Het is handig om te weten waar jij je in kan onderscheiden van je concurrenten. Hoe gebruik je het: Je gaat eerst kijken waarin het bedrijf zich al onderscheid. Vervolgens ga je kijken welke concurrenten je hebt en waar zei zich mee onderscheiden. Daarna zet je het doel neer wat met behulp van jou product moet worden uitgevoerd. En als laatste zet je neer met wat voor opties of technologie je het doel gaat bereiken en zo de concurrentie strijd aangaat. Waar moet je op letten als je het gaat gebruiken: Je moet er opletten dat je goed onderzoek doet naar de huidige concurrenten en maak een realistische doel zodat jouw product het ook waar kan maken. Een concurrentieanalyse maken.(n.d.). Retrieved from http://www.kvk.nl/ondernemen/marketing/marktonderzoek/een‐concurrentieanalyse‐maken/

3.1.5 Heuristic evaluation Wat is het: Het is een lijst dat je gaat maken met dingen die opvallen aan het huidige product. Waarom gebruik je het: Het helpt je al een handje met ideeën die jouw product beter maakt dan het huidige product. Hoe gebruik je het: Je gaat een lijst maken van de dingen die opvallen aan bijvoorbeeld de huidige website. Heeft het een 404 pagina is de website duidelijk genoeg etc. En vervolgens zet je er ook bij wat er aan veranderd kan worden eventueel. Waar moet je op letten als je het gaat gebruiken: Je moet de website grondig nakijken zodat je alle kleine puntjes te weten komt. Klik op alle linkjes en bekijk alle pagina’s op de website. (Benyon, 2010, p228‐229)

10


3.1.6 Enquêtes Wat is het: Het maken van een enquêtes is net als het observatieformulier handig om te gebruiken om meer te weten te komen van de doelgroep. Waarom gebruik je het: Het is handig om bijvoorbeeld te weten waar de doelgroep naar verlangt op een website en wat ze ervan verwachten. Hoe gebruik je het: Je maakt een enquête en deelt deze uit aan je doelgroep vervolgens formuleer je dit juist en netjes en verwerkt dit bijvoorbeeld in een grafiek. (Benyon, 2010, p 159‐160) Waar moet je op letten als je het gaat gebruiken: Let erop dat je de juiste vragen stelt en niet overbodige en/of moeilijke vragen stelt aan je doelgroep dit verkomt verwarring.

3.1.7 Userneeds Wat is het: In het Nederlands beschreven: wat de gebruiker nodig heeft. Je geeft aan waarmee je de gebruiker gaat trigeren om naar jouw website te komen Waarom gebruik je het: Je gebruikt het om duidelijk te maken waarmee jij denkt de gebruiker te kunnen trigeren om naar jouw website te komen in plaats van een website van een concurrent. Hoe gebruik je het: Je maakt een klein verslagje over hoe de website eruit komt te zien en wat de kenmerken worden voor de gebruikers. Wat het thema wordt en hoe jij de gebruiker overhaalt om bijvoorbeeld naar de dierentuin te gaan, naar het museum te gaan of de game te spelen die jij hebt gemaakt (ligt eraan waar de opdracht vandaan komt). Waar moet je op letten als je het gaat gebruiken: Let erop dat je het zo duidelijk mogelijk maakt zodat je dit ook aan je opdrachtgever kan laten zien. En laat het realistisch blijven dus maak het niet al te moeilijk voor je zelf. Audiences, Outcomes, and Determining User Needs.(n.d.). Retrieved from http://alistapart.com/article/audiences‐outcomes‐and‐determining‐user‐needs

3.1.8 Onderzoeksvragen Wat is het: Hiermee maak je simpele vragen waarmee je extra ideeën gaat creëren. Waarom gebruik je het: Het is een simpele manier om extra ideeën te bedenken voor jouw product. Hoe gebruik je het: Je maakt 2 soorten vragen: hoofdvragen en deelvragen. De namen spreken al voor zich hoofdvragen zijn de belangrijke vragen dit zijn vragen die o.a. de uitstraling vormen van je design en deelvragen dit zijn die niet zo belangrijk zijn als hoofdvragen maar waar wel goede ideeën uit kunnen voortkomen. Waar moet je op letten als je het gaat gebruiken: Je moet er op letten dat je de juiste vragen stelt zodat op de meeste originele en goede ideeën kunt komen. Vragen opstellen.(n.d.). Retrieved from: http://wp.digischool.nl/studiebegeleiding/files/2011/12/vragen‐opstellen.pdf

11

12027766


12027766

3.1.9 Business goals Wat is het: Het is een stuk tekst waarin staat wat de huidige status is van het bedrijf en wat het doel gaat worden. Vanden Bos(2010, §5) Waarom gebruik je het: Dit gebruik je omdat dit meer duidelijkheid geeft van het bedrijf zelf. Hierdoor kun je het product nog meer naar de eisen van het bedrijf bouwen. Hoe gebruik je het: Het is eigenlijk een stukje tekst waarin je zet wat het huidige imago is van het bedrijf. Welke vernieuwing er gaat plaats vinden in het bedrijf en wat het doel gaat worden met behulp van jou product. Waar moet je op letten als je het gaat gebruiken: Je moet ervoor zorgen dat je dit juist formuleert zodat je zelf het juiste idee hebt over jou product.

3.1.10 Omgevingsanalyse Wat is het: Dit is een klein verslag wat uitlegt wat de huidige status is van het bedrijf wat de toekomstplannen zijn wat de locatie is en wat de communicatiestrategie wordt van het bedrijf. Waarom gebruik je het: Het geeft bijvoorbeeld net zoals de business goals meer informatie over het bedrijf. Hoe gebruik je het: Je maakt een klein verslag met de volgende onderwerpen: het bedrijfsoort in Nederland de toekomstplannen van het bedrijf de locatie van het bedrijf en de communicatiestrategie. Dit vul je allemaal in zodat je meer te weten komt over het bedrijf en hun ideeën. Waar moet je op letten als je het gaat gebruiken: Je moet ervoor zorgen dat je dit juist formuleert zodat je zelf het juiste idee hebt over het bedrijf. KVK: Omgevinganalyse.(n.d.). Retrieved from: http://www.kvk.nl/ondernemen/marketing/marktonderzoek/omgevingsanalyse/

12


3.2

12027766

Gereedschappen om te convergeren

Zie Figuur1 hoofdstuk 2.1.2 Wat is het: Dit zijn de hulpmiddelen om de gecreëerde ideeën te gaan soorten en om keuzes te gaan maken uit de ideeën. Waarom gebruik je het: Deze gereedschappen helpen je om alle ideeën overzichtelijk te maken en vervolgens Hoe gebruik je het: Je hebt 3 soorten interviews: Structured interview, semi‐structured interview en unstructured interview. De namen zeggen het al seen beetje. Structured interview is meer een gestructureerde interview waar vooral de interviewer de vragen stelt en de gebruiker alleen beantwoord. Semi‐ structured interview is een interview waar je wat meer vrijheid hebt in de interview. De laatste unstructured interview is een interview waar je niet op voorbereid bent en gewoon simpele vragen stelt en de gebruiker ook vrijer is in tegen antwoorden geven. Waar moet je op letten als je het gaat gebruiken: Je moet er wel opletten als je een interview doet met een doel dat je het best kan kiezen voor een gestructureerde interview vanwege dat je dan het meeste kans hebt om de juiste gegevens te krijgen van de gebruiker.

3.2.1 Persona’s Wat is het: Hierin beschrijf je een fictief persoon uit jouw doelgroep. (Benyon, 2010, p 73‐75) Waarom gebruik je het: Zodat je een beter beeld krijgt over de doelgroep. Hoe gebruik je het: Je kiest een willekeurige foto van een persoon uit die ongeveer de gemiddelde leeftijd heeft van jou doelgroep. Vervolgens geef je het een naam, leeftijd, geslacht, woonplaats, thuissituatie, relatiestatus, werk en hobby’s. Dit baseer je op de gemiddelde score van je doelgroep. En een leuke quote die gezegd is door iemand die jij bijvoorbeeld hebt geïnterviewd. Nadat je dit allemaal hebt gedaan heb je een fictief persoon die jouw doelgroep vertegenwoordigd. Waar moet je op letten als je het gaat gebruiken: Dat je echt de juiste persoon maakt als je iets verkeerds doet in de persona kun je bijvoorbeeld paarongeluk voor de verkeerde doelgroep het product gaan maken.

13


12027766

3.2.2 Taakmodellen Wat is het: Hierin beschrijf je de taakmodellen: taakcontext, taakbeschrijving en de taakdiagram. Waarom gebruik je het: Dit doe je om duidelijk te beschrijven waarvoor waar en hoe het product gebruikt gaat worden. (Benyon, 2010, p 251‐270) Hoe gebruik je het: Je maakt de taakmodellen met 3 onderwerpen: taakcontext, taakbeschrijving en de taakdiagram. In de taakcontext schrijf je hoe de situatie in de omgeving is/was. In de taakbeschrijving beschrijf je hoe het product wordt gebruikt en in de taakdiagram maak je een diagram met elke handeling die je moet doen om het product te gebruiken. Waar moet je op letten als je het gaat gebruiken: Je moet zorgen dat het juist wordt ingevuld omdat je anders de kans hebt dat je de situatie of het gebruik van het product niet goed snapt. Dit doe je door alles goed te onderzoeken.

3.2.3 CJM

Figuur 3(Het figuur is een voorbeeld van een CJM). Retrieved from “http://www.frankwatching.com/wpcontent/uploads/2011/03/customer_journey3.png”. 2013

14


12027766

Wat is het: CJM oftewel Custom Journey Map. Je gaat kijken welke handelingen je persona moet doen om het product juist te gebruiken. Waarom gebruik je het: Dit helpt je meer inzicht te krijgen hoe het product wordt gebruikt. Nouhuys(2011) Hoe gebruik je het: Je vult met behulp van je persona Figuur 3. Je kan het uiterlijk helemaal naar je eigen wensen maken. Alleen zorg dat het principe het zelfde blijft. Vervolgens zet je bij de stappen before, during en after alle handelingen die moeten worden uitgevoerd. Bij elke handeling zet je een gezichtje hoe de gebruiker de handeling ervaart moeilijk makkelijk of neutraal. Vervolgens kun je eronder zetten bij welke stap hij/zij hoeveel handelingen doet. Daaronder kun je de points of delight en points of pain neerzetten wat er echt goed ging en waar de gebruiker veel moeite mee heeft. En daarna trek je je conclusie. Waar moet je op letten als je het gaat gebruiken: Zorg dat je alle handelingen juist heb geformuleerd je points of delight en point of pain juist zijn zodat we weten waar er verbetering in moet komen en vervolgens zet je een duidelijke conclusie erbij.

3.2.4 Differentiation charts Wat is het: Dit is een tabel die laat zien wat voor soort persoon wat aanspreekt en waar je dus rekening mee moet houden. Waarom gebruik je het: Een makkelijk manier om te kijken met wie je waar rekening mee moet houden. Hoe gebruik je het: Je maakt een tabel of een grafiek en vult de verschillende groepen in. Vervolgens vul je alle puntjes op met wat je rekening moet houden met de desbetreffende soort persoon. Waar moet je op letten als je het gaat gebruiken: Je moet goed opletten dat je wel de juiste gegevens bij de juiste soort persoon zet. En dat je het zo precies mogelijk neerzet met wat je rekening moet houden. Entamoeba Differentiation Charts.(n.d.). Retrieved from: http://www.practicalscience.com/diffcharts.html

3.2.5 Design Principles Wat is het: Dit zijn de belangrijke punten in je website. Waarom gebruik je het: Zodat je duidelijk weergeeft wat je hoofd onderwerpen en/of thema is van je website. Hoe gebruik je het: Je maakt een lijstje met wat voor jou de belangrijkste punten zijn van de website. Wat jij vind waardoor de website herkent kan worden. (Benyon, 2010, p 89‐94) Waar moet je op letten als je het gaat gebruiken: Je moet er voor zorgen dat het er niet te veel zijn en dat het echt belangrijke punten zijn.

15


12027766

3.2.6 Functionele eisen Wat is het: Zijn eisen die het systeem moet kunnen vervullen bijvoorbeeld functies of een specifiek uitstraling. (Benyon, 2010, p 147) Waarom gebruik je het: Het laat zien aan jou maar ook aan de opdrachtgever welke eisen jij belangrijk vind en dus vaststelt. Hoe gebruik je het: Je maakt een lijst met alle functionele eisen die jij belangrijk vind. Hier moet je je dan ook aan gaan houden als je deze vast stelt. Waar moet je op letten als je het gaat gebruiken: Je moet er op letten dat je functionele eisen en niet‐functionele eisen niet door elkaar haalt dit gebeurt best snel. Probeer je na het vaststellen van de eisen jezelf er echt aan te houden.

3.2.7 Niet‐functionele eisen Wat is het: Dit zijn eisen die eigenlijk extra opties weergeven en extra informatie weergeven. (Benyon, 2010, p 147) Waarom gebruik je het: Het laat zien wat voor extra’s je aan de website wilt toevoegen. Hoe gebruik je het: Je maakt een lijstje waarin je extra informatie over het systeem weergeeft en extra opties. Waar moet je op letten als je het gaat gebruiken: Je moet er op letten dat je functionele eisen en niet‐functionele eisen niet door elkaar haalt dit gebeurt best snel.

3.2.8 MoSCoW

Figuur 4(Het figuur geeft weer hoe je de MoSCoW theorie juist uitwerkt). Reprinted from “Projectdossier periode C (pp 3)”. 2013

16


12027766

Wat is het: Het laat de belangrijkheid van de eisen zien. Waarom gebruik je het: Dit helpt je om de eisen te gaan rangschikken. Welke eis moet welke eis kan en welke eis hoeft alleen maar uitgevoerd te worden als er nog tijd over is. Hoe gebruik je het: Volgens (Benyon, 2010, p 156) maak je een tabel met Must Should Could Won’t en hierin ga je al je eisen rangschikken van het meest belangrijkst naar het onbelangrijkst. Waar moet je op letten als je het gaat gebruiken: Je moet wel opletten dat je zo realistisch mogelijk doet.

17


12027766

4 Create Concepts Wat is het: Dit is de tweede fase van het model zie (van der Kooij (2013) 2.1.1 Het model). De naam zegt het al je gaat een concept maken van je website. Waarom gebruik je het: Dit kun je bijvoorbeeld gebruiken om de style van de website vast te stellen en om een lofi prototype temaken zodat de opdrachtgever een akkoord kan geven om naar de volgende fase te gaan. Hoe gebruik je het: Je stelt een verslag op doormiddel van de volgende onderwerpen: Conceptbeschrijving, Sitemap, Wireframes, Style tile, Visuele uitwerking en de verantwoording. Waarnodig gebruik je beeldmateriaal met een inleiding Waar moet je op letten als je het gaat gebruiken: Je gaat al beginnen met het ontwerp van de website hierdoor moet je goed opletten wel keuzes je maakt in je design welke typografie welke kleuren en welke visuele beelden. Je moet zorgen dat alles overeenkomt met de eisen en voorwaarden en verantwoord dit.

4.1

Gereedschappen om te divergeren in conceptfase

Zie Figuur hoofdstuk 2.1.2 Wat is het: Dit zijn gereedschappen die je uitvoert om zoveel mogelijk ideeën te creëren voor je concept. Waarom gebruik je het: Deze gereedschappen maken het makkelijker om te divergeren voor de conceptfase. Hoe gebruik je het: Doormiddel van alle gereedschappen te doorlopen heb je genoeg ideeën bedacht om een mooi concept te maken. Waar moet je op letten als je het gaat gebruiken: Dit geld net zoals andere onderwerpen dat je alle volgende stappen moet doorlopen. Dit omdat je er veel ideeën uit kan halen.

4.1.1 Creatieve technieken Wat is het: Je gaat door verschillende stappen te doorlopen verschillende creatieve ideeën bedenken om je eindresultaat te maken. Waarom gebruik je het: Het helpt je om op een goede manier veel ideeën te bedenken. Hoe gebruik je het: Doormiddel van verschillende technieken kun je ideeën gaan creëren hiervoor heb je document: Hers(2012). In dit document staan veel soorten technieken die je kunt gebruiken. Je kunt in verschillende situaties verschillende technieken toepassen. Waar moet je op letten als je het gaat gebruiken: Let erop dat je je zelf niet gaat beperken maar juist jezelf vrij maakt van de beperkingen. Hiervoor heb je 5 barrières: patroon denken, stoppen na één oplossing, niet ter zake doende oorzaken, evaluatie in een te vroeg stadium en angst. Je moet jezelf zo min mogelijk laten beperken door deze barrières. Hers(2012)

18


4.1.2 Moodboards Wat is het: Dit is eigenlijk een grote poster maken met alles erop alles wat je in je product gaat verwerken. (Benyon, 2010, p182) Waarom gebruik je het: Dit kun je maken zodat je via het moodboard weer nieuwe ideeën kan creëren en het makkelijk te presenteren voor je werkgever. Hoe gebruik je het: Je pakt bijvoorbeeld een A3 formaat papier en plakt en tekent er alles op wat jij denkt dat je nodig hebt om het product te gaan maken dit kan typografie zijn die kunnen kleuren zijn plaatjes etc. Waar moet je op letten als je het gaat gebruiken: Je hoeft hier eigenlijk alleen maar op te letten dat je er alleen maar dingen op plakt of tekent dat relevant is voor jou product.

4.1.3 Metaforen Wat is het: Een metafoor is eigenlijk een bestaand symbool koppelen aan een element. (Benyon, 2010, p203‐ 208) Waarom gebruik je het: Je kan het metafoor toepassen in je website zodat iedereen de indruk krijgt waarvoor de website is en/of wat het moet uitstralen. Hoe gebruik je het: Je gaat brainstormen waar de website voor staat wat het moet doen wat voor bedrijf het is en wat het uit moet stralen. Hiervoor kies je gewoon verschillende voorwerpen zoals een map of agenda. Daarna ga je kijken welke het meest relevant is voor de website. Als je eenmaal het metafoor hebt uitgekozen ga je kijken hoe je deze kan gaan verwerken in de website. Waar moet je op letten als je het gaat gebruiken: Je kunt meerdere metaforen toepassen op de website maar let wel op dat je er niet te veel kiest dit kan heel druk overkomen voor een gebruiker.

19

12027766


4.2

12027766

Gereedschappen om te convergeren in conceptfase

Zie Figuur hoofdstuk 2.1.2 Wat is het: Dit is de volgende stap waar je je ideeën weer gaat sorteren en uitkiezen welke erover blijven. Waarom gebruik je het: Je gebruikt dit om je ideeën overzichtelijk te maken en om de beste en origineelste ideeën uit te gaan kiezen. Hoe gebruik je het: Je sorteert eerst weer alle ideeën zodat dit overzichtelijk wordt om keuzes te gaan maken. Daarna ga je uitkiezen welke ideeën belangrijk zullen zijn voor het concept. Waar moet je op letten als je het gaat gebruiken: Je moet wel opletten dat de ideeën die je uitkiest realistisch zijn om uit te werken.

4.2.1 Sitemap

Figuur 5(Het figuur geeft weer hoe een sitemap eruit ziet). Reprinted from “Projectdossier periode C (pp 5)”. 2013

Wat is het: De sitemap laat de structuur in de website zien. (Benyon, 2010, p388‐390) Waarom gebruik je het: Het geeft je een inzicht hoe je je concept op kan gaan bouwen. Hoe gebruik je het: Het is eingelijk een soort van diagram maken. Je begint met de hoofditem van je website vervolgens sorteer je alle onderwerpen in rijtjes onder je hoofditem. Voor een voorbeeld zie Figuur 5 Waar moet je op letten als je het gaat gebruiken: Je moet opletten dat je niet in de war raakt met navigatiemodel.

20


12027766

4.2.2 Style tiles

Figuur 6(Het figuur geeft weer hoe een style tile eruit ziet). Reprinted from “Projectdossier Periode C styletile”. 2013

Wat is het: Het geeft je al een beetje inzicht welke style je wilt hanteren welke typografie je gaat gebruiken en welke buttons etc er op de website komen. Waarom gebruik je het: Je maakt voor jezelf een style tile aan zodat je alvast een beetje weet welke stel je moet gaan hanteren. Hoe gebruik je het: Je maakt op een vlak via een foto bewerker verschillende onderwerpen aan: color pallete, typography, interaction elements en photography & illustrations. Als je het nodig vind om een extra onderwerp erbij te zetten kan dit altijd. Vervolgens vul je alles netjes in en maak je er een overzichtelijke schema van. Voor een voorbeeld zie Figuur 6. Waar moet je op letten als je het gaat gebruiken: Je moet erop letten dat het overzichtelijk en duidelijk blijft zodat het ook later makkelijk voor je zelf te snappen is. Warren, S.(n.d.). Style tiles. Retrieved from: http://styletil.es/

21


12027766

4.2.3 Vlekkenplannen Wat is het: Dit zijn wireframes alleen minder gedetailleerd. (P.E.Esser, 2013, Project D) Waarom gebruik je het: Je gebruikt dit om alvast een beetje inzicht te krijgen hoe je website eruit komt te zien in een vroege stadium. Hoe gebruik je het: Met Balsamiq kun je heel gemakkelijk een simpele wireframe in elkaar zetten. Waar moet je op letten als je het gaat gebruiken: Het is eigenlijk een soort van voorproefje dus als er iets verkeerds is kun je dit veranderen in een latere stadium als je de echte wireframes gaat maken.

4.2.4 Visuele hiërarchie Wat is het: Het is een stuk tekst waarin je verteld hoe het er ongeveer eruit komt te zien. Waarom gebruik je het: Dit gebruik je om de opdrachtgever al een beetje het idee te geven hoe de website er uit komt te zien. Hoe gebruik je het: Het is een stuk tekst waarin je verteld welke kleuren er in je website verwerkt worden waar de navigatie zich bevind welke items erin de navigatie balk zitten welke visuele effecten er plaats vinden etc. Waar moet je op letten als je het gaat gebruiken: Je moet er voor zorgen dat als je het stuk tekst leest al het gevoel en idee krijgt hoe de website er uit ziet en wat erin verwerkt is. (“tips voor optimale vindbaarheid, betrouwbaarheid en conversie”,z.d.)

22


5 Design Details Wat is het: Dit is de derde fase van het model zie(van der Kooij (2013) 2.1.1 Het model). Dit is de fase waar je je design meer gaat specificeren. Waarom gebruik je het: Het is eigenlijk bijna het zelfde als de create concepts fase. Je gaat alleen alles specificeren. Zoals je lofi prototype. Deze ga je omzetten naar een hifi prototype. Hoe gebruik je het: Je gaat eigenlijk de create concepts fase meer uitwerken. Zoals de style tyle waar je een style guide van maakt en de lofi protype waar je een hifi prototype van maakt. Ook maak je een contentplan, hierin verwerk je alles wat op de website komt te staan bijvoorbeeld plaatjes en tekst. Waar moet je op letten als je het gaat gebruiken:

5.1

Gereedschappen om te divergeren

Zie Figuur hoofdstuk 2.1.2 Wat is het: Dit zijn gereedschappen die je uitvoert om zoveel mogelijk ideeën te creëren voor je definitieve design. Waarom gebruik je het: Deze gereedschappen maken het makkelijker om te divergeren voor de design en details fase. Hoe gebruik je het: Doormiddel van alle gereedschappen te doorlopen heb je genoeg ideeën bedacht om een mooi design te maken. Waar moet je op letten als je het gaat gebruiken: Dit geld net zoals andere onderwerpen dat je alle volgende stappen moet doorlopen. Dit omdat je er veel ideeën uit kan halen.

5.1.1 Design patterns Wat is het: Je verteld welke patterns je in jouw website gaat verwerken en waarom je voor die patterns hebt gekozen en niet voor andere patterns. (Benyon, 2010, p217‐219) Waarom gebruik je het: Hiermee onderbouw je jou keuze en is dit makkelijker te begrijpen voor jou later of voor je opdrachtgever. Hoe gebruik je het: Je zet alle patterns die je gaat gebruiken onder elkaar en zet er een verhaal bij wat dit voor effect heeft op de website en waarom je niet voor een andere vergelijkbare pattern hebt gekozen. Verder kun je bij elke pattern een gerelateerde foto erbij zetten. Waar moet je op letten als je het gaat gebruiken: Je moet er voor zorgen dat je alles juist beargumenteerd zodat iedereen kan zien dat het een bewuste keuze is.

23

12027766


5.1.2 Lo‐fi (paper) prototyping & testing Wat is het: Dit is een nog niet werkend ontwerp van je website dit kan in vorm zijn van een schets of een photshop bestand. Waarom gebruik je het: Dit gebruik je om een begin van het ontwerp te gaan maken. En vervolgens op het definitieve uit te komen. (Benyon, 2010, p187‐188) Hoe gebruik je het: Je begint met simpele schetsen dit doe je zolang totdat jij denkt ja dit wordt hem. Als je eenmaal het gewenste ontwerp hebt geschetst kun je het omzetten naar een photoshop bestand en meerdere pagina’s maken. Vervolgens kun je gaan testen of het ontwerp duidelijk genoeg is voor de gebruiker en/of opdracht gever. Waar moet je op letten als je het gaat gebruiken: Je moet zeker weten dat het gekozen ontwerp het juiste ontwerp wordt. Als je je later toch nog bedenkt en je bent in een latere stadium kun je alles opnieuw gaan doen.

5.1.3 Conceptual scenario’s Wat is het: Je beschrijft hoe het product in de toekomst wordt gebruikt en wat het doel is ervan. Waarom gebruik je het: Dit geeft jou en de opdrachtgever meer inzicht in het eindproduct. Hoe gebruik je het: Je maakt een verhaaltje hoe het product gebruikt gaat worden dit doe je heel uitgebreid ook beschrijf je de doel erin. Waar moet je op letten als je het gaat gebruiken: Je moet ervoor zorgen dat het een realistisch verhaaltje is en dat alle informatie ook relevant is aan het product. (Benyon, 2010, p66)

5.1.4 Storyboarden Wat is het: Dit is eigenlijk het zelfde als conceptual scenario’s alleen in plaats van tekst teken je het verhaaltje Waarom gebruik je het: (Benyon, 2010, p180‐181) Dit geeft een beter beeld van de situatie waarin het gebruikt wordt dan een conceptual scenario. Hoe gebruik je het: Je maakt een aantal vakjes en gaat er een verhaaltje in tekenen. Het verhaaltje gaat over hoe het product gebruikt gaat worden en wat het doel is van het product. Waar moet je op letten als je het gaat gebruiken: Je moet duidelijk tekenen zodat het verhaaltje duidelijk overkomt.

24

12027766


5.2

12027766


Zie Figuur hoofdstuk 2.1.2 Wat is het: Dit is de volgende stap waar je je ideeën weer gaat sorteren en uitkiezen welke erover blijven. Waarom gebruik je het: Je gebruikt dit om je ideeën overzichtelijk te maken en om de beste en origineelste ideeën uit te gaan kiezen. Hoe gebruik je het: Je sorteert eerst weer alle ideeën zodat dit overzichtelijk wordt om keuzes te gaan maken. Daarna ga je uitkiezen welke ideeën belangrijk zullen zijn voor het concept. Waar moet je op letten als je het gaat gebruiken: Je moet wel opletten dat de ideeën die je uitkiest realistisch zijn om uit te werken.

5.2.1 Sitemap Zie Figuur hoofdstuk 4.2.1 Wat is het: De sitemap laat de structuur in de website zien. Waarom gebruik je het: Het geeft je een inzicht hoe je je concept op kan gaan bouwen. Hoe gebruik je het: Volgen Benyon (Benyon, 2010, p388‐390) is het eigenlijk een soort van diagram maken. Je begint met de hoofditem van je website vervolgens sorteer je alle onderwerpen in rijtjes onder je hoofditem. Voor een voorbeeld zie Figuur 5 Waar moet je op letten als je het gaat gebruiken: Je moet opletten dat je niet in de war raakt met navigatiemodel.

5.2.2 Content plan

Figuur 7(Het figuur geeft weer hoe een content plan eruit ziet). Reprinted from “Projectdossier periode C bijlage b (pp 12)”. 2013

Wat is het: In het contentplan beschrijf je alles wat op de site komt qua content. Waarom gebruik je het: Dit gebruik je om een overzicht te maken wat er allemaal op de website komt en wat bij welke pagina hoort. Hoe gebruik je het: Het handigste is om met Excel een tabel aan te maken met 9 kolommen. In deze kolommen staan 9 de volgende 9 onderwerpen: content item, plaat op site, content type, eigenschappen, aan te leveren door, bron, omzetten nodig, auteursrecht en status/ mededeling. Vervolgens zet je alles eronder zodat de tabel netjes wordt ingevuld. Als voorbeeld zie Figuur 7. Waar moet je op letten als je het gaat gebruiken: Je moet ervoor zorgen dat echt alles wordt aangegeven.

25


12027766

5.2.3 Flowcharts

Figuur 8(Het figuur geeft weer hoe een flowchart eruit ziet). Reprinted from “projectdossier periode C(pp 9)”. 2013

Wat is het: Het geeft aan via pijltjes en stukjes tekst welke stappen de gebruiker kan maken door de website heen. Waarom gebruik je het: Het geeft een duidelijke structuur van de website weer. Hoe gebruik je het: Een handige website is (Flowcharts.(n.d.). Retrieved from: http://www.let.rug.nl/~nerbonne/teach/grafisch/flowcharts/) het helpt je met het maken van een flowchart. Je hebt verschillende vormen met verschillende betekenissen. Een ruit staat voor een stap die gezet kan worden en een blok voor de actie. Je begint met een actie en vervolgens ga je naar een stap met een ja of een nee keuze. Daarna ga je naar de volgende stap of actie enzovoort. Je zet per standaardstap een nummer neer. Als duidelijk voorbeeld zie Figuur 8. Waar moet je op letten als je het gaat gebruiken: Je moet erop letten dat het een duidelijk structuur heeft en dat alle stappen en acties erin staan. (Flowcharts.(n.d.). Retrieved from: http://www.let.rug.nl/~nerbonne/teach/grafisch/flowcharts/)

26


12027766

5.2.4 Wireframes & annotations

Figuur 9(Het figuur geeft weer hoe een wireframe eruit ziet). Reprinted from “Projectdossier periode C (pp 11-15)”. 2013

Wat is het: De wireframes zijn bijna het zelfde als het vlekkenplan maar alleen meer gedetailleerd. Ook geef je elk element een nummer en naast of onder de wireframe geef je een uitleg wat die element inhoud. Waarom gebruik je het: Het geeft jou en de opdrachtgever een duidelijk beeld van de website mede dankzij de annotaties. Hoe gebruik je het: Je maakt een wireframe met behulp van balsemiq dit keer let je meer op de elementen. De elementen cijfer je netjes en ernaast ze je de uitleg over de elementen. Dit doe je voor elke pagina op de website. Zie als voorbeeld van een wireframe: Figuur 9 Waar moet je op letten als je het gaat gebruiken: (Saffer, 2010, p151‐155) Je moet zorgen dat alle elementen zich bevinden in de wireframe en geef en er een korte maar duidelijk uitleg bij wat het is en wat het doet.

27


12027766

5.2.5 Style guides Wat is het: Dit is eigenlijk bijna het zelfde als de style tile alleen nu zet je je style vast en doe je het in vorm van een document. Waarom gebruik je het: (Benyon, 2010, p329) Het laat duidelijk jou style zien en er staat in waarom je ervoor gekozen hebt. Hoe gebruik je het: Je maakt een document en onderbouwd alles. Bijvoorbeeld waarom heb je wel of niet een grid gebruikt, waarom heb je gekozen voor deze lettertype met deze opmaak. Welke visuele afbeeldingen zitten erin welke buttons vind ik op de website en waarom zijn ze bijvoorbeeld blauw. Waar moet je op letten als je het gaat gebruiken: Je moet opletten dat je alles juist beargumenteerd en alles in de style guide plaatst.

28


12027766

6 Realisatie Wat is het: Dit is de laatste fase van het model zie(van der Kooij (2013) 2.1.1 Het model). Dit is de fase waar je je ontwerp gaat realiseren. Waarom gebruik je het: Dit gebruik je om het ontwerp om te zetten naar een werkend platform. Hoe gebruik je het: Je gaat een website maken doormiddel van coderen. Hiervoor kun je bijvoorbeeld HTML, CSS, JavaScript en PHP voor gebruiken. Eventueel kun je ook kiezen om er een CMS (content management systeem) in te verwerken. Waar moet je op letten als je het gaat gebruiken: Je moet opletten dat je het ontwerp uitwerkt in de meest recente script die er op dat moment is.

6.1

Divergeren in de realisatiefase

6.2


Wat is het: Dit is de laatste stap je gaat alle ideeën uitwerken op je website. Waarom gebruik je het: Om alle ideeën juist weer te geven op de website. Hoe gebruik je het: Als laatste moet je je hi‐fi prototype uitgaan werken daarna moet je gaan testen. Waar moet je op letten als je het gaat gebruiken: Je moet zorgen als alles af is dat je goed gaat testen voordat je het oplevert omdat dan een klein foutje fataal kan zijn.

6.2.1 Hi‐fi prototyping & testing Wat is het: Volgen (Benyon, 2010, p185‐186) is een hi‐fi prototype en een gedetailleerde versie van het product alles werkt en de interactie is aanwezig. Als dit af is ga je vervolgens op alles testen. Waarom gebruik je het: Dit doe je om de website juist te gaan opleveren. Hoe gebruik je het: Je maakt een hifi protype oftewel een werkende website als deze helemaal af is dan ga je op alles testen. Werkt hij in verschillende browsers, werken alle linkjes etc. Als dit af is is die klaar voor oplevering. Waar moet je op letten als je het gaat gebruiken: Je moet er goed op letten dat alles goed is getest.

29


6.2.2 Experience testing Wat is het: Je gaat nu je hi‐fi prototype laten testen door gebruiker en zo nodig opdrachtgever. Waarom gebruik je het: Dit doe je om kleine wijzigingen door te kunnen voeren als een gebruiker iets onduidelijk vind. Hoe gebruik je het: Je laat de gebruiker rond klikken en rond surfen op je website en observeert of die moeilijkheden op de website tegen komt etc. Waar moet je op letten als je het gaat gebruiken: Volgens (Rick Barron, Experience testing, n.d.) moet je er op letten dat de gebruiker echt alles test van de website.

30

12027766


12027766

7 Bronvermelding: Omschrijving Boek van één auteur

Referentie Benyon, D. (2010). Designing Interactive Systems A comprehensive guide to HCI and interaction design 2nd ed., Adison Wesley Boek van één Saffer, D. (2010). Designing for interaction; creating innovative auteur Applications and Devices2nd ed., New Rider, Berkely Figuur 1 (nb(2013. kick‐off project D. Retrieved from Blackboard Een plaatje portal haagse hoge school: foto van het https://blackboard.hhs.nl/bbcswebdav/pid‐1174244‐dt‐content‐rid‐ web 1931386_2/courses/ICTM_D‐PR/kick‐off%20project%20D.pdf Een plaatje Figuur 2 (nb(2013). Reader inhoudsopgave en instructies Project D‐ foto van het 1. Retrieved from Alexvdk website: web http://alexvdk.nl/hhs/Reader_inhoudsopgave_en_instructies_Projec t_D‐1.pdf Figuur 4, Figuur 5, Figuur 8, Figuur 9 (van der Kooij(2013). Een plaatje Projectdossier Periode C. Retrieved from Alexvdk website: foto van het http://alexvdk.nl/hhs/projectdossier.pdf) web Een plaatje Figuur 7 (van der Kooij(2013). Projectdossier Periode C bijlage b. foto van het Retrieved from Alexvdk website: web http://alexvdk.nl/hhs/Contentplan.pdf) Figuur 6 (van der Kooij(2013). Projectdossier Periode C styletile. Een plaatje Retrieved from Alexvdk website: http://alexvdk.nl/hhs/styletile.pdf) foto van het web Hers, N (2012) Reader 1, Creative Techniques, verkregen in Periode Elektronisch document van B, via Haagse Hoge School, Web site: www.alexvdk.nl/hhs/Reader_1,_Creative_Techniques_2012‐ een universiteit of 12,_versie_3.pdf. faculteit Vanden Bos, P.(2010 june 29). How to set business goals. Verkregen Elektronisch artikel zonder 2013, via http://www.inc.com/guides/2010/06/setting‐business‐ papieren goals.html versie Van Nouhuys, R. J.(2011 march 29). Customer Journey Mapping: Elektronisch artikel zonder klantervaring als inspiratie voor strategie en ontwerp. Verkregen 2013, via papieren http://www.frankwatching.com/archive/2011/03/29/customer‐ versie journey‐mapping‐klantervaring‐als‐inspiratie‐voor‐strategie‐en‐ ontwerp/ Elektronisch tips voor optimale vindbaarheid, betrouwbaarheid en conversie.(z.d.). verkregen 2013, via document waarbij geen http://www.trendwerk.nl/vormgeving/tips‐vindbaarheid‐ auteur of betrouwbaarheid‐conversie/#more‐2689 datum bekend

31

verwijzing

Alexander van der Kooij is. Een plaatje foto van het web Video

Figuur 3(Het figuur is een voorbeeld van een CJM). Retrieved from “http://www.frankwatching.com/wp‐ content/uploads/2011/03/customer_journey3.png”. 2013 Rick Barron(n.d.). User Experience Testing Methods [Video file]. Retrieved from http://www.slideshare.net/visionary/user‐experience‐testing‐ methods

32

12027766

Reader. Datum: Versie: 1.0 Projectgroep: CMD D Naam: Alexander van der Kooij Student nr.:

Recommend Documents