BPM Graphical User Interface Style Sheet

e-docs > WebLogic Platform > WebLogic Integration > BPM Topics > Programming BPM Plug-Ins > BPM Graphical User Interface Style Sheet

Programming BPM Plug-Ins

BPM Graphical User Interface Style Sheet

This section provides information to help you design custom plug-ins based on Java Swing classes. It includes the following sections:

Designing a Plug-In

Designing a plug-in that meets the learning and information needs of users requires careful planning and a systematic application of the principles described in Working with Interaction Components and Working with Presentation Components.

To design a plug-in panel, perform the following steps:

Decide how you want to extend the functionality of BPM. For example, your plug-in can modify the definition and run-time behavior of the following programming constructs:
Identify the tasks required to modify a construct. In this case, each construct will require a separate panel. For example, to modify template properties, panel tasks may include adding, updating, or deleting new properties that are not available by default.

Select a control to represent each task. The following table lists the recommended controls for each type of task category.

Table C-1 Recommended Controls for Task Categories

Task Category	Control
Selecting mutually exclusive options	Radio buttons
Selecting non-exclusive options	Check boxes
Performing an action	Command buttons
Selecting an item from a set	List boxes or drop-down list boxes
Entering or viewing large amounts of information at the same time	Tables
Setting attribute values	Text-entry fields

Decide how to display panel controls using one or more of the following presentation elements:
Design a 32x32-pixel icon to represent plug-in actions assigned to tasks if you do not want to use the default graphic.
Validate the value of each control to check for errors in syntax and data type. For each error condition, create an error-message dialog box that clearly identifies the problem and suggests a solution.

Working with Interaction Components

Interaction components allow users to interact with your plug-in panels. Choosing appropriate components is not simply a matter of following a formula; rather, it involves achieving a balance among industry standards, corporate standards, and user needs.

The following sections provide guidelines for designing interaction components:

Check Boxes

Check boxes can be used to replace some data-entry fields and provide a quick way to make multiple choices. The following BPM example illustrates appropriate check-box design.

Figure C-1 Check Box Design

Use the following guidelines to design check boxes:

Use check boxes to allow users to select multiple items from a group or to toggle a feature on or off.
Present multiple check boxes together using a group box. Provide a descriptive label for the group box.
Align check boxes vertically.
Limit the number of check boxes to ten or fewer.

Command Buttons

Command buttons are the interaction components used most frequently by users to complete tasks within a dialog box. The following BPM example illustrates appropriate command-button design.

Figure C-2 Command Button Design

Use the following guidelines to design command buttons:

Use command buttons only for frequent actions such as OK, Cancel, and Help.
Label command buttons carefully. Use multiple words when necessary to convey the meaning of an action.
Size command buttons relative to each other. If the label length for a series of buttons is similar, make all the buttons the size of the largest one. If the label length for a series of buttons varies, use two button sizes: one for shorter labels and one for longer labels.
Group command buttons that have similar functionality.
Separate command buttons from other controls using white space.

List Boxes

List boxes provide an alternative to data entry. The following BPM example illustrates appropriate list-box design.

Figure C-3 List Box Design

Use the following guidelines to design list boxes:

Use a list box instead of radio buttons when there are more than six items, if possible.
Show at least three but no more than eight items at a time. If there are more than eight items, add a vertical scroll bar.
Choose a label that describes the items in the list. Place the label on the top of the list box, left justified, followed by a colon. For example, in the previous figure, the label Task to Assign is displayed above the list.
Use a drop-down list box to save vertical space if most users will select the first item in the list.

Radio Buttons

Radio buttons can be used in place of many data-entry fields. The following BPM example illustrates appropriate radio button design.

Figure C-4 Radio Button Design

Use the following guidelines to design radio buttons:

Use radio buttons when users should select only one of multiple items.
Use a descriptive label for each radio button.
Present radio buttons together using a group box. Provide a descriptive label for the group box.
Align radio buttons vertically.
Limit the number of radio buttons to six or fewer.

Tables

Tables allow users to enter or view relatively large amounts of information at a time. The following BPM example illustrates appropriate table design.

Figure C-5 Table Design

Use the following guidelines to design tables:

Use tables if users need to compare multiple pieces of data.
Select column labels that accurately reflect the data.
Left justify all column labels. Do not use a colon after each column label.

Text-Entry Fields

Text-entry fields are interaction components used most frequently by users to enter data. The following BPM example illustrates appropriate text-entry field design.

Figure C-6 Text-Entry Field Design

Use the following guidelines to design text-entry fields:

Use a text box with a border to indicate that a user can enter or edit data. For example, in the previous figure, the box labeled Name is a text box.
Use a field length that signifies the approximate data length.
Left align fields to minimize the number of different margins.
Group fields that pertain to similar information in a group box. Provide a descriptive label for the group.
Assign a descriptive label to each field. Place the labels to the left of the fields and left justify them.

Working with Presentation Components

Presentation components control how data is displayed in dialog boxes. When designing your plug-ins, consider what a user needs to do with the data. For example, do users need to compare bits of information or make selections based on specific criteria? The appropriate display of information can make a major difference in how users perceive the usefulness of an application.

