Skip to content

button.md

Latest commit

 

History

History
175 lines (125 loc) · 6.78 KB

button.md

File metadata and controls

175 lines (125 loc) · 6.78 KB
title Button
description Learn how to trigger an immediate action with buttons, which is one of mixed reality's foundational components.
author cre8ivepark
ms.author dongpark
ms.date 11/01/2019
ms.topic article
keywords Mixed Reality, Controls, interaction, ui, ux, mixed reality headset, windows mixed reality headset, virtual reality headset, HoloLens, MRTK, Mixed Reality Toolkit, button

Button

Button

A button is one of the most foundational and crucial UI elements in mixed reality. It lets your users trigger immediate actions. Since there is no physical feedback in mixed reality, it is crucial to provide enough visual and audio feedback to increase the user's interaction confidence.

In HoloLens 2 button design, based on many design iterations, prototypings, and user research studies, we integrated multiple visual affordances and audio cues that help the user's depth perception and interaction in empty space.

Visual affordances

[!VIDEO https://www.microsoft.com/en-us/videoplayer/embed/RWJHgW]

:::row::: :::column::: Button with proximity light effect shown
Proximity light
:::column-end::: :::column::: Button selected with focus highlight effect shown
Focus highlight
:::column-end::: :::row-end:::

:::row::: :::column::: Button being pressed with compression cage effect shown
Compressing cage
:::column-end::: :::column::: Button being pressed with trigger pulse effect shown
Pulse on trigger
:::column-end::: :::row-end:::


Audio cues

Proper audio feedback can dramatically improve the user experience. HoloLens 2's button provides audio feedback to communicate the following cues:

  • Contact begins: Play sound when touch begins (near interaction)
  • Contact ends: Play sound on touch end (near interaction)
  • Pinch begins: Play sound on pinch select (far interaction with gaze or rays)
  • Pinch ends: Play sound on pinch release (far interaction with gaze or rays)

:::row::: :::column::: ## Voice commanding
For any buttons in mixed reality, it's important to support alternative interaction options. By default, we recommend that voice commanding be supported for any buttons. In HoloLens 2's button design, we provide a tooltip during the hover state to improve discoverability. :::column-end::: :::column::: Voice input
Image: Tooltip for the voice command :::column-end::: :::row-end:::


Sizing recommendations

To ensure all interactable objects can easily be touched, we recommend making sure the interactable meets a minimum size based on the distance it's placed from the user. The visual angle is often measured in degrees of visual arc. Visual angle is based on the distance between the user's eyes and the object and stays constant, while the physical size of the target may change as the distance from the user changes. To determine the necessary physical size of an object based on the distance from the user, try using a visual angle calculator such as this one.

Below are the recommendations for minimum sizes of interactable content.

Target size for direct hand interaction

Distance Viewing angle Size
45 cm no smaller than 2° 1.6 x 1.6 cm

Target size for direct hand interaction
Target size for direct hand interaction


Target size for buttons

When creating buttons for direct interaction, we recommend a larger minimum size of 3.2 x 3.2 cm to ensure that there's enough space to contain an icon and potentially some text.

Distance Minimum size
45 cm 3.2 x 3.2 cm

Target size for the buttons
Target size for the buttons


Target size for hand ray or gaze interaction

Distance Viewing angle Size
2 m no smaller than 1° 3.5 x 3.5 cm

Target size for hand ray or gaze interaction
Target size for hand ray or gaze interaction


Design guidelines

Avoid transparent backplate

When designing menu UI with buttons, it is recommended to use opaque backplate. Transparent backplates are not recommended for the following reasons:

  • Hard to interact with because it is difficult to understand how deep the button has to be pressed to trigger event
  • Legibility issue on complex physical environment
  • Holograms displayed through the transparent plate can show swimming effect issue when used with Depth LSR stabilization technology.

See Designing content for holographic display for more details on color choices and guidelines for holographic display.

Transparent UI examples Examples of transparent UI backplate


Use shared backplate

For multiple buttons, it is recommended to use shared backplate instead of individual button's backplate.

  • Reduce the visual noise and complexity
  • Clear grouping

Shared backplate examples Examples of shared UI backplate


Button in MRTK (Mixed Reality Toolkit)

MRTK for Unity and MRTK for Unreal provide various types of button prefabs, including HoloLens 2 style buttons. The HoloLens 2 button component contains all visual feedback and interaction details that were introduced in this page. By using it, you can leverage the result from many design iterations and user researches that our designers, developers, researchers had conducted.

Check out the MRTK - Button for more instructions and customized examples.


See also