Versions Compared

Old Version 5

changes.mady.by.user Gary Thompson

Saved on

compared with

New Version 6

changes.mady.by.user Gary Thompson

Saved on

Key

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

...

Tabs can be reordered by drag and drop. Hover"Grippy" visual on current tab and hover/focus feedback indicates and invites interaction.

...

When the tab is dragged, a transparent avatar of the tab will appear at the cursor. The tab drag action should be constrained horizontally to indicate list reordering context and to keep the drop action simple. Drop target is indicated by an arrow. Dropping the tab will dismiss the drag avatar and instantiate the dragged tab at the drop target position. The dropped tab remains the current selection.

Delete Tab

The current tab can be deleted. "X" visual on current tab and hover/focus feedback indicates and invites interaction.
Image Added


Clicking on the "X" delete link on the current tab brings up a confirmation dialog. If confirmed, the current page is deleted, and the user is returned to the next available tab.
Image Added Image Added Image Added


Interaction

Panel

Managing Tabs/Pages

(not in scope for BYU)
Portal tabs will need to be added/removed, named, and ordered. Inline edit is recommended for naming. List drag and drop is recommended for ordering.

Considerations

  • Differentiation between intention of click-to-reorder and click-to-name.

Design Patterns