...

...

...

...

Description

A layout Layout is the arrangement of visual objects within the interface. It The layout should reflect the structure /hierarchy of the content and patterns of usage, helping the user enabling users 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.	Image Added	Image Added
Left navigation layout	Used for Verint applications with larger navigation menus. For more information, see VerinTop Left Navigation.	Image Added	Image Added

Arrangement

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

• the header identifies the page , and its location within the main product hierarchysubject is identified in the header area.

• a list of available categories or items within a library are parameters for the main content are available on the left.

• the main content is shown in the central workspace.

• further additional details on individual selected elements within the main content are shown on the right.displayed on the right.

Spacing

In order to provide visual and implementation consistency, an eight-point soft grid should be used for the spacing, sizing, and hierarchy of elements. This means that the spacing between items, padding, and margins should all be made up of multiples of eight: 8 px, 16 px, 24 px etc.

...

• A division of 4 px is allowed for very small areas, but should be avoided where possible.

• Some LUX objects have their own defined sizes, such as button widths and table row heights. These should not be resized to the 8 pt grid.

• Where objects do not have a defined size they should adhere to the 8 pt grid,for consistency.

Margins

Pages will have margins of:

• 32px on both the left and right.

• 24px beneath the VerinTop and at the bottom.

Popups will have the following margins, which exclude the border:

• 40px on both the left and right.

• 24px in the header and footer.

Spacing examples

Full page layout	Popup and Popover	Text and lists
Image Added	Image Added	Image Added
Image Added	Image Added	Image Added

Toolbar and icon-heavy example
Image Added

Structure

Layouts consist of:

...

• VerinTop

• Ribbon (optional)

• Header areaMain workspace

• Left pane, containing either:

  • Left

  panel (optional)

• Right panel (optional)

• Footer (optional)

...

VerinTop

• • navigation (left navigation layout only), or

  • Filter pane (optional, top navigation layout only)

• Main workspace

• Right Details pane (optional)

VerinTop

The VerinTop is a mandatory consistent pattern appearing at the top of all Verint layouts. It contains details on the location

• It has a fixed position at the top of the

...

• page

...

• .

• The VerinTop contains either:

  • navigation (top navigation layout), or,

  • Instances (optional, left navigation layout).

See the VerinTop page for more information.

Placement and Positioning

The VerinTop is in a fixed position at the top of the page.

Header area

...

Ribbon

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

• be fixed underneath the VerinTop.

• be the full width of the page, with the exception of the left pane.

• be collapsible.

See an example of a LUX Ribbon here.

Header area

The header area contains information and controls which relates relate to the whole pageentire main workspace.

...

Structure

The header area can include contain multiple components, including:

• Breadcrumbs

• Page title (mandatory)

• Header Additional header text, e.g. such as a page description

• Breadcrumbs

• Page controls which operate on whole workspace, such as Search, Tabs, or an Action Menu.

...

• Chiclets for applied filters

• Tabs which change the view within the main workspace

• Tools such as Search and action buttons

• Other page metadata, such as status indicators

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 optional exception of the left pane. It may optionally stretch above the details pane.

• The components contained within the header area should be aligned to either the left or right panels.

  • Breadcrumbs, header text, chiclets, and tabs should be aligned to the left

  -hand side

  • .

  • Action menus and other tools and metadata should be aligned

  to the right-hand side.

Responsive Design

• When the screen width is changed, each component in the header area should remain fixed

  • to the

  left- or

  • right

  -hand side

  • .

  The space between them may increase or decrease.

• The size and spacing within each individual component should not change.

• Where there is no longer space for a component, see the recommended responsive design for the individual component.

Main workspace

...

The main workspace contains the primary informationcontent, 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 main workspace may consist ofcontains content such as:

• Textual informationand graphical content

• Data Tables

• Forms

• /wiki/spaces/UserExp/pages/780470826

Main workspace layout

Widgets

...

Other graphical content

Where the main workspace is divided into areas, for example with widgets, each area should include:

• A section header / label

• Controls for the individual area

Placement and Positioning

The main workspace should be central within the layout.

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 hidden or minimised.

• The layout of content within the main workspace should dynamically respond to the size of the available area.

Left panel

Description

A left-hand panel should be used to offer options to refine what is shown in the main workspace. The options can also give the user an idea of the structure of the available information.

The panel may be a static element on the page, or within a collapsible Filter Pane.

Structure

The content of the left panel should be shown as a List.

Placement and Positioning

• When using the filter

Filter pane - top. On page - beneath header.

Right panel

Description

details. Fixed 320px? Or variable width?

Static on page or using collapsible Details panel

Structure

Placement and Positioning

Details pane - top. On page - beneath header.

Responsive Design

Footer

Description

Structure

Placement and Positioning

Responsive Design

Best practices

Use:Where there are distinct fields within the content, the workspace may contain multiple Widgets with their own headers and controls. (Note: controls which operate across all widgets should be placed in the Header area).

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

• Each widget should have a fixed position. The layout cannot be adjusted by the user (except within a customisable Dashboard), aside from widget expand/collapse.

• The spacing between each widget should be consistent across the workspace.

• The layout of widgets within the workspace should also have a clear hierarchy, ordered left-to-right, top-to-bottom.

See Widgets for more information on how content is laid out within each widget.

Note: where the main workspace only contains one field it should not be contained within a widget, with no additional headers.

Dashboards

A Dashboard layout should be used where:

• the user can add, remove, or resize widgets, or

• the workspace provides an overview of data on a particular subject.

Single field layout	Multi-widget layout	Dashboard layout
Image Added	Image Added	Image Added

Left Pane

The left pane may be one of the following:

• Left Navigation Pane (left navigation layout only), containing a collapsible navigation menu.

• Filter Pane (optional), allowing the user to refine what is shown in the main workspace.

The filter pane and left navigation may not be used together in the same layout.

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.

Interaction

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

Best practices

• Make sure there’s a natural flow between elements /journey through on the page. Hierarchy (top-bottom, l-r), 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 graphical similarities.

• Horizontal symmetry ?

Make sure

Use:

• Responsive design, to ensure the layout works at all across screen sizes, cross-device, cross-browser.

• Make sure each section is distinct and identifiable.

• Don’t have too many tiles?

• Consistent devices, and browsers.

• consistent spacing between elements

• Focal points – use colour sparingly for primary CTAs

• Be aware of common scanning patterns. F patterns are common for lists of information, learnt from popular search engine designs, where users scan across the top and down the side of the page to find the information they’re looking for.

https://www.nngroup.com/articles/text-scanning-patterns-eyetracking/  

Don’t use:

Responsive design

• The size and spacing within each individual component should not change.

• Where there is no longer space for a component, see the recommended responsive design for the individual component.

• the same layout for pages with similar content.

Don’t use:

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

• a widget where the main workspace only contains one field.

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).

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

Example screens

...

• , 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. Note: the available space may change due to the state of collapsible panes as well as screen size.

• Where widgets are used within the main workspace:

  • as the width of the workspace changes, so should the widths of the individual widgets within it. The proportion of the width that each widget uses should remain the same.

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

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

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

• Where space is severely limited, it is acceptable to remove auxiliary information and functionality.

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

Responsive layout example

1920 px	1366 px	900 px	375 px
Image Added	Image Added	Image Added	Image Added

Design

...