A Quick Intro to Prototyping for UX

A prototype is a quasi-realistic representation of what you are building that can be interacted with and tested on users in order to help validate your design.

They are useful for a number of reasons:

• Help identify usability issues before going to code
• Get early user feedback
• Observe how users want to interact with your design
• To work out complex functionality or screen flows
• To help begin to define the interaction design
• Faster to create than fully coded solutions (front and back end

Prototypes can come in many forms and fidelity. They can range from paper based sketches, clickable wireframes and even fully coded HTML. Many people have their preferences, although I would suggest that it depends what you are designing and the time frame you have that will often have an impact on how hardcore you want to go.

Typically protyping was seen as one of the later stages of the UX design process, conducted after you had finished a full set of wireframes. With techniques such as paper prototyping it can be done much sooner and emerging techniques like prototyping in browser can even give you a springboard to begin the actual build process.

How do I create a prototype?

It will be out of scope of this article to go into full guides on how to create a prototype for each technique or tool, so instead I will provide a short summary of the main approaches and links to further information.

Axure

The most common prototyping skill asked for by employers currently still seems to refer to Axure prototypes. These are basically wireframes done in Axure with different interactions applied to various user interface elements such as buttons. In the simplest terms you can define various actions to happen on various events (such as a click, or a mouse-over).

Axure is one of the more fully featured prototyping applications available and now also has support for creating mobile prototypes.

Axure has a very comprehensive online tutorial section on their website which will get you up to speed with the basics.

Balsamiq

Balsamiq is a great rapid prototyping tool. Balsamiq is suited to clickable prototypes and therefore it is great for testing things such as screen flows. Essentially you are able to create a series of ‘links’ between the different wireframes you create which can be triggered on most objects like buttons or icons.

The learning curve is pretty minimal but you can check out a few quick-start tutorials to get you going.

Paper prototyping

Sketching is always a good idea and things are no different with prototypes.

Paper prototyping is a variation of usability testing where representative users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person ‘playing computer,’ who doesn’t explain how the interface is intended to work. – https://www.paperprototyping.com/

One of the issues you may find with paper prototyping is that it requires a bit of a leap of imagination from the users and as such may not yield a test of how they would truly interact with the interface. That said, any testing is better than no testing!

Of course this is probably the fastest form of prototyping to create and as such means it can be tested often.

What should a prototype contain?

A prototype should contain as much as you need it to in order to get the outputs you need. If you are only testing the placement of a button on a newsletter subscribe form then you may only wish to mock that up rather than the entire page. If you are testing a complex financial transaction on an online banking app then you will probably want to mock up the full user interface to employ a more realistic test of the final system.

As with most UX techniques you should go to the level of granularity that gives you:

• The biggest impact in the timeframe you have
• The ability to test what you need to
• The level of realism that will give you sufficiently accurate results to test and act

What’s next?

As prototyping can come at various stages of the UX design process pinning down what comes after depends a lot on how you have approached it in your project. Traditionally once prototyping and testing is complete the next step would be to write a functional specification to hand over to your designers and developers.

Chat to you next time with more on user stories.