3 New Desktop Tools for Creating Interactive Prototypes

Nowadays more and more people realize the value of prototyping and there are many new prototyping tools available in the market. Compared to static wireframes printed on paper, interactive prototypes are more suitable for collecting feedback on usability since they provide almost the same experience as the final product. Users can play with the prototype and tell you whether they like it. This article introduces and compares three new desktop tools that can create interactive prototypes.

Balsamiq+Napkee

Balsamiq has been there for a while but it can not create interactive mockups (although it allows you to link pages together). Napkee is designed to be a "Balsamiq-Mate", it can convert Balsamiq mockups to interactive mockups, so I put them together as one option.

Balsamiq insists on low fidelity prototyping, and all supported components have 'hand drawing' look. You can drag components from the top panel and drop it into the editing area, tweak them with the buttons in the floating tool pane. The mockups can be exported as PNG images. You can edit multiple mockups at a time but each mockup only contains one page. You can link a mockup to some component (i.e. buttons, checkboxs etc), and when you click the component, you will be navigated to another mockup.

Napkee launched in August this year and it provides one click solution to export Balsamiq mockup to DHTML or Flex, which can be embedded into web site and more easy to be reviewed. In its main view you can preview the source code and the final result. The Flex exporting works well, the final result look almost the same than Balsamiq mockup; the DHTML exporting is not so good because some components are not at their places (check the two figures above, they are for the same design).

Both tools are deployed on AIR, so they are cross-platform.

Balsamiq and Napkee have the same single price: $79, so the total price for this option is $158. IMHO the interaction provided by Balsamiq and Napkee is too limited (only page-by-page navigation), and Napkee is not mature yet. But considering the big number of Balsamiq users, this option still seems promising.

ForeUI

ForeUI is launched in April this year. Its first version looks simple, but it grows up very fast and become more and more powerful. It can create interactive prototype and run as DHTML in web browser.

The layout of ForeUI is neat and the features are easy to use. The operation is similar with Balsamiq except the component list is placed on the left. The tool itself has a bronze look and feel, thus you can definitely separate it from its prototype content.

ForeUI makes prototype skinnable, thus the fidelity of prototype can be switched as well. So far it provides four UI themes: "Hand Drawing", "Wireframe", "Windows XP" and "Mac OS X". The "Hand Drawing" theme is for low fidelity prototyping, it makes the prototype has similar look than Balsamiq mockup. The "Windows XP" and "Mac OS X" themes are for high fidelity prototyping, prototype with this themes will look like the real native application. The default theme is "Wireframe" which is for medium fidelity, and you can switch the theme at any time.

ForeUI supports editing multiple prototypes at a time, each prototypes can contain multiple pages. The prototype can be exported as BMP/GIF/PNG/JPG, PDF or DHTML files.

You can also define the behavior of each component for simulation, and you can customize your own component too. The behavior definition is very flexible and powerful, you can define the whole flow chart to specify the behavior for certain component (see the figure above). The behavior driven by event, you can pick the event that need to be processed and define the completed event processing flow. Besides page-by-page navigation, you can show/hide or move certain components within the page, some components even support changing value dynamically.

ForeUI is developed with Java so it is cross-platform.

ForeUI takes $79 for single user. The price haven't been changed yet, but the latest version includes a lot of new features than the initial one, I predict they will update the price too.

FlairBuilder

FlairBuilder is launched in May this year. It provides a free online viewer so that you can show your prototype to others.

FlairBuilder includes two working modes: design mode and preview mode (see the two figures above). The design mode is for editing the prototype and the preview mode will let you interact with the prototype. In order to show the preview effect to others, you need to use the online viewer.

FlairBuilder puts the component list to the right, you can drag the component to the editing area, the toolbar on top can help you to tweak the components. The style of prototype is flat wireframe, which belongs to medium fidelity. You can define the event handler of component, but not all components support event handling. In FlairBuilder, the window component is a little special, it works as a container and allow dragging components into it. But the ownership can not be changed, that means you can not drag the component out from the window.

FlairBuilder can edit multiple prototypes too, each prototypes can contain multiple pages. The prototype can be exported as PNG or JPG files.

FlairBuilder is deployed on AIR and it is cross-platform.

FlairBuilder priced $199 at the beginning and latter changed to $99. The tool seems not mature enough at this time it is still promising.

Comparison Table

Here is a quick comparison of these tools. The common features are not listed, like cross-platform, multiple-project editing etc.