Menu

Rapid Prototyping Tools

March 25, 2009 | By Dan Harrelson

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.

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!)

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.

There are 76 thoughts on this idea

[…] prototypes over wireframes. Over on the Adaptive Path blog I just wrote a post about it. I’m collecting a list of prototyping tools and could use your help to help make it event better. Leave a comment on the Adaptive Path blog […]

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.

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.

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!

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.

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.

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?

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.

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.

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.

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.

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.

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.

**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.

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)

MockupScreens is one tool you missed, with idea of creating very rapid black-and-white prototypes. New major release (coming next week) allows to switch between “Windows”, “Web” and “Black and White” look and feel.

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

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.

[…] a Crackberry like me. One recent link I followed from there took me to a comparison of Rapid Prototyping Tools by Dan Harrelson. He includes cutting edge products such as Expressions Blend and Flex, too. […]

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.

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 http://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.

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.

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 sales_07@sunpe.com, I’m Lulu . Thank you !

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!

Just an update to let you know that the Powerpoint version of MockApp was fixed last week and now works with both PowerPoint 2008 on Mac and Powerpoint 2007 on PC. You can download it for free at http://MockApp.com/download/

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.

[…] 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. […]

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.