I am making my first paper prototypes for a touchscreen interface. In a list view, a single bar in the list has three possible interactions, swipe left swipe right, or tap. Swiping left will reveal a green bar and then transition to a new page, likewise swiping right will reveal a red bar, while tapping will expand the bar, pushing the lowerbars down. Sort of like this app. So how can I portray all three of these interactions in a single paper prototype?
-
1That sounds tricky. I would probably set up a UI flow instead, covering the different interaction patterns and their effect.– AndroidHustleCommented Oct 24, 2013 at 6:07
-
3I agree with @AndroidHustle. You wouldn't make a mouse pointer or tap interaction visible on your prototype, so why a swipe? If you find you need them, then maybe your visual cues are not good enough.– GusdorCommented Oct 24, 2013 at 10:35
Add a comment
|
2 Answers
You'd need some sort if indicator saying that the bar is swipe-able to begin with, for example indicator dots below, or having the red/green peeking in from the left/right. See this discussion: best image to indicate swipe left right. With that indicator in place I would personally just use more paper prototypes to display the different states
But to answer your question: I would use a knife or scissor to make vertical incisions to the left and right of the bar, and then insert a strip of paper containing the different bar states, and then physically slide the strip left and right to display the different states. If you want to display the new page to transition to as well, I don't really see a good way of doing that in a single paper prototype
You can use a sliding bit of paper to model the swiping behavior. Once the user has begun the swipe, pause the prototype (i.e., say "hang on a sec") and put whatever you want "under" the sliding bit of paper.
Make sure the background behind the swipe paper has a bit of green on the right and a bit of red on the left, just enough for the user to notice when they start the swipe. You might need to make your covering paper extra thick to hide the bleed-through.
Obviously if the user presses on the bit of paper, it's a tap, and you can swap out to another prototype that shows the expanded version.
It will be slightly more discoverable than the 'real thing' as the extra bit of paper may be noticeable (depending on how complex the rest of the mockup is). But it will allow you to cheaply explore the swipe interaction and get that preliminary detail you need without having to code anything or forcing your user to switch to an unfamiliar application.
