...

Layouts consist of:

• VerinTop

• Ribbon (optional, top navigation layout only)

• Header area

• Main workspace

• Left pane, containing either:

  • Left navigation (left navigation layout only)

  • Filter pane (optional, top navigation layout only)

• Right Details Pane (optional)

...

See the VerinTop page for more information.

...

Ribbon

Ribbon should be used where there are a lot of controls for the main workspace. The ribbon should:

• be fixed underneath the VertinTop.

• be the full width of the page.

• be collapsible.

Note: the ribbon may not be used in conjunction with left navigation.

For more information, see Ribbon.

Header area

The header area contains information which relates to the whole page.

...

• Breadcrumbs

• Page title (mandatory)

• Header text, such as a page description

• Chicklets for applied filters

• Tabs which change the view within the main workspace.

• Tools such as Search or an Action Menu.

• Other page metadata, such as a status indicator.

Placement and Positioning

...

• Textual and graphical content

• Data Tables

• Forms

• Data Visualisations

• Widget dashboards

Workspace sections

Where there are distinct fields within the content, the main workspace may be separated into multiple sections.

The layout of sections should also have a clear hierarchy, ordered left-to-right, top-to-bottom.

Structure

Each section should have:

• a header, to identify its purpose.

• any required discrete controls.

The spacing between each section should be consistent across the workspace.

Behaviour

Section content may be static or interactive

Should there be rules about how many sections or how they’re arranged? How many columns etc?

Interaction

Sections should be of a fixed proportional size or responsive to their content, but not be adjustable by the user. Where the user has control over the layout of sections, use a widget dashboard.

Where relevant, sections may:

• be collapsible, particularly for sections containing secondary or optional information. The title should still be visible when a section is collapsed.

• have an expanded state, for example in a Popup or separate page, to show the section content in a larger space.

Expand/collapse

Sections should be of a fixed size or responsive to their content, but not be adjustable by the user. Is this true? Should users be able to (optionally) make a section full size etc.? At this point it’s a widget dashboard.

Left Pane

The left pane consists of one of the following:

...

The right-hand details pane should be used to present information and actions relating to selected items within the main content, or additional content related to the main workspace.

For full details, see Details Pane.

...

• stick to the right side of the page, beside the main workspace.

• have a fixed width.

• fill the vertical space to the bottom of the page. The top of the details pane should start from either:

  • a few pixels beneath the VerinTop, to align with the top element in the header area, or

  • from a few pixels beneath full-width header areas.

Interaction

• The layout may not have a whole-page scroll. Each individual pane or widget may have its own internal vertical scroll, where necessary.

• The left and right panes may be collapsible, depending on the screen width. See individual pane specifications for further details.

...

• Where there is not enough space to display the full layout, the main workspace should be prioritised. Other areas within the layout may be collapsed or minimised, including the left and right panes.

• The content of the main workspace should be fluid, dynamically adapting to the size of the available area, even as it changes during use. The available space may change due to the state of collapsible panes as well as screen size.

• Where sections are used within the main workspace:

  • as the width of the workspace width changes, so should the widths of the individual sections within it. The proportion of the width that each section uses should be maintained.

  • there should be a minimum-width workspace breakpoint, below which all sections will be shown at full width, regardless of their original size.

  • the spacing between sections may be reduced at each breakpoint.

  • The remain the same.

  • the layout of the content within each section should respond to its width. This may include changing text, graphics, table, and spacing sizes.

  • breakpoints may be introduced, at which the sections may be rearranged into a more appropriate layout. For example, a minimum-width workspace breakpoint may make all sections full width and vertically stacked.

• Where space is severely limited, it is acceptable to remove auxiliary functionality, but this should be avoided where possible. ??

• Using a mobile-first approach can make layout design and implementation easier.

• When the screen width is changed, anchored panes and components should remain fixed to the left- or right-hand side.

• The size and spacing of individual components and fixed panes (such as the Filter Pane and Details Pane) should not change as the layout dynamically responds.

• See the recommended responsive design for individual components, where necessary.

...

Example screens

Top navigation layout

Details panel in AV example goes right to the top?

Left navigation layout

More left nav examples?

Left icon tabs in Details panel isn’t a documented use…