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.