Review wireframe pakketten (deel 1)

20 november 2009 om 13:13

In dit artikel onderzoeken en evalueren we een aantal wireframe pakketten. Bijna wekelijks verschijnen nieuwe pakketten, maar welke moet je nu kiezen? Omdat tijd kostbaar is hebben wij een flink aantal pakketten voor je getest. Het doel van deze review is dat je een goed beeld krijgt van de besproken pakketten, zodat je zelf kunt besluiten of een pakket toegevoegde waarde voor jou kan hebben.

Om het overzichtelijk te houden hebben we het artikel in twee delen gesplitst.

Welke pakketten hebben we getest?

Uit de beschikbare pakketten hebben we de volgende 14 pakketten gekozen om te testen:

Deel 1:

Deel 2:

Hoe hebben we getest?

Om de pakketten te evalueren hebben we onderzoeksvragen opgesteld. Elk pakket is grondig onderworpen aan een test en onderzocht op deze onderzoeksvragen. Globaal houdt dit in dat we gekeken hebben naar de volgende punten:

Wil je meer weten over wireframes? Lees dan het artikel ‘Interactie ontwerp: wat is het en wat is de meerwaarde?’  Hierin wordt onder andere het nut van wireframes besproken.

Axure

Platform: Windows en Mac (binnenkort verwacht)
Prijs: € 395 voor 1 licentie

Axure is een programma dat al enige tijd bestaat, maar eerdere versies hadden nog wat te veel nadelen. Inmiddels heeft Axure met versie 5.6 een erg volwassen pakket neergezet. De kracht van Axure zit in het feit dat je je wireframes snel en relatief eenvoudig om kunt zetten naar rijke prototypes: met behulp van states en actions kun je redelijk complexe zaken simuleren.

Daarbij beschikt Axure standaard over veel componenten in de library, waarbij er ook steeds meer (interactieve) componenten op internet te vinden zijn. Door de treeview blijven ook grote projecten goed overzichtelijk. Het is ook mogelijk om samen aan één project te werken: hierbij zet je een shared project op en kun je files waar je aan werkt uitchecken. Naast samenwerken aan een project kun je ook eenvoudig flowcharts maken. Axure is daarnaast erg actief op internet: het bedrijf luistert goed naar feedback van haar gebruikers en biedt handige downloads aan op haar website.

Axure heeft echter ook een paar onvolkomenheden: de user interface is op sommige punten wat omslachtig, en een aantal simpele mogelijkheden die je van een dergelijk pakket verwacht ontbreken. Zo kun je bijvoorbeeld geen elementen roteren, en is het soms lastig om een element achter een element te selecteren. Axure biedt ook de mogelijkheid om een specificatie document te genereren, maar zonder uitgebreide tweaking is dit document niet erg bruikbaar: het is erg technisch. Een ander minpunt is dat Axure ook redelijk prijzig is.

Overview Axure

Voordelen Axure

Nadelen Axure

Conclusie Axure

Axure heeft een staat van volwassenheid bereikt waar andere pakketten van dromen: je kunt snel wireframen en de prototype mogelijkheden zijn uitgebreid. De minpunten zijn overkomelijk: Axure is erg actief op internet en verzamelt actief feedback om haar product verder te verbeteren.

Tip: je kunt stijlen bewerken die je vervolgens in je hele document kunt gebruiken (net als Word). Klik hiervoor op het ‘Style editor’ icoon:

Style editor

Links

http://www.acleandesign.com/2008/09/axure-design-pattern-library-v2/ – Library voor Axure
http://www.axure.com/widgetlibraries.aspx
– Library voor Axure (van Axure zelf)
http://www.axure.com/p401_1.aspx
– Tutorial over hoe shared projects op te zetten
http://userexperience.evantageconsulting.com/2009/11/tips-to-improve-collaboration-on-a-shared-axure-project
– Tips voor shared projects
http://www.axlib.org
– Tips voor Axure, en een goede library
http://www.axure.com
– Productpagina Axure

iPlotz

Platform: Mac, Windows en Linux
Prijs: Verschillende pakketopties. Variërend van maandelijks 15 euro tot eenmalig 75 euro

iPlotz is een applicatie waarmee wireframes en clickable demo’s gegeneerd kunnen worden. De applicatie is gebouwd in Flex en kan als online applicatie of als desktop applicatie worden gebruikt.

