In a previous post, I mentioned a way of thinking about interactions and interface within a framework of depth and space. The ideas were centered around the digital space, but as a designer I find it’s important to remove myself from that space and explore solutions that can originate in physical space.
One of the easiest ways to do this is to break out scissors and paper. With paper you can remove the constraints of working in pixels to fold, tear, flip, curl and manipulate the medium to discover solutions that may have otherwise been missed.
To illustrate this, I created a few examples based on some familiar apps and others based on former concepts I’ve played around with in the past.
Clear & Path
Clear has an interesting interaction where you pinch two list items apart to make room for an additional item. Path allows you to slide a view to the side to reveal additional content underneath.
Accordion
By folding paper like an accordion, you could see how you might collapse some list items to display content underneath. This could be triggered by a button or a gesture.
Fold & Peel
You could also use an accordion approach to reveal menu options. If you need to display options on a list item, why not allow the user to peel back a layer to reveal those options.
These are just a few examples of how playing with paper can really contribute to the design process. Whenever I’m trying to communicate an idea or working through solving a problem, I find pushing away from my computer and sliding over to a stack of paper for “craft time” can bring a fresh perspective.
Having a physical prototype also has the added benefit of putting something in your hands you can play with and evaluate. While a final design may end up as pixels, there’s a lot to explore beyond that.
7 Comments
I like your insightful post. topnotch work. I hope you produce others. I will continue reading
I like this refreshing approach to interface design. But one thing that is making me think otherwise is how flexible this approach is? Or is this one of the last stages in prototyping? This is definitely a tight way to have a more responsive and easy UI since it is coming directly from the real ergonomics of a design. It is “Handheld” if i you say.
It would be really great if you can elaborate your process from scratch to finish. I am also a designer (new to this field) and I have always wanted to learn the use of paper in designing for tablets, phones and computers as well. Thanks.
Thanks for the comments. We’re definitely hoping to share more about how we work as there are a whole series of little “tricks” we use to communicate our ideas.
@Ageless – This approach can come up anytime during our process. On one project, we were testing right from ideas generated via sketches very early on. On another, I had the idea in my head and had gone through refining it at the “pixel level”, but I needed to communicate the idea to the client and ultimately to the developers.
great to see paper prototyping, especially in something as tactile as mobile design/development. while i haven’t done much research, i’ve always thought that a 2.25″x4.5″ sticky note pad would be nice for sketching the ui and mapping. this takes the prototype to a whole new level getting gestures involved. nice.
Paper frees minds! Such a good way to create and get understood. Thanks for sharing.
Really interesting. Do you test these with potential users or show them to clients, or are they only for your own use in designing the interfaces?
@Marina – I’ll use this approach to accomplish a few different things.
1. Communicate with clients, developers, designers, etc. to show what I’m thinking. It takes so much less time to fold paper than create an animation, push pixels, etc. and gives me more time to problem solve rather than producing “deliverables”.
2. I use it for myself to test ideas that may have originated in digital form.
3. The approach can also be used to test with users, rather than showing static printouts. It’s a great way to simulate movement through an app, which can really define the experience.
Sometimes I’ll actually record video of the way the paper moves to better communicate what I’m thinking and share that to get feedback. I don’t do this for every project. It’s just another method of communication I’ll use when needed.