What are possible/good ways to prototype iPhone applications?

Question

This is intentionally left broad. If you wanted to show users what iPhone/mobile applications could to for them. The more interactive the better, but it must be quick to build as you can't code up every idea. Let us assume real-time games are out of scope. Throw out ideas or state which approach would be best.

Here are some of my ideas, what are yours?

• Hack a app that loads mostly web or image content, but has hyperlinks to get around in. This would mean static data.
• Build screens which look great but can only be navigated in a story board type fashion.
• Load the web version or equivalent on the iPhone and say: now image the buttons and navigation is better.
• A paper based prototype.
• Flash or video walk through running on the phone.
• String existing iPhone apps and web pages together with minimal glue just to convey the idea.

Can anyone share prototyping methods for other mobile devices? Ex: The palm prototype was just a block of wood and note pad that was carried around.

Answer 1

I have been using the iPhone GUI Photoshop template to prototype applications.

http://www.kevinsblog.net/?p=99

One More good resource: 7 UI Design Resources for iPhone Developers

Answer 2

Certainly the photoshop templates that Manoj mentioned are useful. If it's just a proof of concept, I would storyboard things, or perhaps paper-prototype.

Using Interface builder, you can come up with some decent looking interfaces that will give people a good idea of what you've got in mind. With minimal coding, you can even put together a navigable demo (albeit with static data).

Answer 3

OmniGraffle + Ultimate iPhone Stencil!

Answer 4

You could use iUI or wAN to generate dynamic web-based UITableView lookalikes

http://code.google.com/p/iui/
http://webapp.net.free.fr/

Answer 5

Visio can do interactive web prototypes, so I can assume it would be a good iPhone prototyping app.

Answer 6

I've found that simple black & white wireframes are always a great place to start. Don't worry too much about getting everything to look exactly right, the goal is to get an idea of what information and interaction points you're going to present to the user on each screen.

Then I would recommend either high(er) fidelity mockups. The goal here is to get an idea of what each screen will look like on the phone. Function first, then form.

I've also had a lot of success using Adobe Fireworks to do my own mockups without needing a graphic designer (they're still super useful though). The nice part about Fireworks is that it has vectors but renders them at a fixed bit depth. This means you can zoom in and see a pixelated version of what you're working on, as if it had been rendered to an image or the screen already. This is actually really useful when generating something that is supposed to end up on the screen anyway, like a computer interface.

Answer 7

QuickConnectiPhone allows you to create a prototype quickly using HTML, CSS, and JavaScript. You can even use Dashcode to help you do this. Not only do you end up with a prototype but it can be partially functional as well.

go to tetontech.wordpress.com to see how to use it. To download it go to http://sourceforge.net/projects/quickconnect/

Answer 8

I wrapped the parts I frequently use of the iphone API in Lua and download Lua scripts from a server using the airport. No compile-times, which is great for prototyping!

Answer 9

Well, each method you mention has it's own advantages and disadvantages, but this is what I usually do with mobile apps:

More than for desktop/webapps, it is extremely important to also test with the actual device. Things that look great on paper or in the emulator can turn out horrible on the (i)phone.

So get out a "working" version of your application on a phone as soon as possible. You'll immediately see what works and what doesn't - even if you just try it yourself. You can then take the app to other people, as a form of hallway usability testing.

For the iPhone you can easily make a quick prototype of the application (without functionality) in the Interface Builder or in Dashcode (for webapps). Both give you the right look and feel right away. With a little work, you can also add in some fake data and basic navigation (especially with the UINavigationController, this is a piece of cake).

Answer 10

We have tried most of the tools mentioned above, but regular "prototyping" tools like omnigraffle, visio, axure etc are just not made for small screens and pixels.

We just figured out a great way to prototype iPhone apps using Adobe Fireworks. Read this: http://unitid.nl/2009/04/prototyping-for-the-iphone-using-fireworks-cs3/

• Superfast
• No coding
• No SDK
• On every iPhone in a sec
• Click through pages
• pixel perfect

Drawbacks - No animations - No input with iPhone UI elements (we are working on this one)

Answer 11

Although I'm a big fan of Interface Builder & Dashcode, I've also become enamored with Balsamiq Mockups http://www.balsamiq.com/ I like to do an iPhone layout and use it's "Markup" stuff for throwing use-cases, implementation notes, etc, right there on the mockup.

Answer 12

