Van schets tot klikbaar prototype

We bepalen eerst samen met de klant welke pagina’s we gaan uitwerken. Vervolgens maken we een keuze over de mate van detail. We kunnen een aantal pagina’s uitwerken met stiften en papier, een klikbaar model zonder vormgeving maken of direct de teksten, afbeeldingen en het visueel ontwerp toevoegen.

Van schets naar klikbaar prototype

In de ideale situatie beginnen we klein op papier en voegen we geleidelijk in het proces meer toe. De schetsen vertalen we naar een klikbaar prototype. Je kunt dan al echt door de site klikken, hoewel die nog niet visueel ontworpen is. Het klikbaar prototype vertalen we weer naar het uiteindelijke visuele ontwerp. Door ook alvast de juiste teksten en afbeeldingen toe te voegen, krijgt de klant een goed beeld van hoe de site uiteindelijk zal zijn.

Ontwerpen van een auto

Vergelijk het met het ontwerpen van een auto. Dat begint schetsmatig en wordt steeds gedetailleerder. Van een draadmodel, via een digitaal 3D-model naar een schuimmodel. Pas als alles klopt, wordt het in productie genomen. Zo doe je dat ook bij websites.

Ideeën delen

Bij het omschrijven van complexe problemen, raken mensen vaak de draad kwijt. Logisch, niet voor niets is er een probleem. Een prototype maakt de oplossing visueel en vaak snappen mensen weer waar het om gaat. Sterker nog, je prototype delen met anderen leidt tot nog meer en betere ideeën! We gaan dan alternatieve ontwerpen testen en geleidelijk komen we tot het definitieve ontwerp. We wijzigen het prototype op basis van de input en testen ‘m weer. Het prototype is relatief eenvoudig te maken en te veranderen, waardoor we tijd hebben om fouten te ontdekken en weg te werken die anders in een latere fase pas aan het licht zouden komen. Iets toevoegen of aanpassen in het prototype gaat vele malen sneller en is veel goedkoper dan het aanpassen van een site die al geprogrammeerd is.

Snel resultaat

Je kunt met iemand lang doorpraten over technische specificaties en ‘wat je website straks allemaal kan’. Maar als je het niet voor je ziet dan leveren deze gesprekken vaak weinig op. Het prototype is het praatstuk en zorgt voor een ‘Ow, bedoel je het zo’ effect. De klant ziet immers wat hij krijgt. Met een prototype aan het begin van de fase heb je snel een tastbaar praatstuk. We kunnen al in een vroeg stadium het gesprek aangaan en ervoor zorgen dat we met z’n allen op één lijn zitten. Dit voorkomt veel onnodig overleg.

Prototypes testen

Nadat we een prototype hebben gemaakt kunnen we dit direct testen met de bezoekers van de site. Zelfs een papieren prototype is al te testen met een gebruikerstest. We geven mensen een korte opdracht en vragen hen deze uit te voeren op de schermen. We laten de deelnemer met zijn vinger aanwijzen waar hij of zij zou klikken. Onze testbegeleider speelt voor computer en wisselt telkens de geschetste schermen. Het voordeel van het testen op papier is dat we zelfs tijdens de test alternatieven kunt schetsen. Ook worden deelnemers door papier meer gestimuleerd om op conceptniveau feedback te geven. Het is immers nog maar een papieren schets.

Een ijzersterke site

We voegen de juiste tekst tekst en afbeeldingen toe aan het klikbaar prototype, zodat we ook die vroegtijdig kunt testen in een gebruikerstest. Aan het einde van de dag weten we precies wat goed werkt en wat we nog moeten verbeteren. Eventueel kunnen we de verbeterde versie nogmaals testen. Zijn het slechts details die we aanpassen, dan voorzien we het prototype van een visueel ontwerp. Steeds weer doorlopen we de cirkel van maken, testen en aanpassen en zo komen we uiteindelijk tot een ijzersterke site.

Zin om te gaan schetsen?

Download dan direct je schetspapier.

Ook leuk om te lezen

Grafisch ontwerp, functioneel en mooi

Een grafisch ontwerper bepaalt hoe de site eruit komt te zien. Hij gaat aan de slag met het prototype of de verbeterschetsen en voegt zijn expertise toe aan het geheel.

• Inzicht in het kijkgedrag van je websitebezoekers met eye tracking
• Knelpunten opsporen met gebruikerstesten

• Dit bericht is onderdeel van het volgende thema:
• Tools 30