Carlie Bradshaw , Asaf Ben-Oved, Shani Laendler (Unlicensed) StatuscolourBluetitleCarlie Bradshaw , Asaf Ben-Oved, Shani Laendler (Unlicensed)

...

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 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 with no label.

• 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.

Example with all three sections:

...

...

Internal logic

• The search covers the Application Selector and all levels of navigation.

• Results are displayed from top to bottom according to their hierarchy in the navigation.

• For any of the 3 sections, if more than 12 results are found, the section will have a scroll.

...

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

States

State	Image	Details
Regular

Image Removed

UPDATE IMAGE

Image Removed

When there are no unread notifications:

• the grey bell icon is shown.

When there are unread notifications:

• a notification count appears above the icon button, and

• the bell icon and notification count are blue.

Active

Image Removed

UPDATE IMAGE

When the notification popover is open, whether or not there are

Image Added

When there are no unread notifications: the grey bell icon

and notification count (if present) are a darker blue.Image Removed

Hover

IMAGE

Focused

IMAGE

Focused, Active

IMAGE

Focused, Hover

IMAGE

is shown. When there are unread notifications: a notification count blue badge appears above the icon button
Hover	Image Added
Active	Image Added

Interaction

Top Navigation mode

...

Opens contextual online help pages and other resources such as product feedback.

Bell needs adding to image

...

Structure

Displayed as an icon button with no text.

...

Positioned to the left of the user profile.

Update image

...

Interaction

Clicking on the ? icon button opens a menu with all of the help center options.

...

The user profile shows the current user status and offers account-level options.

...

Image: Add two Send Message options and Enter What If options

Structure

The user profile contains:

...

• By default, users will be represented by their initials (e.g. JD for John Doe).
  INITIALS EXAMPLE IMAGE

• Each user may upload an image to replace the initials.

• If neither a user image or initials are available, a default avatar will be shown.
  DEFAULT AVATAR IMAGE

Current status (optional)

• 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 line, 2 pixel width.	Image Modified
Available	Green line, 2 pixel width.	Image Modified
Not available	Red line, 3 pixel width.	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. <Can be multiple skip links - check they’re necessary>

• When any item within the VerinTop is in focus, the VerinTop will be displayed in an Expanded state, as on hover.

<Update Image to visual>

...

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).

...

• 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.

Examples at 961 px:

Current selection	Hover
Image Modified	Image Modified

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

Design

Code

<<a box containing the code - when there is no code to present use the Coming Soon GIF>>