iPhone prototyping software

Tweet

Ask any house builder and they will tell you, don’t put the drywall up before you do the plumbing and electrical. The advice holds true for software as well. Unless you have worked out the basic structure of your app, don’t waste time with precise button placement, color selection, or the creation of a more realistic prototype. The pencil and paper method is the fastest way to test out a lot of user-interface ideas, narrow in on a direction, and work out the flow of an app. It is only when the ideas have been fully fleshed out on paper should one consider taking them to the next level.

There was a time when the only techniques used for making prototypes were screen grabs and “cut & paste” with a drawing program. Now there are many different software tools to help create native-looking software mock-ups. Some of them will even allow button presses, bring up new screens, and simulate other actions. We have selected a few of these prototyping tools to examine in detail. These tools fall into three general categories: visuals only, simulators, code generators. One workflow would be to use Photoshop to create a realistic looking screen, download it to the iPhone, and see it on the device. This approach will let the designer get a feel for the layout, but it is limited in providing any other kind of feedback. A tool such as LiveView can make the process easier and more informative. The mock-ups on the computer screen can be seen on the iPhone without having to constantly sync with the device. Complicated screen popups, interactions, and other behaviors can also be simulated using this mechanism. The downside of this approach is one can create actions and behaviors which cannot be replicated on the actual iPhone.

LiveView is a FREE remote screen viewing application. It could be very useful for creating quick and dirty simulations, demos, and prototypes. With the LiveView Screencasterapplication running on the Mac and LiveView running on the iPhone, whatever is under the iPhone frame on the Mac’s screen is “cast” over to the iPhone via WiFi. When the iPhone frame is moved on the Mac, the screen on the iPhone will update accordingly.

Two other prototyping tools we will be using over the next few months are Interfacefrom LessCode and FlairBuilder by Cristian Pascu. We chose them over the others because they appear to be feature-rich yet simple to learn. Both are also reasonably priced. While both tools allow the user to create interactive prototypes, they differ in many respects. LessCode’s app lets the user create the prototype directly on the target device (iPhone, iPad) itself. The advantage is that the screens you create get rendered on the actual device. You can’t get any more WYSIWYG than that. The FlairBuilderenvironment runs on the Mac. This means you will have more room to work and will have access to all of your other resources (sounds, images, etc…). We don’t know for sure yet, but we would expect that one would be able to build more sophisticated demos and prototypes using FlairBuilder than with Interface. We will have more comments on their capabilities once we have had a chance to use them for a while. Go check out their respective sites (LessCode, FlairBuilder) if you are eager to learn more about them now.

The most sophisticated tool of the bunch is Interface Builder (IB) from Apple. To use it effectively, you need to be comfortable with Xcode and the iPhone development environment. IB is a layout tool designed to simplify the process of creating the visual components associated with a typical iPhone app. IB is tightly coupled to Xcode and is used to generate real code. However, it can also be used to create very realistic and interactive demos and prototypes. The advantage of using IB to create the prototypes is that much of the work, if done properly, can be reused in the actual app.

A realistic prototype is great for UI testing and other related activities. It can also be very helpful for selling the idea to managment, getting buy-in, and acquiring funding. There is a trap that some project managers fall into when showing a realistic prototype to upper management. While it be tempting to, in a “demo or die” culture, give the impression that a prototype can be quickly turned in to a product…don’t 🙂 A realistic-looking prototype can create a false impression that the software is further along than it really is in the development cycle. It is important to stress that a prototype created using many of these tools are no closer to an actual building than any of the sets on a Hollywood backlot. The front may look realistic, but there is not much on the back holding things up.