Typical Screen Divisions
Usage of Areas | Single Area | Vertical Division | Horizontal Division | T-Shape | Complex T-Shape
Screens can be subdivided into areas that serve certain purposes. Below we present the most common subdivisions and make some proposals for their usage.
Note: The actual screens may be further subdivided, because they contain additional generic areas like a role-based menu or a help area. Or they are embedded in a workplace environment like the mySAP.com Workplace which has an additional Launchpad. See Workplace, Application Types, Internet Application Components for more information on this topic!
Usage of Areas
In the schematic diagrams below we indicate possible functions for areas by the following colors:
|
|
Work Area |
Comprises all screen elements, if there is only one area |
||
|
Overview Area |
Contains an overview of a data set |
|||
|
|
Header Area |
Contains header data that characterize data or a data set |
||
|
|
Access/Navigation Area |
Contains an index that provides access to the items listed in the index |
||
|
|
Detail Area |
Shows detail data for an item (typically selected in an overview area) |
Note, however, that these are only examples for the usage of areas! The areas within the subdivisions can be used for other purposes as well.
Single Area
The simplest layout for applications consists of a single work area:
|
|
Use this layout for:
- Wide lists
- Simple forms
especially, if users work on the screen for a longer period of time.
This layout may also be useful, if users (esp. beginners or casual users) are to be guided by the system (e.g. for wizards).
Vertical Division
You can divide the simple page vertically and get:
|
|
|
|
Use this layout instead of the simple page if a header is needed.
Horizontal Division
You can divide the simple page horizontally and get:
|
|
|
Use this layout for:
- Narrow tables (e.g. tables with few columns)
- Simple forms
if an access area is needed. This is, for example, the case, when users often browse items or often change the item to be processed.
T-Shape
The T-Shape is a combination of both:
|
|
|
|
|
|
Use this layout in cases where the horizontal division is appropriate and where a header is needed.
Complex T-Shape
Subdividing the work area leads to a more complex T-Shape:
|
|
|
|
|
|
|
|
|
Use this layout if there are overview and detail data that have to be displayed simultaneously or similar cases.
Users can do without a permanent access area, if they stay in the work area for a longer period of time. So, for such a case consider to allow users to temporarily switch the access area off and to switch it on again if they need to access new items.
Source: SAP Interaction Design Guide for Internet Application Components