<aside> 💡 The knob is the core element of Project Touch. Through a knob, users can use controller gestures or hands to directly manipulate an object.

</aside>

To read this documentation in dark mode, press ctrl+shift+L [Win] or cmd+shift+L [Mac]

Intro

(Click to play) The fast access toolbar in Vast which attached to a player’s wrist. Using another hand to pull the knob and open the UI.

In Project Touch, the knob is a component that enables direct manipulation. It has a seemingly simple form which comes with several advantages:

The knob provides feedback to the player's instinctive "grabbing" action. Based on this instinct, we can design more extensive use cases around this action.
As its name suggests, the knob is a metaphor for the knobs of drawers and doors in the real world, which has been proven to have great affordance.
Visually, placing knobs in different locations marks which objects are interactive, distinguishing them from non-interactive objects. This can set up reasonable expectations for the player.
Knobs can also point in the direction where the interaction will be going.
After introducing the "grab/push/pull" action, we can use this idea to plan how to organize(fold/unfold) information, thereby establishing an information architecture within the system.
The menu folded behind the knob is usually within the player's arm span when opened, allowing the player to continue directly manipulating the UI within a comfortable range.

Untitled

Design

The design of the knob in Project Touch is inspired by door knobs in the real world. Players intuitively grab, push, and pull knobs without needing instruction. In virtual reality, we should emulate these natural habits through design:

The knob's shape should be as smooth as possible rather than sharp (in fact, all directly interactive components in Project Touch should have a smooth shape). With this in mind, a small sphere is the simplest form of a knob.
When static, the knob should have a highly visible color (bright yellow or blue) to enhance visibility.
- Bright yellow: #FFE17C; bright blue: #16FDEE
On this basis, simple but meaningful visual forms should be designed for different states of the knob, including but not limited to:
- Hovering - the display when the player's hand is hovering near the knob. For example, the color can change when the hand is hovering near the knob.
- Grabbing - the display when the player grasps the knob. For example, an arrow indicating the direction of movement can be added when grasped.
Like doors and drawers in the physical world, players do not necessarily complete a full push/pull action after grasping the knob. We need to introduce inertia to the knob and the interface or object it controls to assist in completing the expected action.
The interface/object controlled by the knob needs a linear animation that plays synchronously with the knob's stretching to provide the player with maximum visual feedback. When using the handle, the player will pay more attention to the changes brought about by the knob rather than the knob itself.

How to use a knob

Project Touch recommends using handles in the following three scenarios:

Untitled

As UI Components

When the knob is located outside the main interface, it can perform the following functions:

When there is one knob on top of the interface, grabbing and pulling to expand or collapse the interface.
Where there is one knob at the bottom of the interface, grabbing and pulling to reposition the interface.