views:

6554

answers:

28

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.

+3  A: 

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

mjnagpal
+1  A: 

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).

Ben Gottlieb
+5  A: 

OmniGraffle + Ultimate iPhone Stencil!

David Grant
+3  A: 

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

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

matt
A: 

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

Pacifika
A: 

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.

Colin Barrett
A: 

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/

Lee
A: 

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!

Robert Gould
A: 

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).

Jeroen Heijmans
A: 

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)

Matthijs
+3  A: 

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.

JJ Rohrer
I wrote the above answer about a month and a half ago. I've since found Balsamiq a bit slow for day-to-day use and will likely switch to some some generic drawing program if it doesn't dramatically speed up. That being said, I would still recommend Balsamiq.
JJ Rohrer
I, again, wrote the above. Balsamiq latest beta, as of 29 June, 2009, seems faster. So, that is good.
JJ Rohrer
A: 

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.

Tehnomaag
A: 

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/

Amot
A: 

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.

Alan
A: 

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

A: 

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.

slothbear
Do you have the source code for this session? Could you share it with me?
david
The conference source code may have been part of the original package, but I never saw it. For this session the code was extremely simple, and all done in code (no IB). All of the screens were static, and most of the code read like this:if (touch.y < 70) showProductView
slothbear
+1  A: 

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.

Dotan Saguy
A: 

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

Moises Wattanabi
A: 

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.

Plamen Dragozov
A: 

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

Cristian Pascu
A: 

WireframeSketcher comes with an iPhone stencil.

Peter Severin
A: 

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

Thought Merchant
A: 

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.

michielvoo
A: 

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"

RainyDayInterns
A: 

+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.

Amir Khella
A: 

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

vladocar
A: 

keynotopia is a prototyping set for keynote

woens
A: 

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

Martin Mayer