The AR card includes variations of the following three elements. The content should match with the information connected to the AR 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 consists of the title and the description. There is a maximum of two lines of content.

C. Action Button (Optional)

A user can view more card details by tapping on the action button. The action button is hidden in the unselected state.

Swipe Cards

To focus on a particular card, the user can swipe the cards horizontally. When a card is in focus, the line guidance will show, and the correlating annotation marker will pulse to allow the user to visually see which card is connected to which marker.

If the AR marker is out of the focused screen view, the line guidance will help the user navigate to where the marker is located

The AR card’s content is designed to be flexible and accommodate different use cases. The content included in the AR card will depend on the needs of specific users and requirements.

Development: ArSceneRepository, navigation_ar_stickers_edit_mode

SAP Fiori for iOS: AR Cards

• Provide a clear and concise message prompting the user to scan the referenced image. For example, utilize an image overlay to preview the image that must be scanned. 
• Use the different states of the scanner to provide feedback on whether the device detected the image. 

Don’t include lengthy messages when prompting the user to scan the referenced image. 

Coaching View

The coaching view overlays on top of the world view, providing users with guidance on how the AR scanner works. 

A. Exit Button
The exit button lets users return to the previous application screen from the AR scanner. 

B. Reference Anchor
The reference anchor shows the user what image to look for and scan. 

C. Instruction Text
The instruction text details steps the user needs to take to complete the AR scanner process and move to the main AR experience. 

D. Primary Button
The primary button prompts users to start scanning. 

Scanning View

E. Scan Guide

The scan guide allows the user to align the camera view target to be scanned and matched. 

F. Marker Pulse

The image anchor shows a preview of what image or object to look for, and users can tap to open the coaching view again. 

Matched Scan View

G. Matched Scan Indicator

The matched scan indicator shows that the camera view target has been scanned and matched.

Scanning to Match

Once the scanning begins, the user will look for the anchor image’s real representation in the world space and align with the scan guides. 

When a user recognizes the image or the object: 

1. The scan guide fades out.
2. The match scan indicator fades in, anchored to said image or object in the world space. 
3. The AR experience loads in, for example, displaying the AR annotations. 

Development: ArSceneRepository, navigation_ar_stickers_edit_mode

SAP Fiori for iOS: AR Scanner

Marker

A. Outer Circle

B. Inner Circle

C. Icon

Depending on the type of content, the marker will display an icon.

 

Connector

D. Connector

The connector joins the marker to the object indicator, with the line length being flexible. If there are many annotated objects near one another, adjust the lines so the markers do not overlap.  

 

Object Indicator

E. Object Indicator

The object indicator is displayed at the annotated object. Tying the object indicator to the marker ensures that the annotation is pointing at the exact annotated area. 

AR markers have a selected and an unselected state. The line guidance appears when the user interacts with the marker or AR cards in the screen view. 

A. Default State

After a user scans a facility on an object, all relevant AR markers will appear in the default state on the world view’s screen. 

B. Pulse State

A pulse animation temporarily appears when a user interacts with the AR card or AR markers.

C. Selected State

The AR marker changes size and color when selected by a user.  

Tap on Marker

When the user taps on a marker, the pulse will animate, and the line guidance appears promptly. The default marker will change to the selected state.

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.

Development: ArSceneRepository, navigation_ar_stickers_edit_mode

SAP Fiori for iOS: AR Markers

• Use the navigation rail for three to seven main destinations.
• Use the navigation rail on tablet and desktop interfaces.
• Represent each destination with an icon and label or icon only.
• Keep the label of destinations short and concise.

• Don’t use the navigation rail if there are fewer than three destinations, instead use tabs.
• Don’t use the navigation rail if there are more than seven destinations, use the navigation drawer instead.
• Don’t use the navigation rail on mobile devices, use the navigation bar or the modal navigation drawer instead.
• Don’t truncate or shrink text
• Avoid text wrapping.

A. Container

The container includes all destinations including icons, labels, active indicator, and optional elements, such as a floating action button (FAB) and profile.

B. Icon

Meaningful icons visualize the app destinations. Use filled icons for the selected destination and unfilled icons for unselected destinations.

C. Label Text (Optional)

The label text provides a short and concise description of the destination.

D. Active Indicator

The active indicator highlights the selected destination.

E. Small Badge (Optional)

The small badge can be used to display a change, for example, a new notification.

F. Large Badge with Value (Optional)

The large badge with value can be used to show a number for status changes.

G. Floating Action Button (Optional)

The floating action button (FAB) can be placed above the navigation destination for the app’s key action.

H. Profile/Avatar/Initials (Optional)

We recommend using an image so that the user can quickly identify the person the profile belongs to. Images of people should always be in a circle. The profile can be top or bottom aligned. If you have a FAB and profile in the navigation rail, you can only use the bottom aligned profile.

When the user taps on a destination or one is focused in the navigation rail, the user is directed to the navigation destination associated with that icon and label. Selected destinations are visually highlighted by the active indicator and the filled icon.

The navigation rail is placed on the edge of the screen. On the left side for left-to-right languages and on the right side for right-to-left languages.

Scrolling

While scrolling vertically and horizontally, the navigation rail remains fixed. If the content scrolls horizontally, the navigation rail increases elevation and lets the content scroll behind it.

Use a navigation rail uses 100% of the screen height. The destinations are aligned as a group on top of the rail. On small screens, replace the navigation rail with a more appropriate component, such as a navigation bar or modal navigation drawer.

