Manage Tabs

Make tab management a better user experience

As part of a holistic design of the portal customization features, this design proposes a new interaction to managing tabs.

Design

Mockups

Provided by Unicon

Tab Management Options

Tab management options (edit, delete, move) will appear on the active tab. If the active tab is locked, a locked indicator will display instead. For creating new tabs, an Add Tab link is available on the tab bar.

Add New Tab

The add new tab link is available on the tab bar. Hover/focus feedback indicates and invites interaction.

Clicking the add tab link creates a new tab and makes that tab active. The tab name is made editable and is given focus so the user can name the tab as desired.

The blank page displays a prompt to customize the page. This prompt content remains until content has been added to the page, at which point the prompt is automatically removed.

Edit Tab Name

The current tab name can be edited. Hover/focus feedback indicates and invites interaction.

Clicking the tab name starts inline editing, turning the tab name into an editable text field. Clicking outside of the tab or pressing the Enter key on the keyboard completes and saves the inline edit, returning the tab to its normal state.

Move Tab

Tabs can be reordered by drag and drop. "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.

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.

Interaction