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

Unlike Firefox 2's scroll buttons:  Size of scroll thumb shows users how many tabs offscreen 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)

Efficient Browsing: putting it all together

by jomel on Jun 22, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 1

Statistics

Efficient Browsing: putting it all together — Webinar Transcript