A modal navigation drawer can be combined with the navigation rail when there are secondary destinations or actions that don’t belong in the navigation rail. The modal navigation drawer can repeat the navigation destinations from the navigation rail and can include additional navigation destinations, such as secondary destinations or settings. By tapping the menu icon, the user can open and close the modal navigation drawer.

A. Label and Icon

The default navigation rail consists of a label and an icon.

B. Icon Only

For a simplified navigation rail, the labels can be omitted. The icons should always be unambiguous for users.

C. Mixed

The mixed variation is used to emphasize the selected destination with label and icon and the unselected destinations are displayed with icon only. Use this variation only if the icons have a clear meaning to users.

Development: FioriNavigationRail

Material Design: Navigation rail

• Use the navigation drawer for five or more destinations.
• Use the modal navigation drawer primarily on mobile
• Use the standard navigation drawer on larger screens, such as tablets.
• Replace the navigation rail or bar on large screens with the navigation drawer.
• Keep the title of destinations short and concise.

• Don’t use the navigation drawer for fewer than five destinations on mobile devices, use the navigation bar instead.
• Try to avoid wrapping text into more than two lines.
• Don’t truncate or shrink text.

A. Container
The container includes all destinations including icons, labels, active indicator, and an optional profile.

B. Profile/Avatar/Initials (Optional)
We recommend using an image so that the user can quickly identify the person the profile belongs to. Images of people should always be in a circle.

C. Name Text (Optional)
The name must include the first and last name of the person.

D. Details Text (Optional)
The details text is optional and can contain secondary information about the person, such as their job title or location.

E. Headline (Optional)
The headline can be used for a parent heading.

F. Section Header
The section header can be used to group related destinations.

G. Icon (Optional)
Meaningful icons visualize the app destinations. Use filled icons for the selected destinations and unfilled icons for unselected destinations.

H. Active Indicator
The active indicator highlights the selected destination.

I. Label Text
The label text provides a short and concise description of the destination.

J. Badge Value (Optional)
The badge value shows a number for status changes.

K. Divider (Optional)
The divider allows to create related groups of destinations.

L. Scrim (Only Available for Modal Navigation Drawer)
The scrim prevents the interaction with the rest of the app content and is displayed behind the modal navigation drawer.

The navigation drawer is placed on the edge of the screen. On the left side for left-to-right languages and on the right side for right-to-left languages.

When the user taps on a destination, the user is directed to the navigation destination. The selected destination is visually highlighted with the active indicator and a filled icon.

If there is more content than fitting in the drawer, the drawer can be scrolled vertically.

Use the modal navigation drawer on mobile screens, however, also consider the navigation bar if there are fewer than five navigation destinations.

For medium sized screens switch to a collapsible standard navigation drawer or to a navigation rail.

On large screen sizes, use the permanently visible standard navigation drawer.

Use the modal navigation drawer in combination with the navigation rail when there are secondary destinations or actions that don’t belong in the navigation rail. The modal navigation drawer can repeat the navigation destinations from the navigation rail and can include additional navigation destinations, such as secondary destinations or settings. The user can open and close the modal navigation drawer by tapping the menu icon.

Modal Navigation Drawer

The modal navigation drawer has a scrim to prevent the interaction with the app content. It is mainly used on mobile devices. On tablet devices, replace the modal navigation drawer with the standard navigation drawer.

The user can open the modal navigation drawer by tapping the menu icon.

The user can close the modal navigation drawer by selecting a destination, tapping on the scrim, or swiping to the drawer’s anchoring edge. If there is a “Back” button on the navigation bar, the user can also close the drawer with this button.

Standard Navigation Drawer

The standard navigation drawer is located next to the app’s content and can be permanently on screen, which is best used when users frequently have to switch between destinations. If users should focus more on the app content, they can close and open the standard navigation drawer by tapping a menu icon.

Use the standard navigation drawer only on tablet devices. For mobile devices, use the modal navigation drawer instead.

Development: FioriNavigationDrawer

SAP Fiori for iOS: Sidebar

Material Design: Navigation Drawer

AR Scanner

The AR scanner allows users to view annotations in the world view, using their phone to scan an image or an object in a facility. Refer to AR scanner for more details.

A. Coaching View

The user receives explicit instructions to scan the displayed image in the real world. 

B. Scanning View

The user scans the object in the provided space. 

C. Matched Scan View

The scanned verify check mark will appear once the image is scanned.

AR Marker

AR markers typically represent the annotated area of a business object. Each annotation marker consists of a default and a selected state. When a user taps a marker, a line guidance appears with a pulse animation of the marker. Refer to AR marker for more details. 

D. Default Marker

E. Marker Pulse

AR Card

When a user selects a marker, the corresponding card will appear to reveal additional information. The AR card will appear in the screen view. Refer to AR card for more details.  

G. AR Card

The AR annotation flow consists of three interactions. To learn about more interaction in detail, refer to AR scanner, AR marker, and AR card. 

Scanning

After a user receives instructions and successfully scans an image, AR markers will appear in default state on the screen in the world view. 

Markers

When a user taps on a marker or swipes on a card, the marker will display a pulse animation with a line guidance joined to the card.

Card Detail

Once a user selects a marker, the related card will slide in from the left to the focused state, displaying relevant information about the object. A user can tap on the card’s action button to view more details.

Development: ArSceneRepository, navigation_ar_stickers_edit_mode

SAP Fiori for iOS: AR Annotations