Sketching the next killer web app: on the missing prototyping tools
These paper prototypes of popular websites (via Waxy Links) are absolutely charming. I've always loved drawing paper interfaces because of the way that they help to clarify thinking about what is important. On paper you never have the space (or in my case the skill) to get specific about the details that ultimately don't matter as much as the one or two key actions on each screen.
In fact, I've often wondered why there are no good computer-based prototyping tools— or at least ones that approximate the best qualities of paper. Using Photoshop to prototype interfaces is like using a jackhammer to make ice sculptures; with enough practice you can do it, but there has got to be a better way. Over the years, I've found some tools that help to wireframe (Visio, OmniGraffle), but all of these are still too cumbersome and provide little if any help in terms of interactivity. It is no wonder then that some in the web design community are advocating jumping straight to HTML from paper.
Here is a lazy web idea that might help experience designers: how about a software application that let folks scan in their paper prototypes and then manipulate them with simple drawing/animating tools via point and click. The result would look a lot like Ambrosia's SketchFighter 4000 game (in the best of circumstances) but it would give the prototyper both the speed of initial design that paper provides, and the ability to quickly iterate and animate on the computer. With a few fancy filters, one might even be able to start formalizing the digitized paper prototype by replacing the hand-drawn geometric shapes with real polygons.
Back in the 80s, Dan Bricklin developed "Dan Bricklin's Demo Program" for prototyping text-based applications. Though I've never seen it run, I understand from people that used it that the application developed a cult following among early PC application developers. This scanned paper prototypes application might just fill the same need for the web generation.
Comments
Steven Kaplan commented, on June 28, 2008 at 2:46 p.m.:
Oh, BTW this is a great download from Yahoo. Tons of sexy web controls already canned and ready to go in all kinds of different file formats.
Jon Udell commented, on July 1, 2008 at 12:19 a.m.:
As mentioned in the article you cite, Bill Buxton is one of the leading proponents of paper prototyping. His reasons are subtle. In particular, as I noted here (http://blog.jonudell.net/2007/05/31/a-conversation-with-bill-buxton-about-design-thinking/):
"What matters here isn’t the interaction between the test subject and the prototype, because it isn’t really a prototype, it’s a sketch. Rather, what matters is the interaction between the test subject and the designer. The sketch need do no more than facilitate that interaction."
Jon Udell commented, on July 1, 2008 at 12:20 a.m.:
Oops.
http://blog.jonudell.net/2007/05/31/a-conversation-with-bill-buxton-about-design-thinking
Miraclestudios commented, on July 1, 2008 at 7:27 a.m.:
Come fly with us on the wings of creativity, we will design an original , concept based adobe for your business.
We are not for sprouting "ugliness" on the web, in fact we are for applying the creative "Magic Wand" : which will transform all the ugliness in to beauty.
Are you ready to try our "Creative Magic Wand" on your website .
Cautions: Some clients experienced intense heart palpitation's after seeing the reincarnation of their online assets by MIracle Studios.
Don't go by our words! Just take glimpse at our award winning website : http://www.miraclestudios.in
Hi, I'm Antonio, living in Boston and working this whole net thing out...
Steven Kaplan commented, on June 28, 2008 at 2:40 p.m.:
As a heavy Visio user for storyboarding it is both my best friend and worst enemy. You're hitting on a major pain point, though, that is I don't have the intuitive experience I get with simple pen and paper.
Perhaps a simple solution here is just to 'optimize' Visio for the tablet interface?
The interactiveness problem is tough. Although tools like Flash provide a ton of flexibility for these scenarios, I think PowerPoint does a great job of providing a simple set of tools for putting together animations.
Soooo...maybe what we really need is the layout tools of Visio, pen-enabled, combined with the animation tools of PowerPoint. Add in the ability to publish your prototype to the web and you've got a sweet app.
BTW - Working for MSFT these days so I'm obviously biased :).