Virtual reality and the Internet of Things are fundamentally different in many ways, but they share a common goal – bringing digital experiences into the 3D world. And whether that world is a space full of physical objects, or a parallel universe of our own creation, the best 3D interfaces are the ones that have the power to become part of the environment.
Most of our experience of technology is through screens, or what I refer to as magic pieces of paper. True, the surface inside is definitely magical – we can turn it into any number of configurations depending on our immediate needs – but for the most part the 2D interface is very flat. There is no depth and the edges of the screen mostly act like the edges of paper, in that the experience ends at those boundaries. It doesn’t bleed out into our real world, instead it is all nicely contained in this little area.
The result is that the technology stays in its world, while we stay in ours. The only place the two interact is a thin little membrane, or screen, between you and your interface. All you need to do is interact with that membrane with a touch or a cursor and – boom – magic happens. Which can be great, because we’ve optimized the 2D interface to be highly efficient. We have shallowly defined buttons and sliders that don’t require any more depth because of this single point of contact with the membrane.
However, when you expand these into 3D spaces like AR/VR or the Internet of things, you have a lot of floating membranes. They act as more of a barrier than an inviting point of interaction. This feels flat and artificial, and doesn’t live up to the potential of truly three dimensional input. The more floating screens we have in our environment, the more noise and interruption between us and our world.
Please make it stop.
David Carson said in 2000 that we had reached the end of print. And while he was a bit premature, he was clearly the harbinger of doom because today, in 2015, we can say that we have reached the end of “the end of print.” We will still use those principles for screens and paper, but when it comes to 3D interactions with technologies, it’s time to leave that thinking behind. It’s time for us to start talking about designing rooms full of objects, rather than buttons on screens.
This is significant. It’s a very different way of thinking about technology, and how we interact with technology. When you look at a room there is very little text that that needs to be read, or buttons that need to be pushed. We know immediately how to interact with the objects in our room because their size and shape affords proper usage, telling us where to put our hands and where to apply pressure. In the real world, we spend less time looking at our tools, and more time using them.
That’s where paper comes in. It’s time to roll up your sleeves, open your mind, and start cutting and taping. In this post, we’ll take a look at ways you can hack the power of paper to bring your ideas into the real (or virtual) world – before you commit them to code. Marshall McLuhan famously said that “we shape our tools and thereafter our tools shape us.” As we embark into a world of 3D interface this is a crucial insight. We will not be able to move past floating magic pieces of paper until we use different tools to design interfaces. In other words, we cannot design a 3D world with 2D screens.
If we want to think about the future of technology into imaginary worlds (VR) or technology into objects (IoT), we need to stop designing for the screen. The interfaces that we design today are the frameworks that will be very difficult to escape in a matter of years. Now is the time to design 3D interfaces that work for us.
Hacking with Paper
So where does paper come in? Back in 1992, I co-owned a small architectural firm called Zoyes East Inc. We quickly found that our clients had a hard time translating our 2D blueprints into what the final product would look like. So we built architectural models to help them understand what the space would be like.
What we quickly discovered was that not only did this help our clients, but it also helped us. We learned more about our own process because instead of just imagining it in our heads, we could actually see them in the real world. We could say “this window could give a great sightline through the archway to this other window, if we just moved it a few inches to the left.”
As a result, models became an essential part of our 3D design process, and I developed a rapid paper prototyping approach. In the next two sections, we’ll take a look at how this is reflected in two designs – a physical object and a virtual menu widget.
Paper + IoT: Digital Experiences that Feel Analog
Making tea is an incredibly physical experience – warmth and color, smell and taste. Even so, time and temperature are essential metrics to making the perfect cup of tea, and many people rely on timers and thermometers. The Kicker teapot was a concept design that we used to stretch our creative muscles and explore how we could bring the analog and digital together in a new way.
When we looked in the marketplace at teapots, we saw mostly glass and ceramic, and a little bit of metal. But when we looked at the market for teamakers, they looked a lot like coffee pots, with lots of knobs and lights and gears.
This was the complete antithesis of what tea drinkers said they wanted in their process. So we decided to make a completely analog-feeling digital tea maker. The metaphor came easily – an hourglass, with its analog sense of time and materials. But when we tried to design the controls, we basically ended up with a much larger, more clunky version of buttons and knobs. We needed to try a different approach.
We went physical. We created several rounds of prototypes, from rough mockups with plastic bottles to an Arduino with a tilt sensor taped to a glass jar. Through the process, we quickly discovered that the carafe itself could serve as the actuator for the technology – triggering a digital timer. The act of turning over the carafe still feels incredibly analog, but provides the necessary bridge between human input and digital power. No buttons needed.
It was the physical models that really helped us get to this point, because while we had made plenty of sketches, elaborate digital diagrams, and talked about it, it was only when we had a physical object in the real world that we could take it to the next step.
Paper + AR/VR: Designing the Leap Motion Widgets
The simplest things in life are often the most difficult to perfect – especially things that we normally take for granted. There’s nothing new about buttons or sliders, but how these fundamental UI elements translate to VR is profoundly important. Especially when you have a touchless interface where there’s no way to physically restrict people’s movements. Instead, you have to guide users to take certain approaches to the interface.
Our original ideas for the Unity Widgets began with translating existing interfaces that people are already familiar with. For the Dial Picker, the original concept was very 2D. The next natural step was to bring it into three dimensions.
We quickly realized that the approach that people’s hands took was as important as the mobile “contact point” we talked about earlier. VR makes it really easy to move through the target, and people take all kinds of different approaches to get to that affordance. As a result, users needed to understand that their trajectory was as important as the contact.
We had a few ideas, but it was the paper model that helped solidify how people would actually interact with the Widget. The options within would exist in 3D space as a wheel, but be bound by a flat plane. This ensured that users would approach the widget from the front and interact with it in predictable ways:
How to Create Your Own Paper Prototypes
Paper is kind of dumb, so you often need other tricks of the trade to emulate state changes. I create origami with clear mylar, which makes it easy to create 3D models. With a bit of tape, you can instantly create a hinge, or bind different pieces together. With a little imagination, the rough forms you can fold together make it a great rapid prototyping tool – something that your team (or best friend/guinea pig) can lay their hands on and understand what you’re trying to achieve.
The other essential ingredient in this approach is color film – translucent plastic, often used to place in front of lights to change their color. Much like old-fashioned 3D glasses, each colored film blocks out its own color, while allowing others to show. With a red film and blue film, and a red marker and a blue marker, you can demonstrate state changes in real time.
Designing in three dimensions can be a real challenge, but with the right tools, you can move beyond flat thinking. Whether you’re building a digital experience for an analog world, or an analog experience for a digital world – go forth and fold!
The post Break Out Your Scissors: The Secret of Rapid 3D Prototyping for AR/VR & IoT appeared first on Leap Motion Blog.