Table of Contents

minLevel	1
maxLevel	2

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.	Image RemovedImage Added
Left navigation layout	Used for Verint applications with larger navigation menus. For more information, see VerinTop Left Navigation.
Web layout	For Verint web pages, such as in Verint Connect. Contact the UX team for more information.

...

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

...

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 Panepane (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:

...

See the VerinTop page for more information.

...

Ribbon

For Top Navigation Layout only.

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.

For more information, see Ribbon.

Header area

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

...

Structure

The header area can include contain multiple components, including:

Breadcrumbs
Page title (mandatory)
Header text, such as a page description
Chicklets for applied filters
Tabs to 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

...

Make sure each section within the main workspace is distinct and identifiable.

The content of the main workspace should be fluid, adapting to the size of the available area, even as it changes during use. Where widgets are used, the size of the widgets may adapt, and the contained content should fluidly respond. - move to responsive section.

Left Pane

The left pane may consist of eitherconsists of one of the following:

Left Navigation pane, containing a collapsible navigation menu.
Filter Pane, used when there are options (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 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 may have its own internal vertical scroll, where necessary.
The left and right and left panes are may be collapsible, depending on the layout screen width. See individual pane designs 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.

...

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

...

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 widgets are used, the size of the widgets may adapt and each one’s content should fluidly respond.
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~~.The layout of content within the main workspace should dynamically respond to the size of the available area. This may change due to the state of collapsible panes as well as screen size.
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 there is no longer space for a component, see See the recommended responsive design for the individual componentcomponents, where necessary.