Global Header

The Global Header contains creation tools, help, messages, and settings utility menus that apply to all areas of the application. Items in the Global Header that require the user’s attention may be highlighted by a notification Badge. Within the global header, the Create Menu allows the user to create and access important application-related items, while the utility items on the right are for utility; settings, help, and inbox.

Web

When to Use

The global header should be used on every standard page (besides Trowsers and pop-up windows).

Appearance & Behavior

Header-Dash

The global header is anchored to the top of the page at all times. When a user scrolls, the global header remains anchored to the top of the browser viewport, in a “sticky” state. The global transaction flyout buttons are grouped and centered, and the utility flyout buttons are grouped and aligned right.

Flyouts

Flyouts use a slide transition upon opening; they slide down from the header and slide over the page contents. They can be closed by clicking on the selected Button within the header or anywhere outside the flyout. Upon closing, they slide up into the header. Once the flyouts are open, the background is dimmed with 60% of #000.

Global Transaction Flyouts

The Global Transaction Flyouts are set in the center of the Global Header. Clicking an icon button in the header will open the corresponding flyout. Clicking the icon button again or clicking outside of the flyout will close it.

The first button is Search Transactions, and opens the search flyout. The middle “+” button animates when clicked where the icon rotates to an “x” to close the flyout, and then back to a “+”. By default, the create flyout opens in a minimized “show less” state, unless the user has clicked “show more”, in which case the application should remember that setting. The last button is Recent Transactions, and opens a flyout with a list of recently created or modified transactions.

Utilities Flyouts

Account settings, messages, and help topics are accessed from icon buttons in the right of the Global Header.

Screen Shot 2014-05-19 at 3.59.41 PM

iOS

When to Use

Headers (navigation bars) generally display on all screens, just below the status bar.
Use to enable navigation among different views and—if appropriate—to provide a control that manages the items in a view. Learn more in the apple HIG.

Appearance & Behavior

  • The title of the current can display in the navigation bar, however if it seems redundant, you can leave the title empty.
  • When navigating to a new level in a hierarchy, two things should happen:
    • The title should change to the new level’s title, if appropriate.
    • A back button should appear in the left end of the bar, and it should be labeled with the previous level’s title.
Header1_ios

 

Header with a back button

Header with a back button

Android

When to Use

The action bar is a dedicated piece of real estate at the top of each screen that is generally persistent throughout the app.

Learn more about the action bar, in the Android guidelines.

Appearance & Behavior

droid_action
  • Created by
  • Last modified June 2, 2015 by Dexx Dorris
© Intuit 2016 | Terms of use