Rapid Prototyping Tools

By Dan Harrelson 0 Comments

The domination of the wireframe may be coming to an end. As a key deliverable explaining the appearance and function of an interface, the wireframe is much loved. We create multi-page wireframe documentation. We argue over the “best” fidelity for a wireframe. We annotate, tweak and version our wireframes over the life of a project.



Wireframes, however, aren't sufficient for displaying the rich experiences that we are designing. We need to embrace tools that simulate the complex interactions of our designs. In short, we need to replace wireframes with prototypes in our design deliverables.



Dan Harrelson
Jump to: Adaptive Path News | Selections From Our Blog | What We're Reading
Rapid Prototyping Tools
Prototypes as a design deliverable are on the rise, and for good reason. I am strong believer that prototyping helps us to design better experiences. We are working in a world of rich, dynamic interfaces, both on the web and on our devices. The experiences we design are interactive, responsive, and have emotion. Prototypes allow us to articulate the feeling and function of a design in a way that a wireframe does not. But how do you select the best prototyping tool for the job?



Making Effective Prototypes



In order to evaluate a prototyping tool or technique, we first need to define what makes an effective prototype. The best prototypes are ones that slipstream right into our design process. We want the ability to quickly take sketches from a whiteboard to something interactive.



Effective prototypes are fast. We want to use techniques that allow for rapid iteration. A prototype should not just be bolted onto the end of a design process. Incorporating the creation of a prototype into your daily design work allows new ideas to emerge and validates concepts quickly.



Effective prototypes are disposable. Just like with any design deliverable, we are creating an artifact intended to express an idea to someone else (stakeholder, developer, user, etc). Once that design idea has been communicated, the prototype deliverable can be discarded. We don't have to feel the burden of creating a masterpiece that will live on, and we certainly don't have to work in production-level code.



Effective prototypes are focused. We want to select the interactions of our design that really need to be prototyped. Look for the parts of your design that have of complexity. Look for interaction patterns repeated throughout the user's experience. Look for the interactions that bring revenue to your product. A prototype that demonstrates these interactions will be the best use of your time and energy. At our upcoming workshop, Good Design Faster we are teaching techniques to evaluate sketched concepts for the inclusion in a digital prototype. Use the promo code NEWS for 10% off.



Selecting the Tool



With the baseline set that a prototyping tool must enable us to create effective prototypes (above), we look at our particular organization to see what will fit.



First, let's take a look at or team make up. Does someone on staff have the ability code? Is a Design Technologist a member of our UX group? Do we have a strong relationship with the engineering department that can help create prototypes? What about contract developers who can help out? Identifying our tech capabilities will point us towards coding a prototype by hand or using drawing-based prototyping software.



How large is our team? Are we a UX  team of one, expected to research, sketch and prototype on our own? Are we members of a small, tight team that can nimbly iterate through a design prototype in less than one day? Are we part of a large organization that needs to navigate the murky waters of corporate politics and different perspectives with our prototype? Often, the larger the team, the more detail (read: spec) a prototype will require.



Where is the audience for our prototype located? Are they in the same office, glancing over our shoulders? Are they remote? Are they in a country who's time zone is an entire day away? Answering this question will determine our ability to talk through a prototype versus having it be 100% self-explanatory.



Is our UX team in-house or are we members a consulting firm? If in-house, are we integrated deeply with the engineering team or are we a completely separate department? A UX group that's “outside” often has to justify their design concepts a little more.



What is our budget for a prototyping tool? Like most software, the range of offerings covers the range from free to expensive. The best solutions tend to fall within the cheap to mid-priced range. The super-expensive solutions (both in time and money) are often just not worth it.



How flexible does our prototyping tool need to be? Are we targeting just one platform, such as the web? Are we designing for lots of platforms like mobile, kiosk, television, consumer electronics and the web? Many prototyping tools are created with a single output type (usually web) in mind, so we'll either need to select one that we can tweak to our liking or opt for techniques of creating our own prototypes in code.



With the above criteria in mind, I started a list of prototyping tools on Adaptive Path's blog. Head on over to check it out. I encourage you to comment with your own suggested tools and techniques. My hope is that together we can generate a comprehensive selection criteria and menu of prototyping options.



Read my list of prototyping tools (and add your own!)

Get the FeedAdaptive Path News