I'd say use something you're already familiar and comfortable with to create the prototype, like OmniGraffle, Fireworks (you can export clickable html demos), plain old HTML+CSS+JS to create your prototype and preview it with LiveView for iPhone.

LiveView is a free app for iPhone, and there's a free screencaster companion app for Mac. So you can use your regular desktop/laptop to screencast part of the screen to iPhone. And get click events back from iPhone for interactive clickthrough testing.

This will allow for much faster setup and quicker iterations than trying to test by constantly uploading your prototype to remote http site to load on Mobile Safari or some other similar approach.

Answer 13

Shameless plug, but we justed added a a feature so you can use ProtoShare to view your prototypes on the iphone. We have videos posted here:

http://blog.protoshare.com/2009/06/17/native-iphone-prototypes-with-protoshare/

Answer 14

I second the Dashcode and Balsamiq recommendation (+1). I'd like to add that I've been using PhoneGap to run my HTML+Javascript apps as native apps on my iPhone; not inside the Safari window. Sure, (mobile) Safari is under the covers, but the look and feel is all native. The performance is - of course - not quite as snappy as an Objective C app, but it's good enough for most applications, and great for prototyping.

Answer 15

Had great success developing a clickable prototype using UNItid's tutorial - Prototyping for the iPhone using Fireworks

Answer 16

WWDC 2009 had a great session with a lot of opinions on prototyping: Session 128 - Prototyping iPhone User Interfaces. You'd have to purchase the session from Apple for all the details, but I can summarize.

The presenter's opinion was that you really need to interact on the iPhone itself to get a feel for how the app is working. In his demonstration, he wrote simple code to navigate through static images of views, along with a bit of conditional logic for things like the Back button (touch.y < 70?). This seems closest to your "navigated story board" idea, but with some simple conditionals, the prototype seemed quite real.

Answer 17

I'm UX consultant and I just made available my own Powerpoint and Keynote templates for mocking-up iPhone apps. You can find them at http://mockapp.com/download/

I personally like this option better because it's easier to mess with than Photoshop or other complex design tools and you can even create a semblance of a demo / working prototype using hyperlinks, animations and transitions built into Powerpoint.

Check out the Photo Album app I re-created (also posted on the download page) for an example of what this method is capable of.

Answer 18

I've heard that MobileEnhanced (www.mobileenhanced.com) offers this service. Might be worth checking out.

Answer 19

We released an iPhone prototyping app, StencilsApp (http://stencilsapp.com), on the AppStore last week.

You design directly on the device, using native iPhone widgets. No programming required. And the end result feels like a real app, so you can get feedback from your users and customers before writing a single line of code.

I know it sounds like a shameless plug, but it's a free download, so no strings attached. Get it and decide for yourself. Or check out the demo videos.

Answer 20

You can also build interactive iPhone mockups with FlairBuilder. Check it out at http://www.flairbuilder.com

Answer 21

WireframeSketcher comes with an iPhone stencil.

Answer 22

For something a little more informal, for when you are talking to clients, or just looking to work out rough sketches or flow. These pads have worked great when I have used them with steak holders.

I made these pads to scratch my own itch - and am now selling them.

Paper Wireframes iPhone Prototyping Pad

Answer 23

I can recommend Interface, it's a native iPhone app to build interactive mockups. You can also use it to demo the mockup you have built.

It costs $9.99 but I think it's worth it.

Answer 24

We have started a series of articles on iPhone app prototyping. http://www.rainydaymagazine.com/RDM2010/Home/July/Week5/RDMHomeJul3010.htm#iPhoneUIPrototyping

We will start with a review of the available technologies and follow up with a series of "how-to" articles targeted for the Fall of 2010. The articles will be on how to use Photoshop, Interface builder, and 3-party prototyping tools to mock-up an iPhone app idea before actually coding.

Drop us a note if you have things you would like covered. We are always happy to take a look.

Sincerely, RainyDayInterns "We Entertain When It Rains"

Answer 25

+1 for Keynote. I've been using it to prototype interactive apps and test them on the iPhone. I love how it keeps me in the flow by not distracting me with too many features.

I put together a quick tutorial on how I prototype an app in under 30 minutes here.

Answer 26

I build two tools for iPhone prototyping that can be useful to someone iPhone Grid System and Google Docs iPhone Wireframe Kit

Answer 27

keynotopia is a prototyping set for keynote

Answer 28

Create and show your mockup on iPhone: www.mockabilly.com