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

...

• 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

...

• Clicking anywhere on the profile image, or the associated drop-down button, will open the profile menu.

• Clicking anywhere outside of the profile menu will close it again.

• Selecting an option from the profile menu will:

  • perform the action (e.g. logout, change status, or open the Preferences window).

  • close the menu.

Notifications

...

indicator

Description

A unified list of system notifications and alerts can be accessed from the header bar. Notifications may can be generated by any product within the suite.

See Notification center for more information the behavior of notifications.

Structure

Notifications The notification indicator consists of:

• an icon button Icon Button.

• a count of unread notifications.

• a popup showing the notifications.

Placement and positioning

...

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

Transitions

• The header bar should expand/collapse with a brief slide effect.

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.

...

• All content should be shown on one line, without wrapping. This includes:

  • top-level menu items.

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

• The space between menu items should not be adjusted.

• The notifications button may change to a separate bell icon button, to the left of the profile area.

Narrow screens

Current selection	Hover

...

• They should be replaced by a 3 dot ⋮ icon button.

• When the icon button is clicked, a drop-down menu will open.

  • Top level menu items will be shown on the left.

  • When a top level menu item is hovered over or clicked, the related second level menu items will be shown on the right.

  • When a second level menu item is selected, the menu will close and the new page will be shown.

• The current selection should be shown with a blue underline at both levels.

• When the menu is first opened, the currently-selected top level and second level menu items should be shown by default.

• A hover state should be shown for all menu items on hover (unless using a touch device).

• Where possible, the name of the page currently in view will be shown next to the hamburger menu button when the menu is closed. This should include both top and second levels.

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