Updated: June 13, 2021

AR Cards

Intro

The AR card displays key information of a marker annotation with a thumbnail image/ icon/ app of an object. Users can tap on it to navigate to the full-screen view of the card and users can also swipe between the cards.

Structure

AR Cards may include variations of the following elements. The content should match with the information connected to the marker in the screen view. AR cards have a focused and unselected state.

A. Image Preview

The image preview can display a thumbnail of an image, video, document, barcode, or an app logo with the icon displayed on the marker.

B. Content Area

The content area can display the title and subtitle.

C. Action Button

The action button is optional. The action button will be hidden in the unselected state.

Behavior & Interaction

The AR card has two interactions: swipe to view the card in a focused state and tapping the card for full view.

Swiping Cards

To view a card in the focused state, the user can swipe the cards horizontally. When the user is swiping cards, the marker pulse will animate with a delay after the card is in the focused state to give enough time to the user to navigate the marker on the screen.

Tap on card

When tapped on the focused card, the card will expand to a full view with detailed information displayed or navigate to the app linked to it.

Variations

The content within the AR card is designed to be flexible so as to accommodate different use cases. The content you choose to include will depend on the needs of your specific user and the requirements.