Updated: September 25, 2017

Profile Header

Intro

The profile header helps the user recognize and learn more about a person. It may also allow the user to quickly contact that person without needing to drill down into his/her contact details.

 

Usage

Do’s

Use the profile header within the object floorplan or on a user profile screen.

Don’ts

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

 

Structure

In regular width, the profile header may include an image, the profile name and title, a description, and two or more action icons. Including an image is not required but is highly recommended, as this helps the user recognize the person in question.

 

Guidelines

Action icons

When including action items, there can be minimum of 2 and a maximum of 5, though having this many is not recommended. Only present icons that are frequently-used in the current context.

 

Enabled/disabled actions

Apply a gray color to the action icon when it is disabled. The profile name will be in tint color if it is tappable.

 

Action Button

As the name implies, an action button allows the user to perform an action on the current object. Common actions include adding an object to a list, starting an event with an object, or otherwise marking an object.

When an action button is tapped, it should adopt an active state; when it is tapped again, it should return to its inactive state. Button text should clearly communicate to the user what will happen when the button is tapped.

Please note that icons are also a recommended way to provide actions within the header.

 

Compact

In compact width, content in the profile header is always center-aligned.

 

Given the limited space in compact width, when a description is present, action icons will not be displayed. As a designer, it is important that you decide whether the main purpose of this screen is to provide the user with a means to contact the person in question or rather to learn more about that person.

 

The description section may include two short strings of text or a brief paragraph that displays two lines. If the paragraph is too long to be displayed on the header, consider moving it to the top of the content section.

 

In compact width, action buttons should be center-aligned with everything else in the header. Contact icons and the description section should not be included when an action button is present.

 

Resources