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.

...

Allows the user to search the navigation optionssuite hierarchy.

Structure

• The trigger icon is displayed as an icon with no label.

• The search results menu is divided into 2 3 optional sections

  • Pages - top

  • Paths - bottom

...

• • top - Page results from the current application

  • Middle - Page results from all other applications

  • Bottom - Branches results only

See illustration and example when all three sections are used

Image Added

Image Added

Placement and positioning

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.

• Results are displayed from top to bottom according to their hierarchy in the 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

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

...

• 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

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