Whats the best way to create interactive application prototypes?

Question

The question should be interpreted from a general point of view and not targeted solely at web apps or desktop apps.

I have been looking around to find a simple and easy way of creating interactive prototypes for web applications. I'd like to use a technique that allows simple UI creation and especially UI recreation and modification in further iterations. Filling the UI with mockup data should be very simple. The technique may require a simple form of programming, e.g. to specify a drag and drop behaviour from UI element A to UI element B.

One tool i currently use is the Adobe Flex Builder. The included GUI-designer is very good and i have accomplished some skills with AS3 so far. The problem is adding data to the UI. It always results in me programming code for checking and parsing of XML-trees structures, and mainly debugging this section of the prototype. Too cumbersome!

Another tool many people use is PowerPoint which involves a really cumbersome way of creating a GUI by drawing every part of an interaction in a separate slide. No way! I would be much faster with paper prototypes. Other (better!) free form drawing tools are also part of this category (i'm a happy heavy weight inkscape user) but Prototyping and Mockup are obviously not their main purpose. The UI-stencil palette for Viso makes it a bit better than the drawing competition.

The main competitors in rapid prototyping as far i know are:

• iRise
• Axure
• Serena and other ?
• Viso
• Powerpoint, Illustrator, Inkscape or any other free form drawing tool
• paper prototyping
• IDE with good GUI builders (such as Flex Builder Designer and Netbeans Matisse)

My opinion is that real GUI-builders are a good staring point. What are your current approaches? Please outline your process and the pros and cons as an answer here.

Marta

Answer 1

Real GUI builders are:

• Much slower
• Only programmers can use them (try to explain to analyst how to populate a table in VB)
• They don't let you annotate your mockups on the fly
• Don't have skins (e.g. black&white) to create screens which can't be mistaken for "almost done" application

While specialized mockup tools are usually:

• Communication oriented
• Can print or export your mockups (together with your notes) to PDF/HTML/Word etc
• Better ones have some variant of "master screens" so you can derive hundreds of mockups from only a handful of main application screens (you quickly get to quite a lot of mockups when you try to discuss real scenarios with your client)
• Fast enough so you can prototype realtime in a meeting

Almost a decade ago I got frustrated by all of the above and created my own tool: MockupScreens. It became pretty popular quickly :-)

And here is the most complete list of such specialized tools I know of. Many of those are free: http://c2.com/cgi/wiki?GuiPrototypingTools

Geometer

It's kind of wild to stumble on a fragment of early internet nowadays. I'm sure there are a few AI Cunninghams floating around. – Cymophane

Answer 2

Quick and dirty paper prototyping: PowerPoint (see: Powepoint Prototyping Toolkit)

-Great for easily putting together prototypes that can be presented. The slide nature can also serve as a substitute for mock interaction. Downside is lack of standardization. Not for disciplined projects.

Disciplined paper prototyping: Visio

-Standardized and full featured, but more cumbersome

Interactive prototyping: Visual Studio

-Very quick interaction building using drag-n-drop and events. Can be data driven. You can even build a prototype 'base' as a starter kit. Only downside is the temptation to actually make it THE production application. ;)

Misunderstood

Answer 3

There's also Balsamiq. I kind of like it, but usually grow tired of these things quite fast. I end up using either pen&paper or OS X's interface builder, which isn't more difficult to use than all these prototyping tools.

Amorphous

Answer 4

If you're talking about mock-ups/wireframes (i.e. static pictures) Visio is a tool of choice.

Most software you mentioned is either above the level of the normal business user (i.e. you'll need a specialist to do the mock-ups as opposed to the business users helping you) or are not created for the purpose of mock-ups.

If you need a dynamic prototype then there a plenty of options and everything depends on the type of skills you have available in the team. For example I have a guy who is very strong in HTML. It would be much easier for him to create a HTML page from scratch in notepad that try to do the same thing with Flash in a WYSIWYG tool. Some other people have good Flash skills and could employ them etc.

Compile

Answer 5

Expression Blend (http://www.microsoft.com/expression/products/overview.aspx?key=blend) can be used to create quick mockups in XAML. You can store data for the mockup as inline XML in the XAML, or you can quickly convert it to WPF/Silverlight application and build basic business logic behind your mockup using Visual C# Express (http://www.microsoft.com/express/vcsharp/) or Visual Studio 2008.

Backflow