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 mock-ups or wireframes. Both will give you a good roadmap, but neither are interactive as more advanced methods that exist today.

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.

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.

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.

Paper is a great way to visualize things, but revising things or trying to make them interactive was pretty annoying or impossible. This method is used today for jotting down quick things – or showing flow on a whiteboard, but software is the preferred method.

The hand drawn sketch led to the wireframe – a slightly more formal, yet simple, way of prototyping. It’s basically a visual representation of page layout. Things like color selection and visuals are often not included in the early phases. A wireframe can be as simple as blocks on a page.

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 scheme, or button shape, feel free to use it. However, don’t worry too much about the finer details of the design at this point.

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 light box windows.

Once you know what type of prototype you’re looking to build, you can get on with the act of actually designing it.

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 pitch title? If it’s a button, what’s the button do? You don’t have to use the final wording, here are the top websites for writing that can help with that, but have some indication of what’s happening.

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!

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!