Na een stuk theorie en het bepalen van de input voor ons prototype gaan we eindelijk aan de slag! Input is belangrijk voor een succesvol prototype, dus lees het blog over Persona’s, de awareness ladder en fascinatie nog eens goed, voor je begint met het maken van een prototype van je nieuwe site of online applicatie.
Prototypen: Papier, photoshop of prototype?
Voor je begint met tools is het meestal goed eerst wat met pen en papier te maken. Deze old school methode werkt snel en efficiënt. Als je met klanten werkt kun je tijdens een gesprek over, bijvoorbeeld de persona’s, al snel wat op papier zetten om te kijken of je op één lijn zit.
Sommige webbouwers of ontwerpers prototypen direct het grafische design. In sommige gevallen gaat dat sneller dan eerst een interactief wireframe of rapid prototype te maken. Mooie tools hiervoor zijn bijvoorbeeld die van InVisionApp, waarbij je toch kunt klikken door je prototype ook al zijn er geen links aangemaakt in het design zelf. Bijvoorbeeld het nieuwe community prototype (Commons) voor Drupal 7.
Het grote nadeel van grafische prototypen is echter dat er door de opdrachtgever te veel op de grafisch details wordt gelet. We krijgen dan reacties als “Die knop is niet mooi!” en “Kan die kleur groen anders?”, in plaats van een discussie over welke onderdelen waar op de pagina moeten komen. Ik ben daarom dus geen fan van grafische prototypen. Neem een stap terug en maak een mooi wireframe! Het gaat sneller dan je denkt.
Desktop versus mobiele devices
Bepaal eerst voor welk device je wilt gaan ontwerpen. Uit je persona’s heb je als het goed is de informatie over de doelgroep die met jouw product of dienst in contact wil komen en welke acties ze graag zouden willen uitvoeren. Voor tablet of smartphone is dit vaak anders dan voor een desktopversie van je site.
Begin met de grote lijnen van je ontwerp
Voor het maken van prototypes zijn veel software tools voorhanden. Zelf gebruiken we het in mijn ogen beste programma op de markt Axure. Maar er zijn ook veel gratis tools op de markt zoals Mockingbird.
Begin eerst met de grote lijnen. Dit zijn meestal een header, een footer, een menu en een content area. Standaard zou dit zo eruit kunnen zien:
Bepaal in deze fase ook of je een 1, 2 of 3 kolommen design wil. Maar wees creatief hiermee! Zie ook mijn eerste artikel over creatief versus logisch nadenken.
Deze grote lijnen zijn belangrijk om de algemene structuur te bepalen. Natuurlijk kan je homepage afwijken van diepere pagina’s, maar let hier ook goed op dat het wel op elkaar aansluit. Het is goed om hiervoor een zogenaamde grid te gebruiken. Een goed gridsysteem is bijvoorbeeld het 960 gridsysteem.
Deel je prototype in blokken in
De meeste CMS’en werken met blokken, houd in je prototype daar al rekening mee en schets welke blokken waar dienen te komen. Dus als je een content area hebt voor bijvoorbeeld een nieuwsbericht, deel deze dan vervolgens op in een tekstcontent blok, een social media sharing blok, een reactie blok, etc. Op deze manier kun je alle benodigde blokken (die nodig zijn om je persona’s tevreden te stellen) plaatsen en hiermee schuiven tot alle blokken een goed plekje hebben gekregen.
Met welke pagina je begint maakt niet heel veel uit. Zelf vind ik de homepage fijn om mee te beginnen, omdat deze pagina vaak veel traffic krijgt. Werk zoveel pagina’s uit als nodig is. Voor een klein project zijn de benodigde pagina’s in ieder geval: de homepage, een content pagina (nieuws of blog) en een contact pagina. Prototypen voor grotere projecten waarbij veel functionaliteiten en doelgroepen zijn betrokken, hebben er soms wel tientallen nodig. Een programma als Axure werkt dan ook beter dan een online tool.
De details!
Hoe ver je gaat in je prototype hangt helemaal af van je eigen project. Bij GoalGorilla vinden we het belangrijk om behoorlijk ver te gaan, zodat we vroeg in het project problemen in het design kunnen opvangen. Zie hiervoor ook Geef je project een pak slaag!. Dus passen de 3 twitterberichten wel op de plek die je voor ogen had? En passen alle menu-items die je wilt wel in je menubalk?
Hieronder een link naar een prototype dat we voor Leferink Document Works hebben gemaakt ter inspiratie:
En het uiteindelijke grafische resultaat (en development na de klik):
Mobiele devices
Door de sterke groei van het gebruik van smartphones en tablets is prototyping belangrijker dan ooit. In plaats van 1 ontwerp dienen er nu 3, 4 of soms zelf 5 ontwerpen te worden gemaakt. Deze hebben allemaal hun eigen use case. Het is dus noodzakelijk om voor elk devices een apart prototype te maken.
Ook is het belangrijk dat er rekening mee wordt gehouden dat dingen als mouse-overs en drag ’n drop niet hetzelfde werken op mobiele devices. Het aanspreken van de hardware, zoals GPS stelt ons echter in staat om veel meer te doen met mobiele devices dan met desktop applicaties. Het gebruik hiervan staat nog in de kinderschoenen. Ik denk dat door het gebruik van prototypen deze veelal nog onbekende technieken de komende tijd een vogelvlucht zullen nemen!
Graag hoor ik ook jouw tips en trucks bij het maken van prototypen en welke tool je hiervoor gebruikt! Comments kunnen hieronder. Volgende week een artikel over hoe je je prototype vertaalt naar een grafisch design.
