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

...

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.

...

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 for Left Navigation

   1. Instances?

   2. Additional information (WM example)

   3. Progress indicator??? (with Liav)

7. User profile, including:

   • System settings

   • User settings

   • User status

   • Logout option

8. Notifications and alerts (WM Optional)

Product area

...

• 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

...

Where Left Navigation is used, the header bar may contain additional features.

Instances

TBD

Additional information

Description

...

• Additional information a read-only section

• Tooltips may be used. Recommended for icons.

Progress Indicator

TBD

User Profile

Description

The user profile shows the current user status and offers 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.

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

Profile Menu

...

• Clicking anywhere on the profile image, or the associated drop-down button, will open the profile menu.

• Clicking anywhere outside of the profile menu will close it again.

• Selecting an option from the profile menu will:

  • perform the action (e.g. logout, change status, or open the Preferences window) and

  • close the menu.

...

Interaction

Alerts/notifications:

• above 99: TBD “99+”

• within the menu… TBD

• When are they removed?

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