CMD

ONTWERPTECHNIEKEN

Stefan Eikelenboom
16100549
 INHOUDSOPGAVE

LOOK & LISTEN 11

CREATE CONCEPTS 25

DESIGN DETAILS 33

MAKE IT REAL 43
 INLEIDING & CMD ONTWERPAANPAK
Deze waaier is een verzameling van allemaar technieken
die gebruikt worden bij het ontwerpen van een digitaal
systeem en het onderzoek naar de doelgroep, concurrentie
en opdrachtgever daarvan. Deze aanpak is gestructureerd
in vier onderdelen, te beginnen met de Look & Listen fase
waar we onderzoek doen naar de doelgroep, concurrentie
en opdrachtgever. Hierna volgen de Create Concepts fase
en de Design Details fase die zich respectievelijk focussen
op het ontwerpen en bedenken van concepten en het
ontwikkelen van de details en het uitvoeren van tests.We
sluiten de boel af met de Make it real fase waarin het
concept gerealiseerd wordt. Tussen de fases door wordt er
constant geëvalueerd en gereflecteerd om te zorgen dat
we de rode draad niet kwijt raken en om onze fouten te
herkennen en te verbeteren.
 DE CMD ONTWERPCIRKEL
Doel: Een visualisatie van het itererende ontwerpproces. In
de realiteit lopen de vier fases niet precies in elkaar over
maar vloeit het een over in het ander.
Wanneer: Bij het visualiseren van het ontwerpproces en
kan helpen bij het maken van een planning.
Voorwaarden:
- Het is een itererend proces, en dus ook nooit klaar.
- Tussen de fases door moet er geëvalueerd worden met
experts en de doelgroep.
- Ook moet er gereflecteerd worden om alle problemen
duidelijk te krijgen.
ren & Itereren
Reflecte

Loo
eal k&
ti R
Li
ke

ste
Ma

Reflecte
ren & Itereren

ren & Itereren

Reflecte

Cre
s
tal

ate
De

Co
n nce
sig
De pts

Reflecte
ren & Itereren
 DIVERGEREN & CONVERGEREN
Doel: Bij het divergeren draait het om het creëren van zo
veel mogelijk oplossingen voor het probleem. Bij het
convergeren ga je dingen wegstrepen om er vervolgens
eentje te gaan uitwerken.
Wanneer: Vroeg in het ontwerpproces wanneer het prob-
leem is vastghesteld. Deze techniek leidt tot een creatieve
oplossing.
Voorwaarden:
- Er moet een probleem gedefineerd zijn.
- Je moet eerst divergeren voordat je kan gaan
convergeren.
- Openminded zijn tijdens het divergeren en niet gelijk
dingen wegstrepen.

DIVERGEREN CONVERGEREN

Keuzes creëren Keuzes maken

LOOK & LISTEN
In deze fase doe je onderzoek naar de doelgroep,
organisatie, trends en de concurenten. Onderzoek
van de doelgroep, organisatie en concurrentie kan
je doen door te observeren of te interviewen. Voor
de concurrenten is het ook handig om een bench-
mark te maken voor een duidelijk overzicht van de
ups en downs van bepaalde organisaties.

CREATE CONCEPTS
In de Create Concepts fase ga je aan de slag met
het concept van je website. Dit doe je op basis van
de resultaten van de Look & Listen fase. Ook maak
je gebruik van mood- en storyboards, scenario’s en
maak je een lo-fi prototype.
DESIGN DETAILS
De design Details fase draait om het uitwerken
van een gekozen concept. Op basis van een
gedetailleert ontwerp maak je een betaversie van
je website. In het proces van detailleren, realliseren
en evalueren staat de gebruiker van de website
centraal en worden de verbandcen gelegd tussen
visual design, interaction design en web technolo-
gies.

MAKE IT REAL
In de laatste fase ga je het hele ontwerpproces
integreren en omzetten in een werkende website. Je
maakt een hi-fi prototype wat je voorlegt aan je
opdrachtgever. Dit ga je uitvoerig testen op met
verschillende personen uit de doelgroep om je
ontwerp boven de verwachtingen uit te laten
stijgen.
 ITEREREN

Doel: Door veel te itereren (herhalen, opnieuw doen)

