| Table of Contents | ||||
|---|---|---|---|---|
|
...
Types
Type | Description | Layout (replace images) | 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 main 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.
...
Ribbon (optional)
Header areaMain workspace
Left pane, containing either:
Left 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. VerinTop:
is in It has a fixed position at the top of the page.
The VerinTop 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
The Ribbon should be used where there are a lot of controls for the main workspace. The ribbon should:
...
The header area contains information and controls which relate to the whole page, including across all Workspace sections.
...
Structure
...
Page title (mandatory)
Header Additional header text, such as a page description.
Chicklets for applied filters.
Tabs which change the view within the main workspace.
Tools such as Search and action buttons.
Other page metadata, such as a status indicator.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 exception of the left pane. It may optionally stretch above the details pane (optional).
Breadcrumbs, header text, chicklets, and tabs should be aligned to the left-hand side of the header area.
Action menus and status indicators other tools and metadata should be aligned to the right-hand side.
...
Textual and graphical content
Customisable dashboardsDashboards
Workspace sections
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.
...
Workspace sections should be of a fixed proportional width, with a height responsive to their content. Their size should not be adjustable by the user.
...
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 workspace section’s content in a larger space such as a Popup or separate page.
Left Pane
The left pane can may be one of the following:
Left Navigation Pane (optional), containing a collapsible navigation menu.
Filter Pane (optional), allowing the user to refine what is shown in the main workspace.
Note: the The filter pane and left navigation may not be used in conjunction with left navigationtogether in the same layout.
There should be no additional elements between the left pane and the main workspace.
...
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 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.
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 Widgets.
Responsive design
Must = 1366.
Where lower resolutions are needed, Verint products may 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 /wiki/spaces/UserExp/pages/1893074841.
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 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.
See the recommended responsive design for individual patterns and components, where necessary.
...
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 |
|---|---|
Code
...