Web Prototyping - Tools and Techniques

I’ve been thinking about picking up some additional skills, specifically around rich prototyping. So I’ve done a little reading, and I have a short list of options for creating Web 2.0 interactions in prototypes. Fair warning up front… I have only questions about these tools, no answers. If you have answers, please share!

First, there’s a new resource called Protoscript that claims it can help me easily add AJAX interactions to my websites. It looks fairly promising, but my immediate question is: why is this only for prototyping? If I’m adding rich interactions to my website, why can’t I go live using the same scripts?

From what I can tell, Protoscript isn’t substantially different from script.aculo.us, except script.aculo.us looks to be better documented.

But my feeling is that, in terms of time commitment, diving into all those javascripts is only one step down from learning Ruby on Rails.

I’ll confess to something up front… I can code, but I don’t like to. There’s nothing worse, for me, than trying to express an interaction I want, but being unable to because I can’t get some dumb script to work. That’s like asking a graphic designer to figure out how to get CSS floats to work at the same time as he’s coming up with a design concept. You don’t want to be struggling with a language that has its own quirks while you’re still working out the ideas in your head. So I know that the instant I have trouble getting a technology to work, I’ll go back to my trusty old copy of Visio, or OmniGraffle, or a paper and pencil.

This leads me to a product from Adobe called the Spry framework. Like Protoscript and script.aculo.us, it’s a javascript library that you can plug into existing web pages. However, it sounds like Adobe has gone to great lengths to simplify the process. They claim that using Spry is akin to using HTML, so you shouldn’t have to learn a lot of new tags. This sounds promising, but I’m still expecting something better. I’m expecting deep integration with Dreamweaver, so I can just click a few buttons and set a few options to add rich interactions to my web pages. When Adobe builds that, I’ll be on board.

In the mean time, I’ll probably stick with low fidelity methods of showing rich interactions (e.g. sketches, verbal descriptions, and a little hand waving). I wish I could find a link to a PDF I read recently. I’m almost positive the article was from Adaptive Path, and specifically from Jesse James Garrett. The document describes three non-rich methods for expressing rich interactions. My favorite of the three methods was just a sequence of static wireframes. So, for example, if you’re showing drag-and-drop behavior, you would have three frames — one for the object being grabbed, one to show it being dragged, and one to show the object dropped. I can wireframe that up in a minute, rather than taking an hour to fiddle with scripts.

But, admittedly, non-rich prototypes of rich applications fall a little flat when it comes time to demo. Which is why I’m still on the lookout for a tool that will fit my needs. If Adobe doesn’t rush to fill this need with Dreamweaver, I’m sure Microsoft will with Expression Web. (Hint, hint, Adobe!)

4 Responses to “Web Prototyping - Tools and Techniques”

  1. Brian Stevenson Says:

    Here is a technology that doesn’t have anything to Web Prototyping, but it’s REALLY cool. It’s called “Microsoft Surface”:
    http://www.microsoft.com/surface/default.aspx
    http://www.popularmechanics.com/technology/industry/4217348.html
    http://video.google.com/videosearch?q=%22microsoft+surface%22&hl=en&um=1&ie=UTF-8&sa=N&tab=wv

  2. GraeNormal Says:

    Oh no, don’t get me started on Surface!

    http://www.youtube.com/watch?v=CZrr7AZ9nCY

  3. Brian Stevenson Says:

    LOL! This video sounds like a conversation we might have. You gotta love the bickering between a Windows fan and a Mac fan:
    http://www.youtube.com/watch?v=ZN1W44F-CRQ&mode=related&search=

    *** Warning: Occasional f-bombs dropped by the Windows guy when he’s pissed off at the Mac guy ***

  4. jonm Says:

    and just when I thought I was getting a leg up on this whole “web 2.0″ thing. boy do I feel like someone’s grandpa!

    “back in my day there was no such thing at a you tube or a me tube or an anyone else tube. you only had one tube and you were happy with it, by golly!”