Contents

Overview

The Branding Area provides a location for placement of corporate identity information, product name, the user menu, optional global functions, and optional navigation to major modules of the application.

Elements and Appearance

The Branding Area has the following key elements:

Before a user authenticates, the User Menu is replaced with a Sign In link at that location.

The following image illustrates the elements of a Branding Area before user authentication.

Illustration of branding area with the unauthenticated use case, wherein, there is a link to Sign In in the right-hand side of the bar, where the authenticated users' name or avator would appear.

Once authenticated, an avatar is the preferred headline for the User Menu, as shown in the following image. The avatar is usually a visual representation of the user, such as a photo, caricature, or image, which can appear by default, or is provided by each user through the user profile page.

Illustration of branding area with avatar user stamp to indicate the user has been authenticated.

Optional Elements of the Branding Area

Other items that could appear in the Branding Area are:

Application Navigation

Optional Application Navigation provides navigation access to major modules within the application. It appears within the Branding Area.

The essential elements of Application Navigation are as follows:

Application Navigation should not present more than seven items in the Branding Area. More than seven can overwhelm users and are counter to the simplicity of the Oracle Alta UI lightweight design. When the number of application navigation items grows beyond seven, it is time to reconsider the application design and combine those additional options under the first seven or fewer.

All navigation items must resolve to another page destination. Any Application Navigation item which is not a navigation destination, but an action, is best presented in the User Menu.

Two Was to Present Application Navigation

Application Navigation items are presented in a bar or in a drawer.

Application Navigation Bar

If the number of application navigation items is four or fewer and the navigation icons are highly salient (such as for home, dashboard, tasks, or search), then the Application Navigation Bar may present icons only, as shown in the following example image. This approach works best when the User Menu is headlined with an avatar and the application name is sufficiently short, since all occupy the same horizontal plane.Illustration of Application Navigation Bar with icons only

If there are more than four items on the Application Navigation Bar, or if the icons themselves may not clearly convey their meaning, then present the icon-and-text option, as in the following illustration.

An Application Navigation Bar with icons &
their associated labels, where the label is right-aligned.

Application Navigation Drawer

The following image shows a closed application Navigation Drawer.

Illustration of Application Navigation Drawer when closed, which is signified by a "hamburger" icon in the far left of the Branding Area.

When an Application Navigation Drawer is open, it is preferred that the drawer not overlay content to the right. The following image shows example of an open Application Navigation Drawer.

Illustration of Application Navigation Drawer open

This image shows an Application Navigation Drawer with child items. Only the top level items have Icons.

Illustration of Application Navigation Drawer with child items

The drawer may close either explicitly or implicitly, as discussed in the Drawer pattern.

When the Application Navigation Drawer is implemented to close explicitly, the "hamburger" icon changes to a left-pointing arrow when the drawer is opened. It is preferred that an animation is used to signal this change so that users are more likely to notice it.

Illustration of Application Navigation Drawer icon when close is explicit

After the drawer is closed, the icon changes back to the initial hamburger icon.

Try to present Application Navigation either as a bar or as a drawer, but not both. However, if both are presented, then:

User Menu

The User Menu in the Branding Area is laid out in two sections: one for menu items within the service, and one for menu items outside the service. The presence of menu options outside the service is optional.

The User Menu is often referred to by other names, most often Global Menu, and Help Menu, because of user familiarity with those other menu items.

Illustration of Open User menu on a page; when user clicks on it, in Branding Area, the Help Menu and a Global Menu open up over the page.

Additional Resources

Demos: