Let’s just say you want to add an addition to your home. What’s your first step? Do you just simply go down to your local home improvement store, buy some 2x4s, a few bags of concrete, some screws and nails and just start building something on the fly? No, of course not. There are a lot of steps you take before breaking ground to plan out each move in detail and eliminate the prospect of surprises that will no doubt show their faces. The same can be said when building a website.
The days of static sitemaps and/or wireframes as being the only prep steps you take before diving head first into site design are gone and hopefully forgotten. The world of building interactive prototypes, or interactive wireframes if that’s what you want to call them, is here. And I think they are vital to the success of the overall user experience (UX) of any website.
What is a prototype?
So you’ve got your basic sitemap in place and it’s time to take that step into a prototype, but what exactly is it? It is more than a bunch of static wireframes layered on top of each other. It is a living, breathing exoskeleton for a website. It’s interactive to the point that all elements can be navigated, manipulated and adjusted. If you can picture a website in which all design, color and typography has been stripped out and you are left with nothing but gray boxes and a no frills looking website.
I mean, you still have everything that is familiar to you like logo, menu bar, picture placehlders, call-to-actions, etc., but at this stage you are thinking about UX, not design. In fact, design can get in the way of the conversations you want to be having. What you want to be thinking about is what content lives on what pages, not how it looks on the page. And a prototype is meant to embody that line of thinking. Structure, content, cross linking, and navigation. These are the key things to be focusing on. If I’m on Page A, does it make sense to have a call-to-action that brings in content or links to content on Page B? That kind of thought process is imperative at this point, as opposed to the color of your menu bar.
What’s interesting is that because it is so easy to get caught up on page design, most prototyping tools out there build in a “sketchiness” filter so that your prototypes have the look of something hand drawn on a piece of paper. Personally, I feel this is taking it a bit too far. If you set expectations about what you are trying to accomplish with your prototype, then some simple gray boxes shouldn’t be too much of a distraction.
Why do I need one?
The main reason behind taking the time to build an interactive prototype is simply having the ability to evaluate and work through usability issues. Since you are able to test UX in real time, you are able to see any issues that could arise or see what is missing from a page. Let’s say you’ve completed Page C and you realize, hmm, it sure would be nice if the user could sign up to receive updates while they are on this page. Now you have the ability to make that kind of decision before ever having to worry about design. This expanded ability to communicate and collaborate with the client/agency about how certain pages should function and interact with each other is, at it’s core, the point where you will be making the single most important decisions during the entire website build. And the fact that it is so simple to evaluate, test and manipulate your site structure is what makes working with an interactive prototype so beneficial.
That’s the beauty of prototyping. When all is said and done, you pretty much have a complete and full functioning website. Minus all the bells and whistles, of course. But like I’ve tried to stress, we are nailing down the UX and content pollination so when we finally complete the prototype, we are confident that the user will experience the site exactly how we/the client thinks they should. We know exactly what content will live on what page and what content will cross link between pages. We should have eliminated the prospect of surprises and set the framework to begin concentrating on design and how visuals will impact the site’s visitors. Y’know, the fun part.