Learn how to put your sketches into a flow that you can get design feedback on. In this tutorial, Diane Cronenwett demonstrates how to structure your tasks to understand if your paper prototype is understood by users.
- Once you've sketched out a few ideas, and you have your papers, markers, and sticky notes, it's time to start putting some of these ideas into a prototype that we can facilitate for feedback. The first thing I am going to do is lay the card stock below the phone cut out frame, and draw in the navigation bar and shopping bag icon. Typically, I already have card stock cut into strips so I can just start sketching. For the home page, I want to experiment with the layout with the top row scrollable through the categories. Below, I want to have a carousel of trends, social media images, and an area that showcases the designers and some video content.
When sketching paper prototypes you can use basic shapes to represent content. So, I'll draw boxes and indicate a carousel by showing the dots below, and use play icons to indicate video. Your sketches can be detailed or high level. It really depends on how much information you want to convey, and what you want to get feedback on. In my case, I'm interested in the overall flow, so I'm not going to get into too much detail just yet. You'll notice that some of these content areas are out of view of the frame. Drawing them off frame helps convey that this is a scrollable view, and that some content will be in view, and some will not be seen until the user scrolls.
This design also supports a scroll from left to right, and I've drawn the categories on a separate strip of paper, and as you can see, it's just simple boxes with text. The next page of this flow is a screen with all the apparel choices. I'm going to sketch out the screen, and this one will have the navigation item icon as an arrow to indicate that this is the drill in state from the home page view. I also want to represent the filter bar with search icon because I am interested in seeing how the user interacts with the filters. This page is supposed to represent apparel items, so we can represent that in boxes with pictorial representations of the items, or you can just use words.
One of the key attributes of this design is the filters. So I've already sketched out the filters, and for the progressive disclosure interaction, I'm faking that interaction by taping up another piece of paper so I can prompt the user to tap on categories, and I can show them what's in there to get feedback on that. Once the user selects jackets from the category filter, the page filters the results to only display jackets, which I've represented with a basic layout. The next screen in this flow is a screen showing the jackets details, and the ability to select a color, size, quantity, and the ability to Add to Cart.
This is a key screen because the ability to add to the cart is one of the core functionalities of this app, and we will want feedback on that. When the user adds the item to the cart, in the paper prototype there isn't any animation to show that behavior. Instead you can use shortcuts, like cutting out the sticky part of the sticky note, and in this case, I added the number one in the shopping cart, and I can just stick this over the shopping cart icon to show that this item has been added to the cart. I also have a confirmation message I wrote on a sticky note to indicate that this item has been added to the cart.
Okay, let's go through the flow as if we would be putting this prototype in front of a user. For this prototype, I am interested in understanding whether the flow of adding something to the cart is easy to do, and if the filters work the way someone might expect. To set the context for this test, it's a good idea to give a scenario to the user. So in this case, the scenario might be you want to find a blazer for an upcoming conference you are attending. How would you go about that? I'm putting the homepage under the template, so the first activity in testing this prototype might be to have the user scroll through the home page to take a look at the content by moving the card stock up and down.
The categories are a side scroll, so I might prompt the user to scroll through the categories by laying the category scroll on top of the homepage so they can see it, and encourage them to explore and select a category. After selecting a category, the apparel screen we drew will slide in from the left. At this point we might listen for feedback, and ask the user to use the filter to help locate a blazer, and show them the filters overlay. Once they select on jackets, we will show them the filtered results and ask them to select an item to purchase.
The jacket item detail page slides in from the left, and we might ask the user to scroll through the page looking at the hierarchy to see if anything is missing, or if the ordering of content is correct. We will then ask them to add an item to the cart, and we can place a little yellow sticky note on top of the shopping bag to indicate something has been added to the cart, and display the confirmation message. Now if this were a real project, I would probably include the checkout screens to complete the flow, and a few other details like the tab bar. Basically anything that would be incorporated into the overall design approach.
You can paper prototype a web experience, kiosks, tablets, software interfaces, and pretty much anything that has a screen. While it seems like a simple process, you can get a lot of information from paper prototyping and avoid a lot of usability issues by simply drawing out interface elements and flows for feedback.
Explore the benefits, techniques, and tools of prototyping in this introductory course with designer Diane Cronenwett. Diane covers the basics of building effective prototypes with the right "fidelity," and getting more valuable feedback from your design testing. Learn how to build simple, satisfying prototypes on paper, and use digital prototyping tools like Moqups, InVision, and Axure to add interactivity and animation.
- What is a prototype?
- How prototyping helps user experience
- Defining prototype goals
- Sketching ideas
- Creating paper prototypes
- Building low-fidelity and high-fidelity prototypes
- Creating HTML prototypes
- Testing and evaluating prototypes
- Choosing the right prototyping tool