Tools for SharePoint User Experience (UX) Design: Paper Prototyping


You may also be interested in: fpweb.net


 

Editor’s note: Contributor Adrian England is the Senior User Experience Designer at Creative Sharepoint. Follow him @ade_england

Introduction

Following on from the previous article in this series scamping, the topic for this article is the Paper Prototype.

What is Paper Prototyping?

A paper prototype, like a scamp, is a low-tech way of quickly visualising an idea, or in this case, an area of functionality that would either be difficult to explain or would require investigation for proving a concept.

In essence, a paper prototype is a scamp with interactive functionality, which can be quickly created, tweaked and thrown away if not required.

The example below is an expanding list showing how the finished prototype will be used.

2013-08-27-SharePointPrototyping-01.jpg

What you will need

  • Cutting mat
  • Scalpel
  • Metal ruler
  • Glue (optional)
  • Marker pens
  • Medium weight card (around 200gsm)

Step 1

Draw a Scamp of the functionality area in its static state (on page load with no interaction).

2013-08-27-SharePointPrototyping-02.jpg

Step 2

Using the scalpel, metal ruler and cutting mat cut a line in the scamp along the top of the interaction area. This hole should be a little larger than the thickness of the card that is being used.

2013-08-27-SharePointPrototyping-03.jpg

Step 3

Next a scamp needs to be drawn for the interaction item, in this case this is the expanded list item.

Once drawn, the interaction item should be cut out so that the main body area is slightly narrower than the hole which was cut in Step 2 whilst leaving a bar at the top (this will allow the item to stop at the correct place).

2013-08-27-SharePointPrototyping-04.jpg

Step 4

Flip the two pieces of card over and feed the interaction item created in Step 3 into the hole created in Step 2.

2013-08-27-SharePointPrototyping-05.jpg

Step 5

Flip the paper prototype back over and have a play.

Other Uses

Paper prototypes can be used to illustrate a vast range of functionality, the only limitation really is your creativity.

The process outlined above is only a very basic paper prototype; be creative and think up new ways of being able to demonstrate functionality.

Rolls of paper can be used to allow large areas of content to be scrolled through, long horizontal pieces of card can be good for demonstrating image carousels, tinted acetate or tracing paper can be used to replicate a modal window popping up…the possibilities are endless.