SpoolCast: Roughing it with Interactive Prototypes

Jared Spool

March 6th, 2009

Play

Duration: 31 m | 16.5 MB
Recorded: December, 2008
Brian Christiansen, UIE Podcast Producer
[ Subscribe to our podcast via Use iTunes to subscribe to UIE's RSS feed. ←This link will launch the iTunes application.]
[ Subscribe with other podcast applications.]
[ Direct Link to MP3 File ]

Without planning, web apps have no where to go. Planning documents for web app projects are often overlooked, despite their importance in the success of the product. As a designer, no matter how great your research is, or how amazing your programmers are, if your planning documents do not develop well, your project will fail.

One of the great user experience success stories in the U.K. is the Brighton-based agency Clearleft. They’ve developed successful, sophisticated methods of planning for their projects. I was able to get a hold of two of their talented crew to discuss those methods in this episode of the SpoolCast.

James Box (UX) and Richard Rutter (Co-founder and Production Director) have been working on ways to plan highly interactive web apps that make the process more efficient. And that’s exactly what we spoke about during the podcast.

James and Richard first told me that they hold back from traditional deliverables, and show clients what they call ‘design tools.’ Some clients prefer tidy deliverables, but many clients like these rougher documents. The advantage to these is that they stress design as a process, rather than set in stone. Sometimes overly polished documents can make a solution appear complete, without the client being able to change its course.

This method aids the flow of dialog between the designers and the client. Rough prototypes help your client stay focused on the core issues you’re demonstrating, like interactions, while avoiding getting caught up on visual elements that aren’t important at this very moment. As an example, when possible, they leave color out altogether.

A key element to the success of their design tools is that prototypes are interactive. They make many prototypes with HTML and enough jQuery to demonstrate the interaction. They don’t feel this process takes any longer than using relatively static tools like Visio or OmniGraffle, and offers more utility. They’re always looking for ways to improve the process with reusable pattern and code libraries.

There were more quality nuggets in the conversation too, so please tune in for more on peer reviewing, prioritizing usability testing and real code production.

James and Richard will be joining us in California this April for our Web App Summit, where they will be conducting a full-day workshop on “Wireframing and Prototyping for Highly Interactive Web Apps.” If you enjoyed this conversation, please join us to learn how their techniques can help in your organization.

Have you moved to interactive prototyping for expressing complex situations? Let us know in the comments.

7 Responses to “SpoolCast: Roughing it with Interactive Prototypes”

  1. Ben Chinn Says:

    I’ve been developing interactive HTML/CSS/JS prototypes as part of the development of a web application and it’s been extremely helpful. Stakeholders love to get hands on with this kind of prototype and can give meaningful feedback. Developers don’t have to create all the markup from scratch since the HTML framework already exists in the prototype. Best of all, interactive behaviors can be communicated with near perfect accuracy.

    This has been a great solution for me mostly because I can work fast with the technology, so this isn’t much harder for me than mocking up purely visual prototypes. For those who are slower with markup or better at communicating ideas visually this may not work as well as it has for me.

  2. Umair » Blog Archive » SpoolCast: Roughing it with Interactive Prototypes Says:

    [...] Here is the original:  SpoolCast: Roughing it with Interactive Prototypes [...]

  3. Bo Lora Says:

    I’ve been doing this for years. In addition I use a way to attach technical specs via an external xml document. This is useful when working with a technical analyst so they can work ahead while the prototype is being worked on.

  4. Bob Hotard Says:

    I’ve worked with Bo Lora on this integrated prototype and what sets it apart is the syncranization of Requirements, Technical & Testing specs all integrated with the UI design of the interactive page. To really succeed in corporate web design, you must address all these areas of a site in order to efficiently meet the demands of the business.

  5. Spoolcast on Beyond Deliverables / Prototyping | UX Agile Says:

    [...] recent podcast with James Box and Richard Rutter visits some of the notions I expressed in the post “UX Design Artifacts: Conversation Anchors [...]

  6. UXA: SPUD - The Lean Agile UX Process « Tales from a Trading Desk Says:

    [...] SpoolCast: Roughing it with Interactive Prototypes [...]

  7. Web App Expert Interviews - Part 1 » UIE Brain Sparks Says:

    [...] More details on Richard and James interview. [...]

Add a Comment