User Orientation and Tutorial Guidelines

With the introduction of the Leap Motion Controller, we’re unlocking a more natural and intuitive way for people to interact with computers. This is the first time ever that users have the power to control an experience with nuanced hand and finger movements in three dimensional space.

Yet, while consumers may have had a basic introduction to motion control in some contexts (e.g. Microsoft Kinect™ and the Nintendo Wii™) this is an entirely new experience for them as it relates to their everyday machines. Interacting in this new way can take some getting used to – and ensuring that you give users a proper understanding of exactly how to interact with your software will mean the difference between a magical experience and one that might leave users frustrated or confused.

The following are a few different ways to approach the task of guiding users and teaching them specific interactions within your apps. Whichever you choose, make sure your orientations and tutorials are easily accessible from any point in the app.

Create a Great Demo Video

One of the first introductions to your app might be the screen shots and demo videos that a user sees. It is highly recommended that you publish a video which shows off, not only the app functionality, but how a user performs the interactions needed for your app. The following apps have video demos that help users understand the game play and Leap Motion interaction.

Interaction ‘Keys’

Interaction Keys are discrete screens (shown either before starting an experience or accessible via a ‘help’ or ‘info’ menu) that outline all of the basic interactions and controls used in an app. It can be great to see everything in one place – but diagrams used need to do a good job of demonstrating both context and action. Even better, simple animations can go a long way in helping users immediately grasp the difference between discrete controls.


Dead Motion: Prologue displays this thorough help menu to show all of the interactions and optimal Leap Motion controller positioning.

Gravilux also has a well done interaction key.

While you may have the resources to design your own gesture hints and icons from scratch, it may help to expedite the process by starting with some existing design assets. Some of these may focus on touch but are a good foundation for designing your specific gestures.

Walk-Through Tutorials

A Walk-Through Tutorial is a series of screens, directions or interactive tasks that lead new users through each different part of your app. Often times, breaking more complicated interactions down into discrete parts can be a great way to introducing new users to the mechanics of your software. And, as always, letting users learn by doing is a great way to help them master controls in a safe environment and ultimately bolster their confidence as they dive into your app.

This walk-through tutorial by Deco Sketch shows how the user’s finger position over the Leap Motion Controller changes the interaction from “Menu” to “Draw” modes.

In-App Cues / Hints

Giving hints or cues to a user while they are interacting with your software can be an elegant way to subtly direct behavior. Simple contextual graphics paired with instructions (e.g. a pointing hand + “Tap to Select”) can go a long way in guiding users in the right direction. It is important, however, to make sure that these cues are as unobtrusive as possible and only support the experience vs. distracting from it.

Jungle Jumper displays in-app cues as well as a small HUD in the lower right corner to show you real-time feedback of your hand.

The Heads Up Display (HUD), shown in the lower right corner of Jungle Jumper, gives the user additional feedback as to their hand position and state. While not necessary for every app, this sort of visual feedback can be very helpful in describing to the user the extent of the Leap Motion interaction zone and what is being detected by the device.

Every time you receive a new skill, Wooden Sen’SeY displays an in-app cue to teach you the move.

Controls As Demos

Live controls in the tutorials provides an experiential approach to teaching interactions by requiring users to perform certain simple tasks in menu selections or discreet tutorial mode. This is truly ‘learning by doing’ and can be a creative way to reinforce gestures that are core to your app. Depending upon the complexity of your application, providing these interactive tutorials or a practice mode might be worthwhile.

HandWAVE provides a comprehensive interactivetutorial.
Cyber Science 3D Motion has an interactivetutorial that teaches you how to perform the tasks needed within the app.

Whichever tutorial option you provide in your application, put yourself in the user’s shoes and give them what they need to succeed within your app. As you can see from some of the above examples, additionally including some indication as to the best position of the user’s hands in relation to the Leap Motion Controller (this may differ depending on the application) can be extremely helpful.

Help When and Where You Need It

Lastly, be sure that you enable the user to intuitively access these tutorials and help screens from anywhere within your application. We highly recommend that a tutorial is shown upon the very first entry into the app. Within the app, the tutorials could be accessed via an explicit and persistent “Help” or “?” icon or via the main menu, if applicable.

No matter how simple your app may be, a little help can go a long way. Set your users up to get the most out of your app and they will become your biggest fans.