Prototyping on Paper

I recently tried Prototyping on Paper (POP) while designing a simple iOS/Android application named ‘Piglet’. POP is a an iOS and Android application intended to quickly prototype the look and feel of a mobile application. The concept is simple – you hand draw the layout for each screen, use POP to take a photo of each screen, and then link hot spots on each screen to other screens to simulate the interactive navigation for the application.

The project view (below left) shows each of the screens that have been captured by the camera. Note the controls on the bottom where you can take a photo, import from the photo gallery, ‘play’ the project interactively or share the project.

Project ViewIMG<em>0039IMG</em>0040
After taking a photo of a screen, you add hotspot regions which link to other screens (above center & right). After linking together all of the screens via the hotspots, you simply click the play button to start interacting with the prototype.

IMG<em>0044IMG</em>0042
The tool works well and is effective at producing an interactive prototype running on the device. POP definitely helps while flushing out the user experience and workflow for the application. The only problem I had with POP was that on one occasion it lost linkage to some of the photos backing the screens. They were still in the photo gallery so I was able to add them back in and then had to redo the step of adding the hotspots.

I spent most of my time drawing the screens to be photographed. It may actually be quicker to use a drawing tool to create the prototype screens, especially when multiple screens have a lot of content in common.

joliva

0

Subscribe to Oliva Labs Blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!