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:

• Axure;
• iPlotz;
• MockFlow;
• Pencil;
• Powerpoint;
• ProtoShare;
• Visio.

Deel 2:

• Adobe Fireworks CS3;
• Adobe InDesign;
• Balsamiq;
• Lucid Spec;
• Mockupscreens;
• Omnigraffle;
• Smartdraw.

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:

• Is het pakket geschikt om te wireframen?;
• Wat zijn de demo- of prototypemogelijkheden?;
• Is het pakket aanpasbaar aan jouw wensen (kun je bijvoorbeeld zelf uitbreidingen opnemen en is de library uitbreidbaar?);
• Hoe is de ondersteuning vanuit de fabrikant en/of community?;
• Kun je je werk gemakkelijk delen met de klant en/of collega’s?

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.

Voordelen Axure

• Prototype mogelijkheden zijn uitgebreid
• Uitgebreid forum met actieve ondersteuning door fabrikant
• Samenwerken aan één project
• Standaard gemakkelijk wireframes maken

Nadelen Axure

• Prijzig
• User interface soms wat omslachtig
• Een aantal simpele mogelijkheden ontbreken

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:

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.

Voordelen iPlotz

• Grote library van standaard widgets
• Mogelijkheid om zelf widgets te uploaden
• Overzichtelijke interface
• Masters
• Pixelnauwkeurig
• Multi-user ondersteuning

Nadelen iPlotz

• Extern programma nodig om eigen widgets te maken
• Specificatie generatie is nog te beperkt
• Geen mogelijkheid tot genereren van flowchart / sitemap

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.

Voordelen MockFlow

• Uitgebreide library
• On-line: veel updates
• Masters (hoewel je slechts één master aan een pagina kunt toevoegen)
• On-line samenwerken aan één project

Nadelen MockFlow

• On-line: makers moeten keuzes maken in gebruik van ruimte waardoor de interface niet altijd even handig werkt
• Logica in interactie met elementen uit library ontbreekt soms of is niet consequent
• Bij de gegenereerde demo is niet duidelijk te zien welke elementen gelinkt zijn en welke niet: er wordt geen grabber-hand getoond bij mouse-over
• Erg weinig controle over look & feel pagina’s en elementen
• Pagina’s dupliceren werkt niet waardoor je ze handmatig moet kopiëren en plakken
• Exportmogelijkheid naar multiple PDF (handig voor presentaties of om te mailen naar de klant) is erg omslachtig
• Libraries/widgets zijn niet uitbreidbaar

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.

Voordelen Pencil

• Gratis
• Draait op alle platformen waar Mozilla firefox 3.0 of hoger op is geïnstalleerd
• Uitbreidbare widgetlibrary

Nadelen Pencil

• Geen klikbare demo mogelijk
• Alleen te exporteren als PNG
• Bij veel pagina’s wordt horizontale tabrij onoverzichtelijk
• Te weinig mogelijkheden om zelf widgets te creëren
• Opensource: onzekerheid doorontwikkeling

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.

Voordelen Powerpoint

• Bekende interface
• Clickable demo mogelijkheid
• Masters
• Veelgebruikt product: veel ondersteuning en support op het web
• Standaard review mogelijkheid
• Als je al een licentie voor Office hebt beschik je mogelijk al over een licentie voor Powerpoint

Nadelen Powerpoint

• Geen standaard widgets en/of library
• Geen interactieve elementen
• Geen prototyping
• Slide-view: hierdoor wordt de structuur van je document minder overzichtelijk

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.

Voordelen ProtoShare

• Goede templates
• Redelijk gemakkelijk wireframen
• Ondersteuning: actieve community, met veel ProtoShare inbreng
• Goede prototyping mogelijkheden
• Samenwerken aan een project

Nadelen ProtoShare

• Switchen tussen ‘Sitemap’ en ‘Editor’ view als je pagina’s wilt bewerken is omslachtig
• Styling elementen staat vast (tenzij je de ingebouwde CSS editor gebruikt, dan kun je deze aanpassen)
• Indeling library niet te customizen
• Leercurve
• Er staan panels op je scherm die je niet kunt verslepen (je werkt in je browser) waardoor je soms moet schipperen met de ruimte
• Exportmogelijkheden zijn beperkt
• On-line: als je geen internet-verbinding hebt kun je niet wireframen

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.

Voordelen Visio

• Herkenbare interface voor Office gebruikers
• Uitbreidbaar met stencil libraries en macro’s (ook zelf te schrijven in VBA)
• Veel resources op internet

Nadelen Visio

• Tabs voor paginering waardoor grote documenten al snel onoverzichtelijk worden
• Beperkte mogelijkheden voor prototyping
• Standaard geen paste in place

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:

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:

• Adobe Fireworks CS3;
• Adobe InDesign;
• Balsamiq;
• Lucid Spec;
• Mockupscreens;
• Omnigraffle;
• Smartdraw.

Lees deel 2!