Dec 14

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.

mockup1Mock-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.

balsamiqApplicatie 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.

mockingbirdDe 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!

mockflowMockflow 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!

10 Responses to “Heb jij al geMock-upped?”

  1. Job says:

    Mooie post Marcel,

    Ik heb vorig jaar geblogd over prototyping of mock-ups… zie: http://www.moocha.nl/2008/06/een-goed-idee/ Vooral het filmpje is interessant omdat het je voorbeeld van het papieren ontwerp in praktijk laat zien.
    En dan natuurlijk Balsamiq 🙂 een mooi programma, waarvan ik ook vind dat de licentievorm heel interessant is: je koopt het als persoon en je mag het vervolgens op alle apparaten die je beheerd installeren. Ik ga nog even mock-uppen…
    groet
    Job

  2. Ton Bil says:

    Wow, dat is prachtig om te zien en te lezen. Heb gelijk een acct gemaakt bij mockflow, maar die iphone-mocker is ook handig! Dank je wel.

  3. Marcel de Leeuwe says:

    @ Job,

    Dank je voor de verwijzing naar die blogpost. Ik weet het nog en het is wel een heel aardig voorbeeld. Ik denk inderdaad dat het op papier prima gaat. In ieder geval goed om op papier te beginnen en dan pas de stap naar de computer te maken. Ik twijfel nog of ik Balsamiq ga kopen. Kost toch weer geld en ik vind het ontbreken van interactiemogelijkheden (zodat een klikbare demo ontstaat) wel echt een nadeel. Dat doet Mockflow en Mockingbird dan fijner.

    @Ton,

    Jij bedankt voor je reactie. En als je een mock-up hebt gemaakt dan mag je hem natuurlijk delen. Ik ben benieuwd!

    Hartelijke groeten,

    Marcel

  4. Al 20 jaar Macromedia (nu Adobe) Authorware in de gereedschapkist.
    In de jaren negentig DE tool als je serieus met eLearning bezig wilde zijn (en geld had; een licentie kostte je 3000 gulden)
    Als productiemiddel reeds lang ingehaald door Flash maar als mockup en prototyping tool perfect.
    Ontwikkeling door Adobe ook gestaakt (en terecht; want wie werkt er nog met software van 25 jaar oud) maar ik open mijn versie nog wel eens voor een snelle mockup.
    http://en.wikipedia.org/wiki/Macromedia_Authorware
    De vader van Authorware Dr Mike Allen (was ook betrokken bij PLATO in de jaren tachtig) is volgens geruchten met iets nieuws bezig; codename Zebra

  5. Marcel de Leeuwe says:

    @ Danny,

    Dank voor je reactie. Voor mij is het wat korter geleden (1994) dat ik met Macromedia Authorware werkte en ben het product een beetje uit het oog verloren. Voor mij was het toen ook niet te betalen. Maar zo’n tool (of bijvoorbeeld ToolBook of Lectora) kan ook prima worden gebruikt om snel een mock-up te maken. Heb je niet het nadeel dat alles er al ‘echt’ uitziet zodat voor klanten/collega’s op de details gaan letten?

    En van Mike Allen kunnen we alleen maar mooie dingen verwachten. Ik kende het Zebra project niet dus dank je wel voor het delen. Ik vond een PDF van een presentatie over deze nieuwe omgeving/methodiek. Zag er veelbelovend uit: http://www.google.nl/url?sa=t&source=web&ct=res&cd=6&ved=0CB4QFjAF&url=http%3A%2F%2Fwww.aicc.org%2Fdocs%2Fmeetings%2F28sep2009%2Fallen.pdf&ei=uqgmS5jcNY7H-QbV3-yvBg&usg=AFQjCNFSSq-5mOlmDLIT9ehLy3y9QSx38w&sig2=l6jjVGcdVvSSoZMD-_1G1Q

    Hartelijke groeten, Marcel

  6. Kasper Spiro says:

    Mooie blog Marcel. Ik heb zelf een aantal keren gewerkt met paper prototyping, werkt ook perfect (http://www.paperprototyping.com/what.html)

  7. Rene says:

    Altijd handig, dit soort lijstjes. Ik gebruik zelf al vrij lang http://www.flairbuilder.com en ben nog nooit een mock-up app tegengekomen die fijner is. Deze tool ontbreekt dus wat mij betreft in dit overzicht.

  8. Marcel de Leeuwe says:

    @ Kasper,

    Dank je wel voor je reactie en je link! Bruikbare aanvulling die site.

    @ Rene,

    Dank je wel voor dit alternatief, ik kende Flairbuilder nog niet. De online demo ziet er in ieder geval veelbelovend uit en het werkt mooi. Hij mag inderdaad niet ontbreken in het lijstje!

    Hartelijke groeten, Marcel

  9. […] je prima doen met online of offline tools op je PC. Een paar van die tools heb ik al eens eerder besproken. Nu bespreek ik een app op de iPad waarmee je een interactieve mock-up kunt maken voor je iPhone of […]

Leave a Reply

preload preload preload