Flowella is a simple but powerful tool by Nokia that lets you create application prototypes directly from design suites or even scanned hand-drawn sketches.

Why prototype?

Nokia has addressed a critical issue in any application development. In a development process that consists of an idea, designing, prototyping, coding, testing and deployment, the prototyping and testing are often put to the side or severely limited due to a time constraint. But those two, especially prototyping in the early stages of development, are critical to spotting design flaws and bugs.

One more obstacle in the prototyping stage is that a designer and a developer are both needed. That is why Nokia has presented Flowella with a tagline “Create prototypes before writing a line of code”.

What, no coding?

That’s right. All you need to do is create screenshots of your prototype in your favorite image editing software, load them in Flowella, drag them to the workspace and connect them like any other flowchart.

It’s really straightforward, but there are a few more tips worth mentioning. When you click on a screenshot it pops out zoomed in. You then select a rectangular click area on it (hotspot) and drag a pointer to the next screenshot. That way you create connections. By clicking the Preview button in the upper left corner you can get a quick preview in an emulator.

For more detailed instructions you can download a PDF manual.

Deployment and an example

When you have a prototype you’re satisfied with, there are two ways to deploy it.

1. As a Web Runtime widget (WRT) for Nokia phones.
2. As a Flash Lite file.

The process is very simple. In Flowella you just click File -> Export Flash/WRT. It generates images and files that describe behavior which you copy on a device or upload on a web page.

There are only a few dozen devices that support WRT, but many more that support Flash. Also, Flash can be run in almost every web browser so at this time this is my preferred choice.

To emphasize the “hand-drawn sketches” point from the introduction, here is one (too) simple, but illustrative example of what can be made in under a minute when the scans are prepared.

Pros and cons

Pros:

• Prototypes are created with JPG or PNG images. No coding knowledge is required.
• Very simple and intuitive user interface.
• Predefined templates for Nokia phones (but custom layouts can be defined for others).
• Support for touch and non-touch devices.
• Flowella runs on Adobe AIR so you can use it on Linux, Windows and Mac OS.
• Simple & working use cases can be created in a matter of minutes with prepared images.
• Prototypes can be deployed on a supported mobile phone (or any that can run Flash), in an integrated emulator and on a web for remote testing.
• Flowella can be used to prototype mobile websites also, not just native applications.
• Flowella project file (.flo) is a XML file that can be hand edited for fine tuning and is great for any source control management tool.

Cons:

• Data or event (like internal clock) driven prototypes can’t be created. It’s only images after all.
• Complicated user interaction can’t be produced: gestures, drag & drop, press & hold.
• No hardware communication (GPS, accelerometer, phone, …).
• Flowella has some quirks sometimes (it’s still not 1.0 version).

Conclusion

Flowella is a great tool for the value it provides. Ideas can be tested quickly and feedback received very early in a development process. I wholeheartedly recommend that you give it a try for your native and mobile web applications. You can literally save days and weeks if you head off in the right direction from the start.

Update 2010-11-30: Check the new accelerometer, trigger and Qt Quick features in a newer version of Flowella.