Pushbuttons - Placement and Look

Basic Rules | Look | Placement | Pushbuttons that Refer to Tables

Basic Rules

Placement

Follow the object-action syntax: Place pushbuttons 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).

Figure 1: Pushbuttons for field groups. An example of the basic placement rule.

Reference

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

  • Place the pushbuttons inside, or close to the object.
    Example: place pushbuttons inside group boxes, place buttons close to the fields they refer to
  • Left-align button and object.
    Example: left align pushbuttons referring to a field with the field label
  • Place pushbutton(s) on the same level (area, group box) as the objects which are affected by the action.
    Example: place pushbuttons that refer to fields in a group box or area within that group box, or area
  • Show/hide objects: When an object is hidden, pushbuttons are also hidden.
    Example: If a table is hidden, the related pushbuttons are also hidden

Supporting the Work Flow

  • Emphasize the pushbutton that continues ("default sequence") or finishes ("final action") an action; the emphasized button is always the leftmost button if it is member of a button group.
  • Typically, navigational pushbuttons are placed at the bottom of a screen (or screen area).

Figure 2: Emphasized button (left) and standard button (right)

Note: When using SAPGUI for HTML set the "highlighted" flag in order to get the emphasized button type.

 

Look

Icons

There are no icons on pushbuttons, only text labels.
Rationale: Casual users understand text labels easier than icons.

Labels

Make the text label self-explaining and follow the syntax:

English

German

<verb in infinitive> <reference object (optional)>

<Bezugsobjekt (optional)> <Verb im Infinitiv>
Example: Send order; if the reference is evident, Send Example: Antrag absenden; if the reference is evident, Absenden

For details see Pushbutton Texts in the SAP Reference Lists on the SAP Design Guild.

Indicating the Final Action

For functions that complete an action, always use an emphasized button (see figure 2). If there might be serious consequences for the action add an explaining text.
Rationale: Users must realize that the action finishes the process and know about - possibly negative - consequences.

Use different labels for the initial and the final action of a process.
Example: The initial action and the final action must not have both the label "Post".

For details see Function Names - Special Cases in the SAP Reference Lists on the SAP Design Guild.

Note: When using SAPGUI for HTML set the "highlighted" flag in order to get the emphasized button type.

Depressed State

Currently there is no support for displaying a "depressed" state of pushbuttons.

 

Placement

The following table summarizes the rules for pushbutton placement.

Object

Example

Placement

Single object

Field

Right to the object

Several objects

Field group

Default case: left-aligned below the bottom object
If space is scarce: to the right of the bottom object

Area, tabstrip, group box

Group box

At the bottom, left-aligned

Table (fixed size)

Table based on Table Control or ALV Grid

Below the table, left-aligned with the table

Special case: Long table

Scrolling table

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

Detailed rules for tables see below.

 

Pushbuttons that Refer to Tables

Tables of Fixed Size

Tables with fixed sizes with a scrollbar of their own are based on controls like the ALV grid control; they should be the preferred choice.

Placement of pushbuttons:

  • Place pushbuttons for table functions below the table and left-align them with the table.
  • Place pushbuttons for functions, which refer to the area as a whole, to the left of the area with the default function to the very left.

Figure 3: Place table pushbuttons below the table and left align them with the table. Pushbuttons that act to the whole area or screen are placed below the table buttons and are also left-aligned.

Tables in Scrolling Areas

Tables in scrolling areas (or on a screen that scrolls as a whole) are usually based on HTML tables (these can, for example, be based on the table control or on step-loops). They have the additional disadvantage that the column headers may scroll out of sight.

Pushbutton placement:

  • Place the pushbuttons on top of the table as well as below it. In both cases, the pushbuttons are left-aligned.
  • Place pushbuttons for functions which refer to the area as a whole to the top left as well as the bottom left of the area with the default function in both cases to the very left.

Rationale: The redundant placement of pushbuttons ensures that the users finds the functions easily when scrolling down to the bottom of the table.

Figure 4: For scrolling tables pushbuttons are placed above and below the table, in both cases flush-left; area pushbuttons are not shown.

 

top top

Source:  SAP Interaction Design Guide for Internet Application Components