Er is een grote standaard widgetlibrary beschikbaar en het is ook mogelijk om zelf afbeeldingen te uploaden en deze als widget te gebruiken. Daarnaast kunnen er meerdere wireframe pagina’s in één document worden beheerd en is het mogelijk om met meerdere gebruikers aan een project te werken.

Een leuke feature van iPlotz is dat er gewisseld kan worden tussen een handgetekend, windows of Mac wireframes uiterlijk.

iPlotz

Voordelen iPlotz

Nadelen iPlotz

Conclusie iPlotz

Dit is een applicatie met zeer veel potentie, maar om uit te groeien tot een serieuze kandidaat zullen de nadelen eerst moeten worden aangepakt. Het is niet mogelijk om overzichtelijke specificatie documenten te genereren. Daarnaast is er geen standaard optie aanwezig om flowcharts en sitemaps te creëren. De vrijheid die het pakket echter biedt wat betreft de widgets, en de vele andere features die wel al aanwezig zijn maken van dit pakket er één om in de gaten te houden.

Links

http://iplotz.com/projects.php – Handige snippets en pages voor iPlotz
http://iplotz.com
– Productpagina van iPlotz

MockFlow

Platform: platform onafhankelijk
Prijs: € 35 per jaar

MockFlow is een on-line wireframe programma, waar je in de Flash player je wireframes kunt maken. Je kunt snel wireframes opzetten, en MockFlow biedt een uitgebreide library. Doordat het een on-line pakket is kunnen de makers het pakket snel updaten, wat ook regelmatig gebeurd. Je kunt ook on-line samenwerken aan projecten met MockFlow.

MockFlow

Voordelen MockFlow

Nadelen MockFlow

Conclusie MockFlow

MockFlow is een pakket met mogelijkheden, maar is (nog) niet geschikt voor de designer die serieus wil wireframen. Hiervoor heeft het in onze ogen nog wat te veel nadelen en is het te beperkt in de mogelijkheden van customizen, efficiënt werken en prototypen. Voor kleinere weinig complexe projecten waar uitgebreid prototypen geen must is kan dit pakket wel geschikt zijn.

Links

http://produle.posterous.com – Blog over de ontwikkelingen van MockFlow
http://www.thewebsqueeze.com/product-and-software-reviews/mockflow-review-and-giveaway.html
– Video review van MockFlow, waarin wat basiselementen worden uitgelegd
http://www.mockflow.com
– Productpagina MockFlow

Pencil

Platform: Alle platforms waarop Firefox 3.0 of hoger is geïnstalleerd
Prijs: Gratis

Pencil is een gratis, opensource wireframetool die je als plugin voor Mozilla Firefox 3.0 of hoger kan installeren. Pencil beschikt over een standaard widget library die is uit te breiden d.m.v. XML bestanden. Het is mogelijk om meerdere wireframe pagina’s aan te maken, maar deze zijn alleen exporteerbaar als afbeelding (PNG). In Pencil is het ook niet mogelijk om een klikbare demo te maken.

Pencil

Voordelen Pencil

Nadelen Pencil

Conclusie Pencil

Alhoewel Pencil een aantal leuke voordelen heeft, is dit pakket eigenlijk niet geschikt voor de professionele gebruiker. De exportmogelijkheden zijn te beperkt en de interface voelt nog wat stroef aan. En omdat het een opensource project is, is de verdere ontwikkeling en ondersteuning niet gegarandeerd.

Links

http://code.google.com/p/evoluspencil – Ontwikkeling en downloads
http://www.evolus.vn/Pencil
– Productpagina Pencil

Powerpoint

Platform: Windows, Mac
Prijs: € 279 euro single user licence

Powerpoint is oorspronkelijk bedoeld om presentaties mee te maken. Doordat het onderdeel is van de Office familie heeft het een voor veel gebruikers bekende interface, en wordt Powerpoint ook wel ingezet om mee te wireframen.

Het is zelfs mogelijk om met Powerpoint een clickable demo te maken: je kunt hyperlinks in de pagina opnemen die linken naar andere pagina’s en/of sites. Het is niet mogelijk om te prototypen. Je kunt ook de review-mogelijkheid van Powerpoint benutten om feedback in het document te geven.

Wil je de mogelijkheden om te wireframen uitbreiden dan kun je stencils downloaden of zelf maken. Helaas is het niet mogelijk om interactieve elementen op te nemen: wil je bijvoorbeeld een geselecteerde én een ongeselecteerde radiobutton tonen dan zul je twee instanties van het element moeten opnemen in je library.

Een ander nadeel is dat je snel het overzicht van je pagina’s kwijt kunt raken door de slide-view.

