Clickable prototype

Aanleiding

Vóórdat ik aan de slag kan met het ontwikkelen van het platform, moeten er gebruikerstesten uitgevoerd worden. Voor deze gebruikerstesten wil ik gebruik maken van een clickable prototype om de testpersoon een zo goed mogelijk gevoel te geven van de werking en functies van de tool. Hiervoor ben ik aan de slag gegaan om de designs om te zetten naar een clickable prototype waar de testpersoon doorheen kan klikken alsof het een echte tool is.

Aanpak

De wireframes en designs heb ik gemaakt in het programma Sketch. Het clickable prototype ga ik echter in Adobe XD maken, omdat ik voorheen altijd met XD heb gewerkt en dus precies weet hoe de prototype functie in dit programma werkt. Dit scheelt mij uiteindelijk tijd, omdat ik niet hoef uit te vogelen hoe de prototype functie van Sketch werkt.
 

Resultaten

In Adobe XD zit een functie om Sketch bestanden te openen en deze functie werkt (tot verbazing) best goed. Het enige wat ik heb gedaan zijn de iconen weer goed gezet, onnodige symbolen verwijderd en alle componenten, ‘character styles’ en kleuren gereset. Vervolgens heb ik alle onnodige artboards verwijderd.

Op dit moment heb ik al een testplan opgesteld, waarin scenario's staan beschreven die de testpersoon moet gaan uitvoeren. Ik heb deze scenario's erbij gehouden en alle mogelijke stappen uitgewerkt in Adobe XD. Zo heb ik bijvoorbeeld extra producten uitgewerkt waar de testpersoon op kan klikken en heb ik alle pagina's voor zowel ingelogde- als gastgebruikers gemaakt. In de afbeelding hieronder zie je aan de linkerkant de pagina's voor de gastgebruikers en rechts de pagina's voor de ingelogde gebruikers. Onderin de afbeelding zie je de verschillende componenten die terugkomen op alle pagina's.

Vervolgens heb ik de prototype functie erbij gepakt en heb ik alle hover en click states per artboard toegevoegd. Dit maakt het voor de testpersoon mogelijk om door te klikken naar andere artboards en zelfs om te zien hoe een element reageert als je er met je muis overheen ‘hovert’. Hieronder is te zien hoe alle arboards gelinkt zijn met elkaar.

Ik heb een kort filmpje gemaakt waarin ik door het prototype klik en de verschillende hover en click states laat zien. Dit geeft een beter idee over hoe ik de tool ga testen tijdens de gebruikerstest. Dit filmpje is via de volgende link te vinden: https://youtu.be/QX59H3IcpFc

What's next

Het clickable prototype is nu klaar om getest te worden. De volgende stap is om gebruikerstesten in te plannen en deze af te nemen, de resultaten die uit deze gebruikerstesten komen kunnen verwerkt worden in een nieuwe versie van het design. Vervolgens kan er gestart worden met de ontwikkeling van de tool.