|  Skip to Content  |  Search  |  Contact us  |  Newsletter  |  Sitemap  |  Article List  |  www.sap.com

Home & Services   Resources   Editions   Community   Goodies

Design Tidbits    Editorials    Stories    Books & People    UI Events    Forums

Design Tidbits

 To Overview of Tidbits

Design Tools

• My Design Tools – Part I
• My Design Tools – Part II
• Using Prototypes
• UI Toolbox: Capturing and Editing Screenshots – Part I
• UI Toolbox: Capturing and Editing Screenshots – Part II

Simplification

• What Does "Simple" Mean?
• Anti-Simplification – How to Make Life Harder for Users
• Reducing Complexity
• Error Prevention Comes First
• Don't Let Your Interface Lie
• Don't Let Users Suffer from System Weaknesses

Interaction Design

• Bridging the Gap – Part I
• Bridging the Gap – Part II
• Bridging the Gap – Part III
• Did You Make Your Selection? – Part I
• Did You Make Your Selection? – Part II
• Did You Make Your Selection? – Part III
• Did You Make Your Selection? – Part IV
• The Software Works The Way I Think: Beyond Point and Click
• A Layman's View on Interaction Styles – Part I
• A Layman's View on Interaction Styles – Part II
• Selecting Objects By Attributes – Part I
• Selecting Objects By Attributes – Part II

Screen Design

• The Art of Hiding – Part I
• The Art of Hiding – Part II
• Screen Layout – Part I: General Considerations
• Screen Layout – Part II: Layout Hierarchy
• Screen Layout – Part III: Examples

Hierarchies

• Hierarchies - Categories vs. Vectors
• Fighting (with) Hierarchies –
  Part I: Basics
• Fighting (with) Hierarchies –
  Part II: Presentation
• Appendix: Fighting (with) Hierarchies – Presentation Techniques I
• Appendix: Fighting (with) Hierarchies – Presentation Techniques II

Visual Design

• Some Color Mysteries
• Some Mysteries of Colored Text
• Animation – The Chili Pepper of the Web
• Appendix: Definitions of the Most Common Types of Animation on the Web

Design Process

• The Construction Cycle – Another Way to "Organize" the Design Process
• User Feedback
• What Does User Integration Mean for Software Design?
• Mapping a Conceptual Interface to a Physical Interface

Web, Web Applications, Web Design

• The Web – A Short Introduction
• An Introduction to Designing User Interface Controls at SAP
• From Dropdown Listboxes to Comboboxes
• List Box Tweaks (Part II)
• Concept Statements and Website Messages – Part I
• Concept Statements and Website Messages – Part II

Performance

• Waiting at the Computer: Busy Indicators and System Feedback – Part 1
• Waiting at the Computer: Busy Indicators and System Feedback – Part 2
• Waiting at the Computer: Busy Indicators and System Feedback – Part 3
• Human Performance at the Computer – Part 1: Introduction
• Human Performance at the Computer – Part 2: Making Applications More Responsive
• Human Performance at the Computer – Part 3: Perceived Performance
• Human Performance at the Computer – Part 4: On the Way to Performance-Oriented UI Guidelines
• Addressing a "Design Issue:" Start-Up Time
• Examples of Poor Responsiveness

Miscellany

• Adding Value to Your Interface by Using Simple Math and Matching
• Refreshing Three HCI Laws: Fitts' Law, Hick's Law, and the Power Law of Practice
• How Much Documentation Do Applications Need? – A Simple Example
• Human-Computer Dialog: How Good Does "Good Enough" Need to Be to Appear "Perfect"?
• Narrative User Interfaces
• Golden Rules for Bad User Interfaces
• Universal Usability
• User Interface Controls and Interaction Techniques of Horror

 

 

Screen Layout – Part II: Layout Hierarchy – Appendix

By Gerd Waloszek, SAP AG, SAP User Experience – Updated: June 7, 2002

Example: Hypothetical Layout Hierarchy for Web Applications | Hypothetical Table Overview of the Layout Hierarchy for Web Applications

Back to article

This page presents a second example of a layout hierarchy for comparison with the iView layout hierarchy shown in the main article. It is a "hypothetical" layout hierarchy for Web applications – "hypothetical" because it does not exactly correspond to the current SAP Web application (IAC) guidelines. In addition, these guidelines are currently under revision, and it is open how such a hierarchy will look like for the new Web applications.

In the example below, I introduced the following difference to the current guidelines for Web applications: Simple elements and containers can be placed on the application background. This is similar to the header data in R/3 applications, which are also placed on the application background; R/3 applications, however, do not have the concept of an area. I allow that elements can be placed on the application background for didactic reasons, because I want to present a more complex layout hierarchy.

 

Example: Hypothetical Layout Hierarchy for Web Applications

The major differences to the iView layout hierarchy are: (1) Web applications offer areas as "large-scale" containers, (2) in Web applications nesting may be deeper in some cases than for iViews because they can become more complex than iViews.

• Application Background = Window/frame background = application container – may contain:
  • Area – may contain:
    • Tabstrip – may contain:
      • Group (if it is not the only element)
      • Subgroup
      • Table View (if it is not the only element)
      • Simple elements
      • Separators
    • Group – may contain:
      • Tabstrip (if it is not the only element)
      • Group (if it is not the only element, different group types only)
      • Subgroup
      • Table View (if it is not the only element)
      • Simple elements
      • Separators
    • Subgroup – may contain:
      • Simple elements
      • Separators
    • Table
    • Simple elements
    • Separators
  • Same as area

Note: This layout hierarchy does not exactly correspond to the current SAP guidelines for Web applications (IACs) because it allows elements to be placed on the application background.

 

Hypothetical Table Overview of the Layout Hierarchy for Web Applications

The following table overview provides a more detailed description of the layout hierarchy for Web applications. Red cells explicitly prohibit certain nesting. Yellow cells indicate cases where elements can be placed into other elements with certain restrictions only.

Element below can be placed within Container to the right	Container
	Application (Background)	Area	Tabstrip	Group	Subgroup
Tabstrip	yes	yes (can be a single element with area header as title)	no	yes: together with other elements no: as single element	no
Group	yes	yes: together with other elements no: as single element	yes	possible – but use with care! one level at maximum – use different types for the nesting	no
Subgroup	yes	yes	yes	yes	no
Table View	yes	yes	yes	yes: together with other elements no: as single element	no
Text Area, Graphic	yes	yes	yes	yes	no
Separator (White Space, Line)	yes	yes	yes	yes	no
Heading	yes	yes: group, text area, graphic	yes: subgroup, text area, graphic	yes: subgroup, text area, graphic	yes
Button	yes	yes	yes	yes	yes
Field, Selection Element, Icon	yes	yes: Header data, group no: other data	yes	yes	yes

 

Note: The bold no's indicate common errors, such as nested tabstrips.

Note: The layout hierarchy on which this table overview is based does not exactly correspond to the current SAP guidelines for Web applications (IACs) because it allows elements to be placed on the application background.

 

top, back to article