Designing the experience UI components

UI components

Design UI components for immersive experiences that aim to visually blend real & virtual spaces.

Create a visually clean UI that lends itself seamlessly to the immersive experience you’re building.

Gallery Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Try to avoid flows that take the user back and forth between scene and screen.

This can be distracting and reduce a feeling of presence. Consider reducing the number of UI elements on-screen, or placing these controls out in the scene itself.

Delete & trash Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Leverage users’ familiarity with dragging an item to a trash icon in order to delete it.

To delete an item, drag to trash

Reset Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Allow for easy resets

Allow the ability to reset the experience.

This includes:

  • When the system is unresponsive
  • If the experience is based on progressive task completion (e.g. games)

Permissions Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Be clear about why the app needs certain permissions.

Surface permissions only when it’s necessary for users to move forward with the experience. Otherwise, users may be hesitant to give access.

Be clear about the benefits & relevance of each permission. For instance, tell the user why you need access to their device’s camera or location.

Errors Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Help users easily recover from errors.

Using a combination of visual cues, animation, and text communicates a clear path to resolution for both system-related and user-initiated errors.

Communicate what went wrong, but avoid blaming the user. Focus on getting the user to take the right action.

Sample errors can include:

  • A dark environment: Too dark to scan. Try turning on the lights or moving to a well-lit area.
  • User moving device too fast: Device moving too fast. Try moving it more slowly.
  • User blocking the sensor or camera: Looks like the sensor is blocked. Try moving your finger or adjusting the device’s position.