<aside> 💡 The button is a common type of user interface element in any graphical operating system. Buttons usually have text labels or icons, and users can perform the corresponding actions by pressing them.

</aside>

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

Design

Unlike buttons in traditional 2D interfaces, the buttons in Project Touch are designed for direct manipulation (as opposed to using intermediaries like mouse cursor or laser pointers). They should mimic buttons in the physical world both visually and functionally. To ensure a good experience with buttons in direct manipulation, the following points need to be addressed:

• When using controllers, users should be able to touch the buttons directly with controller gestures rather than relying on laser pointers. This approach keeps it coherent with the rest of the system. This will also help when transitioning to full hand-tracking in the future.
• Buttons should provide linear animation feedback for all input gestures, regardless of whether the user is pressing the button with a fingertip, a palm, or a fist.
• Given the limited tracking precision of current virtual reality hardware, buttons should be relatively large to increase usability.
• Visually, the button should have at least two visual layers:
  • The top layer moves so it follows the press action;
  • The bottom layer remains still so that it marks the endpoint of the animation.
• Buttons should have a rounded shape. Overly sharp visuals can reduce the appeal of the button to a user.

Use Case

Most interactions involving abstract concepts can be expressed using buttons.

• To favorite/like/save an item
• To add/delete/like a friend
• To open a submenu
• To turn on/off certain specific settings

Heads up!

Do not: Use only a single visual layer to represent a button, as this may give users the mistaken impression that the button can be pressed down indefinitely.

Do: Use at least two visual layers to represent a button, with the surface layer changing to follow the user's pressing action.