Hoe beoordeel je het design van je interactieve kaart? - Deel 2: Prototypes

In onze vorige blogpost schreven we over hoe je het design van je interactieve kaart kan beoordelen aan de hand van gebruikerstesten. In dit artikel zoomen we in op de technische stappen om een design idee om te vormen naar een complete interactieve ervaring.

Het maken van een prototype is de volgende belangrijke stap in het design proces na het identificeren van de belangrijkste gebruikersgroepen voor het project. Om te komen tot een prototype, worden er verschillende stappen en processen doorlopen. Laten we ze even opdelen in 2 grote groepen en hier dieper op ingaan aan de hand van een kleine design illustratie om het concreet te maken. We reiken handvaten aan om te komen tot een interactief prototype voor een kaart gebaseerde applicatie in Figma.

Low fidelity prototype

Het maken van een low fidelity prototype is een belangrijke stap in een project. Dit is het stadium van het design proces waarin je user personas combineert met de basis layout en de user flow van de applicatie. Afhankelijk van de beschikbare tijd en de hoeveelheid informatie, kan je starten met een papieren prototype of wireframes.

Papieren prototype

Zoals de naam reeds aangeeft, gaat dit over het schetsen van de basis layout met pen en papier. Dit is een interessante stap bij de start van een nieuw project of een complete redesign om dat het ruimte creëert om alle ideeën bij elkaar te brengen. Het is ook een goede manier om feedback te krijgen van collega's en stakeholders in een vroeg stadium.

Wireframe

In deze stap ga je de ideeën en user flows digitaliseren. Wireframes vormen de blauwdruk van het finale design, met alle design elementen en hun positionering.

Nu kan je je afvragen, "Waar ligt de uitdaging bij het maken van low fidelity prototypes voor kaart applicaties?". Het design proces verschilt niet zo veel van het standaard proces dat designers gebruiken bij andere project, maar de uitdagingen focussen zich op een specifiek aspect, namelijk de kaart.

In een kaart-gebaseerde applicatie, vormt de kaart het centrum van de toepassing. Dit betekent dat de kaart moet meegenomen worden tijdens het maken van de elementen van de gebruikersinteractie, in elke stap van de flow. Een ander aspect om bij stil te staan is, dat hoewel het doel van het project een kaart-gebaseerde applicatie is, de toepassing ook nog andere gebruikelijke website flows kan nodig hebben. Dit moet gefaciliteerd worden in het design.

High fidelity prototype

Een high fidelity prototype lijkt het meest op de uiteindelijke toepassing. Op vlak van kleur, gebruikersinteractie (inclusief interactieve elementen), en de ruimtelijke dimensies van elk element tonen ze hoe de applicatie er zal uitzien met aandacht voor elke pixel.

Zoals hierboven aangehaald, vormt een high fidelity prototype de volgende fase in het design proces. In een ideale situatie zijn de basis layout, de positionering van de design elementen en de gebruikersflow reeds vastgelegd in de vorige fase.

Interactief prototype in Figma

Nu gaan we wat dieper in op hoe je een interactief prototype kan maken in Figma. Iedereen die reeds heeft meegewerkt aan een design project of een IT-gerelateerd project, heeft wel eens van Figma gehoord. Het is een design tool met veel samenwerkingsmogelijkheden. De belangrijkste functie van Figma is het designen van interfaces, maar meer recent biedt de software ook tal van andere functionaliteiten (zoals een whiteboard, templates, plugins en meer).

De eerste stap voor je start met het designen van de schermen, is het voorbereiden van gemeenschappelijke elementen zoals knoppen, drop downs, checkboxes, inputs en kleuren. Dit wordt ook wel een component-gebaseerde aanpak genoemd. Het is ook mogelijk om componenten te gebruiken van bestaande libraries om dit proces te versnellen. Deze stap kan ook overgeslagen worden om direct te starten met het converteren van wireframes naar een high fidelity design. Echter het maken van componenten zorgt later voor tijdswinst bij het maken van meerdere schermen met dezelfde componenten en maakt het ook eenvoudiger om aanpassingen te doen aan componenten aanwezig op meerdere schermen.

Daarna kunnen de componenten en andere design elementen gepositioneerd worden naargelang de basis layout die vastgelegd is tijdens het wireframes stadium. In deze fase is het belangrijk om rekening te houden met design principes namelijk het bewaren van goede afstanden, het gebruik van de juiste tekst groottes en andere technische stappen die nog niet aan bod kwamen.

Nu worden alle afbeeldingen en kleuren toegevoegd die bij het design horen. Er kruipt veel tijd in het testen van verschillende kleurcombinaties en het aligneren van de verschillende design elementen. Houd hierbij de volgende stap indachtig, namelijk het creëren van interactieve flows die je toelaten te exploreren hoe gebruikers interageren met je design. Prototypes zijn een uitstekende manier om deze interacties en de vooropgestelde user flows te testen maar ook om designs te tonen aan stakeholders en feedback te verzamelen die helpt om ideeën te verbeteren.

Zo pak je het maken van een interactief prototype dus aan! De laatste stap is het eigenlijke uitvoeren van de testen met gebruikers. Volg onze blogs verder op voor meer tips, in een volgende post duiken we dieper in het onderwerp van interviews met gebruikers.