UX Team of One
Leah Buley rocked the house at SXSW last week, with her insightful and inspirational “Being a UX Team of One.” (Commentary is still ringing in the twitterscape!) Did you miss it and wish you hadn’t? Tune in to her virtual seminar next month.


AP Goes Heavy at IA Summit
Adaptive Path was out in force at this year’s IA summit. Indi Young and Leah Buley got hands-on in their pre-conference workshops on mental models and rapid iterative design. Kate Rutter drew inspiration from the slime mold in her talk on navigating changing landscapes, while Chiara Fox answered the questions “What exactly is the Semantic Web? And why should I care?” Jesse James Garrett drew things together for the idea-packed conference with his closing keynote and 5-Minute Madness.


New Trainings from Adaptive Path!
We offer all of our UX Intensive and Good Design Faster content as in-house trainings. If you can't join us for our events, we can come to your organization to train your staff on the latest in Interaction Design, Research, Strategy, Information Architecture and the UX skills required to tackle the design challenges of fluid interactions, service design, and multi-channel experiences. Email us at contactus@adaptivepath.com for more information.

Get the FeedSelections From Our Blog

 




What We're Reading

 


This entry was posted on Wednesday, March 25, 2009 at 8:28 am.

Rapid Prototyping Tools

By Dan Harrelson 76 Comments

Newsletter readers: jump straight down to the list of tools.

Prototypes as a design deliverable are on the rise, and for good reason. I am strong believer that prototyping helps us to design better experiences. We are working in a world of rich, dynamic interfaces, both on the web and on our devices. The experiences we design are interactive, responsive, and have emotion. Prototypes allow us to articulate the feeling and function of a design in a way that a wireframe does not. But how do you select the best prototyping tool for the job?

Making Effective Prototypes

In order to evaluate a prototyping tool or technique, we first need to define what makes an effective prototype. The best prototypes are ones that slipstream right into our design process. We want the ability to quickly take sketches from a whiteboard to something interactive.

Effective prototypes are fast. We want to use techniques that allow for rapid iteration. A prototype should not just be bolted onto the end of a design process. Incorporating the creation of a prototype into your daily design work allows new ideas to emerge and validates concepts quickly.

Effective prototypes are disposable. Just like with any design deliverable, we are creating an artifact intended to express an idea to someone else (stakeholder, developer, user, etc). Once that design idea has been communicated, the prototype deliverable can be discarded. We don’t have to feel the burden of creating a masterpiece that will live on, and we certainly don’t have to work in production-level code.

Effective prototypes are focused. We want to select the interactions of our design that really need to be prototyped. Look for the parts of your design that have of complexity. Look for interaction patterns repeated throughout the user’s experience. Look for the interactions that bring revenue to your product. A prototype that demonstrates these interactions will be the best use of your time and energy. At our upcoming workshop, Good Design Faster we are teaching techniques to evaluate sketched concepts for the inclusion in a digital prototype. Use the promo code NEWS for 10% off.

Selecting the Tool

With the baseline set that a prototyping tool must enable us to create effective prototypes (above), we look at our particular organization to see what will fit.

First, let’s take a look at or team make up. Does someone on staff have the ability code? Is a Design Technologist a member of our UX group? Do we have a strong relationship with the engineering department that can help create prototypes? What about contract developers who can help out? Identifying our tech capabilities will point us towards coding a prototype by hand or using drawing-based prototyping software.

How large is our team? Are we a UX  team of one, expected to research, sketch and prototype on our own? Are we members of a small, tight team that can nimbly iterate through a design prototype in less than one day? Are we part of a large organization that needs to navigate the murky waters of corporate politics and different perspectives with our prototype? Often, the larger the team, the more detail (read: spec) a prototype will require.

Where is the audience for our prototype located? Are they in the same office, glancing over our shoulders? Are they remote? Are they in a country who’s time zone is an entire day away? Answering this question will determine our ability to talk through a prototype versus having it be 100% self-explanatory.

Is our UX team in-house or are we members a consulting firm? If in-house, are we integrated deeply with the engineering team or are we a completely separate department? A UX group that’s “outside” often has to justify their design concepts a little more.

What is our budget for a prototyping tool? Like most software, the range of offerings covers the range from free to expensive. The best solutions tend to fall within the cheap to mid-priced range. The super-expensive solutions (both in time and money) are often just not worth it.

