Reader Datum: 13 02 2013 Versie: 1.0 Projectgroep: CMD D 1.03 Naam: Alexander van der Kooij Student nr.: 12027766 Docent: P. Esser
Inhoud 1. Inleiding... 4 2. De CMD ontwerpmethode... 5 2.1 De ontwerpfasen LL, CC, DD en MiR... 5 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 Itereren, evalueren en reflecteren... 7 3. 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 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 4 Create Concepts... 18 4.1 Gereedschappen om te divergeren in conceptfase... 18 4.1.1 Creatieve technieken... 18 2
4.1.2 Moodboards... 19 4.1.3 Metaforen... 19 4.2 Gereedschappen om te convergeren in conceptfase... 20 4.2.1 Sitemap... 20 4.2.2 Style tiles... 21 4.2.3 Vlekkenplannen... 22 4.2.4 Visuele hiërarchie... 22 5 Design Details... 23 5.1 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 Gereedschappen om te convergeren... 25 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 6 Realisatie... 29 6.1 Divergeren in de realisatiefase... 29 6.2 Gereedschappen om te convergeren... 29 6.2.1 Hi fi prototyping & testing... 29 6.2.2 Experience testing... 30 7 Bronvermelding:... 31 3
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
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 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. 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. 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. 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
Dit model laat de stap divergeren en convergeren zien. Het laat je creatief nadenken en op de juiste ideeën komen. Je gebruikt het om de meest goede ideeën te bedenken en alle ideeën vervolgens goed op elkaar aan te laten sluiten. 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. 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 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. 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. Je stelt een verslag op doormiddel van de volgende onderwerpen: Onderzoeksvragen, Businessgoals, doelgroepanalyse, User needs, concurrentieanalyse/ benchmark, omgevingsanalyse en conclusies en aanbevelingen. 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 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. 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. 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 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
2.1.5 Design Details 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. 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. 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. 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 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. Dit gebruik je om het ontwerp om te zetten naar een werkend platform. 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. 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 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. Dit helpt je nog in het begin om te kijken of er nog iets veranderd moet worden aan de opdracht voordat je begint. Het is eigenlijk simpel kijken of alles correct qua inhoud van de opdracht en alle informatie die je erbij hebt gekregen van het bedrijf. Je moet alles goed nakijken zodat als er iets niet klopt dat je alles op tijd veranderd en/of aangeeft. 7
3. Look & Listen 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. 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. Je stelt een verslag op doormiddel van de volgende onderwerpen: Onderzoeksvragen, Businessgoals, doelgroepanalyse, User needs, concurrentieanalyse/ benchmark, omgevingsanalyse en conclusies en aanbevelingen. 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 Dit zijn onderdelen die je helpen om zo creatief mogelijk te gaan nadenken. Je gebruikt al deze gereedschappen om zo creatief mogelijk te denken en dus zoveel mogelijk ideeën te verzinnen. Deze fase heb je pas afgerond als je al deze gereedschappen hebt doorgelopen en netjes hebt geformuleerd. 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
3.1.1 PACT 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. 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) 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. 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 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. Je gebruikt dit om meer over je doelgroep te weten te komen en zo meer human centered (gericht op de gebruiker) te werken. 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) 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
3.1.3 Interviews 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. Je gebruikt dit om precies te weten te komen wat je wilt weten van je doelgroep. Het is veel gedetailleerder dan een observatieformulier. 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. 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 Benchmark dit kun je ook wel vergelijken met concurrentieanalyse. Hierin ga je kijken welke concurrenten je hebt en wie met wat zich onderscheid. Het is handig om te weten waar jij je in kan onderscheiden van je concurrenten. 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. 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 Het is een lijst dat je gaat maken met dingen die opvallen aan het huidige product. Het helpt je al een handje met ideeën die jouw product beter maakt dan het huidige product. 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. 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 Het maken van een enquêtes is net als het observatieformulier handig om te gebruiken om meer te weten te komen van de doelgroep. Het is handig om bijvoorbeeld te weten waar de doelgroep naar verlangt op een website en wat ze ervan verwachten. 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) 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 In het Nederlands beschreven: wat de gebruiker nodig heeft. Je geeft aan waarmee je de gebruiker gaat trigeren om naar jouw website te komen 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. 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). 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 Hiermee maak je simpele vragen waarmee je extra ideeën gaat creëren. Het is een simpele manier om extra ideeën te bedenken voor jouw product. 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. 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
3.1.9 Business goals 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) 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. 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. Je moet ervoor zorgen dat je dit juist formuleert zodat je zelf het juiste idee hebt over jou product. 3.1.10 Omgevingsanalyse 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. Het geeft bijvoorbeeld net zoals de business goals meer informatie over het bedrijf. 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. 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 Gereedschappen om te convergeren Zie Figuur1 hoofdstuk 2.1.2 Dit zijn de hulpmiddelen om de gecreëerde ideeën te gaan soorten en om keuzes te gaan maken uit de ideeën. Deze gereedschappen helpen je om alle ideeën overzichtelijk te maken en vervolgens 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. Semistructured 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. 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 Hierin beschrijf je een fictief persoon uit jouw doelgroep. (Benyon, 2010, p 73 75) Zodat je een beter beeld krijgt over de doelgroep. 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. 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
3.2.2 Taakmodellen Hierin beschrijf je de taakmodellen: taakcontext, taakbeschrijving en de taakdiagram. Dit doe je om duidelijk te beschrijven waarvoor waar en hoe het product gebruikt gaat worden. (Benyon, 2010, p 251 270) 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. 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
CJM oftewel Custom Journey Map. Je gaat kijken welke handelingen je persona moet doen om het product juist te gebruiken. Dit helpt je meer inzicht te krijgen hoe het product wordt gebruikt. Nouhuys(2011) 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. 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 Dit is een tabel die laat zien wat voor soort persoon wat aanspreekt en waar je dus rekening mee moet houden. Een makkelijk manier om te kijken met wie je waar rekening mee moet houden. 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. 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 Dit zijn de belangrijke punten in je website. Zodat je duidelijk weergeeft wat je hoofd onderwerpen en/of thema is van je website. 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) Je moet er voor zorgen dat het er niet te veel zijn en dat het echt belangrijke punten zijn. 15
3.2.6 Functionele eisen Zijn eisen die het systeem moet kunnen vervullen bijvoorbeeld functies of een specifiek uitstraling. (Benyon, 2010, p 147) Het laat zien aan jou maar ook aan de opdrachtgever welke eisen jij belangrijk vind en dus vaststelt. 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. 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 Dit zijn eisen die eigenlijk extra opties weergeven en extra informatie weergeven. (Benyon, 2010, p 147) Het laat zien wat voor extra s je aan de website wilt toevoegen. Je maakt een lijstje waarin je extra informatie over het systeem weergeeft en extra opties. 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
Het laat de belangrijkheid van de eisen zien. 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. 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. Je moet wel opletten dat je zo realistisch mogelijk doet. 17
4 Create Concepts 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. 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. 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 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 Dit zijn gereedschappen die je uitvoert om zoveel mogelijk ideeën te creëren voor je concept. Deze gereedschappen maken het makkelijker om te divergeren voor de conceptfase. Doormiddel van alle gereedschappen te doorlopen heb je genoeg ideeën bedacht om een mooi concept te maken. 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 Je gaat door verschillende stappen te doorlopen verschillende creatieve ideeën bedenken om je eindresultaat te maken. Het helpt je om op een goede manier veel ideeën te bedenken. 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. 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 Dit is eigenlijk een grote poster maken met alles erop alles wat je in je product gaat verwerken. (Benyon, 2010, p182) Dit kun je maken zodat je via het moodboard weer nieuwe ideeën kan creëren en het makkelijk te presenteren voor je werkgever. 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. 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 Een metafoor is eigenlijk een bestaand symbool koppelen aan een element. (Benyon, 2010, p203 208) Je kan het metafoor toepassen in je website zodat iedereen de indruk krijgt waarvoor de website is en/of wat het moet uitstralen. 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. 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
4.2 Gereedschappen om te convergeren in conceptfase Zie Figuur hoofdstuk 2.1.2 Dit is de volgende stap waar je je ideeën weer gaat sorteren en uitkiezen welke erover blijven. Je gebruikt dit om je ideeën overzichtelijk te maken en om de beste en origineelste ideeën uit te gaan kiezen. 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. 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 De sitemap laat de structuur in de website zien. (Benyon, 2010, p388 390) Het geeft je een inzicht hoe je je concept op kan gaan bouwen. 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 Je moet opletten dat je niet in de war raakt met navigatiemodel. 20
4.2.2 Style tiles Figuur 6(Het figuur geeft weer hoe een style tile eruit ziet). Reprinted from Projectdossier Periode C styletile. 2013 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. Je maakt voor jezelf een style tile aan zodat je alvast een beetje weet welke stel je moet gaan hanteren. 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. 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
4.2.3 Vlekkenplannen Dit zijn wireframes alleen minder gedetailleerd. (P.E.Esser, 2013, Project D) Je gebruikt dit om alvast een beetje inzicht te krijgen hoe je website eruit komt te zien in een vroege stadium. Met Balsamiq kun je heel gemakkelijk een simpele wireframe in elkaar zetten. 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 Het is een stuk tekst waarin je verteld hoe het er ongeveer eruit komt te zien. Dit gebruik je om de opdrachtgever al een beetje het idee te geven hoe de website er uit komt te zien. 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. 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