voorkom je fouten in het ontwerpproces. Ook zorgt het dat
je precies blijft voldoen aan de eisen van de gebruiker of
opdrachtgever.
Wanneer: Na iedere fase. Het ontwerpproces is een
itererend proces, en elke fase zal dus constant in enige
mate weer terugkomen.
Voorwaarden:
- Je moet soms iets opnieuw doen
- Het kan zijn dat je vastloopt en weer van voor af aan
moet beginnen
- Blijven doen gedurende het hele ontwerpproces

DO

ACT

PLAN

CHECK
 EVALUEREN
Doel: Door veel te evalueren met de doelgroep en
opdrachtgever verminder je de fouten en kun je kijken of
het product goed (genoeg) aansluit op je doelgroep of bij
de opdrachtgever.
Wanneer: Na iedere fase. Het is belangrijk om constant te
blijven evalueren en verschillende tests uit te voeren om
fouten te voorkomen en aanpassingen te maken.
Voorwaarden:
- Er moet op verschillende manieren worden geëvalueerd.
- Er moet geëvalueerd worden met alle stakeholders.
 REFLECTEREN
Doel: Door te reflecteren raak je bewust van de problemen
binnen je werkgroep en hoe je daarmee bent omgegaan. Je
wordt bewust van je fouten en beschrijft hoe je er de
volgende keer beter mee om kan gaan.
Wanneer: Reflecteren werkt het beste wanneer een
gebeurtenis vers in je geheugen zit zodat je nog precies
weet hoe het je heeft geraakt.
Voorwaarden:
- Je moet geraakt worden door de gebeurtenis waar je
over reflecteert.
- Spreek vanuit jezelf.
- Zeg hoe je dingen hebt ervaren.
 LOOK & LISTEN

Doel: Meer te weten komen over de doelgroep, de

opdrachtgever en de concurrentie.
Wanneer: Het is de erste fase van een project. Je kijkt met
een open blik om je heen en probeert geen vooroordelen te
vellen.
Voorwaarden:
- De doelgroep moet bekend zijn.
- Gebruik van verschillende onderzoeksmethoden zoals
interviewen, observeren en/of deskresearch.
- In deze fase stel je een persona, benchmark, en de user
needs op.
 PACT

Doel: Een hulpje voor bij het ontwerpen. P staat voor

people, waar je dus de gebruiker onderzoekt, A staat voor
activities waar je kijkt naar de activiteiten die ze verrichten,
C voor context waarin het systeem gebruikt gaat worden,
en de T voor de technologieën die daarbij komen kijken.
Wanneer: Aan het begin van het onderzoek om een
stevige fundering te leggen.
Voorwaarden:
- Met PACT bepaal je het domein waarin je gaat ontwer-
pen.
- Het uiteindelijke systeem moet aan alle voorwaarden
voldoen.
 OBSERVEREN

Doel: Kijken hoe eenpersoon uit de doelgroep zich

gedraagt tijdens een bepaalde taak. Hierbij worden in
sommige gevallen nog vragen gesteld.
Wanneer: Om het gedrag van een gebruiker te bepalen.
Voorwaarden:
- Er zijn verschillende manieren om te observeren.
- Maak een observatieformulier van te voren.
- Maak een situatieschets.
 INTERVIEWEN

Doel: Door te interviewen kun je de problemen en belan-

gen van de doelgroep achterhalen.
Wanneer: Als je de problemen en belangen van een
gebruiker wilt achterhalen.
Voorwaarden:
- Je kan individueel of in een groep interviewen.
- Maak een topiclijstje en stel een aantal hoofdvragen vast
waar je in ieder geval een antwoord op wil hebben.
- Neem het interview op en maak er een transcript van
zodat je achteraf alles nog eens uitgebreid kunt teruglezen.
 BENCHMARKING

Doel: Een duidelijk overzicht kweken van de goede en

slechte punten van de directe en indirecte concurrenten.
Wanneer: Als je je concurrenten onderling wilt vergelijken.
Voorwaarden:
- Er zijn directe en indirecte concurrenten.
- De concurrenten moeten op dezelfde punten worden
beoordeeld.
- Er moet een algemeen duidelijk waarderingsysteem zijn.
 HEURISTIC EVALUATION