Powerpoint

Voordelen Powerpoint

Nadelen Powerpoint

Conclusie Powerpoint

Door de user interface zullen veel gebruikers snel met Powerpoint uit de voeten kunnen, echter is het voor gebruikers die beroepsmatig wireframen té beperkt. Zo heb je geen interactieve elementen tot je beschikking en is het niet mogelijk te prototypen met Powerpoint. Daarnaast verlies je snel het overzicht in uitgebreide projecten door de slide-view.

Links

http://www.mgitsolutions.com/download/Wireframe-Stencils.pptx – Wireframe stencil voor Powerpoint
http://www.microsoft.com/powerpoint
– Productpagina Microsoft Powerpoint

ProtoShare

Platform: Windows en Mac
Prijs: vanaf € 19 euro single user licence (per maand)

ProtoShare is een puur wireframe pakket, waarbij je volledig on-line wireframet. ProtoShare heeft een kleine leercurve: het is in beginsel niet zo intuïtief als sommige andere pakketten uit de test. Als je één keer door hebt hoe het werkt kun je er gemakkelijk mee wireframen, en is het ook redelijk allround .

ProtoShare heeft ook enkele leuke extra’s: als je navigatie toevoegt aan een pagina worden alle pagina’s uit het document onderdeel van de navigatie. Daarnaast kun je met ProtoShare prototypen: je hebt states en actions tot je beschikking om zaken te simuleren. Eén van de voordelen van ProtoShare is dat je on-line kunt samenwerken aan een project.

Kanttekening bij ProtoShare is wel dat de user interface af en toe wat omslachtig is: vanuit ‘Edit’ mode moet je bijvoorbeeld telkens terug naar ‘Sitemap’ (waar je alle pagina’s aanmaakt en beheert, ondergebracht in een aparte tab), om de volgende pagina te kiezen die je wilt bewerken. Het zou welkom zijn om in ‘Edit’ mode een snellere methode te hebben om te kiezen welke pagina je wilt bewerken.

Daarnaast zijn de exportmogelijkheden beperkt: als je je ontwerp met klanten wil delen kun je dit niet als bijvoorbeeld PDF exporteren. Het wordt hierdoor ook lastig om handouts te maken. Het enige dat je kunt doen is een account aanmaken zodat de klant je ontwerp on-line door kan lopen. Je kunt weliswaar een specificatie document genereren en opslaan, maar deze is erg technisch en geeft je weinig controle over de layout van de wireframes die slechts als afbeelding worden opgenomen.

ProtoShare

Voordelen ProtoShare

Nadelen ProtoShare

Conclusie ProtoShare

ProtoShare is een pakket met potentie maar heeft ook een aantal nadelen die andere pakketten uit de test niet hebben. Het is in de basis prima geschikt om mee te wireframen, hoewel de user interface en mogelijkheden op punten verbeterd kunnen worden. Het onderscheidt zich van enkele andere pakketten uit de test door de uitgebreidere prototyping mogelijkheden.

NB: het voordeel dat je samen kunt werken aan een project werkt is in de huidige versie nog niet goed geregeld, waardoor onbedoeld werk verloren kan gaan. ProtoShare heeft via e-mail laten weten dat dit in de volgende versie wordt opgelost.

Links

http://www.protoshare.com/Support/Tutorials – Tutorials voor ProtoShare
http://www.protoshare.com
– Productpagina ProtoShare

Visio

Platform: Windows
Prijs: v.a. € 275

Van huis uit is Visio niet bedoeld als wireframepakket, maar voor het maken van logische en technische schema’s. Wanneer je echter aangepaste stencil libraries gebruikt kan Visio een interessant alternatief zijn om mee te wireframen. Op internet zijn veel van deze stencil libraries te vinden (zie ook de links onder dit artikel).

Met de stencil libraries heb je de beschikking over standaard elementen waarmee je snel kunt wireframen. Visio ondersteunt het gebruik van masters, en het is mogelijk om een clickable demo te genereren. Helaas is de mogelijkheid om echt te prototypen beperkt: het beperkt zich slechts tot links klikbaar maken.

Naast de standaard functionaliteiten kun je ook macro’s gebruiken voor veelvoorkomende handelingen. Je kunt ze downloaden van internet of ze zelf schrijven (in VBA). Onze tip is om een eigen template voor je documenten te maken, met daarin je eigen stencil library en eventuele custom macro’s. Omdat Visio van huis uit ook bedoeld is om flowcharts te maken kun je gemakkelijk sitemaps en flowcharts opnemen in je wireframes.

