When I first started working with the Leap Motion Controller, my first thought was “wow, a whole new world of possibilities!” My second thought was “this is going to be challenging.”

Why is designing for touchless interaction challenging? Lack of feedback. Waving your hands in thin air doesn’t produce any physical feedback, and you can’t have a good user interaction without it. Our task as developers is to build and reinforce other forms of feedback – working with the Leap Motion Controller’s most important feature, rather than against it.

AlltheCooks is a social cooking app built for mobile platforms that makes it easy for home cooks to access and share their favorite recipes. As you can imagine, cooking in the kitchen with technology can be disastrous for devices (and repeated rounds of handwashing is rough on the hands). I knew our users would love to be able to browse and read recipes without needing to touch anything.

After fooling around with a few types of interactions – picking, grabbing, pulling – I managed to do something that actually worked for me, but was really hard to learn and not intuitive at all. It was difficult to use because users wouldn’t know exactly what to do next, and I didn’t want to add long tutorials or clutter the screen with too many visual helpers.

With a little help from the Leap Motion team, I started working with a more intuitive UI system, starting with our mutual friend, Cursor. While I wanted to make a cooking app completely without any cursors – what would ultimately become AlltheCooks Recipes – the lack of any visual feedback was causing too many problems. Ultimately, it ended up being very useful to show the user what gestures were being captured, which turned out to be only two:

Pointing with the foremost finger was very easy to use and capture, and also easy to translate to on-screen coordinates.

Panning with at least 3 fingers, while not so universal (some people have a strange difficulty with spacing their fingers), it still makes a good contrast to the pointer gesture.

As an analogy, the pointer represents the mouse position, and the open hand is the scroll wheel. To make it easier to use, we designed the UX to keep only one scrollable area per screen. This is important, as the user doesn’t have to focus the cursor before scrolling. Using a scrollbar indicating the required gesture and the scroll position made it a lot clear and intuitive to the user.

But how to solve the “click” issue? Pressing against the air can feel counterintuitive, even frustrating, for its lack of pushback. Fortunately, I was introduced to the concept of boundary crossing in a cool Leap Motion app called Freeform. Basically, it consists in having an area (what some would call a button) that pops out a visual boundary element, which only triggers the button’s action when crossed.

I also added some quick delays to trigger the popup, allowing the cursor to hover without causing unwanted actions. This turned out to be very intuitive and even a little fun to use. The result is a nice and simple application, with a discovery mode to search and preview recipes, and a cooking mode that lists ingredients and directions for up to four easily switchable recipes.

The Leap Motion Controller is great and has a lot of potential, as long as developers design apps to match the possibilities of a touchless interface. The SDK was super easy to set up and understand, and the team is awesome, extremely helpful and accessible.

So if you got hungry with all this reading, check out Allthecooks Recipes and try out my hands-free cooking app experience. When you’re done, let me know what you think about my approach to visual feedback by posting your comments below. Reviews in the Airspace Store would also be greatly appreciated!

Lucas Goraieb has been a software developer since the nineties. The co-founder of Deonn Games, he works with Allthecooks to expand their range of supported platforms, including their Windows 8, Windows Phone, and Leap Motion apps.