Overview of Layouts

SAIL provides a variety of layouts that allow you to arrange content and controls in each user interface. Selecting the right combination of layouts results in the ideal combination of information density, task efficiency, and an intuitive user experience.

Page Width

When designing for a Sites user experience, select the appropriate page width for the content. Choose the “wide” page width for content-packed UIs such as those with many columns of data. The “narrow” width is appropriate for interfaces such as simple one-column and two-column forms where excessive white space is undesirable. The “standard” width is a good compromise for many common use cases. Keep in mind that the selected width for a Site page applies until the user navigates to another page, even when UI content is updated (such as when drilling into a record instance from a record list). Make sure that the width you choose works well for all content that will be displayed on that page.

Page widths compared: (L-R) full, standard, and narrow

On mobile devices, Sites pages always use the full width of the screen regardless of the configured page width.

The page width for UIs viewed in Tempo is always equivalent to the “standard” setting for Sites pages. Interfaces designed for “wide” or “narrow” Sites pages will automatically adjust to fit within Tempo pages.

Tempo pages always use the full width of the screen when viewed on mobile devices.

When embedding SAIL UIs into another web page, the available width is dictated by the dimensions of the Appian container, which is controlled by the web page designer.

Dashboard and Form

Start each page design by selecting a Dashboard or Form Layout. Use the Form Layout for interfaces that feature submission buttons at the bottom. Use a Dashboard for all other UIs.

Columns Layout

Use columns to split UI width into evenly-distributed areas for content. It is also possible to nest columns layouts inside other columns for even more fine-grained control over dense arrangement of UI elements.

From version 17.2, column layouts can be used independently throughout SAIL interfaces. It is no longer necessary to specify columns in conjunction with Dashboards, Forms, or Sections.

Also from version 17.2, there is no limit on the number of columns in each layout. The more columns are used, the less width is available to the content of each column. It is the designer’s responsibility to make sure that there is enough room to properly display content.

Nested columns can be used to provide fine-grained layout control. Here, a set of four columns is used within the second of a two-column layout.

Note how columns are adjusted for display on mobile device screens.

Section Layout

Use section layouts to visually group related parts of interfaces. Each Section has a vertical margin below it to separate it from other page content. An optional heading may be specified to describe the section. Sections may also be configured to allow users to collapse and expand content.

Use section headings to describe the key content groupings on a page.

Wrap content in a section layout to create vertical spacing below it.

Box Layout

Use a box layout to create a strong visual grouping of related components. Each box consists of a title bar and a border. Specify a concise heading in the title bar to describe the box contents.

Use box layouts sparingly as they may make pages look more cluttered. Choose a simpler design if a box layout would not help users to better comprehend the UI.

DON'T

Don’t nest box layouts within other box layouts as this creates a cluttered interface

Below are some examples of how box layouts may be used effectively.

Highlight key information and controls

Use a box layout to draw attention to particular portions of a form such as important prompts or error messages. Choose the appropriate style for the content of the box (e.g., ERROR for telling the user about a problem).

Designate primary content sections

Use box layouts instead of section layouts to organize and describe main content sections on a page. This approach results in a heavily-compartmentalized page design that may not be appropriate for all use cases. Choose this method if it is very important for users to notice the distinction between content sections. Examples include longer forms where grouping questions into box layouts will help keep users from feeling overwhelmed, and dense dashboards where boxes break information up into digestible chunks.

Avoid mixing box layouts and section headings as that may make it harder for users to understand the structure of the page.

Also avoid mixing box styles for decorative purposes. Styles such as WARN and ERROR are intended to help draw attention to a single box shown in an interface. When using multiple box layouts to organize a page, the STANDARD and ACCENT styles are most appropriate.

DO

Do use the same style for all boxes when they represent page sections (generally, STANDARD and ACCENT styles work best).

DON'T

Don't mix box styles on the same page.

Billboard Layout

Use a billboard layout to show content overlaid above a decorative background color, photo, or video. The height of the billboard can be configured, as well as the position of the overlay. Choose an overlay background style (dark, light, or transparent) to make sure that content can be easily seen against the selected background. Note that the text color is automatically switched to white for improved legibility when the “dark” style is selected.

A variety of size and style configurations allow designers to tailor how content is displayed on top of a decorative background in the billboard layout.

Review this walk-through of an example user interface to see how layouts come together to create an appealing and usable page.

FEEDBACK