UI-Paper Prototype

by fkbolen in Craft > Paper

379 Views, 0 Favorites, 0 Comments

UI-Paper Prototype

Paper Prototype Components.jpeg

A Paper Prototype is a great way to get started with testing your UI concept without spending too much time coding something more official that may not be intuitive to the user. Using a paper prototype first will allow you to have someone check to see if it makes sense to them, and see how people would choose to interact with the UI.

The materials you need for a paper prototype are:

Paper!

Something to write on the paper!

Optional:

Scissors!

Make Components

Paper Prototype Components.jpeg

The key to a P2 (Paper Prototype) is to have every button and screen cut out so you can place them down where needed. In this P2 there are 3 main displays, each of them build off of the background (the top middle) cutout.

This screen is blank so messages or buttons can be place on it to make different scenes. The "input memory" scene (display 1) is built on top of this, and so is the loading bar (display 2).

When a memory is "inputted" in this P2, the loading message is placed on screen. Once loaded, the start button is placed. Touching this makes one of the larger cutout memories cover the whole screen (display 3). Even here, there is a power button that can bring a black cutout over the top of everything else.

The key is to anticipate every interaction and know what cutout should be placed down when something else is interacted with.

Test It With Someone

Paper Prototype Video for Class

Let someone interact with your P2. Do not explain anything verbally unless they are stumped with what to do. If you have to resort to an explanation, then you probably need to change something in the UI design.

If your P2 is for a touchscreen, or clickable UI, then when the user touches something, you will place down the associated cutout. Make sure to see what the user is trying to do, is it inline with your intentions for the UI?

When done, then feel free to have a conversation about their experience and ask for recommendations.