Sketching in Code: the Magic of Prototyping

by David Verba

33 Reader Comments

Back to the Article
  1. 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
    Copy & paste the code below to embed this comment.
  2. 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?
    Copy & paste the code below to embed this comment.
  3. 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?
    Copy & paste the code below to embed this comment.
  4. 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.
    Copy & paste the code below to embed this comment.
  5. 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.
    Copy & paste the code below to embed this comment.
  6. 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!
    Copy & paste the code below to embed this comment.
  7. 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.
    Copy & paste the code below to embed this comment.
  8. 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.
    Copy & paste the code below to embed this comment.
  9. 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!
    Copy & paste the code below to embed this comment.
  10. 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.
    Copy & paste the code below to embed this comment.
  11. We’ve been doing this where I work for 6 years. It works exceptionally well once you’ve done it a few times and your partners/clients see it in action. We use XML/XSL for our prototyping framework. Works on almost all appservers and all newer browsers. We have an extensive snippet library for eclipse/aptana to do common patterns as well as a standard layout template that every page inherits from. This makes it extremely simple to set up your shared components and then just forget about them. Using XML files we create “scenarios” that define the page flow as well as hold data for display of specific page elements. This approach provides clear separation of concerns and allows us to explore multiple scenarios with very little coding. As we walk through the prototype with the client they may point out suggested changes. We document those changes in the affected XSL file. Most of the requested changes can be made real time and presented to the client. The changes that can’t be made immediately due to complexity are commented with a TODO and put in the task list for later work. All of the comments can then be pulled using another XSL file and transformed into implementation notes for developers or help with refining BRDs. At the end of the design process the same XSL files can be handed off to a developer, wired up, and used as the end state product. This works well in an agile environment.
    Copy & paste the code below to embed this comment.
  12. Yes, I agree prototypes are good. But I came across the same dilemma, how to develop them without too much pain. I am currently evaluating UML modelling software “Screen Architect”? (plug-in of Enterprise Architect) for work. This software is designed specially for prototyping of user interfaces.
    It does have few problems, but because we are using Enterprise Architect for business requirements, use cases, wireframes, etc., it looks like a good tool to use. 
    Copy & paste the code below to embed this comment.
  13. I’ve heard a lot of you asking about a good tool for prototyping and wireframes and I have to heartily recommend Axure Pro RP.
    As a developer, using this tool for prototyping has helped flush out implementation problems that would have cost thousands of dollars down the line, if we hadn’t done any prototyping.
    Copy & paste the code below to embed this comment.
  14. I couldn’t recommend Axure (http://www.axure.com) enough as a prototyping tool.  It gives non-developers the ability to easily create a full HTML prototype including links, drop-downs, hover-overs, etc.  It even allows complex interactions such as Ajax-driven functionality.  It’s simple to learn with the tutorials present on the site.
    Copy & paste the code below to embed this comment.
  15. I’ve recently started using “Oversite”:http://taubler.com/oversite/ for my IA and prototyping work. It’s great - really easy to use, very flexible and cheap at $35 for a license. It’s free to download and try out, so you really can’t go wrong with it. I “wrote about it some more”:http://www.smileycat.com/miaow/archives/001080.php on my web site, along with some other examples of prototyping tools.
    Copy & paste the code below to embed this comment.
  16. Great article, which underlines our recent move to prototyping over wireframes and documentation. We just finished the first prototype for one of our clients. So far the feedback is great and helped us significantly in the discussions with the client. In future we all our web applications will be based on this approach. We used Axure RP Pro 5 and as Rachel (#14) we can not recommend the tool enough for prototyping.
    Copy & paste the code below to embed this comment.
  17. Thanks for the great article and constructive comments. It is comforting to know we are all not alone when it comes to this crucial phase of development. I have not seen anyone yet mention the benefit of prototyping to help communicate and facilitate off shore development. I have found that a prototype not only helps business owners have a tangible example, but it also helps spell out and back up any requirements document created”¦and let’s face it, in reality how many developers fully read the requirements documentation, if there is any created at all. Second to that when a business user signs off for requirements at the development phase, a prototype is an excellent visual representation of what the final product is they can expect. No surprises”¦well okay, not as many surprises.
    Copy & paste the code below to embed this comment.
  18. I LOVE prototyping. Can’t get enough of it when it is done appropriately at the right level of fidelity for where the stakeholders are at in the product lifecycle and when it doesn’t get in the way of getting to the right solution (which I have seen it do; but that is another post). What I’m interested in here is that the title of the article talks about “sketching” and “prototyping” as if these are the same things. Please see “Sketching User Experience” by Bill Buxton on a clearer and deeper explanation on why they aren’t, but I’ll just put out there that the intentions of a sketch are different than those of a prototype and further the purpose of a sketch are also different. A sketch can be interactive, it can be in code, but it does need to have certain properties to maintain the important design process requirements that makes sketching work. Let me first point you to my own blog post on sketching here: http://synapticburn.com/more.php?id=288_0_1_0_C To summarize Buxton, sketches are suggestions and prototypes are descriptions. To summarize my take, the purpose of sketching is to generate ideas. The purpose of prototyping is to communicate an idea. Yes there is a continuum here, but going back to Buxton, this is why sketching needs to be and even appear quick & rough, but also very importantly need to be disposable. My experience with coded prototypes is that they are seldom quick enough (yes, ruby makes it quick as an example, but not nearly as quick as pencil to paper as different example), and because of the nature of pixel drawing, prototypes are almost never rough enough and thus seldom if ever have the quality of something that is disposable. Like I said though. Prototypes are HUGELY important. They are reflexive decision points about the look and behavior and even functional requirements of the solution. In Industrial Design they would the equivalent of an appearance model which in many studios is a “signed-off on deliverable” that is used before the expensive process of tooling is commenced. They are also great for usability testing and other forms of user and customer feedback generation (as well as other stakeholders). They are also important for other methods of design refinement. But that is not what “sketching” is for. “Sketching” is not about refinement, but about ideation and maybe at best “frameworking”. —dave
    Copy & paste the code below to embed this comment.
  19. bq. Unfortunately [”¦] I’ve often seen features cut from a product launch in favor of generating “better”? documentation. Hooray, now we know how to prevent feature bloat! bq. it is often difficult to annotate a working prototype[”¦] In Axure RP you can annotate any page or element; it will also generate a Word document from the working prototype. One of the many reasons why I second other commenters’ enthusiasm for this product. David Malouf: bq. My experience with coded prototypes is that they are seldom quick enough. So true! Even in a rapid prototype, the more work goes into it, the more we grow attached to design ideas prematurely. No tool will be ever rapid enough to replace paper and pencil.
    Copy & paste the code below to embed this comment.
  20. bq. Also, many methods of prototyping require development resources of one sort or another. I think there’s a line between “design” and “development” that many clients don’t understand. Some may disagree with me, as they take care of everything (jack o’ all trades) in their production process. However, many use Designers, and then Developers to finish. And the Designers must understand requirements from Developers, while they all need to understand what the client wants. That’s if the client understands what’s necessary for the project. Soon would after a good prototype, right? Glad to read an article that emphasizes the importance of prototyping, because it not only helps the client interact, but gets the team involved to see the big picture. And the prototype can be visual (img/ppt/Ai/Ps) or interactive, even just a bunch of scratch paper to begin.
    Copy & paste the code below to embed this comment.
  21. in three years my partner and have chopping away on our site and, to date, we haven’t yet uncoiled the wires. No thinking how many hours of relocating the plumbing could have been saved. why didn’t i think of that flickers through the mind.
    and. Gosh we aren’t even talking about rockets. a clicking map for the mind.
    Copy & paste the code below to embed this comment.
  22. Have to add my vote for Axure RP Pro as a solution to clickable wireframes. I’m a Business Analyst and have found it ultra-simple to use to do anything including RIA-like interactivity. Our clients and tech guys love its outputs. Great clickable wireframes (to whatever level of fidelity you like) and it also automatically outputs a Functional Spec. I’ll be interested to see how these softwares evolve. I can imagine them swallowing up much of the development effort - producing the UI code that just needs to be tied into the back-end. I believe Visual Studio has similar drag-drop functionality. Suddenly development becomes the realm of analysts and designers and can be done quickly.
    Copy & paste the code below to embed this comment.
  23. Great article indeed! I’ve been wireframing for years in InDesign, (it’s great for spitting out nicely ordered PDF’s). However it’s not great for prototyping as you can’t add any interaction. For those who are good at Flash, there’s a great article worth checking out here: http://www.boxesandarrows.com/view/quick-and-easy-flash Thanks for this David, the best article I’ve read in ages. Stu.  
    Copy & paste the code below to embed this comment.
  24. I’ve been advocating rapid prototyping as an important step for a while. I think it will be amazingly beneficial for reducing the post-production rework cycle by getting it right up-front. But where can I find people with these skills? What specific skills do I need to look for? I need someone who can rapidly put ideas into code for a RIA. Any recommendations on some specifics to post in a job listing?
    Copy & paste the code below to embed this comment.
  25. I think most ALA readers will agree that prototyping is the most agile path to a great UI and a satisfied user.  However, as has been iterated, the tools to do this are what’s lacking. 
    For a cheap and medium fidelity solution, PowerPoint does work pretty well if you don’t mind working with the Animations.
    I haven’t heard anyone mention Adobe Thermo yet?  Does anyone know when it may be released?  It sounds/looks, from the demo I saw, a lot like what this crowd needs.  But it’s been in development for a while now.
    Copy & paste the code below to embed this comment.
  26. I’ve been using dreamweaver since 2000 to do rapid prototyping and it works well.  It certainly doesn’t spit out good code, but it serves its purpose.
    Copy & paste the code below to embed this comment.
  27. Nice article, I agree that the future of prototyping is through programs as AJAX, Flash, Maybe Adobe Thermo, but the way we should approach each project varies. Personally I use mainly Visio and Axure at the moment as the most projects I had so far were under the pressure of time and of low budget. However, sometimes more interactive prototypes are needed. Especially, if they involve user testing.  On the other hand, there is the danger that has already mentioned of clients might confuse the prototype with the actual web site which is not good. As they focus more on the functionality for example of the navigation menu than the actual menu. 
    Copy & paste the code below to embed this comment.
  28. If you want to prototype may be interesting to check Seaside framework. It has debugging capabilities and flow control extremely intuitive.
    In my equation with it: prototyping is making.
    cheers, Sebastian
    Copy & paste the code below to embed this comment.
  29. I am currently researching wireframe and prototyping tools.  I really want something web based that users can login, comment and contribute content to the live wireframe.  I thinks this is a great way to manage content as well.  I had experimented w/ a simple drupal install where I setup a skeleton of the site just for capturing content from the client. Each page had the options status of something like not started, waiting, in progress, complete.  Then it was on the user to post content there as they had it.  This has been great because then we have logs of everything they give us, when, who editied it and when they marked it complete.  I have seen a lot of people mention Axure but it is not web based which I do not like.  Can someone give me more feedback??
    Copy & paste the code below to embed this comment.
  30. This article made me feel a lot better about visually modeling out my projects. Thanks.
    Copy & paste the code below to embed this comment.
  31. I haven’t seen it mentioned yet, so I thought I would throw it into the ring ;-) I use it all the time for mocking up interactive web site designs.
    Copy & paste the code below to embed this comment.
  32. I might not belong here, but still I had to sign up to make a comment. This article helped me with describing the meaning of role play. That for sure is prototyping issues difficult to grasp since they are abstract or invisible to view, however using all our senses makes it clear. I often find it usefull and inspiring to get input from disciplines you normally do not associate with drama, however having the same objectives; tension, energy, and so on.
    Copy & paste the code below to embed this comment.
  33. I’ve been doing a lot of inquiry in this subject over the last few months and haven’t been completely happy with what I’ve been finding.  Wireframers are great and tools like Balsamiq Mockups and Flairbuilder allow folks with domain experience to contribute, but often those folks often lack the experience necessary to avoid bogging the process down.  Worse, template inheritance is often very difficult, and those wireframes typically can’t be used to generate a usable HTML foundation.  Artists (for their role in a final site) don’t want to deal with a grid at all and typically stick to raster graphics programs like Photoshop.  So after reading this article, and for those interested in techniques, here’s something I’m about to try: I use Wicket (http://wicket.apache.org) for my web templating engine, and it has a <wicket:remove> tag, which wraps prototype content in a page and removes it from rendering at runtime.  Some other discussions on this (i.e. http://stackoverflow.com/questions/55363/best-tools-for-creating-website-wireframes) note the use of jQuery for prototype interactivity, which sounds like it’s worth exploring.  (I’m also using wiQuery, so I’ll have to be very careful with side effects on the final code, but hopefully can deal with that using <wicket:remove>.) Combined with Blueprint or 960gs, I’m hoping to get rapid development of a prototype, but as importantly a prototype that can rapidly transition to live code.  We’ll see!!
    Copy & paste the code below to embed this comment.