Start of Content Area

Component documentation Layout  Locate the document in its SAP Library structure

Purpose

This page describes a general strategy for layouting Web pages, applications, and iViews. Layouting a page is not just "throwing" controls on a page. Several aspects have to be considered, such as

·        Flow of control - how the user progresses through a page when doing his or her work

·        Dependencies - how elements on a page affect each other

·        Togetherness - which elements on a page belong to each other, there may be closer and farther relations between elements

·        Aesthetics and general Gestalt principles - how information can be effectively communicated visually

There are three steps in layouting - these can be done in the following sequence: Determine the ...

       1.      Sequence of elements (vertical, horizontal)

       2.      Nesting of elements

       3.      Spacing between elements at different hierarchy levels.

The sequence takes care of the flow of control, dependencies, and information about which elements belong together - the latter in a more linear fashion. The nesting also takes care of dependencies and of togetherness -- but in a hierarchical or top-down fashion. The spacing takes care for aesthetics and the proper application of Gestalt principles (mostly togetherness).

Structure of the Layout Section in these Guidelines

This paragraph covers general layout aspects, such as the roles of sequence, nesting and spacing. Layout Hierarchy covers the detailed nesting, that is, which objects have to be on the same level and which can be nested. The pages on Flow Layout, Grid Layout, and the pages on spacing (single and grouped controls) cover the details of spacing.

General Page Layout Aspects

Layout Hierarchy

Spacing Between Grouped Controls

Spacing Between Single Controls

End of Content Area