Doel: Je concept wordt beoordeeld door een expert aan de

hand van een aantal heuristics (richtlijnen).
Wanneer: Tijdens een evaluatiefase is het handig om een
Heuristic Evaluation te doen. De expert kijkt er op een
andere manier naar dan een gebruiker.
Voorwaarden:
- De evaluation wordt gedaan op basis van richtlijnen.
- Je kunt ook zelf een Heuristic Evaluation doen op het
ontwerp van een ander.
- De fouten moeten geprioriteerd worden.
 PERSONA’S

Doel: Door het maken van een fictief persoon die de

doelgroep representeert krijg je een beeld bij je typische
gebruiker.
Wanneer: Als je doelroep goed wilt afbakenen en je
design strategieën daarop wilt afstemmen.
Voorwaarden:
- Het moet een fictief persoon zijn.
- De user needs moeten er in terugkomen.
- Er moet een vorm van een persoonlijkheid uit terug-
komen.
 TAAKMODELLEN

Doel: Een visueel overzicht creeëren van hoofd- en

subtaken in de goede volgorde.
Wanneer: Bij het onderzoeken van de activiteiten die
binnen PACT vallen.
Voorwaarden:
- De overkoepelende taak staat bovenaan.
- Opeenvolgende taken staan naast elkaar van links naar
recht en dienen in respectievelijke volgorde worden uitgevo-
erd.
- Verdiepende taken komen van boven naar beneden.

HOOFDTAAK

Subtaak 1 Subtaak 2 Subtaak 3

Taak 1.1 Taak 1.2 Taak 2.1 Taak 2.2 Taak 3.1 Taak 3.2
 CUSTOMER JOURNEY MAPPING

Doel: Het visualiseren van het proces van de gebruiker.

Wanneer: Om klantgericht te ontwerpen. Wordt toegepast
na het doelgroepenonderzoek.
Voorwaarden:
- Leg de focus op een bepaald deel van de behoeften.
- Verdeel de behoeften in taken.
- Hou er rekening mee dat niet elke klant hetzelfde pad
aflegt.
 USER STORIES

Doel: Het vertalen van een concept naar behoeftes.

Daarmee wordt het voor een ontwerpteam duidelijker
waar ze op moeten letten en aan welke voorwaarden ze
moeten voldoen.
Wanneer: Als je doelgericht en snel wilt werken aan losse
functionaliteiten.
Voorwaarden:
- Zijn klein en overzichtelijk.
- Elke user story beschrijft een enkele functionaliteit.
- Userneeds zijn onafhankelijk van elkaar.
 DESIGN PRINCIPLES

Doel: Het weergeven van de kernwaarden volgens welke je

je ontwerp maakt. Worden gebruikt om richting te geven
aan het ontwerpproces.
Wanneer: Bij de start van het project stel je je Design
Principles op. Zo baken je een gebied af binnen welke je
kan gaan ontwerpen.
Voorwaarden:
- Zijn uniek en onderscheidend.
- Geven richting maar spreken een breed gebied aan.
- Kort maar krachtig.

VOORBEELD
Design Principles van de Engelse overheid
- Start with user needs
- Do less
- Design with data
- Do the hard work to make it simple
- Iterate. Then iterate again
- This is for everyone
- Understand context
- Build digital services, not websites
- Be consistent, not uniform
- Make things open: it makes things better
 FUNCTIONELE EISEN

Doel: Het omzetten van invoer in uitvoer. Beschrijven hoe

het systeem werkt.
Wanneer: Als je wilt beschrijven wat het systeem precies
moet kunnen, maar nog niet hoe.
Voorwaarden:
- Moet aangeven wat een systeem doet voor de gebruiker.
- Elke eis beschrijft een enkele functie.
- .Mogen niet beschrijven hoe het systeem doet wat het
doet.

VOORBEELD
- De gebruiker moet gegevens kunnen opvragen uit
de database.
- Het systeem zal verschillende viewers ter beschik-
king stellen zodat de gebruiker alle verschillende
documenten in het documentenarchief kan lezen
- De gebruiker moet kunnen inloggen met een inlog-
naam en wachtwoord
 NIET-FUNCTIONELE EISEN

