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 list should should be the same from all applications in a suite.

• Applications should be sorted in order of importance.

• External products should be shown underneath internal applications.

...

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

1. TBDDDD External Products

   • External products should be opened 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.

...

See illustration and example when all three sections are used

Image RemovedImage Added

Placement and positioning

...

• The search covers Product lists 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 itself will have a 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. In addition, it will close the results menu and search field.

  • Clicking on a Branch will navigate to the 1st page under the selected branch. 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

...

Additional options

Instances

TBD

Notification and alerts

Description

...

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

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

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

• Logout

Internal logic

Alerts/notifications:

• above 99: TBD “99+”

• within the menu… TBD

• When are they removed?

Interaction

1. Alerts/notifications: TBDSearch: TBD

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

3. 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 2 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>>