global-header

21 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Global header purpose and role

The global header is an essential UI element that provides consistent locations to invoke product-level local navigation as well as pervasive access to system-wide functions. Like the macOS Menu Bar and Windows Start Bar, it contains functionality for the current product and the entire system. Users rely on it to navigate and orient themselves in the UI.

Global header anatomy components

The global header anatomy consists of six components: (1) Main menu icon to open product navigation such as the left panel; (2) Header name preceded by 'IBM' for IBM products, which links to the domain's home page; (3) Header links for product navigation if required, which move to side menu on narrow screens and do not open new tabs or link to other domains; (4) Sub-menus for product navigation that open on click and close by selecting an item, clicking outside, or clicking the menu label; (5) Utilities for global system-level functions accessed via icons that open panels rather than direct navigation; (6) Switcher to navigate between products and systems.

Global vs local UI element persistence

Global UI elements are present everywhere in the UI and contain system and product items, navigation, authentication, and notifications that remain consistent from one context to another. Local navigation exists within a product's context and provides means to accomplish product-level tasks, differing from one product to another.

System vs product level tasks

System-level tasks include navigating main sections of a platform and accessing system utilities like notifications or settings, where users manage attributes applying to the whole system. Product-level tasks include navigating within a product and accessing core functions where users directly interact with the product's main function.

Avoid unbounded content in shell navigation

Do not place content with no upper limit, such as user-created content, within the shell's side navigation because usability drops when the number of items gets too high. Instead, make use of drill-down patterns.

Global and local task examples matrix

Global persistence system tasks: log in, notifications, profile access, dashboard link, setting time, billing information, user permissions, switching products. Global persistence product tasks: hamburger menu to toggle local navigation, show/hide application navigation, document thumbnails, consistent placement of local actions like new file, save, cancel. Local persistence system tasks: detailed system-wide settings like user rights management, notification preferences. Local persistence product tasks: commenting in documents, navigating between peer resources like containers or documents, selecting modalities within product.

Header-only configuration usage

The UI Shell header can be used as standalone navigation when a small number of main sections do not require secondary navigation. The header provides space for site title, navigation links, dropdowns, and header icons. It is globally persistent and always in view as users navigate. This configuration gives more horizontal space for page content but has limited room for navigation items and does not lend itself to sub-menus that need to remain open as they will overlay and interfere with page content.

Header with left panel configuration usage

The left panel allows more navigational items to stack vertically and provides an additional level of hierarchy when paired with header navigation. Compared to header-only navigation, this arrangement allows sub-menus to remain open without overlaying or interfering with page content.

Header link positioning and responsive behavior

System-level links should be right justified in the header and product-level links should be left justified. On narrow screens when there is no room for header links, system links move to the right UI shell panel and product links move to the left UI shell panel.

Sub-menu chevron direction indicates open state

When a sub-menu is open, the chevron should point up. Dropdowns open on click and are closed by either selecting an item, clicking outside the menu area, or clicking on the menu label. Dropdown menu labels serve only to open the dropdown; they cannot be a link to another page.

Utility icons behavior

Utility icons should not be used to directly navigate to an area. Instead, they should open a panel that provides access to other places in the product.

Switcher app listing recommendations

The switcher provides a way for users to navigate between products and systems. Recommended uses include recently used apps, frequently used apps, or all apps attached to the user's account. If the list is a manageable size, include all apps or products available on the system.

Persistent data and UI state best practice

Maintaining or restoring the page state helps users pivot between different areas without losing context or progress. If state or progress will be lost, inform users of this consequence. One technique to maintain state is to use shell menu items to track essential state elements in the URL and return the user to that URL automatically when they return. This capability is not part of the UI Shell component and must be added during implementation.

Sense of place in global header

The global header's role goes beyond linking to different areas. Its global qualities make it an ideal location for users to orient themselves. This applies to location and states—the header can indicate logged-in status, which account is being used, or if the user has entered a different mode.

Breadcrumbs for drill-down navigation

Breadcrumbs let users see where they are in the application hierarchy and provide a way to navigate back up. Users often need to drill up into a new context from an overview page to a particular project, device, or asset view. A drill down can be triggered from any interactive element and generally opens a new page focused on the selected object with a breadcrumb path back to the root level above the title.

User-focused organizational schemes

When planning a product's UI, emphasize the tasks users have to complete rather than business or technical limitations. Forcing users to learn a new mental model increases time to productivity and creates a disjointed experience. A UI may need different schemes for different parts. Create logical groups that align to user goals and improve access to content.

Navigation organization by most recent

Ordering navigation by most recent helps users frequently looking for the last object they used and provides historical context for discovery. This loses any logical grouping and may be suited as an alternative rather than the primary organization method.

Navigation organization by customization

A user-customized navigation lets users personalize the UI for their own needs.

Navigation organization by audience

Structuring content by audience takes into account the role or permissions tied to a persona. This can highlight common tasks related to that persona but can decrease discoverability if tasks overlap personas or users occasionally shift between roles.

Navigation organization alphabetically

Organizing navigation alphabetically is only successful if users know what they are looking for and how the item is labeled. Alphabetical navigation decreases discoverability when users are looking for a synonym of an item, for example 'pop-up, modal, lightbox, dialogue'.

Navigation organization by domain model

When navigation is composed of multiple applications, resources, and platforms, it should reflect an appropriate domain model rather than an org chart or series of company or technology acquisitions.

Give your agent this brain