Doel: Beschrijven hoe een systeem te werk gaat.

Wanneer: Als je wilt beschrijven hoe een systeem doet wat
het doet.
Voorwaarden:
- Moet aangeven hoe een systeem doet wat het doet.
- Een eis kan betrekking hebben tot meerdere functies.
- .Moeten specifiek zijn beschreven.

VOORBEELD
- De knoppen van het systeem moeten rood zijn.
- Het systeem moet gebruiksvriendelijk zijn voor dove
mensen.
- Een gebruiker moet een vertrouwd gevoel krijgen
bij gebruik van het systeem.
 MOSCOW

Doel: Het prioriteren van systeemeisen .

Wanneer: Als je verschillende systeemeisen wilt ordenen op
volgorde van prioriteit. Zo creeer je overzicht binnen je
project Mo=Must have, S=.Should have, Co=Could have,
W=Won’t have.
Voorwaarden:
- Must have betekent dat het systeem niet werkt zonder
deze functies.
- Should have betekent dat deze eisen essentieel zijn als er
genoeg tijd is.
- .Could have betekent dat deze eisen minder belangrijk
zijn, maar het systeem wel enigsinds verbeteren.
- Won’t have betekent dat deze eisen kunnen wachten tot
een latere ontwikkelronde.
 CREATE CONCEPTS

Doel: Het ontwerpen van de eerste concepten en inzicht

verkrijgen in welk concept het beste past.
Wanneer: Na de Look & Listen fase en voor de Design
Details fase, al is het niet exact afgebakend.
Voorwaarden:
- Maak gebruik van brainstormtechnieken.
- Gebruik een story- en moodboard.
- Het is belangrijk dat er al een stevige fundering is gelegd
in de Look & Listen fase.
 CREATIEVE TECHNIEK: 365-METHODE

Doel: Een gestructureerde manier van brainstormen. Zes

mensen schrijven in drie ideeën op een blaadje. Na vijf
minuten wordt deze doorgegeven tot elk blaadje bij
iedereen geweest is. Zo worden er snel 108 ideeën gege-
nereerd.
Wanneer: Aan het begin van de fase. Deze ideeën zijn nog
geen definitieve concepten, maar kunnen daar wel tot
worden uitgewerkt.
Voorwaarden:
- Elke persoon moet minimaal 3 ideeën opschrijven. Niet
minder.
- Niets is fout, schrijf dus alles op.
- Laat je inspireren door de andere ideeën die al op het
blaadje staan.

3 4
2 5
1 6
 MOODBOARDS

Doel: Het geven van een sfeerimpressie van het gekozen

concept.
Wanneer: Als je een concept hebt gekozen en dit wilt
presenteren aan een opdrachtgever.
Voorwaarden:
- Er mogen geen wireframes of schetsen van het concept
in.
- Maak gebruik van tijdschriften, kranten, verpakkingen,
enzovoort.
- Maak het fysiek zodat een eventuele opdrachtgever er
omheen kan lopen of dingen kan voelen.
 METAFOREN

Doel: Bekende elementen terug laten komen in een nieuw

systeem zodat de gebruiker zich er meer op zijn gemak
mee voelt.
Wanneer: Als je een opdrachtgever of gebruiker een
bekend gevoel wilt geven bij een nieuw concept.
Voorwaarden:
- Een metafoor is een middel, geen doel.
- Maak het logisch en begrijpbaar voor je doelgroep.
- Moet terug te koppelen zijn op iets ‘’echts’’.
 SCENARIO’S

Doel: Een verhalende weergave waarin een gebruiker een

bepaalde taak uitvoert binnen het systeem. Er wordt een
situatie beschreven, en dus ook de context. Hierdoor krijg je
inzicht in de emoties en handelingen van de gebruiker.
Wanneer: Je kan een scenario maken van de huidige
situatie (conceptual scenario), en van de situatie waarbij
het nieuwe systeem is geïmplementeerd (concrete scenar-
io).
Voorwaarden:
- Er moet een probleem zijn dat wordt aangekaart of
opgelost.
- Weet binnen welke context het systeem gebruikt wordt.
- Ken de gebruiker.
 STYLETILE

