What is a prototype and what is it for?

Introduction

A prototype is an early sample of a product, whether it’s a digital or physical product. Prototyping is a fast and inexpensive method that allows designers to test and validate design ideas early in the project lifecycle. In this post I’ll focus on digital products and highlight the different techniques and tools of prototyping, as well as how prototyping improves the user’s experience.

What is a prototype?

A prototype can be defined broadly; the most basic definition of a prototype is “A simulation or sample of the final product which is used for testing prior to launch.” (1)
A prototype can be anything, from a simple drawing using pen and paper to an interactive prototype.

In UX, prototypes are typically created through a mix of Sketches, Wireframes, or Mockups depending on the project timeline and where you are in the design process.

Prototyping Techniques

Sketch

A sketch is a simple drawing often using a pen and paper, Sketch works best in the early stages of the design when designs are starting to take shape.

Scanned Document


A sample of Home24 Cart Page Sketches

Wireframe

Wireframing is a way to design a website at the structural level. It is commonly used to layout content and functionality on a page. Visually, the wireframe can be basic using simple lines, boxes and grey colours, or it can be more concrete using colours and different font weights. (2)

2-wireframe


A Sample of Home24 Cart Page Wireframe

Mockup

Is a visual design including color, hierarchy, and iconography, a mockup looks like the final product but doesn’t represent the interaction design of the interface.

3-Mockup


A Sample of Home24 Cart Page Mockup

Interactive

This type of prototype includes interactive behaviors occurring on the user interface that change the state of the design or the flow.

4-Adding-item-to-wishlist


A Sample of Home24 Cart Page Add to Wishlist Feature prototype

How does prototyping help user experience?

The integration of prototyping early in the project lifecycle helps improve the product quality and achieve business goals. With prototypes, you will:

  • Limit the expenses of development.
  • Test out design concepts.
  • Collect feedback quickly and easily.
  • Refine the usability of the product.
  • Validating new product ideas.

“Prototyping limits the risk of delivering a product that doesn’t solve the right business problems or user needs.” 

Diane Cronenwett – principal interaction designer at Intuit.

Testing and evaluating prototypes

The main goal of testing a prototype is to find out whether a design solves users’ problems and if it helps them to complete their task easily.

In general, the flow for testing and evaluating a prototype follows the same basic format. To make sure you get the right type of feedback that will be useful for you, you need to set up a test correctly. A few considerations from Diane Cronenwett:

  • A facilitator or a UX researcher who is familiar with the prototype and the design goals is needed to ask the right questions when running the test.
  • Creating a guide or scenario about the questions that will be asked about the design.
  • Establish a clear goal of what needs to be tested. For example, showing the user simple sketches might be enough to get some feedback on the concept.
  • It is necessary to have the project team and the designer to observe the session when interviewing the user to hear the feedback directly.

Prototyping Tools

The prototype is all about testing the design, and the tool that you use will help you get the answers you need. There is no perfect tool for prototyping; it depends on the timeline and what needs to be tested, as well as what stage you are in product development.

Paper prototype

As I mentioned earlier, creating a simple sketch using pen and paper is a widely used method to test ideas in an early stage of a project. Creating a paper prototype is a great way to collaborate in a team where anyone can participate.

There are a lot of tools and materials to use when creating a paper prototype. Dan Nessler created a list of materials that might help when creating a prototype:

  • Paper
  • Whiteboard
  • Sticky notes
  • Sketchbook
  • Cards
  • Print template
  • Cardboard
  • Carton
  • Plastic
  • Scissors

5-papaer prototype


A Sample of Paper Prototyping & Testing (4)

Balsamiq

Balsamiq is a rapid wireframing tool that helps designers create wireframes quickly to generate more ideas, or iterations. It reproduces the experience of sketching on a whiteboard, by instead using a computer. (5)

6-balsamiq


Balsamiq App Interface

The Balsamiq App comes with a predefined library containing the common UI elements to help the designer start off with creating a layout. All you have to do is drag and drop!

InVision

InVision is powerful prototyping tool used for linking design screens together using hotspots. Creating a design or a Mockup using InVision is not possible so the designer will need to use a different software to design the screens and then upload them to InVision to add animations, gestures and transitions to transform the static screens into a clickable prototype. (6)

7-invision


InVision App Interface

Principle App

Principle is a tool for designing animated and interactive user interfaces for web, mobile and desktop. Principle lets designers create designs that look and feel very similar to the final design by providing a toolbox of generic features that can be combined in creative ways to produce a variety of results. (7)

8-principle_source_ritter


Principle Interactive Prototype (8)

Conclusion

The Integration of prototyping early in the design process is necessary to deliver a good user experience. What tool or method you choose for prototyping is completely up to you. But keep the project timeline in mind, as well as the desired feedback of the test.

References

  1. https://www.uxpin.com/studio/blog/what-is-a-prototype-a-guide-to-functional-ux/
  2. https://www.experienceux.co.uk/faqs/what-is-wireframing/
  3. https://www.linkedin.com/learning/ux-foundations-prototyping-2/what-is-a-prototype
  4. https://balsamiq.com/
  5. https://www.invisionapp.com/
  6. http://principleformac.com/
  7. https://dribbble.com/shots/2630030-Ritter-App-Sketch-Principle-Freebie
  8. https://dribbble.com/shots/2630030-Ritter-App-Sketch-Principle-Freebie

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s