How to create UI and tutorials for Leap Motion

After viewing various developer videos and Leap Motion cases we realized something crucial: there isn’t an existing guideline for the gestural interface and tutorials! Since then we’ve been experimenting and testing our own approach which is summarized below.

Originally an iOS game, Sortee has a simple premise: sorting things has never been so much fun. There is one basic gesture of swiping the object to the correct tube which perfectly fits the Leap controller. From easy categories such as red and blue to more complex sorting by rooms to challenging seven tubes at once.

Video: menu differences between touch devices and Leap version

Learning by playing

Because the device brings a completely new type of interaction we’ve decided it’s very important to teach the player even the very basic gestures. The truth is people HATE tutorials, they want to play immediately and usually skip all instructions. That’s why we came up with our “learning by playing” approach. It is the complete opposite of traditional “comics style guides” full of sketches and text.  

image

When the player opens Sortee for the first time the “ingame” tutorial appears. First we show how to place the hand above the device. Our intention was for the game to be played with the forefinger but we later discovered people are not able to hold their hand as shown in tutorials so we’ve changed it to hand tracking. This is especially beneficial for small kids. Our conclusion is to use the easiest gestures and to carefully observe people playing the game or using the application and changing the controls to fit natural behavior.

Video: tutorial

Highlighting

If you are familiar to Kinect or Wii this may seem obvious to you but not for mobile focused developers. When designing for Leap you have to highlight every active object at which the user is pointing. There is a big difference between using your finger on a tablet screen and users hand mediation with some kind of cursor. Use larger detection zones than the visible object to make pointing easier.  

Video: objects highlighting

Confirmations

Leap offers two basic confirmation gestures: tap and key tap. We’ve set our own “tap” called “poke” in the game which is more sensitive than the predefined tap and requires less physical effort. We also considered the “point-and-wait” confirmation style common on Kinect, but it is very annoying and time consuming so we quickly threw out this idea. We’ve only partially used this for movement between game screens, see the video below.

Video: navigation

Take rest

Lot of skeptics say motion gesture controls are physically demanding. Without any doubt they’re right. On the other hand this type of interaction also brings a lot of positives. It is up to us developers to keep this threat in mind and offer a lot of rest to users’ arms. For games short game rounds are the best, on the contrary playing racing games such as Need for Speed will be painful as hell! Try to design gestures that differ significantly from each other because it burdens different muscles. Require quick and natural movements and don’t forget to implement rest time frames (e.g. final score counting). In short let the player put his or her hands down.

image

Test, test, test

Developer’s visions are often self-absorbed, confusing and too complicated for ordinary people. Test with uninstructed laymen and be prepared to suffer how people do things differently than you expect. Don’t get frustrated but think why that is and how you should change the UI. Resist asking users for a solution because they usually don’t know it or cannot explain it well. It’s up to you to be perceptive and creative!

As our coder Petr often says: “Forget everything you know from touch devices, Leap requires a completely new approach!”

RELATED ARTICLES

did you like it? share it!

LINKEDIN
POCKET

Sign up for our newsletter

WANT TO KEEP READING?

Download the Mobile Ad Creatives eBook before you go!