Eén van de nadelen van Visio is dat het gebruik maakt van tabs als onderverdeling voor je pagina’s. Hierdoor worden documenten met veel pagina’s al snel onoverzichtelijk.

Visio

Voordelen Visio

Nadelen Visio

Conclusie Visio

Visio kan een prima alternatief zijn om mee te wireframen, mits je wat tijd steekt in het customizen van je libraries en macro’s. Helaas heeft het ook enkele tekortkomingen zoals de tabs voor de paginering en de beperkte mogelijkheden tot prototyping. Desondanks heeft het zeker wel potentie, hoewel de veeleisende interactie-ontwerper tegen beperkingen aan zal lopen.

De wat oubollige look-and-feel schijnt in de komende 2010 versie te worden aangepakt.

Tip: gebruik je Visio en wil je naast het standaard tab-overzicht ook een gewoon overzicht? Kies dan ‘View’ > ‘Drawing Explorer Window’. In het venster dat opent klik je op ‘Foreground pages’. Hiermee krijg je een overzicht van alle pagina’s en kun je snel navigeren:

Drawing explorer

Links

http://www.mentortraining.com/pdf/quickref/visio2002qr.pdf – overzicht snelkoppelingen voor Visio 2002 (PDF); vrijwel alle snelkoppelingen werken ook in nieuwere versies
http://www.visguy.com
– erg uitgebreide Visio site, niet specifiek gericht op wireframing
http://looksgoodworkswell.blogspot.com/2005/11/visio-wireframe-toolkit-for-download.html
– Visio stencils om je wireframe mogelijkheden uit te breiden
http://www.guuui.com/issues/02_07.php
– Artikel ‘Visio: the interaction designer’s nailgun’. Handleiding hoe te wireframen en prototypen met Visio, inclusief handige libraries en templates
http://office.microsoft.com/nl-nl/visio/default.aspx
– Productpagina Microsoft Visio

Lees meer in deel 2

Tot zover deel 1 van onze review. In deel 2 (tevens het laatste deel) bespreken we de volgende pakketten:

Lees deel 2!

Over de auteur

