Search code examples
user-interfaceevaluationprototyping

Whats the best way to create interactive application prototypes?

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.

Solution

  • 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