Efficient Browsing: putting it all together
-
Upload
jomel -
Category
Technology
-
view
1.103 -
download
2
Transcript of Efficient Browsing: putting it all together
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)