Doel: De visuele elementen van je concept naar buiten

brengen. Hieronder vallen bijvoorbeeld de buttons, links,
lettertypes, kleuren enzovoort.
Wanneer: Als je begint met het ontwerpen van je definiti-
eve concept is het handig om persoonlijkheid te creeëren
en om houvast te hebben aan een standaard.
Voorwaarden:
- Maak een visuele taal die je systeem spreekt.
- Maak er een samenhanged thema van.
- Overleg met de klant of de uitstraling goed is.
 VISUELE HIËRARCHIE

Doel: Het navigeren van de ogen van de gebruiker. Dit is

belangrijk omdat de bezoeker zich snel door het design
heen moet kunnen manouvreren.
Wanneer: Tijdens het designen van je ontwerp.
Voorwaarden:
- Let op positie, grootte, contrast enzovoort.
- Hou rekening met de Gestalt principes.
- Let op kleuren en hun betekenis/associatie.
 CONCEPTKEUZEMATRIX

Doel: Het categoriseren van de content van de website.

Hierdoor zie je makkelijk hoeveel content er is en waar het
komt te staan.
Wanneer: Als de content van de website is bepaald, dus in
de Design details fase.
Voorwaarden:
- Maak kleine beschrijvingen van de content.
- Beschrijf de content op verschillende manieren voor
verduidelijking.
 DESIGN DETAILS

Doel: Het uitwerken van alle details zodat het project

gerealiseerd kan worden.
Wanneer: Na de Create Concepts fase en voor de Make it
Real fase, al is het niet exact afgebakend.
Voorwaarden:
- Maak gebruik van patterns, styletiles en wireframes etc.
- De Create Concepts fase moet enigsinds zijn afgerond.
- Test door middel van heuristic evaluations en scenar-
io-based user testing.
 DESIGN PATTERNS

Doel: Door patterns toe te passen binnen je ontwerp maak

je de website toegankelijker en makkelijker doorheen te
navigeren.
Wanneer: Als er al een beschikbare oplossing is voor een
ontwerpprobleem kun je deze gelijk hergebruiken.
Voorwaarden:
- ‘’Beter goed gejat dan slecht gemaakt’’.
- De patronen die je gebruikt moeten te verantwoorden
zijn.
- Het patroon is geen directe oplossing maar een sjabloon.
 LO-FI (PAPER) PROTOTYPING & TESTING

Doel: Het is een snelle manier om je concept te presen-

teren en de doelgroep/opdrachtgever een algemeen idee
te geven van hoe het in zijn werk gaat.
Wanneer: Als we snel willen weergeven hoe het project
eruit ziet.
Voorwaarden:
- Test het systeem met gebruikers, niet opdrachtgevers.
- Maak een moodboard om de algemene sfeer van de
website te presenteren.
- Maak een uitgewerkt paper prototype.
 CONCEPTUAL SCENARIO’S

Doel: Het vinden van antwoorden op dingen die een

gebruiker zich afvraagt tijdens het gebruiken van een
product. Door emotie en context toe te voegen is het
makkelijker voor ontwikkelaars te begrijpen wat de gebrui-
ker precies wil.
Wanneer: Tijdens de Create Concepts fase.
Voorwaarden:
- Handig in combinatie met een persona.
- Maak het verhaal fijn om te lezen.
- Beschrijf het concept uitvoerig.
 STORYBOARDS

Doel: Het laat een typische situatie van de gebruiker en

het systeem zien. Een visualisatie van het uiteindelijke
gebruiksproces.
Wanneer: Tijdens de Create Concepts fase bij het visual-
iseren van je concept.
Voorwaarden:
- Oorzaak gevolg en oplossingen moeten te pas komen.
- Maak gebruik van afbeeldingen en korte stukjes beschri-
jvende tekst.
- Let op dat je geen schetsen van het concept laat zien in
het storyboard.
 SITEMAPS

Doel: Een hiërarchische weergave van de content op een

website.
Wanneer: Tijdens het opbouwen van de website in de
Design Details fase.
Voorwaarden:
- Moet structuur weergeven.
- Moet aangeven welke pagina’s het meest belangrijk zijn.
- Moet aangeven welke pagina’s het meest worden
bezocht.
 CONTENT PLAN

