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

...

• 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

...

• On hover:

  • the expanded top will be shown automatically, revealing the second level navigation.

  • an expand icon button will appear below the product area.

• On removing hover the top will collapse again automatically.

• Clicking the expand icon button will pin the header bar open.

Transitions

• The header bar should expand/collapse with a brief slide effect.

Best practices

Use:

• VerinTop in every Verint application.

• The same type and menu items for all products within a suite.

• Short labels for menu items, allowing room for translation.

...

Narrow screens

Current selection	Hover
Image RemovedImage Added	Image Modified

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

...

• The options within the Application Selector should move into the menu drop-down, as an additional level before the normal top level navigation.

• The drop-down menu will then contain the following levels:

  • Applications.

  • Top level navigation.

  • Second level navigation.

• Each level of the drop-down will:

  • take up the whole screen when in view.

  • have a header at the top to say identify which level is currently in view. This may break onto two lines where necessary.

  • have a back Back < icon button and , with the name of the previous level, next to the header, allowing the user to return to the previous level. (Not applicable to for the first level).

  • have Next > arrows next to each option in the first two levels, to show that it will lead to further options. (Not applicable for the last level).

• The width of the Product area (with the Verint logo and suite name) can be reduced, where necessary.

• When a final level navigation item is selected, the menu will close and the new page will be shown.

...

Code

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