Updated: July 28, 2017

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. As the object header provides the first glimpse of the object on the screen, the information it contains should be clear and concise.

Usage

Do’s

Use the object header within the object floorplan.

Don’ts

Do not include information in the header that is excessively long or overly detailed.

 

Structure

The object header is comprised of several pieces of information about the object:

An image helps the user to visually identify the object.

The object name and title provide key information and are always required.

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

Analytics/data visualization allow the user to quickly understand relevant trend or status information.

A status label displays the current status of the object.

Variations

The object header supports various layout options based on the kinds of information it will contain.

For instance, when there are no analytics to display, a description paragraph may instead be included. The paragraph should not exceed a maximum of four lines of text, and should only be used when it provides the user with valuable information.

Please refer to the resources section for a chart that illustrates all possible variations of the object header.

 

In the absence of both analytics and a description section, the additional information section may be moved to the right.

 

As noted above, if there are no analytics, a description paragraph can instead be included. The paragraph should not exceed a maximum of four lines of text, and should only be used when it provides the user with valuable information.

 

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 further to the right within the header.

 

Guidelines

Object Name and Title

The title should be concise, though it has the flexibility to wrap to two lines if needed.

The subtitle complements the title and may be used for secondary information (e.g., 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 footnote contains two short strings of text providing important information that can be consumed quickly (e.g., location, date, and time details).

 

Compact

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

 

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

 

Resources

Object Header Variations Chart

Object Floorplan