Doel: Het bepalen van de positie en timing van de infor-

matie van het concept.
Wanneer: Wordt gebruikt om duidelijk te maken wat voor
soort informatie er geplaatst gaat worden op welke plek.
Draagt bij aan de relevantie en vindbaarheid van infor-
matie.
Voorwaarden:
- Moet structuur weergeven.
- De informatie moet beknopt zijn.
- De kernboodschap moet naar voren komen.
 FLOWCHARTS

Doel: Schematisch weergeven van de keuzes en consequen-

ties die een gebruiker krijgt bij het uitvoeren van een
bepaalde taak.
Wanneer: Voordat er aan een hi-fi prototype begonnen
kan worden.
Voorwaarden:
- Verschillende beslissingen moeten resulteren in verschillen-
de resultaten.
- Pagina’s moeten afzonderlijk worden weergeven.
- Er moet een proces worden beschreven.
 WIREFRAMES & ANNOTATIONS

Doel: De funcitionaliteit van het ontwerp weergeven. Het is

de blauwprint van het uiteindelijke ontwerp.
Wanneer: Als je de navigatie of indeling wilt weergeven op
een snelle manier waar niet te veel vormgeving aan te pas
komt.
Voorwaarden:
- De focus lit op de inhoud, niet de vormgeving.
- De navigatie moet werken.
- Dingen kunnen duidelijk gemaakt worden door de wire-
frames te annoteren.
 STYLEGUIDE

Doel: Het vastleggen van de ontwerpregels. Een middel bij

het maken van een rode draad door het ontwerp.
Wanneer: Als eerste stap van het ontwerpen van het
eindproduct.
Voorwaarden:
- De kleuren van de website moeten naar voren komen.
- De typografie moet naar voren komen.
- Het logo moet ook te zien zijn op een relevante posisie.

#6de2c6 #89ef89 #2d98e0 #d2f761

HEADER Regular text
Josefin Sans Semibold Josefin Sans Light
12pt #000000 12pt #000000
 MAKE IT REAL

Doel: Het realiseren van je systeem. Dit is de laatste fase.

Wanneer: Na de Design Details fase. Er is genoeg data
verzameld en er zijn genoeg details aanwezig om het
eindproduct te realiseren.
Voorwaarden:
- De Design Details fase moet zijn afgerond.
- Er moet voldoende geëvalueerd zijn.
- Er moet voldoende kennis aanwezig zijn.
 HI-FI PROTOTYPING/TESTING

Doel: Het testen van de usability van het ontwerp.

Wanneer: Voor de lancering van het definitieve eindprod-
uct. Handig om de laatste foutjes uit het systeem te krijgen.
Voorwaarden:
- De functionaliteit moet vlakbij het eindproduct liggen.
- De interface moet getest worden.
- De experience moet getest worden op het gebied van
interactie, flow en gedrag.
 PROTOTYPING TOOLS

Doel: Het weergeven van een versie het eindproduct zodat

hierdoor verbeteringen aan het licht komen.
Wanneer: Als het concept is uitgewerkt tot een bijna-defin-
itief eindontwerp. Hierdoor kunnen de laatste foutjes aan
het licht komen en de laatste dingen worden verbeterd.
Voorwaarden:
- Het moet een versie van het eindproduct weergeven.
- Er moet feedback gegeven kunnen worden.
- Het prototype moet getest kunnen worden door de
gebruiker.
 EXPERIENCE TESTING

Doel: Erachter komen of de eisen van het systeem daadw-

erkelijk zijn nagekomen. Er wordt getest of alles overkomt
op de gebruiker zoals de bedoeling is.
Wanneer: Als er een hi-fi prototype is, maar ook wanneer
het product gelanceerd is kunnen er tests uitgevoerd blijven
worden. Door middel van updates wordt er dan voldaan
aan behoeftes en problemen.
Voorwaarden:
- Er moeten relevante vragen worden opgesteld voor de
gebruiker.
- Emotie staat centraal in de vragen die worden opgesteld.
Er wordt gericht op beleving.
- De gebruiker moet het ontwerp voor het eerst zien.
VEEL ONTWERPPLEZIER