...

Types

Type	Description	Layout (replace images)	Example
Top navigation layout	Used by default for Verint applications. For more information, see VerinTop Top Navigation.
Left navigation layout	Used for Verint applications with larger navigation menus. For more information, see VerinTop Left Navigation.
Webpage layout	For Verint web pages, such as Verint Connect. Contact the UX team for more information.

...

The header area contains information and controls which relates relate to the whole page, including all Workspace sections.

...

Structure

The header area can contain multiple components, including:

...

• Textual and graphical content

• Data Tables

• Forms

• Data Visualisations

• Widget Customisable dashboards

Workspace sections

Where there are distinct fields within the content, the main workspace may be separated into multiple sections. Workspace sections are usually directly related to one another.

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

...

REPLACE IMAGE

Note: For standalone interfaces, use Widgets instead.

Structure

Each workspace section should havemay include:

• a header, to identify its purpose.

• any required discrete controls.

...

• separate controls which only operate on the individual section, such as expand-collapse.

Note: controls which operate across all workspace sections should be placed in the Header area.

Placement and positioning

Workspace sections may:

• use any proportion of the available area within the main workspace.

• be nested within a larger section, where there is a clear hierarchy.

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

Should there be rules about how many sections or how they’re arranged? Only 3 columns (left-centre-right) etc?

Interaction

...

Interaction

Workspace sections should be of a fixed proportional width, with a height responsive to their content. They Their size should not be adjustable by the user. Where the user has control over the layout of sections, use a Widget Dashboard.

Where relevant, workspace sections may optionally:

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

• have a maximize option, to show the section workspace section’s content in a larger space such as a Popup or separate page.

...

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.

...

• The layout may not have a whole-page scroll. Each individual pane or widget workspace 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.

...

• controls in the header area which don’t affect the entire main workspace.

• workspace sections for areas which can be managed by the user standalone or embedded interfaces → use Widgets.

Responsive design

...

• 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. This may include changing text, graphics, table, and spacing sizes. 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 changes, so should the widths of the individual sections within it. The proportion of the width that each section uses should remain the same.

  • the layout of the content within each section should dynamically respond to its width.

  • 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…