Layout - Grouping of Screen Elements
No Grouping Mechanisms | Areas | Tabstrips | Group Boxes | Tables | Separators
For designing IAC screens most of the guidelines in the SAP R/3 Style Guide still apply. Several grouping mechanisms help to make the global structure of screens more apparent.
Note: You find overviews of the grouping hierarchy for screen elements in Hierarchy of Screen Elements; there you can see which screen elements are allowed to be included in which other screen element.
No Grouping Mechanisms
Simple screens may not require any grouping mechanism. However, it is important to arrange screen elements in a logical order from left to right and from top to bottom. Usually, the order of processing and/or logical or hierarchical dependencies between data indicate, how this sequence should be.
In some cases a columnar layout can be useful, especially, if there are many fields. Such a layout, if possible, helps to avoid excessive scrolling.
Areas
Areas provide the "large scale" structure of a screen or page: They are larger regions on the screen which usually serve one dedicated purpose (sometimes they serve more than one purposes). Areas typically correspond to the focus areas in Contextual Design.
Areas are introduced by a header that indicates the area's purpose, followed by the body of the area.
Note: See Guidelines for Screen Areas for more information on areas!
Tabstrips
Tabstrips cluster views of data that can be accessed via tabs. They should stand alone within areas and should not be included in group boxes as a singular element. This avoids visual clutter and waste of screen space caused by multiple borders.
Note that tabstrips do not have a title, but only a number of tabs from which users have to guess the purpose of the tabstrip. If you want to add a title to a tabstrip, include it in an area with an area header.
Tabstrips may include fields, group boxes and tables. They may not be nested - this would be a perfect way of "information hiding"!
Group Boxes
Group boxes cluster fields or other screen elements into meaningful groups. They have a heading indicating their purpose, a frame that encloses the grouped elements, and a uniform background - all measures to to indicate that these elements belong together. So, group boxes (1) cluster and name elements that belong together and (2) set them apart from other screen elements.
Buttons within group boxes act only locally either on certain elements within or on the whole group; this is reflected in their placement (see Pushbuttons - Placement and Look).
Group boxes should not be nested! Nesting creates visual complexity and clutter. Use lines or empty space to separate elements within group boxes.
Alternatives
Areas
If possible, do without a group box and arrange the elements within an area (which has a descriptive header, if it is not the only one) in a logical sequence, maybe with separating elements (empty space, lines, see below). However, take care that the inner structure of the area does not become too complex and that dependencies to/from other areas are evident.
In addition you can collect smaller groups under headings, as shown next.
Small Groups with Headings
You can assemble smaller groups of fields or other screen elements below a heading (with special text attributes); this grouping does not have a frame and adopts the background of the including area or element (tabstrip, group box).
Look of groups:
- Heading: Place a heading above the grouped elements to name the purpose of the group.
- Layout: Place the elements close together (no empty lines within group); separate the group from other screen elements through empty space or dividing lines above and below the group.
- Alignment: Align the group elements flush-left.
Tables
Tables may play a similar role as group boxes. They may stand alone (e.g. without a group box) and have a title indicating their contents.
Do not place single tables in group boxes; as tables can have a heading, there is no need for doing so.
Separators
Empty Lines or Columns (White Space)
Use empty lines or columns (white space) to separate elements on the screen or within group boxes. Such clusters can be started and named with a heading which indicates the group's purpose (see above).
Generally, white space should be preferred to lines!
Lines
Horizontal lines are a means to separate substructures within text boxes.
They can also be used on the screen when a group box is not adequate, that is, if it consumes too much space. For example, use it for longer forms within one screen area to create larger units.
Vertical lines may separate text information, if empty columns do not suffice.
Generally, white space, e.g. empty lines or empty columns should be preferred to lines. Lines are useful if space is scarce, but they do not convey any information and may clutter the screen.
Source: SAP Interaction Design Guide for Internet Application Components