Designing with visual content is an important aspect of the Oracle Alta UI. The use of color, icons, and typographical techniques is emphasized for added polish and visual design quality. These elements also have a usability purpose — to focus attention on priority information that requires user action.

Color is often used in conjunction with other visual attributes to draw user attention. It is critical for both user performance and accessibility to use two or more visual attributes to draw user attention to priority information. The practice of using multiple visual attributes to emphasize priority information in the UI is implementing a pattern called managing by exception.

Components and data in the Oracle Alta UI already have their own color attributes (for example, text, content containers, and graphs), so care and consistency is required to properly execute the managing by exception UI pattern. If the pattern is misapplied, then managing by exception can become a distraction to users and actually obstruct the information that users need to see.

Guiding Principles

Managing by exception uses color and other visual attributes to accentuate the highest priority items on the page — not to decorate the UI. Data becomes a priority when it represents a value outside of an acceptable range. Calling attention to that fact allows users to more easily "manage the exceptions." For example, an ERP application might use a particular color to highlight the names of employees whose performance is out of an acceptable range, or employees who are high performers, but also a high "flight risk" from the company.

Color is a constant when emphasizing priority information to manage by exception.

In the following image, values that are out of an acceptable range are accentuated by making them larger while also using an alert color (in this case, red). All other values receive the same neutral color and consistent size.

Example UI page which features a number of values for tenure, rating, and potential for employees; those that are out-of-range values are highlighted on the page by being in larger font and having a different color (red).

Note that all other elements on the page also have color (for example, icons, avatars, and content containers), and that fonts may vary in size. However, they are normalized to present similar types of information consistently, and thus remain distinct from priority information. Design teams must make sure that every instance of an icon, value, or content container does not feature a different, apparently random, color or size.

call to Action

After alerting the user to a high priority item, call the user to action. Make the out-of-range value interactive by allowing the user to touch, tap, or click onto it to take immediate action directly related to the value. When it makes sense, leverage the Oracle Alta UI principle of content navigation to accomplish this. With content navigation, the call to action is to click, tap, or touch the out-of-range value to navigate the user to a page where further action is available.

In the following image, the call to action requires the user to tap the red "2" — using content navigation to obtain more detail and applicable actions on a subsequent page.

Example UI wherein the user taps the alert value to navigate to an action page


There are occasions when the call to action is best articulated by chrome navigation, such as a button. In the following example, there are three InfoTiles, each calling attention to different levels of severity. The one requiring immediate attention has a badge showing the the highest alert color next to the infoTile icon with an associated symbol, and in this case, a label that reads "severe."

Use of InfoTiles signifying different levels of priority

The above example utilizes visual content with attributes of color (for example text, content container, and a graph) which do not distract from the attention requested by the Development InfoTile.

Call to Action Button

Another common method is using an actual call to action button. This is a contemporary technique in which a button is highlighted by color and size distinct from the default enabled state. In the example illustration below, it is the OK button.

The call to action button is most often a submit control. While other commit controls may exist simultaneously on the page as well, the call to action button represents the primary action the user performs to conclude the task -- affirmatively. Thus, its effectiveness is due to its exclusivity on a given page. Since the goal behind the manage by exception pattern is to increase user productivity, featuring more than one call to action button on the page would slow users' response as they work to discern which button to push. For this reason, only one call to action button per page or dialog is preferred.

Example Call to Action Button is a large green button that reads OK.

Not all pages and dialogs require a call to action button. To maximize the effectiveness of the call to action button technique, the following heuristic is given.

Call to Action Button Heuristic

The call to action button is not necessarily a substitute for a button that has input focus on page load. For example, in a wizard step where the most likely option is to accept the defaults. The Next button may have initial focus such that pressing the <Enter> key advances the wizard. The Next button may have focus highlight (e.g., a focus ring) but not necessarily call to action visual treatment. In the following example, the An input button is in the default enabled state. The A submit button is also in the enabled state but with a focus ring to indicate that it will accept the <Enter> key. Neither necessarily requires the call to action visual treatment.

Example Call to Action Button is a large green button that reads OK.