Forms

General Rules | Fields | Groups | Tabular Data | Header Data

A form is a collection of fields consisting of field labels, input/output fields (I/O fields), and, maybe, short descriptions (check texts). Fields may be assembled in groups and may have descriptive headers (if arranged in group boxes).

Note: The examples are schematic only - they do not exactly follow the current standards for visual design.

 

General Rules

The layout rules of the SAP Style Guide still apply.

Data objects with several attributes may be arranged as

  • One or more groups of fields; these groups may or may not be placed into group boxes
  • A small table, or a as collection of tables

 

Fields

Fields typically consist of the following elements

  • a field label, which describes the I/O field next to it
  • an entry or display field (I/O or output field) right to the field label for entering or displaying values
  • an optional short description right to the I/O field for explaining the value in the I/O field

The default arrangement is linear, e.g. the label is followed by the I/O field and then the short description.

Example

I/O Fields can also be read-only:

Use read-only fields for data that have been provided by the:
  • System
  • User in earlier interaction steps (e.g. on previous screens) and can no longer be changed.

Alternative Arrangement

For space reasons, however, this arrangement may be changed. The label can also be arranged above the i/o field and left-aligned. In this case, there is usually no short description.

Note: For templates and flow logic, you can go even further and use a smaller font for the label.

Examples 

Normal Font

Small Font

Descriptive Labels for Fields and Listboxes

In order to make a form more self-explaining and to reduce the need for help texts, you may use descriptive field labels where suitable. Use descriptive labels especially for

  • Fields with unclear meanings
  • Singular fields that influence the following processing
  • Fields that are important for the progress of the task

Careful use of this feature, allows you to include into the form instructions as well as explanations for the users.

Do not use descriptive labels for fields that are arranged as a larger and compact group. Also avoid using descriptive labels for fields located in a group box with a descriptive header.

This recommendation applies to I/O fields, output fields, and dropdown listboxes for selecting certain important options.

Example (Field)


Example (Listbox)


For more information on the formulation of field labels see Texts for Input and Output Elements in the SAP Reference Lists on the SAP Design Guild.

 

Groups

Groups may consist of these parts:

  • a group title
  • a collection of fields

Group Boxes

A group may be assembled into a group box which automatically provides a title (group box title) and a frame around the group.

(Small) Groups

If a group box would introduce too much visual clutter or space restrictions require a "leaner" design, place a header text on top of the fields to give it a title.

Note: The visual attributes for group headers will be defined in the near future.

Title

The group header characterizes the elements that belong to the group.

Examples

Group with Group Box

Group with Header

See Titles of Web Applications and Groups in the SAP Reference Lists on the SAP Design Guild for more information about the formulation of group titles.

 

Tabular Data

For space reasons fields may be arranged as small tables or in a "tabular manner", but without the functionality of a "real" table. In such a case, the objects typically are arranged in columns - contrary to usual tables or lists.

In this case, an optional header may serve as group header.

Example

 

Header Data

Header data are general data that characterize a set of data (the set may be displayed as a form or a table).

Place header data above the data they belong to.

If there are many header data, you cannot display all of them in a header area. In this case:

  • Display only the most important header data in a header area and/or
  • Display the header data as a view of its own (e.g. as header view)
  • If there are still too many data, use, for example, a tabstrip, and group the header data into meaningful views

 

top

Source:  SAP Interaction Design Guide for Internet Application Components