Updated: November 11, 2020

Version 0.7

Object Header

Intro

The object header is essentially 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 object header uses a visually different theme in order to differentiate the object’s header area and content area. The information present in the object header depends on the type of content, and each content has a specific placement within the header.

Usage

Do’s

Use the object header with short and concise information that is crucial in showing content quickly.

Don’ts

Do not put detailed or long information in the object header as that belongs in the content area under the header.

Structure

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

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. This can be up to three lines of text.

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. 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.

Mobile

Due to the limited space on a smaller device, the object header contents can be separated into two or more slides if they do not fit in one slide. 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.

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.

Tablet – Landscape

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

Priority Blocks (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

With KPI & Description, No Additional Information

If there is a KPI, it must go on a separate slide. If there is a description but no additional information, then the description may exist in the same slide with name and image.

No Attribute

If there is no attribute, then the object name and additional information may extend to the keyline on the right side.

Chart Header

If there is a chart header, additional content such as an object image, title, description, and status must be placed on a separate slide.

Tablet – Portrait

With KPI & Description, No Additional Information

It follows the same logic as mobile in which the KPI must go on a separate slide and description can only be on the same slide as name and image if there is no additional information.

No Attribute

Similarly to mobile, if there is no attribute, then the object name and additional information may extend to the keyline on the right side.

Chart Header

On portrait tablet, the chart header width increases but follows the same logic as mobile in which the chart must go on a separate slide from the other content types.

Tablet – Landscape

With KPI & Description, No Additional Information

A KPI and description may exist side by side if there is no additional information.

No KPI & No Description

If there are no KPI and description, then the additional information may be moved to priority block 2.

Chart Header

On tablet landscape, the chart header may be placed side by side with other content types.

Mobile & Tablet

No Image

If there is no image, the layout does not change as the alignment with the keylines must be preserved.

Behavior

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.

Specs