Prototyping is an essential part of design. At some point during the process of creating and releasing a great product, building a prototype is inevitable. Prototyping allows you to validate your design choices with developers, project stakeholders and, most importantly, target users. A good prototype is simply the best way to share, communicate and get quick feedback on your design ideas.

In the world of mobile devices, the evaluation of native applications, mobile websites and web apps is crucial. While desktop PCs have been around for about 40 years and the World Wide Web is celebrating its 20 year anniversary, mobile devices are relatively new. The history of web has seen a number of design standards emerge. Despite the constant evolution of the platform, best practices can help anticipate user behaviour on any desktop web application. Since the same can’t be said about touch phones and tablets, validating design choices as soon as possible becomes crucial. For mobile, fewer best practices exist and user behaviour is hard to predict.

PROTOTYPE SOONER THAN LATER
So what’s the right moment to prototype when designing for mobile devices? It’s not that different than other areas of design: you need start as soon as possible and you can’t stop until you are confident about the solution you are proposing. Throughout the creative process, the purpose of your prototype will evolve, and so should its actual manifestation.  At the brainstorming stage, you may simply be trying to communicate and get feedback about specific ideas from your peers with a couple of hand-drawn sketches.  However, later in the process, you may be hoping to perform a more serious evaluation of high-fidelity prototypes with real users.

One persistent issue with mobile prototyping is its small screen.  While you may be able to get away with larger brainstorm sketches, we advise running all prototypes on a real mobile device to simulate the size of your user interface (UI), the feel of your website/application, and the way people interact with it.

Another crucial aspect surrounds the fact that prototypes are meant to be shared. The whole point is to share them with the people from whom you need feedback, so the ability to serve as a communication tool for your interaction design is a basic attribute of every prototype. You have to easily be able to get it out there to see what people think, how they use it and what they understand (or don’t understand), in a way which reflects the actual proposed application.

But before you start building a prototype, you need to clearly define what you want to communicate, what kind of interaction you want to validate and what type of feedback you need. List the features you want to show, the questions you want to ask and based on that, write the usage scenarios that will help take people through your product.

Depending on your scenarios the prototype you will develop will fall in one of the three different categories:

LOW-FIDELITY PROTOTYPES
Prototypes can be as simple as a slide show of drawings made of pictures taken with your phone camera. Showing these pictures in your phone allow people to provide initial feedback regarding labels, positioning of objects, visibility and other elements that don’t require interactivity.

If you want to go one step further, you need to provide a way for people to interact with the pictures in order to simulate realistic scenarios. A number of different applications available in the market today make adding interactivity to your screens and running your prototype on a mobile phone quite easy. These tools help you link your screens together so people can navigate through them as if they were using a real mobile website or app. On the iPhone, tools like Realizer and Mockability help you build a prototype in a couple of minutes and easily share them. Invision is a recently launched web-based prototyping tool that works with all platforms.

If learning how to use another piece of software in not on your plans, some of the best tools for basic prototyping are likely already on your system: Apple’s Keynote and Microsoft Powerpoint. They both have the necessary functionality to link slides very easily and then export the “presentation” to a PDF file that can be “read” on all mobile platforms. A major advantage of these software packages is the number of available UI libraries for iPhone, Android, Blackberry and others.

One the best libraries in the market today is Keynotopia. Available for Keynote, Powerpoint and even OpenOffice, it provides UI libraries for the iPhone, iPad, Android, Blackberry and Windows Phone 7. It also offers an iPhone/iPaq app optimized to display your PDF prototypes. Or you can use your PDF reader of choice, like Goodreader on the iPhone or ezPDF on Android.

These tools are extremely useful when you need to create rapid prototypes to validate basic aspects of your design like labels, size and location of objects and the basic understanding of the navigation and flow.

MEDIUM-FIDELITY PROTOTYPES
Basic prototypes can only take you so far. You will frequently face the challenge of trying to communicate or test your design when users can’t see or do certain things you need them to do. Simple things like page scrolling can’t be achieved with linked screenshots like those in the basic prototyping category. You will often find yourself hitting a wall with the limitations imposed by basic prototypes. You will want to overcome some of these limitations to be able to explore your ideas in more detail.

The tools previously presented are good for the early stages of a project but as you move forward, more advanced tools are needed to allow you to reproduce the behaviour of your product. Fortunately we are not short of them. The market is full of powerful and simple to use tools that will take your prototypes to another level. Tools like Axure, Justinmind, Flairbuilder, Protoshare and Fireworks let you create more complex interactions and allow you to quickly share and get feedback on your prototypes. You can simulate data entry, add conditional behaviour, and even animations; all this without writing a single line of code. These tools have a slightly higher learning curve, but nothing that is out of the reach of designers accustomed to typical drawing tools.

These tools give more control over the whole experience and help you simulate behaviours that are closer to the way your application or website will actually work.

HIGH-FIDELITY PROTOTYPES
If you need a prototype that behaves as close as possible to how the final product is supposed to behave, you’ll need to dedicate more time it, maybe even getting your hands dirty and writing some code. It doesn’t mean you need to start from scratch, but you’ll need be ready to play with HTML/CSS/JavaScript or some other programming languages. Combining rudimentary coding skills with tools like PhoneGap, jQuery Mobile and Sencha Touch will allow you to create extremely rich prototypes that can be tweaked to run well in different platforms. Limitations lie only in your coding skills and time.

The advantages of this approach are extended control of the final result and the ability to reuse generated code if done well.

CONCLUSION
There’s no excuse today to skip the prototyping phase of designing mobile applications/websites. The number of tools available, whether you need a rapid prototype or a more advanced one, is growing everyday.  These tools can do a pretty good job of simulating interactivity for validation purposes at very reasonable prices (often for free). The market for mobile applications and websites is growing more and more competitive. Transparent review systems where people openly criticize and spread the word about bad applications make prototyping an essential part of your design process: you simply can’t afford to correct mistakes after building your application.