Our Beginner’s Guide series is designed to help those who are just starting to learn about user experience, or those who want to brush up on the basics. In this part, we take a look at prototypes.

What is a prototype?

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)
Robot

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 prototyping 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.

Listen: Design Untangled Podcast – Prototype or Protohype?

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

Axure Prototype

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

wireframe_balsamiq

Balsamiq is a great rapid prototyping tool and you can learn more about it in our interview with Michael Angeles, their UX designer. 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. – http://www.paperprototyping.com/

Paper Prototype

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.

I recommend checking out this article on A List Apart for a great summary of prototyping with paper.

Prototyping in the browser

Browsers

There is a relatively new school of thought emerging with regards to doing your prototypes directly in the browser. Now this method may only appeal to UX Designers with a coding background but tools such as Twitter’s Bootstrap are making things increasingly accessible to the non-code savvy.

What we are talking about here is using HTML, CSS and Javascript to create realistic prototypes that can be tested using the actual medium you are building for. This technique is particularly useful for testing interaction design and responsive layouts, but if you aren’t a natural developer the time taken to create these prototypes may outweigh the benefits.

There are some great articles by Patrick Marsceill and Steven Bradley on this subject that I recommend checking out.

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.

Next time we will take a look at a more modern approach to the tree killing functional spec document in the form of user stories.

Images courtesy esarastudilloAndy Field (Field Office)kjhosein


Chris Mears

Chris is co-founder of UXmentor.me. He has worked with clients such as the UK government, Just Eat & Which? with a focus on service design and transformation.