Als je een website, leeromgeving of (mobiele) applicatie maakt dan is het altijd slim om eerst op papier te gaan ontwerpen. Om een bepaald interactie ontwerp met de klant en anderen door te spreken is het handig om een soort proef te maken. In e-Learning/webdesign land vaak aangeduid met de aparte term ‘Mock-up’. Wat is het en hoe kun je ze maken?

Wat is een Mock-up?

Volgens Wikipedia is een mock-up:

…een tijdens de ontwerp- of productiefase op schaal of op ware grootte gemaakt model van een ontwerp of product. In de software-industrie komt het begrip tevens voor om vroeg in het ontwikkelproces het software-ontwerp qua gebruikersinterface te testen. Een mockup wordt voornamelijk gebruikt voor demonstraties, lessen, evaluaties of promotie. Een mockup krijgt pas de term prototype als het ontwerp ook echt werkt. Meestal zijn de mockups dus voorbeelden qua uiterlijk.

Vaak wordt een mock-up in eerste instantie op papier uitgewerkt. Zelfs dan kun je met gebruikers al enigszins gekunsteld het interactieproces doorlopen en kijken hoe de gebruikers je ontwerp ervaren. Een andere veelgebruikte vorm is die van een  PowerPoint presentatie. Je klikt dan door verschillende schermen en maakt hyperlinks. Op die manier kun je snel duidelijk maken wat de bedoeling is. De verwachtingen van eenieder wordt duidelijk en hoewel het maken van een goede mock-up veel tijd kost, kan het je veel dure ontwerpfouten en communicatiefouten besparen. De tijd win je later altijd terug.

Wat is een mock-up niet?

Zoals Wikipedia al aangaf is het geen werkend proto-type. En dat is voor sommige mensen (waaronder klanten of opdrachtgevers die nog niet eerder met het fenomeen mock-up hebben gewerkt) moeilijk. Bij een mock-up let je op het interactieontwerp  (wat doet iemand op welk moment op je site, op welke manier en op de grote lijnen. Het is minder tot onbelangrijk hoe de site/applicatie/omgeving er precies uit komt te zien.

Soms merk ik daardoor dat het beter is om het voorbeeld niet erg te laten lijken op het beoogde eindresultaat. Anders gaan mensen commentaar leveren op details en verliezen het geheel uit het oog. Als je de vraag krijgt “kun je die balk ook een andere kleur geven” dan heb je het niet goed gedaan 😉

Maken van een mock-up; handige tools

Een van de manieren is met de computer maken van een mock-up. Ik heb ervaring met een aantal. Ten eerste heb ik wel eens Microsoft Visio gebruikt om snel een eerste mock-up te maken. Het kan er wel mee maar is er niet specifiek voor gemaakt en dat merk je. Net iets minder handig dan speciale mock-up applicaties.

Een gratis te gebruiken online tool om een mock-up voor specifiek een iPhone applicatie te maken is deze. Hier sleep je met elementen, verander je tekst en stuur je de url door naar iemand anders. Nadeel is dat het redelijk beperkt is, dat je geen klikbare mock-up kunt maken en dat je niet kunt exporteren. Wel kun je twee verschillende stijlen kiezen. Hieronder zie je de strakke versie en een versie die meer handmatig geschetst lijkt. Misschien is die tweede wel handiger om te gebruiken.

Mock-ups gemaakt met http://iphonemockup.lkmc.ch

Hans de Zwart gebruikte in zijn post over de Moodle app een programma om mock-ups te maken dat veelzijdiger is en dat je kunt downloaden (niet gratis). Dit programma Balsamiq is er voor zowel Windows, Linux en de Mac. Balsamiq  is wat breder dan de website die ik net noemde. Je kunt er zeer veel verschillende mock-ups mee maken. Op een eenvoudige manier sleep je elementen naar de plek waar je wilt en je hernoemt teksten. Er is een behoorlijke bibliotheek aan elementen en die is nog uit te breiden met elementen die door andere gebruikers zijn gemaakt (zie hier). Een export is op vele manier te maken.

Applicatie Balsamiq waar een scherm snel te maken is.

Een derde (webbased) applicatie om mock-ups te maken is Mockingbird. Deze site is gratis om te gebruiken en het aardige hieraan is het feit dat je meerdere pagina’s kunt maken. In de preview zijn er dan mooie pagina’s te zien. Die kunnen overigens ook nog gelinkt worden. Helaas zijn er minder specifieke sets aan elementen te vinden voor bijvoorbeeld de iPhone of andere devices. Daarentegen is het erg eenvoudig in gebruik en is het eenvoudig om de resultaten te delen middels een link of door het te embedden op je site.

De webbased (en gratis) tool Mockingbird

Laatste en wat mij betreft mooiste online tool is MockFlow. Deze site is gratis (met paar restricties) en ook betaald waarmee je dan alle opties krijgt. Voor mijn gevoel combineert deze applicatie de voordelen van voorgaande opties. Een grote bibliotheek helpt je op weg, je kunt online alles doen en je mock-up goed presenteren. Mooiste van deze tool is dat je van de ene pagina naar de andere kunt klikken. Erg goed!

Mockflow combineert alle mooie functies van de andere applicaties

Heb jij nog goeie tools die je hiervoor gebruikt of heb je een mock-up gemaakt die je wil delen om anderen te inspireren: laat het weten in de comments!