Click here to preview the new Fast Company

Want to try out the new

If you’d like to return to the previous design, click the yellow button on the lower left corner.

Using Origami To Mock Up Ingenious Gestural Interfaces

Juan Sanchez finds a novel solution for mocking up subtle design ideas.

Gestural user interfaces may be the future, but we’re not quite comfortable with them yet—as users or designers. Their tactile simplicity makes them efficient once you get the hang of them, but their affordance-less, "pictures under glass" nature can make them inscrutable to first-time users. Meanwhile, how can designers fully grasp the possibility space of these interfaces without anything to, well, grasp?

Mock-ups of the way that Clear and Path work, on the left and right respectively.

Designer Juan Sanchez offers an intriguingly low-tech solution: origami models. "As a designer I find it’s important to remove myself from that [digital] space and explore solutions that can originate in physical space," he writes. To better understand the opportunities implicit in Clear’s gestural UI, he made a paper version that replicated its main pinching gesture.

Big whoop, you might be thinking; we already know how Clear works, so isn’t Sanchez’s model redundant? Actually, no. By physically modeling the interface in paper, Sanchez quickly found ways to expand upon its core ideas. His "accordion" and "fold and peel" gestures intuitively exploit the affordances implied by (but not included with) Clear’s pinch-to-open and pinch-to-close commands. A designer putting a Clear-like gestural interface together digitally would have to come up with these extra ideas out of thin air, which could lead to a grab bag of interesting but disconnected gestures. Toying around with a paper model, on the other hand, lets new gestures reveal themselves organically and stay intuitively related. After all, if your paper model is folded into segments that smoosh down into an accordion-like stack, they probably shouldn’t swipe left and right like Scrabble tiles at the same time. If it doesn’t make sense in physical reality, why should it act that way in your app?

A novel idea for collapsing rows in a list.

Some designers might cringe at these kind of skeuomorphic constraints. Digital is digital—why should we use the clunky, limited physical world as our model? Here’s why: Because touch-screen interfaces are (for the moment) stuck in a grey area between the digital and the physical, and that’s confusing. Every gestural UI is a puzzle: They offer us the appearance of objects, but deny us the physical affordances (like texture, three-dimensionality, and contiguity) that we expect from those objects. And so the user has to start guessing with their fingers. But designing gestural UIs from physical prototypes (like Sanchez’s) could encourage designers to build in more of the "clues" that reduce this guesswork for the user. Getting the hang of one gesture would intuitively "reveal" what other ones are possible—a solution to the menulessness of gestural UIs.

On the right, an idea for how to reveal menu options: Peeling back a layer.

In fact, why stop at paper? Sanchez shows that origami models can afford UI designers all kinds of useful insights, but what about other tangible materials like clay, rubber, plush, sand, or ink? If touch is the future, the physical world is overflowing with inspiration for UI designers who are willing to simultaneously accept the limitations of "pictures under glass," and think beyond them.

[Read Juan Sanchez’s original post, "Interface Origami"]

[Image: andry_l/Shutterstock]

Add New Comment


  • John Doe

    This isn't black and white. Intuitive interaction has its advantages (mostly just that, it's intuitive), and they can be designed in a natural way by applying techniques such as described in this article. The digital world offers more, but because it is so different, people have to learn how to work with it. So, depending on the application and its users, I think both are viable. Sometimes machines need to be adjusted to humans (to increase simplicity), and sometimes humans need to adjust to the machine (to go beyond the limits of the physical world).

  • Mike

    Of course they don't need to be direct analogues, but too many touch UIs are still being developed with a mouse and keyboard model in mind. And whilst most of us have highly tuned digital intuition, my parents generation certainly don't. To them, intuitive UIs are those that are the most grounded in the physical world.

  • Jon D

    Harrison Williams should have been featured in this article! I'm with him. 

    This is a great idea for an article, unless you talk to a UI designer. This feels more like a student's idea. Which is great in theory, but doesn't really stand up. I don't need to make finding the right solution any harder by only applying real world techniques. This is whats also led us to a LOT of bad gimmicky Z-space navigation that is flawed, and wasted a lot of the late 00's. Trust me, I worked at the number 1 agency pushing that shit. 

  • hdub

    “If it doesn’t make sense in physical reality, why should it act that way in your app?”

    Because the digital is not physical reality. Not that this method of prototyping isn’t kick-ass and effective, but implying that digital interfaces should be restricted to interaction that can only be achieved in the physical world is unnecessarily limiting what is possible with the applications we develop. That line of reasoning is what has led us to the horrendous mimicry of physical textures like the leather binding in Apple’s iCal.

    The beauty of the digital realm is that it offers us the freedom to break out of the restrictions of physical reality to create mind-blowing experiences that would never be possible otherwise.

  • Evan Jacobs

    Completely agree.

    Digital interfaces do not need to be an analog of physical experiences! Listen Apple, please!