The following is a short extract from our book, Designing UX: Prototyping, written by Dan Goodwin and Ben Coleman. It's the ultimate guide to prototyping. SitePoint Premium members get access with their membership, or you can buy a copy in stores worldwide.
There are no rules for making paper prototypes––that is what's great about it. You need materials that are commonly found in any home or office, but if you have to buy them, they are relatively inexpensive.
What You'll Need
At the very least you'll require paper and a pen––this low barrier to entry is one of the best aspects about this approach. For more complex and interactive prototypes, though, you'll need a bigger arsenal, and if you're running workshops or doing a lot of prototyping, assembling a toolkit of the following items is a good idea.
We'd suggest the following items when undertaking a prototyping session:
- paper with a grid or dot grid (preferred)
- sticky notes (never leave home without them!)
- pencils
- eraser
- pens (Sharpies in different colors and thicknesses are ideal)
- scissors or craft knife
- glue (preferably restickable)
Items that are nice to have include:
- index cards
- mounting putty
- adhesive tape (preferably removable to move items around)
- highlighter pens
- double-ended marker pens with fine and normal nibs
- transparent sheets and markers
- a box for filing or transporting your prototype
We’ll look at the possibilities involved in using different materials later in the chapter.
Your Approach
Strictly speaking, you could just dive in and start making; however, a process we’ve found helpful at fffunction is to think outward-in, focusing on increasingly smaller pieces as you go, such as:
- devices
- screens
- elements
- interactivity or state changes
Devices
What size viewport or device are we designing for in this instance? Any available user research may inform this. Analytics data will indicate what an existing audience may prefer to use. A goal of the design work could be to prototype an improved experience on small-screen devices.
Desktop or Laptop
An A4- or US letter-sized piece of paper is suitable here, where you could use different orientations to mimic the device, such as landscape for a desktop or laptop. If you want a more realistic source, you could print out a browser frame graphic.
Tablet
A5- or US half-letter-sized paper should suffice, although if you're designing for a large tablet such as the Apple iPad Pro (12.9 inches), you might want to stick with the A4/Letter size. Again, you can choose an orientation depending on what you expect the user to have. If you want to make this more realistic, creating a dummy device is an option. The most lo-fi approach would be to draw it on a piece of card and cut out a hole where the screen would be, as depicted below.
Laser-cut and 3D-printed devices have been created specifically to help use paper prototypes in a more natural way, allowing the prototype to be part of a device.
Phone
As with the previous examples, you can sketch directly onto paper: A5- or US half-letter-sized, index cards, or sticky notes, and use different orientations. There are more options available for mobile devices, though, than any other form.
You could make a cellphone border with a cutout window for the screen, or use cards laid on top of the device to act as different screens.
As mentioned, there are also laser-cut and 3D-printed device models available. The figure below shows a laser-cut plywood phone model that we use in our work.
Plastic or card model devices with a channel to insert pieces of paper to simulate scrolling are also available. You could even place all the screens on a long piece of paper and slide it around to simulate navigation.
Another option is to use a small spiral-bound notebook to flick between screens, with tabs or colored dots forming navigation elements, as seen below. This is a nice approach as it mimics how people use their cellphone: held in one hand while the other taps it to interact.
Screens
Now we'll define what screens are required to communicate the design. It’s helpful to consider what steps in the journey the user will take. We can develop a list from existing work such as user journeys, task models, sitemaps, information architecture, or a functional specification. Some of this was covered in the Gather Resources section of Chapter 2, to which you can refer back if you need a refresher. Once you've developed a list, you can start to think about what elements will be required for each screen.
If you don't know the screen size, or have an incomplete picture of what you are designing, sketching the steps out on cards can be useful for working a product at a high level before going into more detail. We'd recommend beginning
with smaller A5 or index cards to help you focus on the individual interactions on each screen; aiming for one purpose per screen is a good way to start. You can then arrange them on a table to experiment with different flows through a process.
Elements
When looking at the elements that make up your screen, consider how users will interact with them during the prototype process. What needs to happen when they touch that element?
In some cases, you may have a consistent interface with only one window changing based on interactions around it. A simple example would be a menu in a left-hand column that changes the content of the right-hand column. This could be represented with the same card on the left, and separate cards for each piece of interchangeable content on the right, as shown below.
Interactivity
All the elements you've established will each be interactive at various points. There’s a challenge here in how to replicate that functionality with paper. Again, there’s likely to be no “right first time” solution to this so it’s worth experimenting with different materials and approaches.
Continue reading %How to Make Paper Prototypes%
by Ben Coleman via SitePoint
No comments:
Post a Comment