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

...

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.

** Additional information, permitted only when using the left navigation. < Carlie Bradshaw >

Search

Description

Allows the user to search the suite hierarchy.

...

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

...

Interaction

Clicking on the “?” icon button opens a new browser window on top menu with all of the current viewresource’s center options.

Additional options

Instances

TBD

Notification and alerts

Description

...

Additional information can optionally 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

...

Positioned on the top row, right-aligned next to the User Profile and Resource CentreCenter.

Interaction

  • The additional Additional information must be a read-only . section

  • Tooltips may be used. Recommended for icons.

...

  • 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

...

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