The Beginner’s Guide to UX Prototyping
UX Prototyping has come a long way over recent years. Traditionally, planning or prototyping for websites was done with
Prototyping itself isn’t a new concept. Inventors almost always create a prototype before the final product is launched. This gives the inventor, and testers, a chance to try the product in rough form and see what works and what doesn’t. They can then refine it until it’s ready for wide release. The same can be said for UX design.
By creating a prototype of a web page, application, or desktop software, you can find out if the user experience you’re trying to design will actually work in the real world. What you may find is that button placement is frustrating, color schemes don’t gel, and the process to navigate to the end goal is too convoluted. Great ideas in boardrooms don’t always translate to great experiences.
Prototypes Can Be Simple or Complex
There is no right or wrong answer when it comes to prototyping UX. Most of the time how you prototype something will come down to cost and time. Creating a wireframe is cheaper and quicker than building a working prototype of a website.
At the same time, you can learn a lot more from a working version of the site than you can a wireframe. However, a wireframe is still useful in the sense that you can at least visualize the user experience before putting it to code. This can reveal problems in flow and complexity you may not have considered before.
Here are the most common forms for creating UX prototypes.
Hand Drawn Sketches
The first form of prototyping was to simply draw your thoughts out on paper. It made perfect sense to get your thoughts on paper first, as computers didn’t have complex tools for drawing prototypes in the early days of the web in the 90’s.
Wireframe
The hand
Wireframes can be done on paper or drawn up digitally. Usually, they’re fairly static, but recent software as allowed them to get a little more complicated – and even partially interactive. They can also show various states of a page. For example, what it will look like when a menu drops down, or a video overlay plays.
It’s important not to get hung up on details here. There’s plenty of time for that later. There’s no rule that says you can’t use elements you’re considering for the final design in the wireframe. If you know your color
Prototype Applications
A wireframe can technically be drawn in Microsoft Paint. It doesn’t take much to start the process. Most designers will at least use Indesign/Illustrator or some other more advanced graphics program. These days prototyping apps now exist for the exact purpose.
Balsamiq – Another popular program for rapid prototyping. It allows you to create wireframes and interactive prototypes with ease. It basically helps you create links between wireframes to help you move between them like a user would.
Axure – The most popular program for prototyping today is Axure. It’s a fairly simple program that allows you to build wireframes, but ones that allow you interact with the environment the way a user would. For example, hovering over buttons or opening
Once you know what type of prototype you’re looking to build, you can get on with the act of actually designing it.
Building the Prototype Layout
Your first prototype layout may not be a work of art, but it is a necessary component to reaching a final product. Just getting anything down on paper will allow you to start refining the process.
The good news is that there are tens of thousands of examples for prototyping, and billions of examples of websites for you to draw your inspiration from. You can start here and pick the components you like and build them into your prototype.
Elements of a Prototype
Headers
Navigation
Major visual areas (boxes)
Buttons
Calls to action
Page layout
A prototype may not contain all those elements – just the ones needed for the prototype. This again comes down to time and money. There’s often no need to wireframe a footer, just place a big box called footer and call it a day.
It’s best to layout the prototype with words that describe the point you’re getting across with each box or transition. If the component is a pitch box, what’s the
Here are the questions you need to ask yourself when making this layout:
What is the goal? You want the user to do something on your site – what is it? Define your end goal, and make sure your UX prototype leads them in that direction.
Does it make sense? When you look over your prototype, does the sequence of events meet common sense guidelines? You may need to show the prototype to others that are seeing it for the first time for the best feedback.
Don’t be afraid to revise if every component doesn’t answer those questions – that’s the point of a wireframe!
Build It
You can go through many stages of prototyping. From a simple sketch to interactive wireframes, to almost fully functioning design mocks – before getting to the final product. Or you could jump from a paper sketch to coding. It’s completely up to you how advanced you want prototyping to be.
Prototyping should work out most of the bugs so that the coding process is mostly just finalizing things. This again will depend on what you’re doing, and how big the project is.
Remember, a UX prototype is just a plan. Its whole purpose is to make the user that will experience your design have the most pleasant process possible. Keep that goal in mind when putting your prototype together, and you’ll be much further ahead when the final product is ready to launch!
Thank you for sharing. The tools you have shared above are really awesome. I had used them in the past. Prototyping helped me understand the identify gaps in the user flow and discover the unforseen issues with respect to content, media and logics which otherwise could only be known after implementation.