| 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. |  |  |
...
The main workspace should be central within the layout.
Content
The main workspace contains one or multiple Widgets.Each widget may containcontent such as:
Textual and graphical content
...
the user can add, remove, or resize widgets., or
the workspace provides an overview of data on a particular subject.
...
Note: where the main workspace only contains one field it should not be contained within a widget, with no additional headers.
Single content area layout | Multi-widget layout | Dashboard layout |
|---|---|---|
  |  |  |
...
Layout
Each widget should have a fixed position and proportional size , which (except within a customisable Dashboard). The layout cannot be adjusted by the user (except where , aside from widget expand/collapse is offered). Where the user can adjust the layout, use a Dashboard.
Left Pane
The left pane may be one of the following:
...
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:
responsive design, to ensure the layout works at all screen sizes, across devices and browsers.
consistent spacing between elements.
the same layout for pages with similar content.
widgets where the main workspace contains multiple distinct fields.
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, 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 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.
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.
...
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 |
|---|---|
...