Layout - Hierarchy of Screen Elements

Grouping Hierarchy | Table Overview of the Element Hierarchy | Examples

This chapter describes the grouping hierarchy of screen elements. It defines which screen element can be placed within which grouping element. This hierarchy forms the basis of the layout rules for screens and screen areas. The main goal of these rules - though they may look a little bit complicated at a first glance - is to prevent overly complex screens with nested grouping elements, like nested group boxes or tabstrips.

 

Grouping Hierarchy

The following diagram illustrates which screen element can be placed within grouping element; a more detailed tabular description and some reasons for the rules are presented below.

Background

Area ->

Area

Tabstrip

Table

Group box ->

Group

Text area, graphics

Header data

Pushbutton

Separator
(white space, line)

Group Box

Table (only if grouped with
additional elements)

Group ->

Text area, graphics

Text element

Link

Separator (white space, line)

Pushbutton

Field

Selection element

Icon

Group (no Frame)

Heading

Pushbutton

Field

Selection element

Icon

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Table Overview of the Element Hierarchy

This table overview presents a more detailed description of the element hierarchy. Note that the yellow cells describe cases where elements can be placed into other elements with certain restrictions only (see also the reasons for these rules).

Element below can be placed
within Grouping
Element to the right
Grouping Element

Application, Area
(tile)

Tabstrip

Group Box

Group
(no Frame)

Tabstrip

yes (can be a single element with area header as title)

no

yes: together with other elements
no: as single element

no

Group Box

yes: together with other elements
no: as single element

yes

no

no

Table

yes

yes

yes: together with other elements
no: as single element

no

Text Area, Graphic

yes

yes

yes

no

Separator
(White Space, Line)

yes

yes

yes

no

Heading

yes: group, text area, graphic

yes: group, text area, graphic

yes: group, text area, graphic

yes

Pushbutton

yes

yes

yes

yes

Field, Selection
Element, Icon

yes: Header data, group
no: other data

yes

yes

yes

Note: The bold no's symbolize the common errors that group boxes, or tabstrips are nested.

Avoiding Redundant Headers

Some of the rules defined for the element hierarchy strive for avoiding redundant headings. Thus, do not place:

  • Singular group boxes within areas, or tabstrips
  • Singular tables with a table heading within group boxes

Avoid Too much Framing (Visual Complexity)

Too many frames and borders make screens visually complex and waste screen space. Thus, do not place:

  • Singular tables with a table header within group boxes - use a table heading instead
  • Singular tabstrips within group boxes - place them in areas instead; use header texts, or the area header as a title for the tabstrip
  • Group boxes within group boxes - use groups with text headers and separators instead
  • Tabstrips within tabstrips - this is also a perfect way of hiding information...

 

Examples

The following prototypical IAC screens illustrate some aspects of the element hierarchy:

  • Areas float on the background (currently tatami blue)
  • An area may include a tabstrip, table, group box or group
    Note: A tabstrip may be a singular element within an area
  • A tabstrip may include a table, group box, and other screen elements
  • A group box may include simple screen elements and groups; it may also include a table or tabstrip if it is not alone (not shown)
    Note: The group box may not be a singular element within an area

Figure 1: Prototypical IAC screen layout showing some aspects of the screen element hierarchy

Figure 2: Other possible groupings of screen elements

Note: The visual attributes for areas in SAP IACs are in the stage of a proposal; there is currently no HTML Business function available.

 

top

Source:  SAP Interaction Design Guide for Internet Application Components