User Interface Guidelines

UI Guidelines
Version 1.0

Meta UI Components
Modular Elements for the future of AR
PLEASE NOTE: This is an early draft of a rapidly evolving system. Please expect changes for
future releases. pdf Version here.

Overview
Purpose
The purpose of the Meta UI Components is to provide developers with basic building blocks as a starting point. Our approach for now focuses on simple, modular elements that can be configured by developers and users. Our goal is to develop an iterative framework for a platform that will enable a new class of AR experience.
We have provided a set of Unity components (see attached .unitypackage file) for developers. Below is a list of some of the key value propositions provided by the Meta UI Components.

AR within Arms Reach

  • In a limitless 360 degree environment, the Meta Plate provides a logical base for assets, messaging, and interface elements.
  • The Meta Plate is designed to fit within the ergonomic bounds of a normal office environment.
  • The base dimensions (68cm x 38cm) are intended to be a reasonable amount of space that can be kept clear by a user within their personal space.

Virtual Objects You Can Grasp

  • In Meta, virtual objects behave the same way they do in the real world, but at digital scale.
  • Content and tools can be arranged in groups inside of Pods or Pads that can snap to each other and to the Meta Plate.
  • The Meta UI Components provide elements and behaviors out of the box.

Anchored with Physicality

  • Meta provides a platform for physically-based AR experiences.
  • Virtual Objects that unpack out of containers can be brought into the user’s personal space for engaging 360 degree experiences.
  • In Meta, physical behaviors are designed to help communicate a sense of physicality that is both familiar and engaging.

Component: Virtual Objects

Seatable Object Elements

GameObjects that have been designated as Seatable will automatically react to elements like the Pod and the Pad. When they get close to a Pod or a Pad, they will shrink and become wrapped in a container that is optimized for Grab Interaction. The following are the elements of Seatable objects.

  • Content: Base element that will contain the Seatable Component.
  • Affordance Wrapper: A transparent, glass-like spherical shape that wraps around a vir-tual object to communicate the physical affordance of the grab interaction.
  • Label: Text string that appears toward the bottom of the object.
  • Seat: Physical base for the object to rest on in either a Pod or Pad. The keyhole affor-dance of the base echos the shape of the Affordance Wrapper, which helps communi-cate that it belongs to the Seatable item.

Guidelines & Considerations

  • Don’t make objects smaller than 7 cm in diameter for single hand Grab Interactions and 20 cm for Two-Handed Grab Interactions.
  • Be careful to not use animations that might make it hard for users to grab the object.
  • Text label will truncate after 35 Characters.

Technical Information for Unity Developers

  • Add the Seatable component to the GameObject that you want to be able to sit on ei-ther on a Pod or a Pad.
  • The GameObject that the Seatable component is added to must also be configured with a Grab Interaction script – following the Grab Interaction guidelines in the Meta SDK. The Seatable component and the Grab Interaction component must be on the same GameObject – they cannot be on different objects in the same hierarchy.
  • The “Seatable Object” field of the Seatable component must be set to point to the root of the game object that will sit in a container. Without setting this, the container may only fit a subset of your object. Most often, this target will be the same as the target transform for the grab interaction component.
  • Currently, a Seatable object cannot be moved directly from one container to another. It must be removed from its first container, released, then grabbed again and placed in the second container.
  • Content of the text label is set through the “SetTextForObject” method in the PodShelf API.

Component: Meta Pod

Pod Elements

  • Handle: Allows users to move and rearrange Pods.
  • Branding: We recommend developers add branding to this area.
  • Top Snap Point: These notches are where Pods can snap together. Top Snap Points con-nect to Bottom Snap Points. This allows users to form stacks.
  • Content: The Pod is a container for content. By default, Pods can hold 4 items.
  • Pod Container: In order to physically work as a container, Pods appear as volumetric objects with a physical affordance.
  • Bottom Snap Point: See “Top Snap Point” above.

Behaviors

1  – Pods snap together from the top down to form stacks.

2 – When moving a Pod stack, the lowest Pod will move all of the Pods above it in the stack.

Guidelines & Considerations

  • Pods are an ideal container for models or file contents.
  • Pods are best arranged and stacked behind the Plate because they will occlude the con-tent behind them.
  • Beware of Pods that are stacked so high that they fall out of the headset’s sensor range.

Technical Information for Unity Developers

  • In ‘MetaUIComponents’ >> ‘Prefabs’, you will find the ‘Pod’ prefab.
  • Add it to the scene to use or instantiate it dynamically.
  • For more information on how to use the Pod, see “Using Seatable Objects with Pods or Pads” below.

Component: Meta Pad

Pad Elements

  • Pad Surface: Pads are simple surfaces to place objects.
  • Handle: The handle allows uses to move and rearrange Pads.
  • Content: The Pad is a flat surface for content. By default, one Pad can hold 3 items.
  • Side Snap Point: On both sides of the Pad, these snap points allow Pads to snap to ei-ther the Plate, or to other Pads to form Pad Groups.