How flexible does our prototyping tool need to be? Are we targeting just one platform, such as the web? Are we designing for lots of platforms like mobile, kiosk, television, consumer electronics and the web? Many prototyping tools are created with a single output type (usually web) in mind, so we’ll either need to select one that we can tweak to our liking or opt for techniques of creating our own prototypes in code.

Prototyping Tools

With the above criteria in mind, I started a list of prototyping tools. I encourage you to comment with your own suggested tools and techniques. My hope is that together we can generate a comprehensive selection criteria and menu of prototyping options. I will revise this list based on the feedback of this community.

 

There are 76 comments on this idea.

Martha Roden

Dan,

I love PowerPoint and have been using it for at least a decade to create screen mockups for Websites, Web-based applications, and other software applications. No special training is necessary to use it and most people already have the tool or a free-ware equivalent ... which makes collaboration and editing easy. Plus, it prints well and can be used for paper prototypes for usability testing.

Just my two-cents worth!

Martha Roden

Technical Writer and Usability Specialist

Chris Griffith

Adobe Director should be included in the list as well. Although I no longer use it at my current position, I spent almost 10 years using it as our main prototyping tools. FYI: A new version was just released.

Michelle Chung

Hi Dan,

My friend put me onto your blog - very interesting, never thought about rapid prototyping for web design - as I am an industrial designer and thought this might be related to 3D rapid prototyping.  Guess all design needs to have a workable mockup that can give a real-time assessment to flesh out concepts.  You’re right - protos need to be PART of the design process, not the end result, as protos show you things you may miss - especially in product design where your design will be replicated hundreds and thousands of times over!  My biggest fear is that some flaws appear that you didn’t see before, and rapid prototyping is definitely the way to test and iron them out! 

I’m currently waiting for a prototype on a new shoe outsole I designed and have been documenting the steps on my blog too - http://michellechung.uwcblog.com/

As designers its definitely good to document your processes to share with all in the design community…

Great info and review there Dan!

Jeff Seibert

Dan, thanks for the list, very useful. I’m part of the team that builds Backboard and we do a ton of interface prototyping, mostly using Photoshop and HTML/CSS mockups. We’ll try some of these other tools.

I think you left out an important aspect though - actually evaluating the prototype. Once we have something, most of our process revolves around the discussion and feedback on that mockup, to make sure we extract the best attributes of each design. This is what we built Backboard for - it’s a great way to collect feedback on any type of design or website.

I’d love to hear what other tools you use to effectively evaluate your prototypes.

Luis Garcia, Jr.

On occasion, I’ve used Gliffy, an online diagram software. It’s very similar to Visio, but you can access it online. I think they’ve recently started charging if you have more than three “drawings.”

Josh Johnson

I’m currently testing out a tool called Blueprint Requirement Center.  It does a lot more than just prototype the GUI.  It starts by capture requirements for your app, then turns those into fully realized use cases.  The use cases are then mapped to GUI screens, and once that’s complete it can generate QA test cases based on a simulation of the use cases through the GUI.  The GUI builder is very similar to what you see with iRise, but a lot more structure built around it, which can be seen as either a positive or negative depending on your situation.

JF Nogier

Great list. From my point of view, some of these tools are not prototyping tools. Dreamweaver, Flash, Flex are more development tools since they generate something very close to the expected interface, but take more time to develop a prototype than Axure for instance.

See a complementary list of prototyping tools in French :

Prototyping Tools on Usaddict

JF Nogier - Usabilis

J.D. Hollis

I use Tinderbox for a lot of my rapid prototyping needs. I usually start by just taking some notes, and then I steadily add structure to the notes (attributes, links). Everything exports to HTML, so you can go directly from sketching out a site map or process flow to an HTML site you can click through.

Marcus Faulwasser

Hi Dan,

great list, might add a brick between powerpoint “near-life” wireframes and conceptional work in visio (we usually use BPMN for procedural proof of concept).

Today, we´re missing a (standard) methodology to deal with the granularity of “view”.

Complete “sites” in the past have been partly substituted by smaller areas within a site, to be modified runtime.

We try to represent this issue by “extended” BPMN diagrams, still missing the universal idea.

