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 profile, including:

   • System settings

   • User settings

   • User status

   • Logout option

   • Notifications and alerts (in both navigation)

Product area

Description

The Product area identifies the application as a Verint product.

...

• The name of the currently-selected application.

• A 3 dot ⋮ icon, to indicate a drop-down list.

• A drop-down list of other applications available to the user, including:

• Group headers (in bold).

Application names

.

• A divider line between internal applications and external products.

• External link icons beside external products, to show they will be opened in a new tab.

  Image RemovedImage Added

• A blue check mark beside the currently-selected application.

Placement and positioning

...

• The list should should be the same from all applications in a suite.

• Applications are clustered into meaningful groups, such as Analytics or Quality Management.

  Groups

  should be sorted in order of importance.

• External

  Products, where they exist, should always be the last group in the list.

...

• products should be shown underneath internal applications.

States

The application options should follow the List states.

...

• 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 External products may should be opened from the in a new tab.

   • … ?

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.

...

• 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. In addition, it will close the results menu and search field.

  • Clicking on 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

    • 2nd click closes the menu
      

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

...

Additional options

Instances

TBD

Notification and alerts

Description

...

Stand alone	Within User Profile
Image RemovedImage Added

Placement and positioning

...

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

Image RemovedImage Added

Image RemovedImage Added

Structure

The user profile contains:

• User’s image or initials

• User’s current status (optional)

• Alerts and notifications indicator (optional)

  Image Removed

• A menu containing additional account-level options

...

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

...

	blue line, 2 pixel width. Image Added
Available

...

	green line, 2 pixel width. Image Added
Not available

...

...

Image Added

Profile Menu

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

• Current statuses (optional)

• A horizontal line separating the statuses from other options

• Preferences, which may include:

  • Upload profile picture

  • Language

  • Date/Time format

  • Email preferences

• Switch profile

• Logout

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