| 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:
...
It has a fixed position at the top of the page.
The VerinTop contains either:
navigation (top navigation layout), or,
Instances (optional, left navigation layout).
The VerinTop should be x px high when expanded, and x px high when collapsed.
See the VerinTop page for more information.
...
be fixed underneath the VerinTop.
be the full width of the page, with the exception of the filter pane (where exists).
be collapsible.
be x px high.
For more information, see Ribbon.
...
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.
...
Placement and Positioning
The left pane should be x px wide.
See the relevant pattern pages for more information:
...
Placement and Positioning
The right details pane should be x px wide.
...
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.
...
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 |
|---|---|
...