User interface design can be a huge challenge, especially with the wide open possibilities of touchless VR. Today, we’re excited to release a set of three widgets designed for VR and desktop environments. Built in Unity, these three widgets are just the beginning, as we plan to release additional building blocks in the future – so you have the tools you need to build the platform beyond the screen.

In this post, we’ll take a close look at each of the three widgets – toggle button, slider, and scroll – as well as our design inspirations and a sample Unity scene. You can download the Widgets Unity assets from our Examples Gallery.

DOWNLOAD NOW »

(Note: Before you download the Widgets demos, be sure to install the latest Unity package and VR assets. The demos are designed to be used with an Oculus Rift and head-mounted Leap Motion Controller with VR Developer Mount. The Widgets assets themselves can be used on desktop and VR.)

Visual design inspiration

In designing Widgets, we were inspired by Kristoffer Brady’s amazing work on the upcoming independent short SIMIAN – featuring clean lines, sharp colors, and a cool futuristic feel.

As with the UI elements in the video above, our Widgets are comprised of a series of 2D planes that “hover” over each other. These 2D planes (or interface components) compress in z-space when they’re activated.

Toggle Button Widget

Designed to function by itself or in a grid, the Toggle Button Widget has a wide variety of potential uses, including:

• menu items (e.g. toggle subtitles, start game, etc.)
• toggling doors to open/close
• reaction-based games (e.g. drumming)
• in-game controls (e.g. an ignition button or cockpit switch)

This widget consists of three 2D planes: the text, the button surface, and the anchor surface (surrounding layer). When you press the widget, the text and surface both compress in Z-Space until they touch the anchor surface, which activates the button. When the button changes state as a result, it will appear illuminated, and the button text will change.

As with all the widgets that we’re releasing today, the button is highly customizable through the use of different text, Unity materials, and colors. While we’ve designed it to be activated with a single finger, the fact that we used the standard Unity Physics Engine to handle collision detection means that you can expand the size of the button inside the Unity Scene editor – creating larger buttons with ease.

Slider Widget

Like the toggle button, the Slider Widget is intended to be activated by a single finger – just press on the slider bar to engage and change the value associated with the slider. As you can see in the image above, this widget consists of three 2D planes surrounded by colliders that compress when you engage the slider.

As the slider changes value, the indicator lights change state – providing an additional affordance with regard to the current slider position. You can use the slider for:

• menu items (e.g. adjust brightness)
• in-game controls (e.g. airplane accelerator)

Scroll Widget

The third and final widget in today’s release is the Scroll Widget. It’s important to note that this isn’t a “scrollbar” widget – instead of interacting with the scrollbar, you actually interact with the scrollable content itself.

How does this work? By reaching “into” the scrollable content directly with their hand, users can move the content directly. While you can see a scrollbar alongside the content, this is only used to indicate your current position within the content accessible via the Scroll Widget. This might sound like a complex interaction model, but in practice it feels quite natural, and performed very well in our usability testing.

We provide two versions of the Scroll Widget – a Widget for scrolling content vertically and a second Widget for scrolling content horizontally. They can be used for:

• user instructions
• chat logs
• scrolling through pictures

As with the other widgets in this release, the Scroll Widget is made up of multiple 2D planes that compress when you engage the Widget – the most important being the scroll pane. This “hovers” over the Scroll anchor element. When pushed in, it acts like a clutch that engages the scroll functionality.

The Widgets VR Unity scene

To help you get started, we’ve created a VR-based Unity scene, featuring:

• the Button and Slider Widgets placed directly in front of your field of view,
• the vertical Scroll Widget placed to the left and right of your field of view (turn your head left and right to see them)
• the horizontal Scroll Widget placed behind you (turn around to see it – but watch for cable snags!)

To try the scene, make sure that you’ve followed the setup instructions for our Unity core assets and VR assets. You can download Widgets (including the sample scene) with the link below, or see the source code at github.com/leapmotion-examples/LeapMotionWidgets .

DOWNLOAD NOW »

What’s next for Widgets?

These three widgets are just the beginning, as we plan to produce a complete Widget set that lets you develop Leap-enabled UIs without needing to worry about the challenges and complexity of native hand tracking. At the same time, this will ensure a smoother and more intuitive experience across different apps.

We’d really appreciate your feedback on these Widgets, so we’ve created a one-minute survey. How can we improve these three widgets? What would you like to see next? Let us know!

Send your feedback »

Note: An earlier version of this post listed the assets as VR Widgets. In fact, these widgets are great for desktop and VR – so we changed the name.

Andrew Littlefield

Andrew is a Senior Product Manager at Leap Motion. Prior to joining Leap Motion, he founded two companies focused on delivering virtual environment experiences.