Tabbed Browsing/User Interface Design/Tab Overflow
Tracked by http://bugzilla.mozilla.org/show_bug.cgi?id=221684
Contents
Introduction
We need to find a better way of handling the "too many tabs to fit nicely on the tab bar" case. When users get beyond 15/20 tabs, depending on screen resolution, the tabs become almost unusable.
Suggestion from user Ge.diego on opening too many tabs
Goals
- Support faster access to a larger number of tabs
- Preserve tab ordering
- Preserve keyboard navigation
- Preserve drag and drop reordering
Analysis
Ben Goodger
I have covered this in some detail mentally before and here are my notes:
Given that the tabbed browser has these features: - drag and drop reordering - keyboard accessible navigation
... and that we want to try retain those even for overflowed tabs (dragging a tab back to the start of the set when it's at the end is occasionally useful):
Chevron Menu Only (Safari)
- When you select an item from the overflow menu, the indication of selected tab vanishes from the strip, which looks weird and gives no indication as to what is actually selected.
- D&D and keynav break, unless you want to implement various horrid hacks to show the popup menu and allow dragging/navigating into it, which almost certainly don't work on Mac.
Chevron Menu with Scrolling Strip
- When you select a tab from the menu, the strip is zoom-scrolled so that the tab is visible. This solves the "no visible selected tab in tab strip" issue that affects the plain Chevron Menu solution. However when the strip is scrolled the set of non-visible tabs changes. There may be more non-visible tabs to the right and now left of the strip, meaning two menus need be shown, perhaps at alternate ends of the tab strip. This sounds cumbersome.
- D&D and keynav probably work in this case though.
Chevron Menu with Tab Reordering (Visual Studio 2005)
- LIFO ordering on the strip, sense of insertion is inverted. New tabs appear at the start of the strip and older ones move to the right until they are eventually evicted into a menu. Selecting an item from the menu re-inserts the item at the start of the strip. I have been using VS2005 for over a month now and this is a disaster. The delicate order of tabs that some users have is not only not preserved, it is actively destroyed. They should have left it the way it was.
- Doesn't easily support D&D or keynav to non-visible items.
Scrolling Strip (buttons) (Visual Studio 2003 and earlier)
- Supports D&D and keynav while maintaining a single static piece of UI (scroll buttons)
- Setting the scroll speed correctly is likely to be a challenge.
- No instant way of getting to a hidden tab - speed of access relies on scrolling and dexterity
Mike Connor
The first four were described by Ben's comments, so I won't repeat them.
General conclusions
Regardless of the method selected, fixed width tabs are a big win.
Chevron Menu only
Implemented for tabs by: Safari
Conclusion: This basically seems like a bad idea (see Ben's thoughts) so I won't do a lot of analysis.
Chevron Menu with Scrolling Strip
Implemented for tabs by: Gedit (GNOME) and some other linux apps.
Pros:
- Quick and direct access to many tabs.
- Keyboard nav and Tab DnD is preserved and understandable.
Cons:
- Chevrons on both ends seem a little cumbersome if needed
- Only scales so far before you hit scrollbuttons.
Chevron Menu with Tab Reordering
Implemented for tabs by: Visual Studio 2005
Pros:
- LIFO order is useful in most-recent-matters-most worlds.
Cons:
- Breaks relationships and grouping.
Scrolling Strip with Scrollbuttons
Implement for tabs by: Visual Studio 2003 and earlier
Pros:
- Single static piece of UI, supports DnD and keyboard nav.
Cons:
- Getting scroll speed right is difficult
- Tab DnD and keyboard nav become reaction-time dependent
Scrolling Strip + Tab Menu button
Implemented for tabs by: IE7 beta2
Description:
- Full list of tabs is available via a menubutton, with visible tabs highlighted.
Pros:
- Allows a single unified list of tabs to scan.
Cons:
- Doesn't work so well with keyboard nav.
- Breaks away from the visual connectedness of the tab bar.
Multiple Rows of Tabs
Implemented for tabs by: Textpad, other text editors
Pros:
- Keeps all tabs on screen, fastest access minus multiline-scan time.
Cons:
- Shifting rows OR disconnect between tab and tab contents.
- Consumes content area space.
See Aravindet's proposal for a multi-row layout without the shifting/disconnect disadvantage.
Final Thinking
Of the options present, the Chevron Menu with Scrolling Strip seems to feel the most natural, both in UI consistency with bookmarks overflow, and the concept of extending the tab strip. It also avoids a lot of timing/speed issues associated with other solutions.
[pkasting] So is there a reason we implemented the scrolling strip w/scrollbuttons in Firefox 2 instead? Was that just quicker to implement and will change some day, or was there more discussion not recorded here?
Other threads about tabs, tab overflow, and tab design
Over the years there have been many disjointed threads about tabs, tab overflow, and tab design on how to handle the issues of the close button, drag-and-drop, screen real estate, tab width, etc. This list is meant to bring together previous discussions that may have good, but overlooked ideas. The dates (yyyy-mm-dd) listed are of the first post in each thread.
- 2002-07-17, "Tabbed Browser: Gracefully handling tab overflow" http://groups.google.com/group/netscape.public.mozilla.ui/browse_thread/thread/2fef8f189a52e1d9/
- 2003-10-09, "When opening too many tabs you can't move to them with the mouse ("X" button and tabs overlap)" https://bugzilla.mozilla.org/show_bug.cgi?id=221684
- 2005-08-29, Link Targeting#Closing Tabs and Link Targeting#Tab Discoverability
- 2005-09-13, Bugzilla Bug 308396: "UE fixes for tabbed browsing" https://bugzilla.mozilla.org/show_bug.cgi?id=308396
- 2005-11-03, Ben Goodger's blog entry: "Improving Tabbed Browsing" http://weblogs.mozillazine.org/ben/archives/009210.html
- 2005-11-04, Comments on Ben Goodger's blog entry: "Using tabs" http://www.beltzner.ca/mike/archives/2005/11/04/using_tabs.html
- 2005-11-05, "New Experimental Tabbed Browsing Builds" http://forums.mozillazine.org/viewtopic.php?t=337912
- 2005-11-29, Bugzilla Bug 318168: "Improve tabbed browsing" https://bugzilla.mozilla.org/show_bug.cgi?id=318168
- 2005-11-29, Tabbed_Browsing
- 2005-12-30, Talk:Tabbed_Browsing
- 2006-01-25, Firefox/Feature Brainstorming#Requiring significant changes to existing UI: Tabbed Browsing
- 2006-03-05, FX2 Visual Update/User Interface Design
- 2006-05-04, User:Ge.diego/Tab Management Comments
- 2006-05-05, User:Ge.diego/User Interface Mockup#Tab_management_comments
- 2006-06-22, Bugzilla Bug 342385: "get the browser.tabs.tabClipWidth hidden pref working again" https://bugzilla.mozilla.org/show_bug.cgi?id=342385
- 2006-06-26, "tab scrolling patch landed on the trunk" http://groups.google.com/group/mozilla.dev.apps.firefox/browse_thread/thread/5a15c3357b03deab/
- 2006-06-27, Bugzilla Bug 342890: "make tab minWidth 125px and heed the browser.tabs.tabMinWidth hidden pref" https://bugzilla.mozilla.org/show_bug.cgi?id=342890
- 2006-06-30, "my vote on the new bon echo tab scrolling feature is ..." http://forums.mozillazine.org/viewtopic.php?t=434106
- 2006-06-30, Bugzilla Bug 343251: "usability problems with tab overflow / scrolling" https://bugzilla.mozilla.org/show_bug.cgi?id=343251
- 2006-07-02, "BonEcho Tabs display in tab bar for builds after 06-28-2006" http://forums.mozillazine.org/viewtopic.php?t=434924
- 2006-07-10, Bugzilla Bug 344171: "Show overflow menus when right-click tab scroll buttons" https://bugzilla.mozilla.org/show_bug.cgi?id=344171
Tab modifiers for other versions of Firefox (1.0x/1.5x)
Looking at addons and their screenshots can give ideas as to what features and capabilities users are looking for in their tabs.
- Tabbed Browsing addons https://addons.mozilla.org/search.php?cat=14