UI Panels
Table of contents
Try these menus in your own projects with Ultraleap’s Unity toolkit:
Basic UI – Interaction Engine Example Scene
Dynamic UI – Interaction Engine Example Scene
UI Panels in XR are comparable to windows on desktop computers – they behave in a similar way and contain many of the same types of content and controls. However, they can be considerably more versatile and interactive than their 2D counterparts. For example, within a panel, users can try handling a 3D product before they decide to purchase it.
Panels can contain many different types of controls, so it is important not to overload or crowd them, and don’t put controls too close to one another. Ensure that interactive elements are large enough to select easily and have sufficient space between them to prevent users from accidentally selecting the wrong object.
Think about scaling – a target intended for one–finger interaction such as a button should be no smaller than 2cm. This makes sure the user can accurately hit the target without accidentally triggering targets next to it. A component controlled with a two–finger pinch, such as a slider, requires slightly larger scaling and spacing.
UI panels often open new objects and panels in the environment. To prevent occlusion issues, avoid spawning these items in the dead centre of field of view, or directly behind users’ hands – instead offset the user’s gaze slightly to one side. This will ensure the best possible tracking.
UI panels should be typically positioned around 60cm away. This should ensure users can comfortably reach without having to fully outstretch their arms.
Curved panels
In immersive 3D curved UI panels mean users can comfortably reach every control. Panels can be large without becoming cumbersome.
Normally difficult to achieve, Ultraleap’s Unity modules provide a toolkit to quickly build curved UI panels and controls suitable for XR.
Try this example yourself:
Opening panels
Push a virtually wearable menu button
Having opened a wearable menu users simply push a button in that menu to open a panel.
Try this example yourself:
Drag from virtually wearable menu
Having opened a wearable menu, users can pinch menu items and move them, before releasing to activate features at a chosen spot in the environment.
Rather than appearing as buttons, these draggable items should clearly look like three–dimensional objects that can be “picked up”. They should also be the appropriate size for two fingers to pinch.
This method encourages the user to arrange their XR workspace to suit their specific needs and emphasises the flexibility virtual menus can provide.
Virtual pockets
Users can grab objects from virtual “pockets”. These can be locked in space or on the user’s waist like a utility belt.
Once grabbed they can be placed in space or thrown, bringing up a UI panel at that position.
Virtual objects to be grabbed or pinched should be positioned around 50cm away by default for comfortable reach and grip.
Closing panels
Drag back into menu
To close an open panel users can grab it and move it back towards the menu it was originally selected from.
The panel shrinks and morphs back into the menu to fill the gap left when it was opened.
Close button
Users can also push a “close” button situated on the panel – for example in the top right corner.
Make sure this button is clearly visible and situated a safe distance away from other controls.
Drag into a close zone
Upon grabbing a panel to reposition it, a close or ”trash” zone can appear in the environment for the user to drag and drop the panel into.
Ensure the drop zone is easily reachable and situated away from the main interaction area.
Repositioning panels
There are two main ways of moving UI panels in 3D space – grabbing an anchor object, and grabbing the panel itself. When deciding which to use consider the XR environment, context, and content of the panels.
Grabbing an anchor object
Each panel features an anchor object that serves as a small “handle” below the panel.
Users move the panel by grabbing the anchor object and releasing to reposition it.
The anchor object should be spherical, appear “grabbable” and be large enough to pick up easily (see affordances).
Anchor objects make moving panels intuitive and easy. They also keep the reposition interaction separate from the other interactions. This significantly reduces the likelihood of users accidentally moving the panel or inadvertently using other controls.
Try these examples yourself:
Grabbing the panel itself
Users can move a panel by grabbing anywhere on the main surface, then moving the hand and releasing the pose to reposition it.
This method doesn’t use an anchor object. This reduces visual clutter, particularly when dealing with multiple panels in the same workspace.
However this also means this interaction is not obvious to the user. This interaction therefore needs to be introduced with a tutorial. There should also be a visual indicator that activates as the hand approaches. This could be a change in the visual state of the panel such as an outline or colour change.
Users may also grab the panel unintentionally when interacting with other elements if some of those elements are pinch /grab controlled. It therefore requires careful consideration of the interactions on the panel and where they should happen.
Resizing panels
Users can resize a panel by pinching or grabbing with both hands anywhere on its surface.
They move both hands apart to increase panel size, and together to decrease. Releasing the pinch or grab will set the new size.
As two hands approach, the panel should show clear visual indicators, such as arrows at the corners, to reinforce that it can be resized.
Two–handed actions like this will not be obvious to new users and should be introduced with a tutorial.
Consider adding dedicated anchor objects to the panel corners for this purpose. This will minimise the chances of accidentally interacting with controls on the panel.