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.
(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 .
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!
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.
Very nice – is there any reason to assume these won’t work with a non headmounted Leap?
They should work just fine — they use collision detection, and pointing fingers track well 😀
https://goo.gl/sBcGoa&xyza
https://goo.gl/ejbw1U&qovj
[…] ●関連リンク ・Introducing VR Widgets: Fundamental UI Elements for Oculus + Unity […]
[…] User interface design can be a huge challenge, especially with the possibilities of VR. Today, we’re excited to release three widgets designed for VR. […]
This looks fantastic! Well done, Leap Motion.
https://goo.gl/MAByNm&yfil
How do we know when to stop pushing our hand forward? How can we avoid putting our hand outside of the Leapmotion active zone?
Game controllers have had physical feedback (vibration) for a while. It seems to me that if we’re reaching into 3D space with a headmount on, a certain type of physical feedback would assist us to not need to extend our whole arm.
In other words– is there talk of some type of physical feedback glove? =^]
Good question! We believe that bare-handed tracking will be part of what makes VR both immersive and accessible. For the current generation hardware, we recommend using dynamic visual feedback and smart use of virtual space. This can subtly shape people’s experiences and keep them within the Leap’s tracking range (bearing in mind that most fine-tuned hand interactions IRL aren’t performed with arms fully outstretched).
One way to accomplish this would be placing virtual objects within the tracking range — so that widgets appear to be within two feet of you. Another would be dynamic visual feedback like having the hands begin to fade like ghosts as tracking confidence dips below a certain level.
Beyond these immediate solutions, we’re developing an embeddable hardware prototype, called Dragonfly, which overcomes many of the current peripheral’s limitations.
https://goo.gl/9XuYPU&jpad
https://goo.gl/ciQGh8&umym
[…] developers at Leap Motion have several new VR assets and UI elements for download, for free, on their Developer Portal. The three additions for Unity include a Toggle Button, […]
Looks awesome. I was waiting for something like this to come out. Unfortunately, though, we’re developing in Unreal Engine and are fairly committed to the system. Is there any chance in this being ported over to UE4?
https://goo.gl/Av7L1m&zewu
Any pointers on using these in Unity Free? I’m able to download and open the project in Unity Free, but get license errors. The project builds just fine, which is all good, except the Scroll widget doesn’t work correct and I can’t seem to run the project in unity, it just crashes unity every time. I believe the issue may have been the version of Oculus Unity Integration included in the project when you download, perhaps that required pro? I was interested in making my own free project and import the slider widget, but had glitches with the box surrounding it for collision detection. It kept jumping around.
I do enjoy the free VR assets you provided on your download site, they all work great! Keep up the good work! I also enjoyed playing around with these widgets bugs and all it worked well still if I stuck to building within your project.
P.S. I’m just getting started learning unity, so I might be missing something obvious.
Hey Jonathon, the current version of Scroll requires Unity Pro, but we’re looking to fix that in the next release. What sorts of widgets would you like to see next?
Thanks for letting me know, that makes sense. I loved what you did with the widgets, they work very naturally. I was actually thinking about what was missing from here and although I love the “on/off” toggle, I’d love to see you make it work with a text mesh. I don’t know if it’s possible, but I found it kind of hard to change for a new person to Unity. It is an actual model of text that says on or off, which I wasn’t able to change that easy. I’d love it to be a font or something where we could just pop in our own text. It’s just a thought. They all look amazing though!
I tried to convert it to a text mesh myself and for some reason I was getting a strange bug where the Oculus Warping was messing up the text mesh. I must have been doing something wrong though.
Cool idea! Passing along to our Widgets team 😀
https://goo.gl/UMSdwL&vjpul
https://goo.gl/pNB4tV&cilim
https://goo.gl/fycVq1&sewat
[…] into some exciting projects that we have in the works for the new year. Since launching our first set of test Widgets last month, we’ve continued to build on this early work, and we’ll soon be releasing an expanded set of […]
[…] said Unity developers have all the fun? From building virtual hands in Three.js to browser-based virtual reality, we’re also developing […]
[…] the real and virtual worlds in ways that we can scarcely imagine. Much like our recent work on the core Widgets and Arm HUD, Quick Switch designed to give you a big headstart in creating compelling VR/AR […]
[…] VR. To help developers create truly groundbreaking experiences, we’ve been working on a series of fundamental UI elements designed for VR. Starting with smaller elements like buttons, sliders, and scrollers, we’re now taking these […]
[…] occupy physical volumes and change color when you touch them. I was going to use Leap Motion’s VR Widget Buttons because they feel really great and tactile since they use physics to react to your touch. However I […]
[…] to the third installment of the Widgets Team developer diaries (part 1, part 2). We’re switching up the format of this post a little and giving you the opportunity to […]
[…] first iteration of Widgets we released to developers was cut almost directly from a set of internal interaction design […]
[…] movement. For example, grabbing is a distinct action that can signal intent. For UI design, Widgets should be positioned (and spaced apart) to prevent accidental triggering. Dynamic visual feedback […]
[…] Introducing Widgets: Fundamental UI Elements for Unity […]
[…] Introducing Widgets: Fundamental UI Elements for Unity […]
[…] its current iteration, Jere’s VR animation tool uses our Unity UI widgets. The Slider Widget maps out keyframes and interpolation for the character in the scene from one […]
[…] its current iteration, Jere’s VR animation tool uses our Unity UI widgets. The Slider Widget maps out keyframes and interpolation for the character in the scene from one […]
[…] button clicks using the Leap Motion Unity Widgets, to the humming Plasma Ball, sound has the power to make users feel more confident interacting with […]
[…] with the wide open possibilities of touchless VR. That’s why we’ve built a set of four UI widgets designed for VR and desktop […]
Awesome, this is super cool and helpful.
https://goo.gl/BS9WsQ&ekupo
The slider moves in z space for me on Unity 5, is there any way to stop this from happening
https://goo.gl/LfVrsv&nose
[…] like a package of both new and updated hand models and scripts, a new update to our Leap Motion VR Widgets, and other modules that will make your toolbox more powerful than […]