Design Guidelines: Arrangement 

Alignment

Define group boxes in accordance with the following guidelines. The guidelines are listed in terms of priority:

  1. The screen can often be divided into two large columns. Place the right border of the left-column box at the center of the screen (as far as column 40). Place the right border of the right-column boxes which extend almost to the edge of the window (from about column 60, that is) at the right window border.
  2. Adjacent boxes should be aligned, if this can be achieved by extending the border by a few blank columns or lines (orientation value: 2-3 blank lines or 5-10 blank columns).
  3. If the first two guidelines are not applicable, boxes should be placed directly around the fields of the group.

With fields without a permanently displayed Possible Entries Pushbutton (Control Element), make sure to leave spacing of at least three columns after the field so that the group box is not obscured by the possible entries pushbutton.

Arranging Groups and Individual Elements

Horizontal Arrangement

If two groups appear next to each other, they should be regularly distributed on the screen. To do so, place the border of the box at the screen center and/or the screen border. The boxes should be separated by approx. 1-2 columns. Larger boxes should be positioned to the left.

Text without group box (particularly header data) starts in column 1; this also applies to dialog boxes. The space between window border and first column is set centrally by SAP GUI. Texts and selection elements ( Checkboxes (Control Element), Radio Buttons (Control Element)) that are part of the box start in the column directly following the box.

Input/Output Fields (Control Elements) should be left-aligned. This also applies to the header data and the following groups.

Vertical Arrangement

Two group boxes positioned below each other are not separated by blank lines. Initial screens are an exception, because a blank line can be inserted between the boxes to achieve a regular distribution.

Separate the header data of the following group always by a blank line.

Last Check...

When you have defined the group box conforming to the above mentioned guidelines, check the screen if some of the elements need to be corrected slightly for an visually pleasing result. A good overall impression has priority.