By: Steven Chan, MD/MBA
Creating apps — or any user interface for that matter — starts with nothing but pencil and paper.
That’s the process that was taught to me at the University of California, Berkeley. UC-Berkeley is the launchpad of Mac OS X’s and the iPhone’s base operating system BSD, numerous graphics pioneers that have since moved on to Pixar and Sony Imageworks, and countless other computer innovations. Now, I bring this process to you.
Paper prototypes are a type of “low-fidelity prototype” that have many advantages:
- They can be created quickly.
- They can be changed quickly.
- They tell whomever tests your prototype that it’s an unfinished product.
- They allow you to nail down workflow issues early.
Don’t be taken aback by this very crude method. This method of prototyping is popular because it’s extremely easy to make changes on-the-fly and address interface workflow issues and layout problems. Designers want to make these workflows and layouts smooth before the final interface is created because it’s much more expensive and time-consuming to make changes at the end, to the final products.
Here’s what you need:
- paper
- thick pen
- scanner or camera
- Preview (or an equivalent program, such as Adobe Acrobat)
- Android or iOS device that can open PDF files with links (e.g. Repligo, Adobe Reader)
Here are the steps we’ll use to create a pretend iMedicalApps lab values reference app:
- Sketch on paper.
- Digitize the images (with a scanner or camera)
- Create “hyperlinks” within the resulting PDF.
- Have a user test your “interface.”
Step 1: Sketch on paper.
Sketch as many different scenarios that your user will see within your app. What will happen when they first launch it? What can they tap on?This might mean having 20 or 30 different screens with all the possibilities. Fortunately, if any particular elements of the screen repeat, you can potentially copy and paste them in an image program later.
In our case, we’ve decided to keep it simple, with a search box and a scrollable list of lab values. Our toolbar on the bottom will serve as “tabs” to let users thumb through the different categories, but we won’t activate this in our prototype.
Here’s our initial screen that will greet users. I’ve labeled the main content area, the search bar, and the toolbar on the bottom.
You want to particularly draw out any resulting screens that may appear whenever a user taps on a button, a slider, a menu, anything that can be tapped.
For inspiration, check out some other paper prototypes & wireframes from this website.
Step 2: Digitize the images (with a scanner or camera)
It’s okay if they don’t look good! They don’t have to. Our goal is to make these sketches as quickly as possible. In our example, we’ll use a paper-feeding scanner. Set your Home Screen of your app to be the first page.
Place the papers into your scanner. In my case, I’ll place them in the paper feeder.
Then, create a PDF from the resulting pages within your scanning or photo capture software. Mac OS X’s standard scanning software automatically creates a PDF. You may have to use a program like Adobe Acrobat or Preview to import separate images and save them as a single PDF file.
Step 3: Create “hyperlinks” within the resulting PDF.
Preview is free and built into every Mac OS X installation, but you can easily use your PDF editor of choice if you’re a Linux or Windows user. We’ll use Preview from Mac OS 10.7. Using the editing toolbar, click on the “Link” button.
Now, drag it across the “tappable” areas of your first screen to create a link…
…and instruct Preview to jump to a different page. In this case, to the page with this link’s corresponding destination screen.
On this particular page, I’ll now link it back to the Home Screen by linking the Cancel button.
There we go! Our first app!
From the Home Screen, here’s where I’ll link all of the tappable areas to. Don’t be overwhelmed by all the arrows as your pages, of course, won’t correspond to mine.
Step 4: Load it up! Have a user test your “interface.”
You can have someone test your prototype straight from Preview itself, though that’s not as fun as having them test it on your Android or iOS device!
Install the Adobe Reader app on your phone. Load the PDF onto your phone through your favorite file transfer mechanism. Set Adobe Reader to view Single Page, then let friends try your “app.”
And that’s it!
Give my app a try. You can also download it onto your phone. You’ll find that there are lots of posts on the Internet about user interface prototyping. In fact, there’s even an app that does all of the above, located here. For more tips, take a look at this tutorial. It covers the concepts of wire framing and paper prototyping more in-depth.
Steven Chan, M.D., M.B.A., is a resident physician at the University of California, Davis Health System, researching mobile technology, psychiatry & human behavior. Steve previously worked as a software and web engineer at Microsoft & UC Berkeley. Visit him at www.stevenchanMD.com .
