A good user experience doesn’t get delivered just like that. It’s the result of the countless hours of efforts spent in the product development process, from conceptualization to the final delivery. It involves designing and redesigning your product or app based on a series of exhaustive user testing sessions, and let’s face it, you cannot perform a user testing session with static assets like wireframes or visual mockups. There has to be some sort of interactivity, otherwise your users won’t get a taste of how the product/app actually works.
This is where prototypes come in. There have been a number of occasions where I’ve seen people (both clients and users) not understand what a prototype actually is, and as a result, have ended up expecting all the wrong things from it.
What a Prototype Is Not
A prototype is not the final product. Do not expect it to look like the final product. It need not have a high fidelity or be pixel perfect.
I’ve seen clients and users look at prototypes and say things like: “That’s your final design?” or “Whoa! That is super ugly.” I’m pretty sure a lot of designers have faced this problem and have had a tough time explaining to their clients or users that what they are looking at is not the end product. Again, static assets like wireframes, visual mockups, etc. that show a single state cannot be considered prototypes. Prototypes have a high degree of interactivity.
What a Prototype Is
So what is a prototype? The answer: it’s a simulation of the final product. It’s like an interactive mockup that can have any degree of fidelity. The main purpose of building prototypes is to test whether or not the flow of the product is smooth and consistent.
Prototypes breathe life into any design and provide a great deal of insight into the user interaction at various levels. Not only do prototypes allow us to test the feasibility and usability of our designs before we actually begin writing code, they also lead to unexpected discoveries and innovations that may or may not take our project beyond its initial scope.
How Are Prototypes Created?
There are several tools and techniques that can be used for building prototypes. It is up to the designer to decide which they will use. Also, it’s completely up to the designer to decide the fidelity of their prototypes.
As a designer, I tend to choose low-fidelity over high-fidelity prototypes. Why? Well, as long as a prototype simulates the desired interaction flow and feel of the product, I’m good. Elements like visual design can take a back seat for the moment. And, to be fair, it takes less time and effort to build low-fidelity prototypes compared to their hi-fidelity counterparts.
A prototype is not the final product. Do not expect it to look like the final product.
The tools that I use (and also recommend) are paper, pencil, sticky notes, and index cards for paper prototyping, and Adobe Fireworks for building click-through prototypes. Each of these techniques—paper and click-through—have their own set of advantages and disadvantages.
Paper Please
In case of a paper prototypes the major advantage is that you can use the same pencil sketches you initially began your design process with. There might be different sketches displaying various screen states, index cards showing dropdowns, and sticky notes depicting modal windows; you can erase and make changes according to users’ expectations and comments—the possibilities are practically endless. But then, a paper prototype does not offer the feeling of “clickability” that a click-through prototype can. So if that is an issue for you, your users, or your clients, you can always use any tool of your choice to build click-through prototypes.
Let's Click-Through
Click-through prototypes take a lot more time to build than paper prototypes, but they do take care of the clickability issue. There are numerous tools you can use to build these kinds of prototypes, but my tool of choice for click-through prototypes is Adobe Fireworks. If you’re wondering why I defer to Adobe Fireworks, check out Mike Locke’s videos on Adobe Fireworks. He’s been in the industry for a long time and is a great advocate of this awesome tool.
Prototypes Are Powerful
I’ll conclude by reiterating that prototyping is an integral part of the UX design process. Let me put it this way: if delivering a good user experience is the ultimate goal of your project (which probably is), then you need to have at least some degree of prototyping.
What tool you use or what level of fidelity you choose is completely up to you. What’s important is to make this step a part of your design process.
Image of paper fortune teller courtesy Shutterstock.
Comments
Hello Arijit,
Prototypes are not only powerful and fast, but they can also increase the efficiency of project development and management. We have compiled a research with hard facts on how software prototyping tools in general can save you time and money : http://blog.fluidui.com/why-prototyping-can-save-your-company-a-fortune/ . I hope that you will find it useful and informative.
Thanks,
- Yuri
Great article on an important and timely subject. App sketches are becoming more and more critical to building consensus - the bar is being raised in a significant way. I tend to think open source developers currently enjoy something of an advantage where this is concerned. By standardizing deployments of our individual .js and .php component libs in Heroku, we're able to deliver the same "proto experience" quickly and with a minimum of friction.
I think Invision is great but now we switch to Savah app. Its a great tool with awesome features plus its not that expensive. Highly recommended
Great article Aarijit, We are using SavahApp for all our collaborative projects. Its a great tool, plus its free. Interface is clear and intuitive. Functionalities include everything one might expect from creative, collaborative and evaluative standpoints. Mock-ups from a variety of drag and drop file formats, plus DropBox integration, takes mere minutes to build and modify. Feedback engine and document management are solid (again with drag and drop ease and variety of formats). Adding collaborators is a breeze! Just the right blend for my project management and design needs. I suggest checking it out http://www.savahapp.com
Hi Arijit. Have you read "Sketching User Experience" from Bill Buxton? That book is a must : )
Mr. Buxton explains clearly what a prototype is (not) with many examples that pass by.
A prototype is worth a thousand meetings - source unknown.
I was a fan of fireworks till I discovered UXPin.
Clickthrough prototype don't take a lot more time then paper any more.
Nowadays there are tons of tools that allows you to make a rapyd prototype in minutes.
Just have a look at Flinto, Marvel, Invision and many other similar ones and you will see that you can flash out an interactive prototype reasdy for testing in very little time.
For more complex prototypes (expecially web) i personally use Axure, which still allows you to make pretty complex prototypes including conditional logics and so on. But i feel if Azure won't improve their UI and flows and will be outdated pretty soon.
Cheers,
R.
Hi! I'm an entreprenuer in consumer internet product development and apps, and know all about bootstrapping! Which means, that I end up doing a lot of work in different fields myself, like design and prototyping. Fortunatly, these are 'labours of love', meaning I enjoy the process very much, even with limited education in the area.
What has helped me, and I find to be a tool worth recommending is fluidUI. Look it up if you don't know of it allready. I was suprised that it was not mentioned here, as it is a rapid prototyping tool that you can also 'click through'. Also, it is a new tool, for the next generation, so to say. Don't think it will be fazed out anytime soon.
Love UXmagazine articles, by the way. Great job! Just wish they could be a little more in depth, a little longer, and little more 'meaty'.
Cheers!
Hey Robert,
Well of course, there are lots of tools out there. I've said it numerous times - which tool you use is completely upto you. This isn't a review. This article is about the prototype itself. Its about distinguishing between what a prototype is and what it isn't. I've mentioned the tools that I use for the purpose of prototyping. I don't use fluidUI so I chose not to talk about it.
Hope that clears everything up.
Cheers!
For prototyping InVision is great.
invisionapp.com
Isn't Adobe discontinuing support of Fireworks? I realize that it is still presently a viable tool to use, but 5 years down the road it will become obselete. More recent individuals entering into the world of Web Design might find it better in the long run to choose a different prototyping tool. I'm a big fan of marker/pen/pencil and paper for my initial sketches and wireframes. From there, I like to have a tool (if it's a larger project) that I can add to what I've already done on paper and create a functioning prototype that give my client a better idea of how it all fits and works together. There's a number of possibilities out there like Macaw, Marvel and Pinegrow and of course some of the new Adobe products. Products like Macaw claim to do the coding for you and from what I've seen it does write decent code; however, I would use it strictly for prototyping purposes and hand-code everything myself.
Hey AH,
"I'm a big fan of marker/pen/pencil and paper for my initial sketches and wireframes" - that makes two of us.
As far as your doubts regarding the discontinuation of Adobe Fireworks are concerned, I was absolutely certain that someone would be asking this question. I have provided a link to Mike Locke's videos on Adobe Fireworks in the article. Visit that link and look for "Adobe Fireworks still the best UI/UX Design tool". I'm pretty sure that would answer your question.
And yes, the type of tool that you want to use is completely up to you. It should be something that you're comfortable with.
Thanks!
I watched the video you recommended. Mike definitely makes a nice case for Fireworks being the tool of choice for the UX process. I still have my concerns about 5 years down the road, though. Since I'm relatively new to the Web Design world, it would kind of stink to spend time and energy mastering a program that could die a slow death. Perhaps Adobe will listen to their audience and decide to at least spend a little development time on it. That would be nice.
The below paragraphs are from Adobe's website in response to their decision to discontinue development of FW:
"Over the last couple of years, there has been an increasing amount of overlap in the functionality between Fireworks and both existing and new programs like Photoshop, Illustrator, and Edge Reflow. At the same time we have shifted to focus our engineering teams on building smaller, more modular, tools and services for specific tasks in web design. Due to this overlap and as well as our change in our product development focus, we have decided not to update Fireworks to CC and instead will focus on developing new tools to meet our customers needs.
While we are not planning further feature development for Fireworks, we will continue to sell Fireworks CS6 as well as make it available as part of the Creative Cloud. We will provide security updates as necessary and may provide bug fixes. We plan to update Fireworks to support the next major releases of both Mac OS X and Windows. As more specific details on the next version of Windows and Mac OS X are made available, we may adjust these plans."
That last sentence is what scares me the most. If they don't end up updating FW to support farther future OS releases, then obviously the software will become obsolete. I realize that that scenario may still be a ways out, but is something to still keep an eye on methinks.
There are so many great resources for prototype building and UX testing these days, that you can test wires, designs, through all steps of the product design process.
A lot of standard UX programs, like Axure, Omnigraffle and even Balsamiq have prototyping capabilities.
Flinto, Marvel and Invision even add those extra few layers of interactivity utilizing actual mockups, all without having to code a single thing.
Do you have any opinion on Axure being a viable prototyping tool?
Hey Mandi,
I'd rather not make any absolute statements here, but if you really want my opinion, I think Axure has a steep learning curve. It does have an edge over quite a few products available in the market, but it's difficult to master. If you want something simple, go for Balsamiq. Or you can take your time to master this tool and make some really cool click-through prototypes. What I would suggest is try it out (It has 30-day free trial), and if you think you're comfortable with it then keep using it.
Cheers!
The learning curve for Axure is not steep and is worth the investment ($ and time) to realize prototypes that are not mere click-throughs, but more functional and telling of the final design. It's rather quick to pick up and be successful with, IMO.
Hey ej,
I did say that Axure trumps over quite a few products available in the market, but I certainly do not agree with you on the fact that it doesn't have a steep learning curve. Maybe not too steep but yes, it does have a steep learning curve. I mean, I picked up Balsamiq in a few hours, Adobe Fireworks in a few days, but with Axure, I struggled a lot. And to be honest, I still struggle quite a lot. But if you're comfortable with it, who's stopping you.
Cheers!
But I would argue that that learning curve is the result of comparing wireframing (Balsamiq) or visual design (Fireworks) tools to actual prototype tools like Axure is. Balsamiq is blazingly fast to lay out quick, sketchy wireframes. Fireworks is great at pushing around pixels (among other things). Other tools like PowerPoint are quick at taking said wireframes and mockups and making a click-through.
But when it comes to "prototyping", you need to take that extra step and learn a tool that will put some interactivity behind these screens (faked or not) that gives the tru feel of how a product will work. And Axure is quick at doing this, and the learning curve is dependednt upon the depth at which you want your prototype to be.
Well, to be honest, both Balsamiq and Fireworks allow you to create click-throughs, pretty much similar to the ones you create in PowerPoint or Keynote.
Anyway, I think I'm starting to understand what you're trying to get at over here. Correct me if I'm wrong, but you're saying that a prototype should have all the animations and transition effects that are intended to be there in the final product. Well, yes and no. Sometimes introducing the element of motion design does help in the usability testing process, but if you're testing the product flow I think click-throughs do a pretty good job.
Not referring to motion, necessarily. More referring to things like filling in a text field and passing a variable to the next screen. Dropping a list and making a selection. Interacting with popups, moving windows around, etc. One of my clients has three monitors, and an html prototype from Axure allowed the user to open mutliple views and place them on the three monitors, giving them a realistic impression of the final design.
I often have people throwing around the terms mockup/prototype/click through etc willy nilly and without clarification it could easily lead to expectations not being met. I use a rule of thumb Mockups are flat / Prototypes are interactive.