Versions Compared

Version Old Version 31 New Version 32
Changes made by

Ethan McGonigle (Unlicensed)

Ethan McGonigle (Unlicensed)

Saved on

Key

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

Description

...

Note: Left navigation cannot be used in conjunction with the Filter Pane.ADD WHOLE-PAGE IMAGE showing the nav frame

Do we want to add a ‘Types’ header here?

Default

With Icons

Structure

...

  • A left-hand grey column.

  • A blue marker in the location of the top level of the selected item.

Default

With Icons

Image RemovedImage AddedImage RemovedImage Added

Placement and positioning

...

  • stick to the left side of the page, beside the main workspace.

  • be collapsible.

  • be the same fixed width as the Product area (Verint logo and suite name).

  • fill the vertical space, from beneath the VerinTop to the bottom of the page.

States

State

1st level navigationAdditional level navigationLevel Menu Item

2nd Level Menu Item

Regular

 

Hover

 

Active

 

Selected

 

Selected, Hover

 

Focused

 

Focused, Hover

 

Focused, Selected

 

...

State

Default

With Icons

Description

Unpinned

Image RemovedImage AddedImage RemovedImage Added

  • the left navigation panel will open when the user hovers over or clicks on the left-hand edge of the screen.

  • the left navigation panel will overlay the content of the page, hiding everything that is behind it.

  • the left navigation will close when:

    • a menu item is selected, or

    • the user moves the cursor away (removes hover).

Pinned

Image RemovedImage AddedImage RemovedImage Added

  • the left navigation panel will always be visible.

  • the content of the page narrows to be shown next to the navigation menu (so nothing is hidden).

  • selecting an item from the menu will not close the left navigation.

...

  • Menu items will expand and collapse with a brief slide effect.

  • The left navigation panel will open and close with a brief slide effect.

  • When pinning or unpinning the left navigation, the content on the main area of the page will narrow or stretch with a transition effect.

Additional options for Left Navigation

These additional header bar features may only be used in left navigation mode.

...

Instances represent pages for different tasks or items of work.

New image with lots of instances (showing < > scrolling)

...

Note: instances must always be visible if the header is collapsed. Collapsing is not mandatory when using instances.

...

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

    • Clicking the left/right arrow will scroll to show the previous/next instance respectively.

    • The selected instance will not change.

    • When reaching the first or last instance, the relevant left or right arrow will be disabled.

  • If the selected instance is not in view when the user returns to the main workspace, it should automatically be brought back into view.

States

State

Image

Comment

Regular

Hover

Selected

Selected, Hover

Focused

Focused, Hover

Focused, Selected

...

Additional information can optionally be shown in the header bar, above the divider line.

New image with additional information. Can be the same as one above?

...

Content

Can be either text or icons.

...

The tab index flow will follow this order. Shift + Tab will follow the reverse order.

...

Image from top nav page:

Tab order may vary slightly due to missing or additional components. The main flow is according to navigation level.

Tab order may change due to missing or added components. The main flow is according to navigation level:

  1. Application selector

  2. Left navigation

  3. Instances (if exist)

Keyboard

Description

Instances

Tab

Navigates to the next component according to the Tab Index Order.

From the last component will navigate to the next focusable element on the page.

N/A

Shift + Tab

Navigates to the previous component according to Tab Index Order.

From the first component will navigate to the last focusable element on the page.

N/A

Space

Depending on component.

Selects the Instance

Enter

Depending on component.

Selects the Instance

Esc

Depending on component.

If focus is on “x” set focus on the Instance. Otherwise N/A

Arrows

For left pane navigation see https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/870187254/Tree#Accessibility-compliance

For Instances (if exist):

  • Left/Right - navigates between instances accordingly.

Right/Left move the focus accordingly:

Right:

  • If focus is on instance moves the focus to the close button of the instance

  • If focus is on close button moves the focus to the next instance to the right

  • Stops at the last instance.

Left

  • If focus is on instance moves the focus to the close button of the previous instance

  • If focus is on close button moves the focus to the instance

  • Stops at the first instance.

Home

Sets focus on the first element in VerinTop.

Set focus on the first instance

End

Sets focus on the last element in VerinTop.

Set focus on the last instance

Delete

For Instances only - will delete the selected instance

When focus is on an instance will close the instance.

...

Zeplin link

Screen thumbnail

<<Short Zeplin link. You
Use this
>>

<<Screen with 200 width>>

...