May 25, 2011

Prototypes

The number one feature request I get for my iPhone mockup tool is to allow linking different screens into interactive prototypes. I’m not sure when — or even if — I’ll find the time to continue working on the iPhone mockup tool, but at least I now have an answer for these requests: use Prototypes.

Prototypes

Prototypes is a totally awesome new project by Duncan Wilcox and Keith Lang.1 Basically, it’s a tool that lets you create interactive prototypes based on your static mockups, wireframes, or even sketches.

You create a new prototype, add the pictures of your screens, create «hotspots» by clicking and dragging on a screen, and then link the hotspots to other screens. You can even set transition animations.

Hotspot properties

You can then run the prototype on your Mac, and klick through it.

All of this is already incredibly useful.

But the real killer feature is that you can upload your prototype to an online service, and then run it on an iPhone as a web app. Yes, this tool allows you to easily create interactive prototypes that run on actual iPhones.

Uploading a prototype

So what can you use this for? Well, for me, the most obvious use would be to do prototype usability testing.2 Or you could use it to explain an interaction to a programmer. Or you could use it to test the «flow» of your app. Or make sure the colors look right on an actual iPhone, and that the touchable areas are big enough for people’s fingers.

Honestly, I’m totally freaking out about how incredibly cool and useful this is. This makes me actually wish that I still worked on iPhone apps. Which I don’t. But I want a copy of Prototypes in my Applications folder anyway. And so should you.

  1. Disclaimer: Duncan and Keith are friends of mine. But Prototypes would be amazing even if we were mortal enemies. back

  2. If you don’t know how that works, feel free to preorder my upcoming book, which, among a ton of other useful stuff, explains how to do usability tests with static or slightly interactive prototypes. back

If you require a short url to link to this article, please use http://ignco.de/371

designed_for_use_small

If you liked this, you'll love my book. It's called Designed for Use: Create Usable Interfaces for Applications and the Web. In it, I cover the whole design process, from user research and sketching to usability tests and A/B testing. But I don't just explain techniques, I also talk about concepts like discoverability, when and how to use animations, what we can learn from video games, and much more.

You can find out more about it (and order it directly, printed or as a DRM-free ebook) on the Pragmatic Programmers website.