| Table of Contents | ||||
|---|---|---|---|---|
|
...
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 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. |
 |  |
Left navigation layout | Used for Verint applications with larger navigation menus. For more information, see VerinTop Left Navigation. |
 |  |
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 main content is shown are available on the left.
the main content is available shown in the central workspace.
additional details on 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 |
|---|---|---|
 |  |  |
 |  |  |
Toolbar and icon-heavy example |
|---|
 |
Structure
Layouts consist of:
...
be fixed underneath the VerinTop.
be the full width of the page, with the exception of the filter left pane (where exists).
be collapsible.
For more information, see RibbonSee an example of a LUX Ribbon here.
Header area
The header area contains information and controls which relate to the whole page, across all Workspace sectionsentire main workspace.
...
Structure
The header area can contain multiple components, including:
Page title (mandatory)
Additional header text, such as a page description
Tabs which change the view within the main workspace
Tools such as Search and action buttons
Other page metadata, such as status indicators
...
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 (optional).
The components contained within the header area should be aligned to either the left or right.
Breadcrumbs, header text,
chiclets, and tabs should be aligned to the left
.
Action menus and other tools and metadata should be aligned to the right
.
Main workspace
The main workspace contains the primary content, so should be central and granted the most space within the layout.
...
The main workspace should be central within the layout.
Content
The main workspace contains content may consist ofsuch as:
Textual and graphical content
...
Main workspace layout
Widgets
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 may include:
a header, to identify its purpose.
any separate controls which only operate on the individual section, such as expand-collapse.
contain multiple Widgets with their own headers and controls. (Note: controls which operate across all workspace sections widgets should be placed in the Header area).
Placement and positioning
Workspace sections may:
Each widget may use any proportion of the available area within the main workspace.
be nested within a larger section, where there is a clear hierarchyEach 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
...
Interaction
Workspace sections should be of a fixed proportional width. Their size should not be adjustable by the user.
Where relevant, workspace sections may optionally:
be collapsible, particularly for sections containing secondary or optional content. Titles should still be visible when a workspace section is collapsed.
have a maximize option, to show the section’s content in a larger space such as a Popup or separate page.
.
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 |
|---|---|---|
 |  |  |
Left Pane
The left pane may be one of the following:
Left Navigation Pane (optionalleft 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.
There should be no additional elements between the left pane and the main workspace.
Placement and Positioning
See the relevant pattern pages for more information:
...
.
...
...
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
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.
...
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.
Use:
fluid responsive Responsive design, to ensure the layout works at all across screen sizes, across devices, and browsers.
headers for each element within the layout, to make sure they are easily identifiable.
consistent spacing between elements.
the same layout for pages with similar content.
...
controls in the header area which don’t affect the entire main workspace.
workspace sections for standalone or embedded interfaces → use Widgetsa 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, 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 Note: the available space may change due to the state of collapsible panes as well as screen size.
Where sections widgets are used within the main workspace:
as the width of the workspace changes, so should the widths of the individual sections widgets within it. The proportion of the width that each section widget uses should remain the same.
the layout of the content within each section widget should dynamically respond to its width.
breakpoints may be introduced, at which the sections widgets may be rearranged into a more appropriate layout. For example, a minimum-width workspace breakpoint may make all sections widgets full width and vertically stacked.
Where space is severely limited, it is acceptable to remove secondary information and functionality, but this should be avoided where possible.
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 |
|---|
 |
 |
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…
Design
...
Zeplin link
...
Screen thumbnail
...
 |  |
Design
...