What is the best way to prototype interactive applications?

Question

The question should be interpreted from a general point of view and is not intended only for web or desktop applications.

I searched to find a simple and easy way to create interactive prototypes for web applications. I would like to use a technique that allows you to create simple user interfaces and, especially, customize the user interface and change them in further iterations. Filling the user interface with the layout data should be very simple. This method may require a simple form of programming, for example. to indicate the drag and drop behavior from user interface A element A to user interface element B.

I am currently using one Adobe Flex Builder tool. The included GUI designer is very good, and so far I have achieved some skills with AS3. The problem is adding data to the user interface. This always leads me to programming code for checking and parsing the structures of XML trees and basically debugging this section of the prototype. Too bulky!

Another tool that many people use is PowerPoint, which includes a very cumbersome way to create a GUI by drawing each part of the interaction on a separate slide. Never! I would be much faster with paper prototypes. Other (better!) Free-form drawing tools are also part of this category (I am a happy person with a heavy weight inkscape), but prototyping and layout are obviously not their main goal. The Viso UI stencil palette makes it a little better than the drawing contest.

The main competitors in the field of rapid prototyping, as far as I know, are:

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

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

Answer 1

Real GUI builders:

• Significantly slower
• Only programmers can use them (try to explain analytics how to populate a table in VB)
• They do not allow you to annotate your layouts on the fly.
• You do not have skins (for example, black & white) to create screens that cannot be mistaken for an "almost done" application

While specialized layout tools are usually:

• Communication oriented
• You can print or export layouts (along with your notes) to PDF / HTML / Word, etc.
• The best ones have some version of the "main screens", so you can get hundreds of layouts from several main application screens (you quickly get quite a few layouts when trying to discuss real-life scenarios with your client)
• Fast enough to prototype in real time at the meeting

Almost ten years ago, I was disappointed with all of the above and created my own tool: MockupScreens . It became quite popular quickly :-)

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

Answer 2

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

-Great for easy assembly of prototypes that can be submitted. The nature of the slide can also serve as a substitute for mock interaction. The disadvantage is the lack of standardization. Not for disciplined projects.

Disciplined paper prototyping: Visio

- Standardized and fully functional, but more bulky

Interactive Prototyping: Visual Studio

- Quickly create quick interactions using drag-n-drop and events. Can be controlled by data. You can even create a prototype “base” as a starter kit. The only drawback is the temptation to actually make this a production application .;)

Answer 3

There are also Balsamiq . I kinda like this, but usually get tired of these things pretty quickly. I end up using both a pen and paper or an OS X interface designer, which is no harder to use than all of these prototyping tools.

Answer 4

If you're talking about layouts / wireframes (i.e., static snapshots), Visio is the tool of choice.

Most of the programs that you mentioned are either above the level of an ordinary business user (that is, you need a specialist to perform layouts, and not for business users who help you) or are not designed for a layout window.

If you need a dynamic prototype, then there are many options, and it all depends on the type of skills that you have in the team. For example, I have a guy who is very strong in HTML. It would be much easier for him to create an HTML page from scratch in notepad, which will try to do the same with Flash in the WYSIWYG tool. Some other people have good Flash skills and can use them, etc.

Answer 5

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