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

...

Note: The navigation type should be the same for all products within a suite, unless it is opened in a new tab or window, when it may have a different navigation type.

Type	Choose:	Image
Top navigation Navigation mode	By default, if the menu options fit. When there are 7 or fewer menu items at each level. When there are only 2 levels in the menu hierarchy.
Left navigation Navigation mode	When there are more than 7 menu items at any level. When there are 3 or more levels in the menu hierarchy. When the top bar area is needed to show instances or additional information.

...

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

EXAMPLE WITH SCROLL

Interactions

• The behavior of the search is based on Live Search.

• Clicking the search icon button opens a search field to its left side.

• Clicking anywhere outside the search field will close it.

• While typing a search parameter in the search field.

  • A results menu will be displayed beneath the search field.

  • Search parameter will be highlighted in the displayed result’s menu.

  • Clicking on a page will:

    • navigate to the page.

    • close the results menu and search field.

  • Clicking on a branch will:

    • navigate to the first page under the selected branch.

    • close the results menu and search field.

  • Clicking the X in the field will close the menu but will keep the field selected with text cursor ready to type.

  • Clicking Esc on the keyboard will:

    • 1st click - clear the search field.

    • 2nd click - close the menu.

...

• By default, users will be represented using 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)

...

Default (no status)	grey line, 2 pixel width.
Available	green line, 2 pixel width.
Not available	red line, 3 pixel width.

Profile Menu

...

Placement and positioning

Top navigation Navigation mode

• A badge to the top-right of the user menu.

...

Left navigation Navigation mode

• A bell icon button to the left of the user menu.

...

The notification position should be the same for all products within a suite.

Interaction

Top navigation Navigation mode

• Clicking on the user profile will open the profile menu, which includes a notifications option with a count, for example 2 Notifications….

• The notifications popup will be opened by:

  • selecting the notifications menu option, or

  • directly selecting the top-right notifications badge.

Left navigation Navigation mode

• Clicking the bell icon button will open the notification popup.

...

• When there are over 99 items in the notification menu, the count should read 99+.

Expand-Collapse behavior

Description

The header bar can be collapsed by the user to allow for more vertical space. When the top is collapsed, the additional options are shown on hover.

Note: the header bar will not be collapsible when using Instances (Left Navigation mode only).

Structure

When collapsed:

• the suite name and the second row of navigation will be hidden.

• the user profile image will reduce in size.

States

State	Image
Expanded	Image Added
Collapsed	Image Added

Default state

On first opening, the top should be expanded.

Interactions

When the header bar is expanded

• On hover, a collapse icon button will appear below the product area.

• Clicking the collapse icon button will collapse the header bar.

When the header bar is collapsed

• On hover:

  • the expanded top will be shown automatically, revealing the second level navigation.

  • an expand icon button will appear below the product area.

• On removing hover the top will collapse again automatically.

• Clicking the expand icon button will pin the header bar open.

Best practices

Use:

• VerinTop in every Verint application.

• The same type and menu items for all products within a suite.

• Short labels for menu items, allowing room for translation.

...

• Different types of navigation for different products within the same suite.

• Words in sub-menu items which are included in the parent menu item, to keep labels short. For example, the options underneath Settings should be (e.g.) Privacy, Localization etc., not Privacy Settings, Localization Settings etc.

• A collapsible header bar with Instances.

Accessibility Compliance

...

Code

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