To wireframe or not to wireframe, that's the question

7 min.

Iedereen heeft ze wel al eens gezien, de lijnwerk tekeningen/schetsen die dienen als basis van een website, de zogenaamde wireframes of draadmodellen. Waarom gebruiken we die en welk onderscheid valt er te maken?

Wireframes zijn gebaseerd op de informatie architectuur of kortweg 'IA'. Deze worden bepaald tijdens een of meerdere voortrajecten tijdens de analyse fase. Wanneer we een beeld hebben hoe we informatie kunnen structureren en benaderen dan pas schrijven we uit hoe dit functioneel zal werken (de functionele analyse) en geven dit vorm als zogenaamde draadmodellen of wireframes.

Wireframes zijn er enerzijds als leidraad voor de ontwikkelaar en anderzijds als ondersteuning (visuele referentie) bij het verhaal dat we aan de klant willen vertellen. Ze zorgen in beide gevallen voor een soort laagdrempeligheid en helpen ons zo om alle neuzen in dezelfde richting te krijgen.

Wireframes

Wireframes zijn er in alle smaken en kleuren, maten en gewichten. Doorgaans spreekt men over low-fidelity en high-fidelity wireframes. Onder low-fidelity verstaan we de basis-structuur, meestal gewoon geschetst op papier voorzien van commentaar en opmerkingen van verschillende interne profielen. De high-fidelity wireframes daarentegen zijn voorzien van meer detail, tonen en beschrijven ook interactie (IxD) en zijn laagdrempeliger wanneer deze worden voorgelegd aan de klant aangezien deze dichter aanleunen tegen het (of een) design. Algemeen wordt ervan uitgegaan dat het ontwikkelen van high-fidelity wireframes doorgaans iets trager gaat dan je ideeën conceptueel uit te schetsen.

Van schets/low-fidelity wireframe naar een high-fidelity gegeven.
Van schets/low-fidelity wireframe naar een high-fidelity gegeven.

Ik durf dit tegen te spreken. Niettegenstaande deze wireframes meer detail en functionaliteiten bezitten mag men niet vergeten dat dit alles al beschreven is in de functionele analyse. Verder gebruiken we voor ontwikkeling van bepaalde operating systems interface libraries of onze eigen libraries die zorgen voor een optimale flow in de aanmaak. Als laatste argument telt ervaring ook mee, niet enkel de theoretische bagage maar ook de ervaring van hoe de zaken optimaal te plannen en aan te pakken, de ervaring met bepaalde softwarepakketten en/of met het klassiek schetsen met pen en papier.

Een voorbeeld van een reeks high-fidelity wireframes die we ontwikkelden voor de online schoenwinkel Maury, waarbij (in blauw) interacties worden aangegeven.
Een voorbeeld van een reeks high-fidelity wireframes die we ontwikkelden voor de online schoenwinkel Maury, waarbij (in blauw) interacties worden aangegeven.

Wireflows

Wireframes in combinatie met de op voorhand bepaald architectuur noemen we wireflows (wireframe + flow). Op een wireflow zie je, naast de wireframes, ook de onderlinge relatie tussen de verschillende schermeninhoud. Ook de interacties (wie-wat-hoe-waar) worden duidelijk op zo'n diagram en verder is iedere wireframe voorzien van een identificatie waarmee we verwijzen naar een bepaald deel in de zowel functionele als technische analyse. Wireflows zijn heel handig in de meer complexe projecten, het zorgt voor een duidelijk overzicht in een kluwen van data.

Wireflow (wireframe + flow) voor onze Bino-applicatie. Naast de individuele wireframes is de onderlinge verhouding ook weergegeven.
Wireflow (wireframe + flow) voor onze Bino-applicatie. Naast de individuele wireframes is de onderlinge verhouding ook weergegeven.
Een andere wireflow ditmaal voorzien van annotaties en interacties die verwijzen naar zowel het functioneel als technisch document, beide deliverables op het einde van een voortraject.
Een andere wireflow ditmaal voorzien van annotaties en interacties die verwijzen naar zowel het functioneel als technisch document, beide deliverables op het einde van een voortraject.

Frame it!

Wireframes vormen een essentieel onderdeel van een project. Ze zorgen voor een duidelijke communicatie en vermijden eventuele onduidelijkheden tijdens de ontwikkelfase. Verder zorgen ze voor een beter inzicht en begrip van het project. De keuze tussen low,- of high-fidelity wireframes is afhankelijk van de scope van een project, beide types hebben zo hun voor,- en nadelen. 

Gezien wireframes deel uit maken van een groter geheel is er een kruisbestuiving met andere kennisgebieden. Zo is een wireframe gebaseerd op de informatie architectuur (IA), zal in veel gevallen de interactie beschreven worden (IxD) en bekijken we hoe de interface (UI) en gebruiksvriendelijkheid (UX) het best geïmplementeerd wordt. Het geheel is het resultaat van een samenwerking tussen verschillende profielen en vormt op die manier een smeltkroes van visie en kennis die ergens het midden houdt tussen de visie van Duo, 'de regels van de kunst' en natuurlijk de wensen van de klant. 

 

Hallo,

hoe kunnen we je helpen?

 

Een nieuw project, nice!

Muriel helpt je met plezier verder, bel je haar even op?

 

Je zoekt informatie.

Er is al heel wat info waarin je kan zoeken. Niets gevonden? Bel even naar Tom of Leen.