Wireframes: de blauwdruk van je software
In het artikel Persona’s: fundament voor een perfecte gebruikservaring bespraken we hoe je een goed en gedetailleerd begrip van de toekomstige gebruikers van je webapplicatie of mobiele app creëert. Maar hoe denk je vervolgens de perfecte software voor die gebruikers uit? Meestal bestaan er op hoofdlijnen duidelijke ideeën, maar moeten er op detailniveau nog veel beslissingen genomen worden. Keuzes die je wilt maken voordat je met app ontwikkeling of web ontwikkeling begint, om kostbare wijzigingen tijdens de bouwfase te voorkomen. Dat is waar wireframes om de hoek komen kijken.
Focus op structuur
Wireframes zijn schematische weergaven, meestal in grijstinten, die de blauwdruk voor de structuur van je software vormen, vergelijkbaar met de bouwtekeningen van een huis. Ze helpen je de vaak lange lijst van ideeën, wensen en uitdagingen uit te beelden. Wireframes geven je in een vroeg stadium een visuele voorstelling van de software en de mogelijkheid om eenvoudig en zonder hoge kosten keuzes te herzien.
Ontwerpers gebruiken wireframes om uit te denken hoe mensen informatie verwerken en door de software bewegen. Met een verzameling lijnen, vormen en (dummie)tekst wordt de layout van de site of app beschreven. De wireframes bevatten alle aannames over de interactie van een gebruiker met de software via links, buttons en menukeuzes. Een wireframe is dus geen visueel ontwerp, maar een meer abstracte weergave van de werking van de software. Ze helpen om in deze fase te focussen op wat de gebruiker met het systeem doet, zonder afgeleid te worden door visuele aspecten als kleuren en lettertypes. Zo dwingen ze de ontwerper om goed na te denken over de interactie van gebruikers met de software en wat écht belangrijk is op een scherm of pagina.
Experimenteren
Wireframes geven de mogelijkheid om te experimenteren met allerlei ideeën zonder dat het grote implicaties heeft als een experiment mislukt. Het wijzigen van een wireframe kost namelijk veel minder tijd en geld dan het aanpassen van een volledig visueel ontwerp of software in aanbouw.
Daarmee zijn wireframes een geweldig hulpmiddel om vooraf te toetsen of je (web)app voldoet aan de wensen en eisen van je gebruikers en de doelstellingen van je organisatie. Je test niet of gebruikers de app mooi vinden, maar of de functionaliteit en structuur logisch voor ze is. Gebruikers moeten wel leren om door de zwart-wit diagrammen heen te kijken, maar de praktijk leert dat ze dat goed kunnen. Investeren in het maken van wireframes bespaart je veel tijd en geld bij het maken van een visueel ontwerp, de realisatie en het testen.
Een compleet beeld
Een goed ontwerp bevat wireframes voor alle onderdelen van de software. Achter elk klikbaar element zit een nieuw wireframe, ook als dat een dialoogscherm of formulier is. Of bijvoorbeeld bij een mobiele app het openen van het fotoalbum of het nemen van een foto. Ook voor contactformulieren, inlogschermen, foutmeldingen en configuratieschermen zijn er wireframes. Elk wireframe representeert een gebeurtenis als gevolg van een activiteit van de gebruiker. Samen geven ze een beeld van de structuur van alle onderdelen van de software.
Je kunt pas met wireframes beginnen als het globale idee en de richting van de software voor het hele team helder zijn. Bestaan er nog veel onzekerheden, dan is het verstandig om een stap terug te zetten en de ideeën voor de software te verfijnen. Bijvoorbeeld door eerst globaal te beschrijven hoe gebruikers door de software bewegen. Een andere mogelijkheid is om te beginnen met een grove opzet van een wireframe en die stap voor stap te detailleren. Dit helpt ook om in de brainstormfase abstracte of nog vage ideeën in één oogopslag concreet te maken.
Soorten wireframes
Afhankelijk van de situatie kun je gebruik maken van minder of meer gedetailleerde wireframes. Grofweg zijn ze te verdelen in twee groepen:
- Low fidelity wireframes zijn ruwe zwart-witschetsen die vooral laten zien hoe een gebruiker bepaalde handelingen kan uitvoeren met de software. De elementen en de content worden gevisualiseerd met rechthoeken, lijnen en (waar nodig) met uitleg en opmerkingen. De wireframes schetsen de structuur van de software. Om nog sneller te werken kun je gebruik maken van paper prototyping, door de low fidelity wireframes op papier te schetsen.
- Een high fidelity wireframe gaat een stuk verder door de nadruk te leggen op visuele elementen als typografie, beeld, tekst, vormgebruik en soms zelfs al kleur. De software ziet er in dit soort wireframes al behoorlijk realistisch uit door gebruik van esthetische details als schaduw en achtergrondkleur.
Het zal duidelijk zijn dat hoe gedetailleerder wireframes zijn, hoe meer tijd het in beslag neemt om ze te maken. Wijzigingen op een high fidelity wireframe kunnen — zeker als het grote veranderingen zijn — aanzienlijke impact op tijd en kosten hebben. Het is dan ook aan te raden altijd te starten met low fidelity wireframes en deze pas in een later stadium verder te detailleren om onnodige herstelwerkzaamheden te voorkomen.
De content inventory
Een handig hulpmiddel bij het maken van wireframes is een zogenaamde content inventory. Een lijst die per scherm of pagina opsomt welke content (de informatie waar je gebruikers voor komen) opgenomen moet worden. Zo orden je al het ‘bouwmateriaal’ voordat een ontwerper aan de slag gaat. Dit dwingt je goed na te denken welke informatie je eigenlijk wilt tonen en welke elementen daarbij de meeste prioriteit hebben. Dat kun je toepassen voor een normale website, maar net zo goed voor een mobiele app. De content inventory geeft ontwerpers een duidelijk startpunt bij het maken van de wireframes.
User flows
Wireframes kunnen in principe ‘analoog’ op papier worden gemaakt. Door wireframes te vertalen naar een klikbaar prototype ontstaat een instrument waarmee volledige user flows gesimuleerd kunnen worden. Ieder wireframe representeert het scherm dat je in de uiteindelijk software te zien krijgt. Gebruikers kunnen zo door een model van de software heen klikken en dat geeft een goed beeld wat wel en wat niet werkt. Een klikbaar prototype is een ideale manier om aannames te toetsen en aanpassingen te doen voordat je tijd en geld investeert in de realisatie.
Waar je ook goed over na moet denken voordat je aan het ontwerpen slaat, is op welke apparaten de software moet werken. Alleen op desktops en laptops? Of ook op smartphones en tablets? Misschien wel op een smartwatch, een smartTV of game console? Dat hangt allemaal af van je doelgroep. Ontwikkel je een webapplicatie, dan zal die verschillende schermindelingen moeten ondersteunen voor de verschillende schermformaten waar je doelgroep gebruik van maakt.
Ben je van plan naast de webapplicatie een aparte mobiele app te maken, dan heb je meerdere ontwerpen nodig die goed op elkaar aansluiten. Deze vragen vooraf beantwoorden is cruciaal, want met de verkeerde aannames aan wireframes beginnen, betekent later bijna altijd dure en tijdrovende herstelwerkzaamheden.
Wireframes helpen om ideeën relatief snel en eenvoudig te visualiseren, uitgangspunten te toetsen en potentiele obstakels te herkennen, zodat cruciale ontwerpbeslissingen in een zo vroeg stadium aan bod komen. Daarnaast geven ze alle betrokkenen het vertrouwen dat de software zich in de juiste richting ontwikkelt. Omdat wireframes statische afbeeldingen zijn, is het soms lastig voor mensen om het idee achter de software volledig te doorgronden. In dat geval is een klikbaar prototype de voor de hand liggende volgende stap. Want het blijft cruciaal om aannames goed te toetsen voordat met de echte realisatie begonnen wordt.