Versions Compared

Version Old Version 66 New Version 67
Changes made by

Carlie Bradshaw

Carlie Bradshaw

Saved on

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. Help center

  6. Additional options (in Left Navigation mode only)

    1. Instances

    2. Additional information

  7. User profile, including:

    • User status

    • System and User settings

    • Logout option

  8. Notifications indicator

...

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.

  • External products should be opened in a new tab.

...

  • The search covers the Application Selector and all levels of navigation.

  • Results are displayed from top to bottom according to their hierarchy in the navigation.

  • For any of the 3 sections, if more than 12 results are found, the section will have a scroll.

EXAMPLE WITH SCROLL

Interactions

  • The behavior of the search is based on Live Search.

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

      • close the results menu and search field.

    • Clicking on a branch will:

      • navigate to the first page under the selected branch.

      • close the results menu and search field.

    • Clicking the X in the field will close the menu but will keep the field selected with text cursor ready to type.

    • Clicking Esc on the keyboard will:

      • 1st click - clear the search field.

      • 2nd click - close the menu.

...

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

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

  • If neither a user image or initials are available, a default avatar will be shown.
    DEFAULT AVATAR IMAGE

Current status (optional)

...

Default (no status)

  • Grey line, 2 pixel width.

Available

  • Green line, 2 pixel width.

Not available

  • Red line, 3 pixel width.

Profile Menu

...

The notification indicator consists of:

  • an Icon Button.

  • a count of unread notifications.

  • a popup showing the notifications.

...

  • the suite name and the second row level of navigation will be hidden.

  • the user profile image will reduce in size.

...

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Responsive Design

Verint products should dynamically respond to the user’s screen size, platform, and orientation, supporting all devices down to the common tablet size (960px width).

For more information, including recommended breakpoints, see the general Responsive Design guidelines.

Responsive guidelines

  • The VerinTop has been designed at 1366px width. As the screen width changes, it should respond based on the number and length of menu items, in both top and second level navigation.

Wide screens

Move notifications button in image

...

Where the screen size is wide enough to comfortably show everything contained within the VerinTop:

  • All content should be shown on one line, without wrapping. This includes:

    • top-level menu items.

    • the application selector. This area may be expanded if the application name is long, and normally wraps onto 2 lines.

  • Elements aligned to the left- and right-hand sides (Product Area and User Profile) will remain there.

  • The space between menu items should not be adjusted.

  • The notifications button may change to a separate bell icon button, to the left of the profile area.

Narrow screens

...

Where second level navigation does not fit within the screen width:

  • a More… option should be added on the right-hand side.

  • clicking More… will open a Drop-down Menu containing the remaining menu items.

  • the same hover and selected states from the main menu should be used for menu items in the drop-down.

Replace blue underline with check marks

Current selection

Hover

Where the screen size does not allow all menu items to be shown:

...

top level navigation does not fit within the screen width, even after line wrapping:

  • The entire menu should be replaced by a menu icon button ⋮.

  • When the icon button is clicked, a drop-down menu will open.

    • Top level menu items will be shown on the left.

    • When a top level menu item is hovered over or clicked, the related second level menu items will be shown on the right.

    • When a second level menu item is selected, the menu will close and the new page will be shown in the workspace.

  • The current selection should be shown at both levels.

  • When the menu is first opened, the currently-selected top level and second level menu items should be shown by default.

  • The current selection should be shown at both levels.

  • A hover state should be shown for all menu items on hover (unless using a touch device).

  • Where possible, the name of the page currently in view will be shown next to the menu icon button when the menu is closed. This should include both top and second levels.

...

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