Comparison of UI16 and UI15 styles

Review the basic style differences between UI16 and UI15 styles in the ServiceNow platform.

Banner frame comparison

In UI16, the banner information and controls are in different places. The search box in the UI16 header opens when you select it. The help icon is available from the banner frame, instead of being accessed from the Settings menu. Because the UI16 banner is narrower, there is no control to collapse it.

Figure 1. Banner frame differences
UI16-UI15 banner comparison

For more information about the UI16 changes, see UI16 banner frame.

Application navigator

UI16 UI15
UI16 application navigator

In UI16, modules that you select are not automatically marked as favorites as illustrated by the blue stars in the UI15 image. Any menu or module can be marked as a favorite, and it appears when you click the Favorites tab represented by the star. The other tab displays items you recently accessed.

UI15 application navigator

For more information, see UI16 application navigator. The navigation filter works the same in both UI versions, by entering text in the navigation filter to show matching applications, modules, and favorites.

Another difference in the UI16 navigator menu is that you can no longer right-click an application menu name to edit the application menu. You must navigate to System Definition > Application Menus to add or modify modules.

The Edge in UI15 is replaced in UI16 by the Favorites tab, represented by the star. Any item you could place on the Edge can be marked as a favorite. When you switch to UI16, all bookmarks on the edge are migrated to favorites and are listed on the Favorites tab. For more information, see Use favorites in UI16. The List and Form View option is no longer available in UI16.

System settings

UI16 System Settings appear in a pop-up window with subtabs to make it easier to update your settings. The Split Layout setting available in UI15 was removed. For more information, see UI16 banner frame

Figure 2. UI16 System Settings
UI16 System Settings

Basic configuration and the company logo

As the banner size and color scheme has changed significantly in UI16, there is a set of system properties for UI16 to set up your logo and branding before you switch to UI16. For more information, see Configure logo, colors, and system defaults for UI16.

The banner in which your logo appears is narrow, and your logo image is scaled based on the aspect ratio. A wider image scales better than a smaller one and is more readable, as in the following example. It is also recommended that you create a logo image with a transparent background.

Figure 3. Square logo
Square logo image
Figure 4. Wide logo
Wide logo image