My concern is, that the majority of prototyping tools will still ease the way of coming up with complete “sites”, any “AJAX-behaviour” still to be simulated “frame-by-frame”.

Any experiences on that item out there?

thanks in advance!

Marcus

Lisa Wenzel

Thanks for the interesting article. We are also often disucussing about make an wireframe/concept more tangible. We are using Visio for the wireframes and also to make clickable dummys in PDF-Format. With Acrobat Professional you can also use the form tools to enable checkboxes, radiobuttons, text fields and so on. So you have a “middle-complex” prototyp for rapid testing without high time efforts.

Colin Hewitt

We have just started using backboard - its really great for prototyping collaboration…

Also I’ve been exploring oversite - which looks pretty good too… well it looks pretty bad actually - but it works really well! Could do with a serious UX overhaul.

Carolyn Snyder

Great article and list! It will come in handy for the occasional classes I teach. You might want to add paper prototyping. Although it’s not a software tool like everything else on the list, paper prototyping deserves a seat at the “rapid prototyping tools” table. You’d be amazed what you can do with some sketches and no code at all.

Harry

AFAIK, balsamic does not allow you to mock up a series of pages and link them together. For my needs, this rules it out instantly for prototyping. Also, for quite a few of these tools (visio, omnigraffle, fireworks, etc), when adding form controls to your wireframes, you only add a picture of the form control, rather than the actual interactive control. For me, this also limits their usefulness.

Details like this are important when trying to select a tool, but are hard to discover without trying each of the tools out yourself which is horribly time consuming. Maybe this is something we could all contribute to in a wiki or shared Google spreadsheet?

Andrea Fidel

Dan,

Great compilation of tools. Thanks for including ProtoShare in your post! One item that I feel needs a bit of clarification is that the yearly subscription provided includes 5 subscribers.  For a single subscriber, our plan is $312 for the year. 

We have also learned that encouraging interaction and feedback on prototypes in the early stages eliminates a ton of headaches for development teams. We’re excited to announce a new release of ProtoShare on 3/30 that includes more features and some RIA functionality.

Look forward to your next article!

thanks,

Andrea

Fred Sampson

I’m partial to prototyping with Microsoft Excel, but then we just published a book on the subject, Effective Prototyping With Excel. You probably already have Excel, or another spreadsheet program, on your computer, so the cost is minimal, and it’s easy to share with others once you have the templates set up.

solle

totally possible to prototype in Omnigraffle (especially with the readily available templates and stencils). Serena Prototyping Tool for PC which is now free seems to be quite a good business tool

Andrea Fidel

**ProtoShare Correction:  Sorry for the typo, I meant the least expensive plan is the “Personal” plan; it includes two licensed users, at $156/user a year. Also, the plan you reference, the “Team” plan, is for five licensed users, and comes out to $165.60/yr. As it’s a web-based collaborative tool ALL packages have unlimited users as Reviewers.

Thanks.

Eric Leclair

Dan, Thanks for the great blog!!

All these tools are awesome. I think the next logical step would be resources? Where do you get your rapid prototypes done? How long does it take to get them (how fast do you want them) vs the cost? (time is money)

Keep up the great work!!!

Thanks!!

Eric

Zamous

BTW Fireworks can export real html controls all part of CS4 and their “Rich Symbols”.  Cooper Design also uses Fireworks and I have been using it with a lot of success.

Jeremy Johnson

Lately prototyping and sketching have really started some great conversations. I recently had a developer ask “what tools do you use to prototype” - I created this post in response:

http://www.jeremyjohnsononline.com/2009/02/24/so-you-want-to-prototype/

While there are a lot of really good tools out there, and they continue to get easier to use, there are other aspects - like fidelity of the prototype, to use “real” code or not, etc… In the end, I really think you can’t go wrong with prototyping - from pen and paper to a $50k tool - anything that quickly helps you get out the bad ideas, so you can start having the good ones ;-)

Carrie Garzich

We wireframe in Adobe InDesign and have used that for low-fi prototypes. There are features within InDesign that make it easy to create links and buttons that will export out to PDF—much easier than creating them within Acrobat.

Bryce Day

Hi there, we developed and use Screen Architect as our prototyping tool. Screen Architect (www.screenarchitect.com) allows rapid development of prototypes while also automatically generating UML elements within Sparx Systems, Enterprise Architect (UML Case Tool www.sparxsystems.com) the advantage of this is that the designer / prototyper can develop the prototype with the customer and add requirements elicited from the customer at the same time. These requirements are saved as elements behind the scences in EA, the UML tool for the business analyst to work with and associate to other model elements. Additionally, each UI element is automatically created in the analysis model ready for the analyst to reuse allow traceability between the UI design and the underlying analysis and data models.

Jakub Linowski

FluidIA - is another agile UI prototyping tool which I began building recently. It is open source, web based and very much focused on affording exploration and refinement. Agile? The idea is to allow for very rapid adjustments of position, size, content and independent of scope by means of reusable objects and inheritance. Always looking for people to get involved. Jakub.

Cristian Pascu

A tool that tries to be both an wireframing and prototyping tool is FlairBuilder (http://www.flairbuilder.com). It basically lets you create highly interactive prototypes with a plain look’n’feel, using a set of fully functional components: buttons, links, tabs, etc., with the possibility to also add conditional logic to wireframe interactions and navigation.

I hope you’ll find it useful!

Cheers,

Cristian

Lulu

Prototyping is very interesting and creative , I working in a prototyping company , which make me learn a lot on prototypes and creative design , it make me feel achivement to provide high quality to creative desgn on prototypes , aslo I get review many many creative products .
I think it’s very helpful to improve me on all aspects , If you have interests on our company, Welcome to visit our Web :http://www.sunpe.com , Aslo I’m welcome your letter to share on prototypes .My mail is .(JavaScript must be enabled to view this email address), I’m Lulu . Thank you !

Rosita

Dan, I was able to see the list of prototyping tools about 4 months ago but I can’t seem to find it anymore. Would you mind re-posting or providing the link. The list is fantastic and will help with a project for my company. Thank you!

Ed

Dan, thanks for your post.  I strongly agree with your criteria for making effective prototypes, and Protoshare definitely meets this criteria as well as any prototyping tool out there.

Dotan Saguy

Glad you mentioned the Keynote / Powerpoint option. You’re right that most people don’t know about the hyperlinking and animations capabilities which is great for interactive mock-ups.

I just shared my own Powerpoint/Keynote templates + my home-made vector graphics library for quickly prototyping iPhone apps at Mockapp.com

Enjoy!

Rich Paul

I’ve recently taken most of these tools for a test-drive and I’m astounded at how hard it is to create rich interactivity. Showing a custom floating dialog or hiding sections of the page in response to user interaction was nigh impossible unless we started to build the actual pages and risk getting locked into the code too early. Axure seems to be the only one which really allows for that level of interactivity to be easily produced in a format I can put in front of users to test. I agree with a recent article on using appropriate fidelity for prototypes and I understand that every project is different. But, I also really believe that simulating interactivity allows users to forget the design and focus on how it behaves. As we create more complex Web UIs, we need the tools to allow us to simulate those behaviors easily and present them in a standard browser.

Five for Friday #4: Best Innovation Blogs «

[...] Lately it’s been hard to do the normal morning media-skimming rounds without reading about Design Thinking. The answer to the question of how to innovate, according to the New York Times, Stanford University, and Fast Company, is to change the way you think about the creation process.  What is needed, they agree, is more Design Thinking.  Design Thinking and IDEO, a design and innovation consulting firm, go together, well, like a shopper and carriage—as you can see in this 1999 management-theory cult classic “Deep Dive.” It’s the video that sort of started it all.  Beautiful people from IDEO collaborate to design a super-sexy supermarket aisle-cruiser. But it’s not just about design, as IDEO founder Tim Brown makes clear in this MIT video, it’s about good thinking.  Design Thinking places the emphasis on three aspects of ideation that often go under-emphasized a culture pretty obsessed with the technical side of things: empathy, ethnography, and rapid prototyping. [...]

Bernard

I’m working at a company that does rapid prototyping for video games.

I can imagine the tools listed here can be useful to prototype the menus and other parts of the graphical user interface of games, but for video games, mostly the game concept itself is prototyped, as this is the most difficult to get right.

I just wanted to share this list of tools that can be used for rapid game prototyping.

We are mainly using Unity3D at the moment to create prototypes. It’s easy to learn, and can be used to prototype any 3D interface.

Add to the conversation.

Commenting is not available in this channel entry.