Positioning Buttons

Positioning | Overview of Positioning Rules | Related Controls

Figure 1: Example of a control containing groups with buttons and two buttons belonging to the control itself Buttons are used for explicit functions that refer to a given object or serve for navigational purposes
Figure 1: Example of an iView containing groups with buttons and two buttons belonging to the iView itself

top Top


Positioning

Place buttons below the object they refer to. If space is scarce, place the buttons to the right of the object (for several objects place them to the right of the bottom object).

How to make clear which object(s) a button refers to:

  • Place the buttons inside, or close to the object.
    Example: Place buttons inside group boxes, place buttons close to the fields they refer to

    Figure 2: Example of a button inside a group referring to a listbox

    Figure 2: Example of a button inside a group referring to a list box

  • Left-align button and object.
    Example: Left align buttons referring to a field with the field label

    Figure 3: Example of left-aligned buttons inside a group

    Figure 3: Example of left-aligned buttons inside a group

  • Place button(s) on the same level (area, group box) as the objects which are affected by the action.
    Example: Place buttons that refer to fields in a group box or area within that group box, or area (figure 2 and 3)

  • Show/hide objects: When an object is hidden, buttons are also hidden.
    Example: If a table is hidden, the related buttons are also hidden

    Figure 4: Example of a left-aligned button group containing an emphasized button

    Figure 4: Example of a left-aligned button group containing an emphasized button

  • If an emphasized button (see Types) is a member of a button group, it is the leftmost button in this group.

  • Navigational buttons are placed at the bottom left of a screen (or screen area).

top Top


Overview of Positioning Rules

The following table summarizes the rules for button placement.

Object

Example

Placement

Single object

Field

Right to the object

Figure 5: Button next to field

Figure 5: Button next to field

Several objects

Field group

Default case: left-aligned below the bottom object
If space is scarce: to the right of the bottom object (see figure 4)

Area, tabstrip, group box

Group box

At the bottom, left-aligned (see figure 3)

Table View (fixed size)

Table based on Table View control or Portal Data Viewer

Below the table, left-aligned with the table

Figure 6: Button below a table

Figure 6: Button below a table

Special case: Long table

Scrolling table

Above and below the table, left-aligned
Alternative: Implement a special frame for buttons above a table, which does not scroll.

Table 1: Rules for button placement

Usage guidelines for the different button types and sizes are presented in Button.

top Top


Related Controls

Link, Input Field, Group, Table View

top Top