4 years of writing tab extensions and

gathering user feedback

Author of Tab Kit (250,000+

downloads), a prototype for the future of

tabs

Aim: make tabs scale well for all users

Easier to scan (first words aligned)

Titles stay visible

See more tabs at once

Particularly good for widescreens

Splitter & auto-collapse to favicons only

Size of scroll thumb shows

users how many tabs off-

screen in each direction

Non-fixed scrolling speed –

jump anywhere by

dragging thumb

Unlike Firefox 2's scroll buttons:

Thumbnails make tabs clearer for beginners, not to mention adding huge Fitts‟sLaw targets

Idea: instead of scrolling list of square thumbnails, shrink thumbnails until too small to be useful, then seamlessly switch to tabs without thumbnails (and only then add a scrollbar)

Currently, tabs scatter in arbitrary order

Must help organise user

Grouping related tabs emphasizes

logical connections and minimises

mouse travel

Group by domain? Definitely NOT!

Consider doing a couple of Google searches

on different topics, and opening some results

from each search. The unrelated search

pages would be grouped together, while their

corresponding results would be scattered

around and intermixed arbitrarily based on

the domains of the results (which the user is

very unlikely to remember before they look at

the results!)

Instead group tabs semiautomatically:

Automatically by ancestor

Manually by letting user group arbitrary

ranges of tabs together

When users open tabs from links, treat

the opened tabs as children of the tab

they were opened from, forming a tree

(group tabs with common ancestor)

1. Naturally keeps related tabs together

2. Very useful indication of where tabs

come from

Shift+click to Group Tabs From Current To

Clicked; Ctrl+click to Add/Remove

Clicked Tab From Current Group (chosen

by analogy to how selections in lists work;

discoverable via context menu)

Drag-select to group would be

ideal, but mustn‟t clash with

tab dragging. Most user

friendly might be a button to

activate drag-grouping?

n.b. Coloring groups is still useful – see later

To incorporate manual

groups into tree,

surround groups with

folders

Also provides central

location for group

operations

Full, intuitive, drag-drop

reorganisation

Groups and subtrees can collapse down

to a favicon list:

Can select faviconized tabs, drag-and-

drop them, hover to see titles, etc. as

usual

Show favicons half size if too many to fit

Auto-collapse inactive groups?

Clicking close buttons closes descendants

too (hovering over highlights them as hint)

Show non-modal “You closed 10 tabs.

Undo?” option rather than confirm dialog

Ctrl+W however only closes current tab (de‐indent descendants) as user probably

isn‟t thinking about the hierarchy

Context menu offers both

Groups ↔ Bookmark folders

Move (drag) within or across windows

Detach to new window

Color tab groups to

aid identification

Automatically allocate

colors distinct from

nearby groups (simple

algorithm)

Scrollbar track background

should show group colours

in appropriate positions

Helps users keep track of

offscreen tab groups, and

quickly navigate to them

at will.

For an evaluation see D. S. McCrickard & R. Catrambone (1999). "Beyond the Scrollbar: An Evolution and Evaluation of Alternative Navigation Techniques". In Proceedings of the IEEE Symposium on Visual Languages (VL'99), pp. 270-277.

Has main advantage of Fisheye while

keeping more efficient and familiar

scrollbar.

Could also highlight tabs (both onscreen

and on scrollbar) from same site as

current, to help user avoid duplicating

tabs/groups?

Highlight unread tabs in bold so user can

remember which they‟ve yet to look at

Also highlight tabs whose titles have

updated (e.g. Gmail received new mail)

Converse: nice to

know which tabs

are inactive.

Perhaps make

these darker, as in

Aging Tabs

extension?Unread tab

Updated tab

Find-as-you-type filtering to rapidly

narrow tabs down

Searches titles and

URLs by default

Optional full-text search

Group color

remains visible

Multiple independent “tab lists”

Each with its own tree of tabs

Tabs open in current tab list by default

All tab lists (& their tabs) are persistent across sessions and across windows until deleted

Switch via dropdown below tabs (unlike tabs, no point in constantly displaying lists):

For example, my “Mozilla Design Challenge” tab list contains a group of tabs from the forum, a group with the recommended articles, a group of extensions from AMO, as well as some loose tabs.

Like windows but without the clutter, especially for inactive tab lists (can of course still show multiple tab lists simultaneously in multiple windows)

Unload inactive tab data from memory;

session restore it when next used

This includes tabs in inactive tab lists

Esp. when reloading a session, keep all

tabs unloaded to hugely speed startups

Some exceptions (stateful Flash/AJAX)

Let user „pin‟ tabs that should be always

visible at top of tab bar

Tab-list independent

Persistent across sessions

Unaffected by scrollbar, but collapsible,

like other groups:

Vertical tabs needn‟t replace sidebars

(e.g. allow tabs on left, sidebar on right)

Show (rotating?) progress pies instead of

spinners on loading tabs

Open selected links in tabs

Tabs as temporary bookmarks

Drag-and-drop to easily bookmark/restore tabs/groups

Makes vertical tab bar more useful with few tabs

Unfortunately, clashes with (shrinking) thumbnails, and tab lists make temporary bookmarks less useful, so not added to mockup

Could allow user to sort tab bar› By last viewed

› By most used

› In order of opening

› By title

› By URL (sort by domain, then subdomain, then query string, hence temporarily „grouping‟ by domain)

Temporarily ignores groups/tree

Sorts can persist (and be updated live), but only intended for temporary specific uses (e.g. “Where‟s that tab I just opened?”)

Vertical tab bar

Tab grouping, automatically by ancestor

with full manual control

Tab tree

Highlight unread and updated tabs

Find-as-you-type filtering of tab bar

Tab lists (Workspaces)

Tab thumbnails, shrinking to nothing as more tabs are opened

Ctrl/Shift-click and Drag-select to manually group tabs

Scrollbar track showing off-screen tab group colors (and same domain)

Taking old tabs out of memory (& CPU)

Folders mix tree with unstructured grouping

Merge tab bar & bookmarks sidebar?

Mix group color (hue) with age (lightness)