Description

Layout is the arrangement of visual objects within the interface. The layout should reflect the structure of the content and patterns of usage, helping the user to navigate large amounts of information.

Consistent Verint layouts are as important as graphical styling.

Types

Type	Description	Layout	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.

Arrangement

Make sure there’s a natural flow between the elements on the page. Where there is a clear hierarchy between elements, it is recommended that they are arranged from top to bottom, left to right. For example:

the page subject is identified in the header area.
a list of available parameters for the content is shown on the left.
the main content is available in the central workspace.
additional details on selected elements within the main content are shown on the right.

Structure

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)

VerinTop

The VerinTop is a mandatory consistent pattern appearing at the top of all Verint layouts. VerinTop:

is in a fixed position at the top of the page.
contains either:
- navigation within the main product hierarchy (top navigation layout), or,
- Instances (optional, left navigation layout).

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.

Structure

The header area can contain multiple components, including:

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

The header is positioned at the top of the page, directly underneath the VerinTop.
The height of the header area may vary, depending on which components are included.
The header area should be the full width of the page, with the exception of the left pane. It may optionally stretch above the details pane.
Breadcrumbs, header text, and tabs should be aligned to the left-hand side of the header area.
The action menu should be aligned to the right-hand side.

Main workspace

The main workspace contains the primary content, so should be central and granted the most space within the layout.

Placement and Positioning

The main workspace should be central within the layout.

Content

The workspace content may consist of:

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.

REPLACE IMAGE

Structure

Each section should have:

a header, to identify its purpose.
any required discrete controls.

Sections may:

use any proportion of the available area within the main workspace.
be nested within a larger section.

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

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

Where relevant, sections may optionally:

be collapsible, particularly for sections containing secondary or optional information. The title should still be visible when a section is collapsed.
have a maximize option, to show the section content in a larger space such as a Popup or separate page.

Left Pane

The left pane consists of one of the following:

Left Navigation pane, containing a collapsible navigation menu.
Filter Pane (optional), allowing the user to refine what is shown in the main workspace.

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

Placement and Positioning

The left pane should:

stick to the left side of the page, beside the main workspace.
have a fixed width.
always fills the vertical space, from beneath the VerinTop to the bottom of the page.

There should be no additional elements between the left pane and the main workspace.

Right Details Pane

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.

Placement and Positioning

The details pane should:

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
a few pixels beneath full-width header areas.

Where a Ribbon is used, the height of the details pane should reduce when the ribbon is expanded. The top of the pane should align to the bottom of the ribbon.

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.

Best practices

Make sure there’s a natural flow between elements on the page, from top to bottom, left to right.
- Prioritise the most important elements to facilitate user decisions.
- Form associations between related elements by keeping them in close proximity and using similar styling.
Keep controls in the same area as the content they manage.
Be aware of common scanning patterns, such as the F pattern, where users scan across the top and down the side of the content to find what they’re looking for.

Use:

fluid responsive design, to ensure the layout works at all screen sizes, across devices and browsers.
headers for each element within the layout, to make sure they are easily identifiable.
consistent spacing between elements.
color sparingly. It should only be used for primary information and calls to action.
the same layout for pages with similar content.

Don’t use:

controls in the header area which don’t affect the entire main workspace.
workspace sections for areas which can be managed by the user → use Widgets.

Responsive design

Verint products should dynamically respond to the user’s screen size, platform, and orientation, supporting all devices down to the common tablet size (960px width).

For more information, see the general Responsive Design guidelines.

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.