Updated: January 25, 2022

AR Markers

Intro

AR Markers represent an object in the world view. After an AR marker is selected an AR Card appears at the bottom that displays relevant information about that marker.

Unselected AR markers (left) and a selected AR marker with AR card (right)
Unselected AR markers (left) and a selected AR marker with AR card (right)

Anatomy

AR Markers appear in the world view and consist of 3 elements:

A: Outer Circle

B: Inner Circle

C: Icon

The marker will display an icon depending on the type of content.

Default AR marker (left) and selected AR marker (right)
Default AR marker (left) and selected AR marker (right)

Behavior and Interaction

AR Markers have a focused (selected) and unselected state. The connector line appears when the user interacts with the marker or AR cards in the screen view.

A: Default State

After a facility or an object is scanned all relevant AR Markers will appear in default state on the screen in the world view.

B: Pulse State

The pulse animation appears when the user interacts with the AR cards or the markers in the screen view.

C: Selected State

When the marker is selected, it will appear bigger and change its color.

Default state (left), pulse state (middle) and selected state (right)
Default state (left), pulse state (middle) and selected state (right)

The onscreen AR Marker interaction displays pulse animation, line connecter, and change in marker state.

Tap on Marker

When the user taps on a marker, the pulse will animate and the connector line will appear as soon as the user interacts with the marker and the default marker will change to the selected state.

Tapping a marker changes its state to selected state
Tapping a marker changes its state to selected state

Variations

Depending on the object in the world view, the marker will display an icon relevant to the object. The user can input various kinds of content such as a document, information, video or link to an application, webpage or barcode. The AR marker uses SF Symbols.

Examples of different AR marker icons
Examples of different AR marker icons

Resources

Related Component / Pattern: AR Cards, AR Annotations