Updated: January 20, 2022

Object Header

Intro

The object header provides a quick view of the most important or most frequently-used information about one instance of an object. It connects to the iOS status bar and the navigation bar via a seamless background, and is visually separated from the content area below. Because the object header provides the first glimpse of the object on the screen, the information it contains should be clear and concise.

Object header on iPhone (left) and on iPad (right)
Object header on iPhone (left) and on iPad (right)

 

Usage

Main Content

The title should be concise, but it can wrap onto multiple lines if needed.

The subtitle complements the title and may be used for secondary information (for example, a product number).

 

Additional Information

Tags are usually system-generated and may be used to indicate categories, types, or statuses. They use a different visual representation than plain text, and function as independent bits of information. There can be a maximum of three tags displayed in the header; if more than three are required, the information should instead be placed in the content area.

The footnotes contain two short strings of text providing important information (such as location, date, and time details) that can be consumed quickly.

Description

Description is a short paragraph containing details about the object. It should only be used when it provides the user with valuable information.

 

Status

The status section may include up to two status labels. An icon indicator may be used to compliment a single status label.

Object header in regular width
Object header in regular width

 

Aligning Content in Object Cell and Object Header

When the user navigates from an object cell to an object floorplan, it will be helpful if the content remains consistent. A general recommendation is to align the title, subtitle, footnote, description, and status in both views.

Object cell (top) and object header (bottom)
Object cell (top) and object header (bottom)

 

Anatomy

The object header is comprised of several pieces of information about the object. The title is the only required piece in the object header.

A. Image

An image helps the user visually identify the object.

B. Main Content

The main content provides key information about the object.

C. Additional Information

Additional information includes tags and two short strings of relevant text.

D. Header Chart

A chart allows the user to quickly understand relevant trend or status information. See next section for more guidance.

E. Description

A description provides the user with more details about the object.

F. Status

A status section displays the current status of the object.

 

Object header anatomy
Object header anatomy

 

Adaptive Design

Given the limited horizontal space in compact width, the chart and description sections may be placed on separate pages and a page control added to allow the user to navigate between pages by swiping.

Object header page 1 (left), page 2 (middle), and page 3 (right)
Object header page 1 (left), page 2 (middle), and page 3 (right)

 

Similar to regular width, if there is no additional information section, a description paragraph can instead be included. This section again should not be too detailed, and should be used only when it provides the user with valuable information.

Object header page 1 (left) and page 2 (right)
Object header page 1 (left) and page 2 (right)

 

Variations

The object header supports various layout options based on the kinds of information it will contain. In the absence of both a chart and a description section, the additional information section may be moved to the right.

Object header with image thumbnail (top) and without image thumbnail (bottom)
Object header with image thumbnail (top) and without image thumbnail (bottom)

 

A chart and a description may both be included in the absence of the additional information section.

Object header with a description and a line chart (top) and with a description and a progress chart (bottom)
Object header with a description and a line chart (top) and with a description and a progress chart (bottom)

Chart Header

The header chart displays simple chart data inside an object header. It gives at-a-glance information about the object, and it is supported in both compact and regular widths. For additional guidance, see Chart Header

Chart header default (top left), without trend and KPI (top right), without graph (bottom left), and with a long KPI (bottom right)
Chart header default (top left), without trend and KPI (top right), without graph (bottom left), and with a long KPI (bottom right)

 

If the object name and title are the only content present in the object header (apart from the image and attribute sections), they may extend farther to the right within the header.

Object header with long title (top) and without thumbnail and additional information section (bottom)
Object header with long title (top) and without thumbnail and additional information section (bottom)

 

Resources

Related Components: Object Details, Chart Header

Development: FUIObjectHeader

SAP Fiori for Android: Object Header