 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

Unlike Firefox 2's scroll buttons:
 Size of scroll thumb shows
users how many tabs off-
screen in each direction
 Non-fixed scrolling speed –
jump anywhere by
dragging thumb

 Thumbnails make tabs
clearer for beginners, not to
mention adding huge Fitts‟s
Law 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?

 To incorporate manual
groups into tree,
surround groups with
folders
 Also provides central
location for group
operations
 Full, intuitive, drag-drop
reorganisation
n.b. Coloring groups is still useful – see later

 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
Updated tab know which tabs
are inactive.
Perhaps make
these darker, as in
Unread tab
Aging Tabs
extension?

 Find-as-you-type
filtering to rapidly
narrow tabs down
 Searches titles and
URLs by default
Group color
 Optional full-text remains visible
search

 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)