The following sections provide guidelines for designing presentation components:

Color

Color is an important device for getting the user's attention. When used judiciously, color can enhance the usability of a dialog box.

Use the following guidelines when working with color:

Have a good reason to use color other than aesthetics. For example, use color to indicate whether the state of a server is up (green) or down (red).
Choose muted or less saturated shades of each color. Saturated colors often appear too bright on a screen and lead to eye fatigue.
Be aware of color blindness. Color-blind individuals see red/green and blue/yellow as brown. Therefore, do not rely on color alone to provide critical visual cues.
Respect the significance of various colors in your target user's culture. For example, in the United States, red signifies hot, danger, and stop. In China, however, red signifies joy and festive occasions.
Use analogous colors or colors that are adjacent to each other on the color wheel
such as green and blue, violet and blue, or neutral colors such as gray and black. Muted versions of colors balance well with any color.

Dialog Box Layout

Dialog box layout is an important aspect of application usability. A layout can influence a customer's perception of whether an application is friendly or unfriendly.

Use the following guidelines to create dialog-box layouts:

Organize dialog boxes to match a user's workflow. For example, decide which dialog boxes are necessary and in what order they should be presented to support plug-in features.
Do not crowd dialog boxes with controls for multiple tasks. Each dialog box should represent one task in a user's workflow.
Select either a horizontal or vertical information flow. It is not necessary to use the same flow for every dialog box. However, do not mix horizontal and vertical flows in the same dialog box.

A horizontal flow typically results in dialog boxes that are wider than they are tall. In this case, users process information starting in the top left corner and move left to right.

A vertical flow typically results in dialog boxes that are taller than they are wide. In this case, users process information starting in the top left corner and move top to bottom. The following BPM example illustrates vertical information flow.

Figure C-7 Vertical Flow

Fonts

Appropriate font selection can improve the readability of control labels in dialog boxes. The following BPM example illustrates an appropriate font selection.

Figure C-8 Font Selection

Use the following guidelines to select fonts:

Use 12-point Arial regular for all control labels.
Avoid using color fonts for text. The easiest text to read is black type on a white background.
Avoid using italic or underlining for emphasis.

Icons

Icons play an important role in plug-in design. When a plug-in is loaded, the start and event nodes in the interface view display a 16x16-pixel icon in the upper right-hand corner indicating that a workflow has triggers that are plug-in defined.

Icons are also displayed when assigning plug-in actions to tasks in the interface view. In this case, you can use the default icon provided for plug-in actions or create your own 32x32-pixel icon. The following BPM example illustrates the start, task, event, decision, and done icons in a workflow named Inventory.

Figure C-9 Start, Task, Event, Decision, and Done Icons

Use the following guidelines to create your own 32x32-pixel plug-in action icon:

Include only enough detail for recognition. Avoid making an icon look like a photograph. Extraneous detail can make icons harder to understand.
Use one icon to represent the same concept. For example, do not use different representations of a plug-in action in different parts of the interface view.
Redesign an icon if its meaning is not clear. Add a tool tip to reinforcement the visual image.
Design icons for an international audience. Focus your design on representations that are universally held. Avoid using offensive gestures. For example, a pointing finger is considered offensive in some cultures.

Messages

Application messages are displayed in various contexts and are categorized by severity. For example:

Informational messages provide users with tips to help make decisions.
Warnings alert users to conditions that may lead to failure.
Error messages indicate the failure of one or more components.

The following BPM example illustrates appropriate message design.

Figure C-10 Error Message

When writing message text, it is important to understand what response you expect from users. Use the following guidelines to create messages that are meaningful to users:

Use terminology with which users are already familiar. Avoid text that is cryptic or difficult to understand.
Create messages that are concise and specific. Limit the text to two or three short sentences.
Divide error messages into two parts. The first part should tell the user what error occurred. The second part should tell the user how to recover from the error.

Visual Balance

Balance is the weight of elements in a design relative to the horizontal, vertical, or diagonal axes of the composition. Controls on either side of an axis must be seen to balance each other, whether through equality of size, color, similarity, or placement.

Use the following guidelines to balance the controls in dialog boxes:

Use command-button placement to balance other controls in a dialog box.

For horizontal information flows, stack the command buttons vertically and place them along the right-hand side of the dialog box. Experiment by shifting the buttons to the top, middle, or bottom portion of the dialog box to offset larger or darker controls on the left-hand side. Continue adjusting until the buttons and other controls are symmetrical along the vertical axis.

For vertical information flows, align the command buttons horizontally and place them along the bottom of the dialog box. In this case, shift the buttons to the left or right margin of the dialog box to offset larger or darker controls at the top. Continue adjusting until the buttons and other controls are symmetrical along the horizontal axis.
Use the golden ratio (1:1.6) whenever possible to size dialog boxes. This ratio has been used extensively in art, architecture, and mathematics (Fibonacci numbers); it produces one of the most visually satisfying of all geometric forms.
Use a two-column, side-by-side layout for dialog boxes with a horizontal information flow. Balance the placement of controls in each column so the tops and bottoms of individual controls are aligned as much as possible across the columns. The following BPM example illustrates a two-column horizontal information flow.
Figure C-11 Horizontal Layout