Learn how to quickly prototype using paper, markers, and sticky notes. In this UX design tutorial, Diane Cronenwett sketches out screens and a flow to show the process of low-fidelity prototyping.
- [Narrator] Creating paper prototypes should be a simple process, and focus on understanding high level attributes of the design, like layouts, light interactions, and flows. Paper prototypes need someone to facilitate the conversation because it takes a little bit of imagination for the user to walk through a simulation of an experience like shopping online when using a paper prototype. A facilitator will be able to offer context by providing scenarios to think about, and to help guide the user, if they get stuck. Or to get the user to speak more about their thoughts on the design to expose what's missing, and how things should work.
Paper prototyping is pretty easy to do. All you need is a black marker, paper, and some sticky notes. You don't have to worry about whether or not you can draw, everyone can draw, and the fidelity just needs to be clear enough to get your point across. Which is pretty easy to do with just squares, rectangles, lines, and words. For testing mobile paper prototypes it's nice to have a cutout of a mobile frame that simulate the limited view of items in the viewport. I've created this one by taking my phone and drawing one over some lightweight cardboard and used a box cutter to cut out the opening for the screen.
The rest of the prototype can be drawn on paper. You can simulate scrolling behavior by using strips of lightweight cardstock and moving it up and down to the viewport of your template. Or from side to side to simulate scrolling left to right. I prefer lightweight cardstock because it's a little firmer and doesn't tear or wrinkle as easy as paper does. When you're using the same prototype for multiple people sometimes the paper will get torn or worn out. So I just like a little heavier weight paper but you can also use whatever you have onhand. So let's say that we want to create a department store mobile display.
When approaching any type of prototyping you'll want to start by sketching out ideas of your screens, and the flows for your design. For example, I have a few iterations where I just came up with some different approaches for the design of the home page and the kind of content I want to showcase. I also have an idea for how the tab bar should be organized. You can see this is pretty rough and my sketches are really about just getting multiple ideas on paper. The next thing I did was create a high level flow of key screens and interactions for the design. In my example here, I have the home page, some filtering, and the ability to add an item to a card.
Ideally, you can draw your designs and build the portrait layout to simulate scrolling up and down, or in landscape for a side scroll interaction. Now it's time to start sketching our prototype.
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