Field and Group Layout

We recommend that you design pages that make it easy for users to find and understand information. This involves organizing fields in a way that takes into account how often users need the fields, as well as the fields’ relative importance. Fields that are important, and fields that are used often, should be given a prominent and permanent position.

This topic provides guidance about how to design a good page layout.

Entity-oriented pages: Card, Documents, and Details

Entity-oriented Task Pages are pages that show information that is related to a single entity. Examples include: Card pages, Document pages, and Details pages. We recommend you consider the following guidelines when designing entity-oriented pages.

Group fields by subject, then by typical sequence of entry

The first level of field grouping on entity-oriented pages is the FastTabs. Use FastTabs to group together fields that are related by subject. For example, on the customer card, place all fields related to invoicing in the same FastTab. After you have placed fields in FastTabs, then sequence the FastTabs in the order in which users will normally need them when creating entities.

Lastly, sequence the fields in each FastTab in the order the user will normally need them when creating entities. Generally, do not show the same field to the user more than once in a page.

Use a ‘General’ FastTab for ID, workflow, and important dates

When designing an entity-oriented page with fields that identify the entity, fields concerning workflow, or fields giving important dates, place these fields in the first ‘General’ FastTab.

Mark fields as Promoted, Standard, and Additional

Not all fields are equally important on a page. Use the Importance property to indicate fields as Promoted, Standard, and Additional. Promoted fields are presented in the FastTab header. A field marked as Additional is only available to the user on the user’s request when he chooses the More button on the enclosing FastTab.

Place common fields in same relative position

Place fields that appear on many different pages, for example No. or Status, in the same relative position on the page. This makes it easier for users to quickly locate these fields when they move between different pages.

Consider using horizontal layout for “field compounds”

A field compound is a set of two or more fields that always go together, such as Quantity and Unit of Measure. It is often beneficial to use a horizontal layout of field compounds because this helps the user understand that the fields are tightly related, and makes them easier to read. When multiple field compounds contain the same fields, such as in statistical pages, the compounds can be stacked vertically and have a single field caption on top.

Don’t enforce uniformity between different pages

Uniformity can reduce clutter and ease overview, which is good. However, uniformity is only a benefit when it doesn’t obscure hints that could have helped users more easily recognize or understand information. You should allow and promote meaningful differences in the way fields are laid out between pages. This helps users recognize which page they are working with.

Collection-oriented pages: Lists, Worksheets, and Journals

Collection-oriented Task Pages are pages that show information related to a collection of entities or entries. Examples include: List pages, Worksheet pages, and Journal pages. We recommend you consider the following guidelines when designing collection-oriented pages.

Show only relevant columns

Do not include more columns in a grid than necessary. It can be tempting to include columns that could be useful in rare situations, but it is recommended to display only the essential columns by default to keep appearances simple. Users or administrators can then customize the grid to display more columns as needs arise.

Place columns in order of importance

When the essential set of columns in a grid is decided, it is recommended that you choose the display order of columns so it matches the importance as perceived by the users. Often, the order of importance can be identified by asking users what the preferred order of entry is.

Use freeze pane if the grid is wider than the screen

In some situations, a grid has to display more columns than will fit in the screen, which will cause a scrollbar to appear. In these cases, it is recommended that you enable the freeze pane so that users can scroll horizontally without losing track of the first columns that identify the row.

If present, place custom filter options above grid

Collection-oriented pages sometimes have custom filtering options beyond the basic filtering that is available on all pages. When such custom filters are available, we recommend these are placed above the grid. This placement helps the user discover any filtering that is in effect when they scan the page from top-to-bottom.

If present, place preview pane below grid

Collection-oriented pages sometimes have a preview pane available that shows the details of the selected row. When such a preview pane is available, we recommend that it is placed below the grid. This placement helps the user understand that the preview is subordinate to the grid when they scan the page from top-to-bottom.

If present, place custom view options below grid

Collection-oriented pages sometimes have custom view options available. Whenever possible, such view options should be available to the user from the ribbon. In cases where the view options have to be fields in the page, we recommend these are placed below the grid. This placement helps the user understand that the view options are subordinate to the grid when they scan the page from top-to-bottom.

See Also

Concepts

Ribbon and Toolbars
Styling Field Values
Interaction Modes
User Interface Text