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

Description

The Verint Top is a consistent pattern across all Verint products, making them immediately recognisable. It frames the application with a header bar and an optional left-hand panel.

It allows the user to perform key actions including:

• switching between applications.

• navigating between pages in the selected application.

• changing system-level configurations.

• accessing help.

Main Structure

The VerinTop will include the following components:

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.

Structure

The product area consists of:

• The Verint logo.

• Application suite name.

Placement and positioning

The product area is in a fixed position in the top-left corner.

Interaction

• Clicking the product area will open the Verint product suite site map.

Note: The product suite cannot be changed.

Application selector

Description

Allows the user to change the selected application within the suite.

Note: stand-alone products, which are not part of a suite, do not need to include the application selector.

Structure

The application selector consists of:

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

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

    

Placement and positioning

The application selector appears to the right of the product area, in the top-left corner.

Content

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

States

The application options should follow the List states.

Internal logic

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

If an external product is selected:

• the list will close.

• the original application will remain selected.

• the selected product will open in a new tab or window.

Main navigation

Types

There are two types of navigation menu. See the separate pages for each type.

Note: The navigation type should be the same for all products within a suite, unless it is opened in a new tab or window, when it may have a different navigation type.

Type	Choose:	Image
Top navigation	By default, if the menu options fit. When there are 7 or fewer menu items at each level. When there are only 2 levels in the menu hierarchy.
Left navigation	When there are more than 7 menu items at any level. When there are 3 or more levels in the menu hierarchy.

Search

Description

Allows the user to search the navigation options.

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

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

  • 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

Opens contextual Online help pages and other resources such as product feedback.

Structure

Displayed as an icon button with no text.

Placement and positioning

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 information

Description

Additional optional information can be shown in the header bar. Permitted only when using the left navigation.

Content

Can be either text or icons. Additional information is not interactive.

Structure

• A one-line row

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

Placement and positioning

Positioned on the top row left to any action icon of the VerinTop.

Interaction

The additional information must be read-only. Tooltips may be used.

Notification and alerts

Description

A unified place where users can see the system’s alerts and notifications from different parts of the suite.

Stand alone	Within User Profile

Placement and positioning

Notifications should appear:

• In the User Menu, when using Top Navigation.

• In the top bar, when using Left Navigation.

The notification position should be the same for all products within a suite.

Structure

TBD

Content

TBD

User Profile

Description

The user menu holds the current user status and details additional action items within its menu.

Structure

The user profile contains:

• User’s image or initials

• User’s current status (optional)

• An indicating number of alerts and notifications (optional)

  

• a menu containing additional actions

  • Content

Content

User Profile:

• By default, users will be represented using their initials (e.g. JD for John Doe).

• Each user may upload an image to replace the initials.

Current status (optional).

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

• Current statuses (optional)

  • a horizontal break after statuses

• Notification and alerts (optional)

• User profile (optional)

• Log out

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

Design

Code

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