When beginning any project we start with an idea or ideas. Those ideas, no matter how great or how poor, must be translated into some form of audible, visible, or tangible medium for it to be communicated or received by another individual. The effectiveness by which we convey that idea is of the utmost importance. A poorly communicated idea can result in confusion, misguidance, or frustration, while an effectively communicated idea promotes healthy discussion, a clear view of the objective, and a feeling of mutual understanding.

When it comes to defining a solid user experience our ideas must be conveyed through multiple mediums, such as; verbal presentation, flow charts, documentation, and prototypes; usually in that order. Of all of these formats, especially when dealing with application design, prototyping is the most important. It is the culmination of all audible and written communication up to that point. It is the physical representation of the project or idea and is usually when the fun really begins. No matter how much documentation you have or how many times you have explained it, most people really wont be able to see what is literally in your head until you have developed a prototype.

A good way to explain it, I suppose, would be to compare it to reading a book vs. watching a movie about that book. No matter how well we present, or document, our clients will always have a certain idea in their heads based upon what you have explained to them. Sometimes they are on the same page but most times that is NOT the case. An effective prototype will not only visually convey what’s in your head, it will ensure that everyone is on the same page as you are. At this point stake holders and team members are better equipped to comment and make suggestions without creating confusion and it helps promote those “Ah-Ha” moments.

So, that brings us to HOW we convey this prototype. There are multiple methods of effectively producing a prototype. Some common ways are through rough Photoshop designs, Flash, HTML, or Paper prototyping. These days every second counts, literally. So when creating a prototype, especially in an Agile development environment, we have to get it out fast and we have to be able to make quick changes on the fly. Your prototype should have the ability to be altered and re-arranged on the go within seconds. In all reality I feel that there is a 3 step process when prototyping your idea and it always begins with paper. Yes, paper!

Paper is the perfect medium for prototyping. For several reasons:

1. It’s fast.
2. It’s easy to alter.
3. It doesn’t require a laptop.
4. It doesn’t require stakeholders to know Photoshop or HTML to make a note or an edit.
5. Adding and removing functionality is just an eraser swipe away.
6. Basic frames can be drawn up, photocopied and delivered for reviewing, notation, changes, etc.

Many people have the misconception that rough prototypes should be built with actual functioning components. In some cases this is true, but like I said, when I prototype I use a 3 step process and the first step is always paper. Once I have stakeholder approval for my paper prototypes it moves into the skinning phase. The skinning phase usually involves moving your paper prototype into Photoshop or whichever design program suits you best. This is where you add color to your creation. Make it beautiful, let the creative juices flow… ok, ill stop there… If design isn’t your forte, you can hand your paper prototypes over to the creative team.

Some may be wondering why you wouldn’t just start with Photoshop for your prototyping. The reason is “TIME”. Let’s say that you decide to begin your prototyping in Photoshop. You may be fast but I guarantee you’re faster with a pencil and a ruler. Anyone who has done a prototype design before knows that the end product is almost always much different from the beginning product. Imagine having to dive into Photoshop every time a stakeholder wants a change or you want to represent new functionality. Imagine the frustration of the guy sitting next to you chomping at the bit to show you what he is thinking, but cant jump onto your computer to demonstrate the change. Again, I guarantee that a pencil is faster than a mouse in this case and it can be passed around the table and altered by anyone.

After skinning your prototype and getting approval it’s time to cut and code or to throw it into flash. Flash is nice because it requires you to simply drop your designs into frames and link them together with transparent buttons. Although this may be faster in the short run it may cost you more time in the end. Most of the time Flash prototypes can NOT be handed over to the development team. They want code (unless the project is in flash, of course.) Your best bet is to start cutting and coding. By this point you, your team, and your stakeholders have a very good idea of how your idea works, and looks.

An important question could be asked right about now. What about usability testing? The answer: Usability testing should be happening as early as the paper prototyping phase. There is no reason that you should wait until you have a pretty HTML prototype for people to click through. Get those paper ideas in front of as many eyes as possible. When you move into the skinning phase, get those designs, once again, in front of as many eyes as possible. By the time you get to testing within an interactive HTML environment the feed back will be much more focused on functionality rather than how the site is organized or how the components look, saving you a lot of time and frustration.

So, in conclusion, the next time you have an idea put it to paper first.