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

...

1. Product area (Verint logo and suite name).

2. Application selector.

3. Navigation area (Top or Left). See each type for more info.

4. Search

5. Resource center

6. Additional options. (Use only in combination with Left Navigation).

   1. Instances?

   2. Notifications and alerts (WM) (Optional)

   3. Additional information (WM example)

   4. Progress indicator??? (with Liav)

7. User menu, including:

   1. System settings

   2. User settings

   3. User status

   4. Logout option

   5. Notifications and alerts (in both navigation)

Product area

Description

The Product area identifies the application as a Verint product.

...

• The selected application will be indicated with a blue check mark.

• A scroll bar will be used when the application selector is taller than the height of the screen.

• Where there are more than 15 applications, a search field will be added above the list - see Search for more information.

1. TBDDDD External Products

   • Such products may be opened from the

Interaction

• Clicking the 3 dots ⋮ beside the application name will open the list of available applications.

• When an application is selected:

  • the list will close.

  • the view will change to the new application.

...

Allows the user to search the navigation options.

Image Added

Image Added

Structure

...

• The trigger icon is displayed as an icon with no

...

• label.

• The search results menu is divided into 2 optional sections

  • Pages - top

  • Paths - bottom

...

Placement and positioning

Position The position of the search icon may vary in cases when additional elements are used (e.g. additional information)

Internal logic

The search covers

...

Product lists and all levels of navigation.

Interactions

• 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

  • Each row in the list will compose of several navigation levels

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

    Image Removed

  • Clicking on a Page will navigate to the page. In addition, it will close the results menu and search field.

  • Clicking

  Esc

  • on

  the keyboard or the “X” in the field at any time

  • a Path will navigate to the 1st page under the selected path. In addition, it will close the results menu and search field.

  • Clicking the “X” in the field will close the menu but will keep the field displayed with text cursor ready to type

  • Clicking Esc on the keyboard

    • 1st click will clear the search field

  and close

  • • 2nd click closes the menu

  (if opened)

  • • 
      

  • <<TBD image>>
    

Resource center

Description

...

Positioned left to the user profile

...

Internal logic

Contextual to the currently selected app? screen?

Interaction

Clicking on the “?” icon button opens a new browser window on top of the current view.

...

• A one-line row

• It may be divided by vertical lines according to the displayed information

Placement and positioning

...

Stand alone	Within User Profile
Image RemovedImage Added	Image RemovedImage Added

Placement and positioning

...

• By default, the circle around the profile image will be blue. However, it can also be used to show the user’s current status:

  • Available: green line, 2 pixel width.

  • Not available: red line, 3 pixel width.

    

Menu (Listed from top to bottom):

...

Internal logic

Alerts/notifications:

• above 99: TBD “99+”

• within the menu… TBD

• When are they removed?

Interaction

1. Alerts/notifications: TBD

2. Search: TBD

3. Help: click on Help will open the help center in a new tab, focused on the specific workspace currently being used.
   When relevant, Help will operate as an action menu that will show all help options in the menu list.

4. User profile: TBD

Best practices

<Whenever a recommendation (not a must) is provided>>

Use:

• VerinTop in every Verint application.

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

• Top navigation, unless you have more than 7 menu items at each level, or more than 3 levels in the menu hierarchy.

• <…>

• <…>

Don’t use

• <…>

• <…>

General

• <…>

Accessibility Compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility

...

Code

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