A LIST Apart: For People Who Make Websites

No. 261

Discuss: Sketching in Code: the Magic of Prototyping

Pages

 1 2 3 >  Last »

1 100% Argee

You’re dead-on with this article. I noticed the trend in shying away from wireframes in recent development in favor of prototyping. It’s much easier to share concepts of interactivity with someone by clicking through (even a static example) than trying to describe “how awesome it will be.”

And also, being able to get immediate feedback, pick at UI problems and see initial reactions on a person’s face will only speed up the development process.

good read, thanks.
my2cents

posted at 02:06 pm on June 17, 2008 by Tim Wright

2 Agreed, but...

I completely agree that prototyping yields far better results than wireframes for web-based design and development. My struggle, however, is with what tools to use to get there. I’ve got designers, content authors, and developers working with my prototypes at various stages of the design/development process and, of course, all have varying levels of ability to work in XHTML/CSS/Ajax, etc. Are there any tools out there that can handle iterative development of prototypes that are also simple enough for non-developers (i.e., folks with rudimentary HTML skills) to use?

posted at 02:45 pm on June 17, 2008 by Stuart Sipahigil

3 Applications/Environments/Platforms commonly used?

I couldn’t agree more with this article. However, I wish there had been more detail given to how the author and teams he develops with actually go about their prototyping. I haven’t found an application or platform that is really agile enough to allow lots of revisions, rough outlines and the kind of “sketching” that is really necessary without requiring an overkill of development time. Anyone have input on that topic?

posted at 03:04 pm on June 17, 2008 by David Ellenwood

4 Yes, but...

You are right about the benefits of prototyping, but there are pitfalls too, most often if some feature from the prototype proves to not be quite doable when the real production system comes online, the user feels they’ve been misled. Also in many cases, if you have a prototype the user tends to feel that all the “hard” work has been done, so why do you need such an unreasonable amount of time to deliver the “real” app? You’ve really got to work hard to manage expectations in that case.

posted at 03:25 pm on June 17, 2008 by Mike Mormando

5 prototypes bridge different disciplines

Sony uses prototypes as well in the design process to exchange thought about their designs. Instead of using renders and web based image they show a working prototyping. They use this as the basis for making a decision to proceed developing the design or to discard it. It has proven that this prevents the normal disputes between different departments because they have different languages.

posted at 03:58 pm on June 17, 2008 by interaction design

6 PowerPoint, believe it or not...

I have to agree with Mike (#4) in that a lot of my clients do think you’ve pretty much built a project when you give them a prototype, especially using the delivery medium that the project is ultimately deployed over.

I’ve been using PowerPoint to build my prototypes for a number of years now and believe it or not it works wonderfully. By using button actions to non-linearly navigate to other slides, I can map out what content is delivered, what UI is displayed and generally how the program will flow.

It’s also really good to highlight anything you’ve missed (man the number of times I’ve forgotten back buttons for ROM projects and not realised it until I can’t go backwards in my PowerPoint!).

My clients quickly understand how the project will function, will see how information is displayed (and capable of directing any required restructuring using a reference THEY can understand) and generally get a feel for the thing without thinking I’ve actually built the project already – a PowerPoint file with green boxes and anti-aliased Arial does not a web or ROM project make. Hell, even the presenter’s notes section is great for putting client comments on each screen as necessary.

The PowerPoint is then also abrilliant reference tool for me and/or other developers to see how the thing is put together and all of us cross-check what’s still to do.

I’ve not touched PowerPoint for presentations in about 4 years, but it’s probably the most used application on my system!

posted at 04:11 pm on June 17, 2008 by Ross Clutterbuck

7 Design, Prototype, Evaluate

Excellent article that hits the mark. Prototyping has been used in software development for decades and is especially useful in eliciting user opinions before extensive programming is done. The positives far outweigh the negatives.

posted at 08:01 pm on June 17, 2008 by Bill Szczepanek

8 Totally agree, even though I've never wireframed..

I’ve never wireframed before. I actually never even knew about wireframing until a couple of months ago.

I’ve always prototyped my web sites before handing them over to the programmers. This article really highlights a lot of the strong points of my company’s development process.

In response to Mike (#4), the last paragraph of “The benefits of prototyping” explains that if prototyping is used consistently when developing new projects designers and developers begin to understand the capabilities of each other. I often get helpful suggestions from my programmers and at times I even find ways to help them speed up their process because I’ve begun to understand what is possible in PHP.

I’ve never had too much difficulty explaining to clients, “Hey, this is just a demo. Nothing is programmed yet.” I love telling them they don’t need to actually input a username and password, they just need to click login…because nothing is programmed. Then the inevitable question comes, “is this site going to be secure?”

Some of the problems I’ve run into with prototyping:

It’s hard to keep the prototypes updated with projects that are already live on the web. We often make changes to our templates on our live projects without updating them in the prototypes.

Another problem is that my programmers use different AJAX methods to make elements appear and disappear. Why aren’t I just using the same one as they are, so they don’t have to redo it? Well, I am now. I guess that fuels the collaborative process even more. The more you do it the more efficient you become!

Awesome use of PowerPoint Ross (#6)! I will probably look into doing some small scale demos in PowerPoint now.

posted at 08:34 pm on June 17, 2008 by Bryan Downing

9 How/when to prototype?

I completely agree with #2 and #3. I’ve been trying to help my company find a solution to prototyping, but we just haven’t found a cost effective solution yet.

I wish the author had gone into more detail about how he implements prototyping and in what stage of the process he does it. Darn!

posted at 09:00 pm on June 17, 2008 by Ben Wilkins

10 Right tools

I use wireframes early in the project as an information architecture tool, not to express interaction. I make my prototypes simplistic and devoid of brand elements, and requiring a single, specific course of action to appear functional.

posted at 11:38 pm on June 17, 2008 by Ben Field

Pages

 1 2 3 >  Last »

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

Forgot your password?

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