...
Product area (Verint logo and suite name)
Application selector
Additional options (in Left Navigation mode only)
Instances
Additional information
Search
Notifications indicator
Help center
User profile, including:
User status
System and User settings
Logout option
...
Note: All products within a suite should use the same navigation type. Only external products, that are opened in a different tab, can have a different navigation type.
Type | Choose: | Image |
|---|---|---|
|  | |
Note: Left navigation cannot be used in conjunction with the Filter Pane. |  |
...
Provide a way for users of assistive technology to skip navigation links, which would otherwise require a lot of additional clicks.
A skip link will be positioned underneath the Verint logo.
When any item within the VerinTop is in focus, the VerinTop will be displayed in an Expanded state, as on hover.
...
Search
Keyboard | Search icon | Search field | Results menu |
 |  |  | |
Tab | Navigates to the next focusable element |
| N/A |
Shift + Tab | Navigates to the previous component | Closes the search field and navigates to the previous component | N/A |
Space | Opens the Search field | Adds a space in the search Text Field |
|
Enter | Opens the Search field | N/A |
|
Esc | N/A |
|
|
Arrows | N/A |
|
|
Text input | N/A | Focus remains on field while text is added or removed | Focus returns to search field and the characters are entered, updating the results list accordingly |
...
Verint products should support all devices down to the common tablet size (960px width).
For general guidelines, see Fundamentals - Responsive design.
As the screen width changes, the VerinTop should respond based on the number and length of menu items in both 1st and 2nd level navigation.
The space between menu items should not be adjusted at any width.
Each menu item will have the same padding either side of the label. The selection highlight should extend across this padding.
1st and 2nd level menu items will have an additional consistent spacing between them.
Wide screens
...
Where the screen size is wide enough to comfortably show everything contained within the VerinTop:
All content should be shown on one line, without wrapping. This includes:
1st level menu items, and
the application selector. This area may be expanded if the application name is long, and normally wraps onto 2 lines.
Elements aligned to the left- and right-hand sides (Product Area and User Profile) will remain there.
Narrow screens
Where 2nd level navigation does not fit within the screen width a More… option should be added on the right-hand side.
Clicking More… will open a drop-down menu containing the remaining menu items.
The same hover and selected states from the main menu should be used for menu items in the drop-down.
When an item has been selected from the drop-down, the blue underline should be added to the More… button.
...
Where 1st level navigation does not fit within the screen width, even after line wrapping:
The entire menu should be replaced by a menu icon button ⋮.
When the icon button is clicked, a drop-down menu will open.
1st level menu items will be shown on the left.
When a 1st level menu item is hovered over or clicked, the related 2nd level menu items will be shown on the right.
When a 2nd level menu item is selected:
the menu will close.
the new page will be shown in the workspace.
When the menu is first opened, the currently-selected 1st level and 2nd level menu items should be shown by default.
The current selection should be shown at both levels.
A hover state should be shown for all menu items on hover (unless using a touch device).
Where possible, the selected page will be shown next to the menu icon button. This should include both 1st and 2nd levels.
...
Current selection
...
Hover
...
For specific Verintop guidelines, see the Top navigation and Left navigation sub-pages.
Design
Zeplin link | Screen thumbnail |
|---|---|
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 |
...