Over the past two months, I’ve been impressed with the variety and creativity of Leap Motion-enabled applications we’re seeing in Airspace, as well as the responses we’ve received from our users. We’ve been listening and one thing our users want more of is – wait for it – consistency! Especially when it comes to application menu systems.
Menus may be the last part of your app experience that you want to think about, but it should be the first. It’s going to be the first thing that a user will see – if they don’t have a good user experience right away, they may not go deeper into your app. The menu should set the tone for the rest of the experience.
The following are a few best practices to keep in mind as you begin to design and develop your app experience.
Menu Design and Layout
However you organize your menu to accommodate your experience and artwork, always keep the usability, legibility, and simplicity of interaction in mind. Be sure to space the buttons appropriately so that it’s easy for a user to select and tap a particular button without accidentally mis-tapping another.
In this example menu you can see a number of best practices at work.
- Buttons are large, well-organized, and include a clear highlight/depressed state.
- Buttons use high-contrast colors and the text/font is very legible.
- The Exit button is easily accessible and clearly indicated
- Required gestures are displayed using easy-to-read iconography. The recommended gesture for menus is the Leap Motion Touch-Zone API, or “poke.”
Proximity-Based Highlighting
Another way of simplifying the menu experience for your users is to provide a proximity-based highlighting scheme. This highlights the closest item to the user’s cursor, without having to actually be over it. In the example below, the five possible actions are outlined to show how this might work.
The user’s cursor is in the upper left quadrant, so therefore the Play button is lit. Performing a tap gesture would activate the Play button. Anticipating what the user might want in these contexts can save time and eliminate frustration.
Menu Access and Exit
With this in mind, accessing these menus as well as exiting your application should be handled in the same manner – simple and foolproof.
- For most games and applications, removing your hands from the field of view should pause the interaction and display a “Continue, Main Menu, Quit” dialog.
- Providing an explicit “Settings” or “Menu” button is another option.
- There should be an explicit “Exit” or “Quit” button.
- The Escape key should exit the app (on Mac and Windows).
- The Command-Q (Mac) or Alt-F4 (Window) should also exit.
- You may also want to make your menus accessible via mouse.
Above: The first-person shooter, Dead Motion: Prologue, displays this simple menu when a user removes their hands from the field of view.
Feedback, Feedback, Feedback
For any selection approach you utilize, giving users proper cues and feedback is integral to ensuring they feel in complete control. It should be immediately clear which elements are interactive – and it never hurts to give users unobtrusive graphical or textual cues, e.g. a simple illustration and “Tap to select an article.”
Once interacting with the element, it should respond fluidly with appropriate visual and auditory feedback. Buttons should be highlighted when hovered over, and respond with a “click” and indent as they are depressed; sliders should move freely; etc. The more information you can give to help orient the user and signal their selections, the easier it will be for them to complete each task.
Above: Frog Dissection uses large buttons that highlight and magnify when indicated and the Leap Motion Touch Zone API to handle the button “tap.”
(For more on the implementation of the Touch Zone API, please review this section of our documentation and this excellent blog post from one of our developers.)
I hope that you find these examples and best practices helpful as you create your application user experience. Over the coming weeks, we’ll be posting more best practices on Developer Labs. Let us know what you think, and what you’d like to see next. I’m looking forward to hearing from you and seeing more of your great work.
Jon Altschuler is the Director of Creative Technology at Leap Motion.