Behaviors

1  Pads snap to other Pads via the Side Snap Points.

2  Pads also snap to the left and right side of the Plate via the Side Snap Points.

Guidelines & Considerations

  • Pads are ideal for modal/contextual objects, such as tools that are related to an item on the Plate.
  • Pads are optimized for grabbing objects that are arranged on the X and Z planes to the right or left of the Plate.
  • Make sure there is at least 10 cm of clearance on the Y axis to any real world surfaces, so hand interactions can be tracked properly. Meta hand interactions are less accurate when user’s hands are very close to real world surfaces.

Technical Information for Unity Developers

  • In ‘MetaUIComponents’ >> ‘Prefabs’, you will find the ‘Pad’ prefab.
  • Add it to the scene to use or instantiate it dynamically.
  • For more information on how to use the Pad, see “Using Seatable objects with Pods or Pads” below

Using Seatable Objects with Pods or Pads

Adding a Seatable object to a Pad or Pod in the inspector

Both the Pad and Pod have a “PodShelf” component on their root game object.

Within that component is a shelf object list. The list can contain SeatableObjects, and takes three objects for a Pad or four objects for a Pod.

Drag and drop any Seatable object to a slot in the list to have the object populate in the con-tainer at run time.

Dynamically creating a Pad or Pod

Pads or Pods can be instantiated from their respective prefabs.

After instantiating, access the shelf of a Pod through PodShelf game component.

Make sure to call the PodShelf.Init() function before you attempt to add any Seatable objects to the instantiated container.

Programmatic Access to Pad or Pod

The following API endpoints are exposed to manipulate a container through code:

bool AddObjectToPod(Seatable seatable)

  • Adds a Seatable object to a container, creating a bubble on the container with the ob-ject inside.
  • Returns true if the seating was successful, false if otherwise.

bool RemoveObjectFromPod(Seatable seatable)

  • Will remove an object from a container. This will get rid of the bubble, and also destroy the object it contains.
  • Returns true if the removal was successful, false if otherwise.

bool ClearObjectFromShelf(Seatable objectToClear)

  • A container has an internal representation of the contents of the container’s bubbles. This removes a Seatable object from that representation without destroying it.
  • Returns true if the removal was successful, false if the object was not in the internal representation.

bool AddObjectAtSeatIndex(Seatable objectToAdd, int index)

  • Adds a Seatable object to the container at a particular index. If there is currently a Seat-able object at the index position, the occupying Seatable object will be destroyed.
  • Returns true if the add was successful, false if otherwise.

bool GetPodArray()

  • Returns an array of all the Seatable objects currently seated in the container.

bool SetTextForObject(Seatable seatedObject, String text)

  • Will set the text label for a given seated object, if that object is found within the con-tainer.
  • Returns true if the operation was successful, false if the object could not be found.

Component: Meta Plate

Pad Elements

  • Flat Content: Flat content is displayed directly on the surface of the Plate.
  • Plate Surface: Provides a backdrop for content.
  • Side Snap Point: Allows users to snap Pads to both sides.
  • Handle: The Plate handle is the master handle, and will move the Plate along with any items that are docked onto it.

Guidelines & Considerations

  • Keep content away from handles so that there are not conflicts between different grab interactions.
  • If you are using the flat surface for text content, keep in mind how models and other items might occlude the content.
  • Try to avoid too much text and keep the emphasis on 3D content.
  • In general, make sure font sizes are not too small and think about how text is viewed at different angles.
  • It is best to use a column grid for layout: see the ‘layout’ section below for recommen-dations.

Technical Information for Unity Developers

  • In ‘MetaUIComponents’ > ‘Prefabs’, you will find the ‘Plate’ prefab.
  • Inside the Plate prefab, there are several example layouts deactivated under the LayoutGuides object. Enable each layout in the Inspector window to view it. Ex-amples include a three column text layout, a general typography layout example, side headers, tool tips and more.

Using the Meta Plate

Dimensions

Below are the dimensions for the Meta Plate, the Meta Pod, and the Meta Pad components. The rough dimensions here help provide some basic rationale for the spacing, size, and clear-ance of virtual objects.

TOP VIEW

SIDE VIEW

LAYOUT

 

  • Grab Safety Margin: 5 cm margin to keep handle free of other objects. Also used to keep side snap point elements free from other objects.
  • Optimal Typography Safety: Since text content sits on the Plate, it works better to set text in the front of the layout because it is closer to the user.

6 Column Grid

The proportion of elements in the UI Kit are based on a 6 column grid. You can use the grid to create different layouts to suit your needs.

Layout Sample

Below are some sample layouts that are based on the design guidelines.