Ivo Bosma
Ivo werkt als interactie ontwerper en usability expert bij Concept7. http://www.ivobosma.nl/
http://www.concept7.nl
  • Pingback: Tweets die vermelden Heeftstijl.nl - Nederlands webdesign magazine » Review wireframe pakketten (deel 1) -- Topsy.com()

  • http://intensedebate.com/people/milanvanbruggen Milan

    Heeeel cool artikel jongens! Met veel plezier gelezen. Ben erg benieuwd naar deel twee!
    My recent post Review wireframe pakketten (deel 1)

  • http://www.hotgloo.com Wolf

    Nice list! You should give HotGloo *The Online Wireframe Application* a try. FREE Beta at the moment, webbased, improved communication features & intuitive usability, plus it's being constantly upgraded thanks to user feedback!

    Wolf
    @HotGloo

  • http://twitter.com/micheltel @micheltel

    Goede review!

    Nog een nadeel van Axure:
    – het programma werkt nog niet op Mac. Erg jammer.

    Er wordt hard aan gewerkt, zag ik op: http://www.axureformac.com/

    Kijk er naar uit. Tot die tijd gebruik ik MockFlow.

    Gr. Michel Tel

  • http://carstenaltena.nl Carsten Altena

    Heel interessant. Ook opmerkelijk dat jullie paketten als Powerpoint en Visio meenemen. Als Fireworks fan-boy ben ik uiteraard erg benieuwd naar jullie conclusie daarover. Ik ben in de veronderstelling dat veel mensen FW gebruiken voor wireframing. Wat natuurlijk niet automatisch betekend dat dat de beste app is daarvoor…

  • Ruud

    Sterke review. Ik gebruik Axure nu ruim een jaar, maar ik wacht eigenlijk op 'het ideale wireframe programma' want dat bestaat naar mijn mening nog steeds niet. Axure is wat mij betreft het beste maar slaat de plank nog wel op een aantal punten mis. Onder andere datgene wat jullie al noemen, plus wat ik echt heel jammer vind is dat je dan wel zogenaamde masters aan kan maken voor veel terugkerende elementen maar dat het mij niet duidelijk is of je deze kunt parameteriseren. Volgens mij kan het in ieder geval niet en dat vind ik jammer. Die elementen komen namelijk dan wel vaak terug, maar vaak op verschillende pagina's net even anders. En het gaat vaak juist om die specifieke details.
    Ben benieuwd naar deel 2!

  • http://www.ivobosma.nl Ivo Bosma

    @Michel: het is maar wat je een nadeel noemt 😉 Het is ons iig bekend (staat ook bij het artikel), alleen hebben we het niet expliciet als nadeel benoemd. En inderdaad: er wordt hard aan gewerkt.

    @Carsten: de reden dat we ze meenemen is dat er in gewireframed wordt in de praktijk. Helaas kunnen we niet alle pakketten behandelen, maar we proberen een brede doorsnede van het aanbod te bespreken.

    @Ruud: wij zijn ook al tijden op zoek naar hét perfecte programma. Helaas hebben ook wij dat nog niet kunnen vinden.

    • http://www.carstenaltena.nl carstenaltena

      Yep, dat dacht ik al.

  • http://twitter.com/micheltel @micheltel

    Jullie Windows-fans 😉

    Na aanleiding van de reactie van Wolf nogmaals een test gedaan op HotGloo. Dit werkt zeker voor een beta versie niet slecht (lees, overklast mijn verwachting).

    • http://intensedebate.com/people/milanvanbruggen Milan

      Inderdaad! Mis wel een aantal zaken (misschien zie ik ze niet), waaronder master pages. Maar verder ziet het pakket er strak uit.
      My recent post Review wireframe pakketten (deel 1)

  • http://www.inventis.be Jan Raedschelders

    Zeer nuttig en interessant artikel, we hebben zelf een tijdje gelezen een soortgelijk artikel geschreven (http://www.inventis.be/blog/wireframing-is-geen-t… en zijn nadien ook van start gegaan met het gebruik van Axure.

  • http://www.inventis.be Jan Raedschelders

    Blijkbaar een foutje in de vorige link: http://www.inventis.be/blog/wireframing-is-geen-t
    My recent post Google Maps API V3 routebeschrijvingen

  • vincent

    Bedankt voor deze test, erg interessant! Ook wij, net als iedereen ;-), zoeken nog het ideale programma. Voorlopig werk ik nog steeds het snelst met potlood, papier en de copier/scannner. Maar Axure doet het helemaal niet slecht.

    Misschien te testen waard nog: (het gratis) Serena Prototype Composer: http://www.serena.com/products/prototype-composer

    • Marijn de Jong

      Hoi Vincent,

      Alhoewel ik zelf altijd begin met potloodschetsen is dit meestel om de grote lijnen duidelijk te krijgen. Daarna ga ik verder in mijn digitale pakket om de details in te vullen. Lukt het jou om zeer gedetailleerd te werken met schetsen? En is het niet lastig om correcties aan te brengen, zonder geheel opnieuw de pagina te moeten tekenen? Daarnaast ben ik benieuwd naar jouw ervaring met de reacties van klanten op je geschetste wireframes.

      Groeten,

      Marijn

      • vincent

        Ik werk in een grote organisatie, dus mijn klanten zijn collega's en die zijn het gewoon.
        Erg gedetailleerd ga ik dan niet te werk, de allerlaatste fase doe ik dan -meestal- in Visio en soms al es in Axure. In een van mijn jongste projecten is deze stap overgeslagen, dan zijn ontwikkelaars rechtstreeks van mijn grove schetsen gaan programmeren, in heel kleine en snelle iteratie waar wij direct feedback op konden geven, werkte voortreffelijk!

  • vincent

    (subscribing to all content notifications)

    • http://intensedebate.com/people/milanvanbruggen Milan

      Goed bezig Vincent 😉

  • Pingback: Heeftstijl.nl - Nederlands webdesign magazine » Review wireframe pakketten (deel 2)()

  • Peter Severin

    Another wireframe and mockup tool is WireframeSketcher. It's a plugin for Eclipse but also for popular developer tools like Aptana, Zend Studio, Flex Builder, RadRails and MyEclipse: http://wireframesketcher.com

  • Knoops

    ook "justinmind" is een tool die niet voldoet voor mij
    te veel layouting meer voor webdesigner dan prototyping
    en duur

    Wel heel uitgebreid en met voldoende customization misschien wel een goede optie

  • Pingback: Tips en trucks om beter te ontwerpen en te wireframen | Heeftstijl.nl - Nederlands webdesign magazine()

  • Pingback: Justinmind Prototyper review - Heeftstijl.nl()

  • Pingback: Prototype software – Martijn Huijts()