Een weblog van Michel Kuik over webdesign, usability en interactie ontwerp

Home Archief Abonneer op een RSS Feed en blijf op de hoogte

Waarom een geschetste wireframe vaak zoveel nuttiger is

30 juli 2009

De prototyping programma’s schieten als paddenstoelen uit de grond. Het lijkt wel alsof er een hype is ontstaan. Mede dankzij de komst van Adobe AIR is het nu voor kleinere ontwikkelbedrijven mogelijk om lichtgewichtjes te lanceren.

Wireframes hebben over het algemeen meerdere doelen. Ikzelf maak voornamelijk wireframes om de volgende redenen:

Het doel van een wireframe is vaak niet dat je vastlegt op welke positie alles komt te staan. Dat is aan de ontwerper en komt pas in een latere schets aan de orde. De wireframe moet leiden tot discussies en problemen opsporen en uiteindelijk een oplossing bieden. Het is een dynamisch plaatje dat aan moet voelen alsof er nog dingen aan kunnen veranderen.

Je merkt al dat de lijn tussen wireframing en visueel ontwerper vaak niet zo dik is. Het is lastig om het onderscheid te houden en het gevaar loert altijd dat het wireframe een non-discussie oproept. (Denk maar aan die keer dat ze tegen je zeiden dat het logo in de wireframe te klein was).
Het is om die reden dat ik vandaag aan de slag ging met de lichtgewicht wireframe applicatie Balsamiq. Balsamiq is een Adobe AIR applicatie. Het is zowel online als offline te gebruiken. Het niet mogelijk om daadwerkelijk pagina’s te linken, maar biedt wel een ander groot voordeel: alles voelt aan alsof je aan het schetsen bent.

Wireframe schets balsamiq

Doordat alles aanvoelt alsof je aan het schetsen bent, ben je ook als het ware aan het schetsen. Je hoeft geen oplossing te bedenken, maar kan meerdere oplossingen aandragen. Het genegeerd een prettig beeld voor de opdrachtgever. Een beeld dat zegt: hier wordt nog aan gesleuteld, wat vind jij? Tegelijkertijd kan je in het beeld oplossingen aandragen en de ruimte bieden om mee te denken.

Dit is ook 1 van de redenen waarom Doug Gapinski Paper Wireframing methode bedacht: samenwerken binnen een wireframe. (Lees Pwireframing: Paper Wireframing). Een methode waarbij knippen, plakken, tekenen en samenwerken centraal staat.

Ik ben erg te spreken over de schetsstijl in dit programma. Het is minder tijdrovend – en bepalend – dan echt schetsen, maar het voelt net zo vrij aan. Tegelijkertijd realiseer ik me dat zwaardere prototyping tools, zoals Axure RP, nog wel degelijk nodig kunnen zijn verder in het proces, als er daadwerkelijk schermen aan elkaar gekoppeld moeten worden.

Ben je het met me eens, of totaal niet? Heb je tips of advies? Ik ben benieuwd, laat hieronder jouw reactie achter

Andere artikelen uit de categorie Interactie Ontwerp

Interessant artikel? Abonneer op de RSS Feed en blijf op de hoogte!

5 Reacties op "Waarom een geschetste wireframe vaak zoveel nuttiger is"

Anouschka Scholten zei:

Het klinkt me goed in de oren vooral qua het ‘vrij aanvoelen’, alleen is mijn ervaring dat een schetsfase op dit niveau niet zolang duurt in de praktijk; er is of wordt steeds minder of weinig tijd gestoken in de schetsfase(helemaal nu in crisistijd?)dus de vraag is of het dan überhaupt loont om met Balsamiq te beginnen en het niet direct in een wat wat zwaarder programma te doen.

Als je in een ontwerpopdracht redelijk vlot de kern moet raken, vind ik content nl. een essentiële. Al heel snel zijn de meer ingevulde wireframes van belang om ook qua inhoud te checken bij opdrachtgever, redactie en liefst ook zo snel mogelijk gebruikers of het gaat werken (in overeenstemming met strategie/visie/doelstelling opdrachtgever, realiseerbaar, onderhoudbaar, voldoende uitbreidbaar/flexibel, vindbaar, effectief en efficiënt, …).

Ook grafisch ontwerp is van invloed dan kun je stellen, maar in kader van ‘Content is King’ is mijn ervaring dat hoe eerder je met echte content aan de slag gaat hoe beter. Kloppen concept met navigatie, interactie en content dan kan grafisch ontwerp veel sneller ook goed aanhaken.
Als snel ben je dan met meer geavanceerde wireframes bezig dus.

30 Jul 09, om 9:40 pm

Johannes Verelst zei:

Een andere leuke online tool is iPlotz, daar kan je wel doorklikken maar je hebt tegelijkertijd wel die schets look-and-feel.

31 Jul 09, om 12:23 am

Peldi zei:

Thank you Michel for the review!
Just one little note: you can in fact link mockups together in Mockups: http://www.balsamiq.com/products/mockups/help#links

Peldi

31 Jul 09, om 4:44 pm

Michel Kuik zei:

@Anouschka Scholten

Bedankt voor jouw uitgebreide reactie!

Interessant om jouw ervaring met het schets ontwerp proces te horen. Je vertelt dat er tegenwoordig minder tijd in de schetsfase wordt gestoken (crisis?). Ik moet zeggen dat ik daar zelf geen ‘last’ van heb. Ik merk eigenlijk juist het tegendeel: Bedrijven waar ik mee/voor werk, volgen steeds vaker de 37 Signal’s Getting Real filosofie (https://gettingreal.37signals.com/), of staan er voor open.

Dat content de spil vormt van een wireframe staat voor mij ook buiten kijf. Zelfs in de bovenstaande schetsontwerpen vormt de content, die er is, de spil van het ontwerp. Dat wil niet zeggen dat de content al vorm moet krijgen, voordat het interactiemodel vast staat… Volgens mij moet dat altijd tijdens het proces groeien, organisch, met het ontwerp mee…

Ik denk dat het voor ieder complex project belangrijk om een goede schetsfase te hebben. En mocht een opdrachtgever daar op willen bezuinigen, dan is het aan ‘ons’ als IA Designers om – met onze expertise en ervaring in huis – daar een weerwoord op te geven. Mijn ervaring is dat opdrachtgevers dan 9/10 keer meegaan. Zij huren jou tenslotte in vanwege jouw expertise..

1 Aug 09, om 7:38 pm

Efraim zei:

Tof artikel!

Heb je deze al gezien?
http://www.MockupMagnets.com

Ik gebruik ze bijna elke dag, vooral in team-verband of met de client.
Helpt je om de UI wat meer solide te maken voordat je software gebruikt.
Want software, ook al is het in ‘wireframe / sketch mode’, is toch wat gedetailleerder.

Deze tool helpt je in de fase ervoor.

-E

17 Aug 09, om 5:38 pm

Jouw reactie