A LIST Apart: For People Who Make Websites

No. 269

Discuss: Paper Prototyping

Pages

| 1 | 2 | 3 | 4 | 5 | next »

1 Very cool

Okay that’s a very cool idea – my paper prototypes are no where near that good! They usually just involve sketches, not multiple sheets for the same bit, wow. Very cool.

posted at 07:38 am on January 23, 2007 by David Paul

2 Behaviour

While paper may be suitable to discuss static layout, up to date websites (Web 2.0) do have a great part of behaviour in them. It’s really hard to simulate this using paper. On the other hand if you already code the pages for an HTML (or even Ajax) prototype you’re half way done and you may waste time doing the coding again and again.

So what I do is neither more sophisticated than paper, nor as time consuming as coding – I just provide some Powerpoint slides.

posted at 08:05 am on January 23, 2007 by Andreas Berg

3 Computer generated hand drawn concepts

Nice article, I completly agree that the hand drawn and paper based prototyping is a very valuable stage in a user-centred design process.

The agency I work for actually uses PowerPoint to create these initial concept designs. They have a PowerPoint library containing the standard elements of a user interface that appear as though they are hand drawn. We use this as a starting point for concept designs.

We print out the designs on A3 and then present them to users in morning sessions and then we make modifications to the designs in the afternoon and repeat the process until we are happy with the concept. We have pen and paper on hand if the users feel then want to add to the designs.

Although I hate PP it suits the purposes of quickly mocking up a concept and means we have electronic versions of the iterations for our records. Just some more food for thought. :)

posted at 10:52 am on January 23, 2007 by James Mansfield

4 RE: Ajax and other advanced client-side presentation

@Andreas: Thanks for your comments and raising this point. I know this method isn’t for everyone and I respect that.

My approach to any site that uses Ajax (plugins, advanced client-side widgets, etc.) is to remember that it has to work without Ajax to begin with. There is a lot of prototyping to be done before one even gets to the implementing any client-side behaviors.

Remember one of the benefits here is to capture this feedback earlier in your process so that by the time you sit down with your toolkit you’ve already got a serious chunk of user feedback. I’ve been involved in paper prototyping sessions that highlighted areas where Ajax (or even DHTML+XMLHttpRequest if you’d like me to date myself) ended up improving the experience.

posted at 12:11 pm on January 23, 2007 by Shawn Medero

5 Very Respectfully Disagree

Hi Shawn. Thanks for the well written article. Unfortunately, I couldn’t disagree more with the idea that paper prototypes are an effective means of communicating the content, structure and functionality of a website prior to design and coding. George Bernard Shaw said “The biggest problem in communication is the illusion that it has taken place.” While paper does help draw out a group and does help to a degree, it does not go far enough to avoid the critical miscommunications that can cripple a web project in the end. And because paper can create the illusion that communication has taken place, invisible problems can find their way into the project.

We used to use detailed paper prototypes but found consistently that clients just didn’t get what we were talking about—until the site was in beta mode and they could see it in a browser. Of course by then it was too late to easily change the site. We found that a browser-based, visually generic, easily modifiable, HTML prototype was the solution and the difference was dramatic. We even wrote a book about it called Client vs. Developer Wars (it’s available as a PDF on our site – http://www.newfangled.com/client_vs_developer_wars).

While I disagree with using paper I seriously respect and commend all web developers, like you, that go to great lengths to effectively communicate about the web with their clients. Thanks!

posted at 02:23 pm on January 23, 2007 by Eric Holter

6 Some Bosses Don't Get Paper

Ever since I first started being worried about usability in the mid-1990’s, I’ve used paper prototypes in a very similar fashion.

As the “usability expert,” I would usually create the paper prototype in Word (since my handwriting stinks) and then build interactive paper prototypes.

However, the reaction (and subsequently the success) has always been mixed. First I used to think my GUI designs were no good (convincing managers of mainframe AS400 systems to make the jump to Windows and then to the Web), but eventually I figured out that some people just can’t deal with computer GUIs on paper.

Sure, they may tell you that they have the best imagination in the world and that they want to see “what you got.” In the end, I find that there is a very limited audience for paper prototypes among my varied clients: It’s usually the more tech-savvy people who can really make a contribution and get something out of paper prototyping.

Unfortunately, eight out of 10 managers and bosses I deal with just don’t get paper prototypes. However, I still use paper prototyping with peers and development teams to convey a concept or a new idea before the actual building begins.

Thank you for your thoughtful article and the example illustrations.

posted at 02:49 pm on January 23, 2007 by Web Gyver

7 RE: Paper vs. Bare-bones HTML prototpyes

@Eric

I’ve used both approaches and it generally comes down to a judgement call on what method will work best with a client and the product in question.

One thing to consider is that paper may not be the solution for the entire process but smaller parts that you’d like immediate feedback on. That’s what Microsoft’s Jensen Harris did during the development of the Office 12 user interface .

posted at 02:52 pm on January 23, 2007 by Shawn Medero

8 I love the suggestion of creating a standard set of templates..

I’d very much be interested in a open template set using SVG (maybe inkscape). If anyone else is down I’d love to collaborate.

posted at 03:00 pm on January 23, 2007 by Dan Nawara

9 RE: SVG Templates

@Dan

Yeah, I was sorta surprised that nothing was out there. I thought for sure the GNOME folks would have something in SVG since Novell was so big on funding this type of work for a while. Also, I agree that Inkscape is more than up to this task.

For those who think code generation might have a place here: having the SVG form should make it easier to programmatically work through a prototype. The Univ. of Washington/DENIM folks might have some knowledge of past or current attempts using SVG.

There’s a link to my website in the article and ways to contact me there. Anyone who is interested should stop by. I’d love to get that discussion going on a mailing list, Google Group, or whatever works for the ‘crowd’.

posted at 03:14 pm on January 23, 2007 by Shawn Medero

10 Outstanding work, thanks

Thanks for this excllent work. I especially appreciate all of the spot-on links and detailed discussion. I am sure that I can apply these techniques to many things, as your article suggests. At a minimum, this will speed up and simplfy my prototyping.

Keep up the great work!

posted at 05:46 pm on January 23, 2007 by lurker LURKER

Pages

| 1 | 2 | 3 | 4 | 5 | next »

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Remember me

Subscribe to this article's comments: RSS (what’s this?)