...

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
Top Navigation mode	By default, if the menu options fit. When there are only 1 or 2 levels in the menu hierarchy. When there are 7 or fewer menu items at each level.	Image Modified
Left Navigation mode	When there are 3 or more levels in the menu hierarchy. When there are more than 7 menu items at any level. When the top bar area is needed to show Instances or Additional information. Note: Left navigation cannot be used in conjunction with the Filter Pane.	Image Modified

Search

Description

Allows the user to search the suite hierarchy, including application names and menu items.

Image Modified

Image Modified

Image Modified

Structure

• The trigger icon is displayed as an Icon Button with no label.

• The Search bar extends to the left of the trigger icon, when selected.

• The search results menu is divided into 3 optional sections:

  • Top - Page results from the current application.

  • Middle - Page results from all other applications.

  • Bottom - Branch results only.

...

• A bell icon button is shown between Search and the Help center.

States

State	Image	Details
Regular	Image Modified	When there are unread notifications: a blue notification badge appears to the top-right of the grey bell icon button. a count of the unread notifications is shown in the badge.
Hover	Image Modified
Active	Image Modified

Interaction

Top Navigation mode

...

• An additional circle around the user profile image can be used to show the user’s current status.

State	Description	Regular	Hover	Active
Default (no status)	Grey outline	Image Modified	Image Modified	Image Modified
Available	Green external circle	Image Modified	Image Modified	Image Modified
Not available	Red external circle, wider than the green version	Image Modified	Image Modified	Image Modified

Profile Menu

Note: The options in the profile menu should be the same for all products in a suite.

...

• 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
	Image Modified	Image Modified	Image Modified
Tab	Navigates to the next focusable element	Empty - closes the search field and navigates to the next focusable element Filled - navigates to the “X” icon button	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	Selects the focused item, closes the menu and search field, and loads the destined page
Enter	Opens the Search field	N/A	Selects the focused item, closes the menu and search field, and loads the destined page
Esc	N/A	Empty - closes the search field and returns it to the search icon Filled - clears the search field and closes the results menu	Clears the search field Closes the results menu Returns the focus to the search field without applying any action
Arrows	N/A	Empty - N/A Filled - Down moves the focus from the search field to the first item in the results menu. (Not applicable if there are no search results). Right/Left act as arrows in the search Text Field	Moves the focus down or up by one item Clicking Up from the first item moves the focus back to the search field Down stops at the last item in the list
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

Responsive Design

Verint products should support all devices down to the common tablet size (960px width). For general guidelines, see Fundamentals - Responsive design.

...

• 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
Image Modified	Image Modified

For more information about responsive design for mobile, please contact the UX team.

Design

Zeplin link	Screen thumbnail
https://zpl.io/PqzwL4D	Image Modified
https://zpl.io/a3QmJkY	Image Modified
https://zpl.io/NwklBwZ	Image Modified
https://zpl.io/YYdlWod	Image Modified
https://zpl.io/bleOEo5	Image Modified
https://zpl.io/8lkXyRd	Image Modified
https://zpl.io/jZLAk9q	Image Modified
https://zpl.io/kDBgYjK	Image Modified
https://zpl.io/xmGNKP3	Image Modified
https://zpl.io/g8ql9dD	Image Modified

Code

...