The object header is a quick view of the more relevant and important content of a particular object. It’s based on the prominent app bar from Material Design where the app bar is extended to accommodate more content. The information present in the object header depends on the type of content, and each content has a specific placement within the header.

Usage

Anatomy

The content that goes into the object header are separated by type and are arranged in a specific order.

Mobile, Tablet Portrait and Landscape

A. Title
A title for the object page should be short so that the text does not get truncated within the app bar. It should encompass what is being outlined within the object page.

B. Image (optional)
A 40dp x 40dp image that represents the object for the user to easily identify.

C. Name
This is different from the title in which it can be longer and more descriptive. This should be descriptive so that the user knows exactly what this object is.

D. Attribute (optional)
Shows pertinent information about the object, for example, can shows the priority or urgency of the object’s status.

E. Subheading (optional)
Subheading may provide more context for the object with information such as ID, type, etc.

F. Tags (optional)
Tags are identifiers of the categories for the object.

G. Footnotes (optional)
Footnotes include text that may list secondary details about the object, such as location, due date, etc.. If there are no footernotes and the description (H) is a short text, it also can be placed here.

H. Description (optional)
Description blocks allow for longer text which can inform the user in more detail about this specific object.

I. KPI (optional)
Shows relevant trends or status for that object.

J. Chart (optional)
Shows a visualisation of different charts types for that object.

K. Pagination
Pagination only exists on mobile and tablet on portrait mode since they support slides of content. If the content must use 2 or more slides, then the pagination uses dots to indicate how many slides there are and which slide is being displayed. It is non-interactive and it is solely an indicator.

Priority Blocks on Tablet Landscape only

There are three priority areas for tablet landscape layout, in which attribute takes highest priority, description/KPI takes second priority, and the object name, additional information, and image are third.

Variations

The layout for object header varies based on what content is being included and what device in what orientation the user is using.

Mobile

Due to the limited space on a smaller device, the object header contents can be separated into two or more slides. All of the slides of a specific object header must match the height of the tallest slide to keep the UX consistent and prevent content from moving up and down.

A. Main Information

B. Description

C. KPI

D. Chart

Tablet

There are two layouts for tablet depending on device orientation.

Tablet Portrait

Object headers on portrait tablet behaves similarly to the mobile layout in that the contents is divided into slides.

A. Main Information

B. Description

C. KPI

D. Chart

Tablet Landscape

For tablet on landscape, there are no slides and all of the content are assembled on the same object header.

A. Main Information

B. Main Information + Description

C. Main Information + KPI

D. Main Information + Chart

Behavior and Interaction

Scrolling

Due to the nature of the prominent app bar, if the user scrolls down the screen, the object header gets condensed to the app bar in which it only shows the navigation icon, object title, and any other button in the app bar. If the user scrolls back up, then the full object header slides out again. This behavior occurs on all devices.

Slide Transition

For object headers on mobile and tablet portrait mode, content may be divided into slides due to content types and content length. When there are multiple slides, there is a pagination indicator at the bottom of the object header that changes as the user swipes to different slides.

Push Navigation

The header chart can be read-only or it can allow for navigation to a full screen chart. When navigation is enabled, the chart title should be tinted and the entire chart container will be tappable.

Specifications

Object Header with Main Information

Object Header with Description

Object Header with KPI

Object Header with Chart

Resources

Development: Object Header

SAP Fiori iOS: Object Header