Intro

AR cards display key information of a marker annotation with a thumbnail image, icon, or app of an object. Users can tap on them to navigate to the full-screen view of the card or swipe between the cards.

AR card with image preview (left) and AR card with icon (right)

AR card with image preview (left) and AR card with icon (right)

Anatomy

AR cards may include variations of the following elements. The content should match 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 is hidden in the unselected state.

AR card anatomy

AR card anatomy

Behavior and Interaction

Change to Focused State

To view a card in the focused state, the user can swipe the cards horizontally. When the user is swiping cards, the marker pulse animates 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.

Horizontal swiping to change focused card

Horizontal swiping to change focused card

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.

Media card (left), AR card without image preview (middle) and media card with background blur (right)

Media card (left), AR card without image preview (middle) and media card with background blur (right)

Resources

SAP Fiori for Android: AR Card

Related Components/Patterns: Cards Overview, AR Markers, AR Annotations