Wireframing and Paper Prototyping

There has been a decent amount of discussion in the user experience community around the necessity of wireframing in web design these days, and I began to wonder “does this apply to mobile?” Are wireframes just a billable design deliverable to let the client to know we’re “working”? No, I think it is more than that. Wireframing and paper prototyping is definitely evolving as user’s online prowess and tastes become more refined, but this practice is still a very valuable component in mobile design.(Gordon 2010)

Paper Prototyping Comes First

In my experience, there is a vast difference in the form and function of wireframes versus paper prototypes, even though the terms may be used interchangeably. In my mobile design process, the first thing that happens after we figure out who is using the app and how, is paper prototypes -NOT wireframes.(Gordon 2010)

There are some who claim “paper is dead” and tout the benefits of digital prototyping. Others argue thatpencil and paper stregthens design. Personally, I come up with more fluid layouts when I am not in front of my computer. However, we’re all individuals, with different preferences and ways of thinking. Maybe you can be just as creative in front of your computer; it’s something each designer has to figure out for themselves!(Gordon 2010)

One thing that I love about offline paper prototyping is the speed at which you can iterate design. I use screen-sized sticky notes that can quickly be pulled off, reworked, rearranged etc. Once a flow has been established for the app, it’s time to nail down the on-screen elements in a wireframed version.(Gordon 2010)

1. Focus on the Primary Task

The first thing to do before you even think about putting pen to paper is to ask yourself this question: what is your app’s primary task? Specifically write down:(Gordon 2010)

(Your differentiator) (Your solution) for (Your audience).

2. Create Use Case Scenarios

Once you’ve defined your primary task, you’ve probably also put some thought into who wants an app that performs this task! Use cases are the BEST way to get the paper prototyping process started. In this article, I talk about how I defined use case scenarios for our Doodle Bright app. I gave “my people” a name, an address, an occupation and a specific scenario when they might use an app like Doodle Bright.(Gordon 2010)

Here’s an example:

Jane is waiting in the doctors office for a 3 o’clock appointment with her 4-year old son, Chad. She brought her iPad just in case the wait is longer than expected and of course they’re stuck in the waiting room for a half hour before they are called. Jane passes the time by drawing trucks and trains with Chad while they wait for her appointment.(Gordon 2010)

In this scenario, Jane and Chad are playing with the app together, which means mom can prompt him on how to interact with different elements on the screen if he is unsure of the next step.(Gordon 2010)

Now let’s look at this example:(Gordon 2010)

Jane is in the carpool line to pick up her eldest from school. Chad is in the backseat, bored after a day of running errands. Jane hands her iPad to him with the Doodle Bright app launched. Chad knows which buttons to push because they are intuitive to a 4-year old.(Gordon 2010)

In this scenario, the controls have to be easily understandable for an unsupervised child. Does this alter the types of paper prototypes you create for this app? Heck yea it does! Now, instead of designing for mom and son, to have a wider appeal we see that the prototypes should primary be geared towards only the child.(Gordon 2010)

It may be obvious that an app like this would require “thinking like a child” but without this use case scenario to back up that claim, you may fall into the default “adult mode” of thinking about the design.(Gordon 2010)

3. Identify Mental Models

In her article about “the Secret to Designing an Intuitive Interface” Susan Weinschenk talks about how to match your design to what the user expects to see. The better you can do this, the more intuitive your interface will be.(Gordon 2010)

4. Check the Flow

I often find that I have a perfect flow defined for an app, and then I find something I’ve left out. Been there? It’s aggravating but one thing I’ve found that can head off a lot of “leaving outs” is thinking outside of the “perfect” scenario.(Gordon 2010)

An example from the Doodle Bright scenario is when Chad creates a totally awesome picture Jane wants to save and print, but he accidentally closes the app. Uh oh. What now? Did you account for an auto-save in your paper prototypes? I hope so!(Gordon 2010)

5. Find the Method that Works for YOU

As I mentioned before, everyone is unique and creative in their own way. You have to find a method that squeezes the most out of you. Paper prototyping is one of the most creative exercises in the app development process, you have to work on this in your “prime” hours, environment etc.(Gordon 2010)

Gordon, J. (2010). 5 Steps for Wireframing and Paper Prototyping Mobile Apps. Available: http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/5-steps-for-wireframing-and-paper-prototyping-mobile-apps/. Last accessed 29th Sep 2012.

http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/5-steps-for-wireframing-and-paper-prototyping-mobile-apps/