Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

Status
colourBlue
titleongoing

...

  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.

...

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.

There are two types of top navigation: Full and Condensed.

Left navigation

  • When there are more than 7 menu items at any level.

  • When there are 3 or more levels in the menu hierarchy.

...

These additional header bar features may only be used in combination with Left Navigation.

Instances

Description

TBD

...

Structure

  • A one-line row.

  • Each instance is shown in a chicklet.

  • A blue border around the selected instance.

...

Positioned on the bottom row, left-aligned next to the Application Selector.

Interaction

  • Clicking on an instance will change the main workspace view to that instance.

  • On hover, an X will appear, allowing you to close the instance.

Internal logic

  • When the instances exceed the horizontal space, next and back buttons will appear to the right of the instances, allowing the user to scroll.

  • There is no limit to the amount of instances a user may create.

...

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

...

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

Stand alone, for use with Left Navigation only.

Within User Profile

Placement and positioning

...

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

...

Zeplin link

Screen thumbnail

<<Short Zeplin link. You
Use this
>>

<<Screen with 200 width>>

Code

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