General Layout Strategy
Structure of the Layout Section in these Guidelines | General Page Layout Aspects
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 ...
- Sequence of elements (vertical, horizontal)
- Nesting of elements
- 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 page 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
The Role of Sequence
The sequence of elements should typically be determined by the flow of control, that is, the way how users perform their tasks. Often, however, a task may not be linear or users have to step back because of errors. Here, the page designer has to find a "natural" sequence that fits most users and scenarios.
In addition, conventions, such as the reading direction, play an important role for the arrangement of elements. For Western cultures, the typical arrangement of elements is from left to right and from top to bottom, just like the reading direction. Dependencies are also typically communicated this way. "First things first" is also a motto, which expresses that there is a "natural progression" in most things we do. For example, when entering a customer's address we start with the name, which is the main information that determines the remainder of the information - we do not start with the street and house number, even though one might infer the customer's name from that information.
Such a rule may be natural to everybody and most designers follow it without even thinking about it. Problems occur, however, if this rule is broken, and the flow or dependencies go into the opposite direction. Such reversals often present severe obstacles for users.
Arranging elements on a page is the first step in page design. This can also be done in a prototypical fashion and tested with users (for example with paper prototypes) without worrying for the details of the page design.
The Role of Nesting
There are two basic ways to visually indicate the relation between elements - closeness and nesting. Closeness means that objects, which are located closely together, are perceived as more closely related than objects that are farther apart from each other. Closeness of elements is typically combined with direction to indicate flow of control or dependencies. For example, first you enter a value into a search field (left) and then you click the related Go button next to it (right).
Nesting is used to indicate more complex hierarchical relations and dependencies between objects. Nesting is also a way to hide details from users because users can first deal with the high-level objects and then decide, which one they want to inspect more closely.
Nesting can make pages much more complex than simple sequencing of elements because nesting requires the introduction of borders or other visual separators that may clutter pages visually. Therefore, nesting rules have been established that aim to prevent the creation of overly complex pages (see Layout Hierarchy and the respective controls). Spacing can help to reduce the cluttering effect but often requires more space than is available.
Nesting can also be explored in a prototypical fashion (paper prototypes, HTML prototypes); here, the prototype may already be more detailed than in the initial phase.
The Role of Spacing
Spacing is very importing in communicating which elements belong together; it also affects readability and the ability of users to recognize information on a page.
In general, application developers should not need to bother with the details of spacing, that is, with how many pixels they have to insert between, for example, a button and the border of a group. There are two HTMLB controls, the grid layout and the flow layout, which take care for the exact spacing. In addition, containers, such as the tray and the group, also care for the outer spacing.
Note: Currently, the spacing controls do not work as intended. Therefore, developers should consult the pages on the grid layout and on the flow layout for the limitations of these controls.
Only high-level prototypes that intend to offer a realistic preview of a final page need to bother with detailed spacing.