Types of UI prototyping, their advantages, and when to use each

When dealing with User Experience and user interfaces you often have to do with prototyping an idea or a concept, before going to the implementation of it. Doing this way you want to get a first impression of what you are about to implement. Prototyping can be divided in two categories:

1. Low fidelity prototyping: You create sketches, also known as wireframes, of the user interface you want to program. For creating these sketches you use either a pen and a paper or one of the many available software to draw the sketches digitally. This software can either be a professional one (PhotoShop) or a more pen & paper like, like Balsamiq.

2. High fidelity prototyping: You implement a small part of the future application with a limited number of features. The application is testable and you can navigate from the one page to the other. Here the business logic plays a secondary role, the user interface the preliminary. A high fidelity prototype could also be considered a collection of PhotoShop designs, each representing a page of your application, that are combined together to build a fake navigation from the page to the other.

In this article we focus on the first type of prototyping and we discuss about when to time and place to use a professional looking software, like PhotoShop, or a more human-alike software like Balsamiq.

When using simple wireframes, you get the following advantages:

• You can create sketches in just a few minutes, discuss about them with the customer and do modifications on the fly, even during the meeting with your customer or with your colleagues. If the sketch is not what you want, just throw it away and start with the next one. You can get valuable feedback from your customer at the very first phases of a project. This will not only save you time but also can reduce the costs both for you and your customer.
• When using wireframes, defining the final look of the user interface is not the prior goal, but the general structure of your user interface. Using low fidelity wireframes you focus first on the structure of your user interface. You care about the question, what is the workflow of the application? From where I start my use case and where the use case ends?. Colors, borders, margins are in this phase not the first priority.
• Wireframes with a pen and a paper or with Balsamiq can be done from everybody, from the except UX designer to the manager who takes part in a meeting about a new product you want to launch. This means that everyone can visualize her thoughts and ideas and this can help a brainstorming-meeting to achieve the defined goals of the participants.

You can create wireframes using a professional software like PhotoShop. Doing so you get the following advantages, or disadvantages:

• Your designs look and feel like a “ready to use” application. Not only the structure is defined but also specific details of the user interface such as text or background colors. You customer gets a complete idea of how the application is going to look like. However, this also means that your customer has now seen how the application has to look like and expects a 1 to 1 implementation.
• The designed wireframes determine, more than a simple wireframe, the technical implementation of your application. For example when a special UI element is used and with every detail presented, then this element has to be implemented.
• The wireframes, when also combined in logical use cases, are an excellent base for discussion, however when it comes to changes during the conversation between your team and the customer, these changes are not easily to be made and only an expert who knows how to use the prototyping software can do them.

When to use the one type of wireframing and when the other is up to you. Multiple factors play a role in this decision. When the cost is not a problem for you and you have UX designer in your team, then you can go for the second wireframing option. When you want to remain agile and do a lot of brainstorming sessions with colleagues and/ or customers go for the first option.