| Table of Contents | ||||
|---|---|---|---|---|
|
...
Type | Description | Layout | Example |
Used by default for Verint applications. For more information, see VerinTop Top Navigation. |   |  | |
Used for Verint applications with larger navigation menus. For more information, see VerinTop Left Navigation. |  |  | |
Web layout | For Verint web pages, such as Verint Connect. Contact the UX team for more information. |  |  |
...
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)
...
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.
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.
...
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
...
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. -
Left Pane
The left pane consists of one of the following:
...
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.
...
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.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.
Layout responsive design example
Wide | Standard | Tablet | Mobile |
 |  |  |  |
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…