Tabbed Browsing/User Interface Design/Tab Overflow: Difference between revisions

no edit summary
mNo edit summary
No edit summary
Line 1: Line 1:
Tracked by http://bugzilla.mozilla.org/show_bug.cgi?id=221684
Tracked by http://bugzilla.mozilla.org/show_bug.cgi?id=221684


== Introduction ==
= 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 because almost unusable.
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 because almost unusable.


== Goals ==
= Goals =


Support faster access to a larger number of tabs
Support faster access to a larger number of tabs
Line 12: Line 12:
Preserve drag and drop reordering
Preserve drag and drop reordering


== Prior Analysis/Selected  Opinions from others ==  
= Analysis =


=== Ben Goodger ===
== Ben Goodger ==


I have covered this in some detail mentally before and here are my notes:
I have covered this in some detail mentally before and here are my notes:
Line 25: Line 25:
tab back to the start of the set when it's at the end is occasionally useful):
tab back to the start of the set when it's at the end is occasionally useful):


Chevron Menu Only (Safari)
=== Chevron Menu Only (Safari) ===
- When you select an item from the overflow menu, the indication of selected
* 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
tab vanishes from the strip, which looks weird and gives no indication as to
what is actually selected.
what is actually selected.
- D&D and keynav break, unless you want to implement various horrid hacks to
* 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
show the popup menu and allow dragging/navigating into it, which almost
certainly don't work on Mac.
certainly don't work on Mac.


Chevron Menu with Scrolling Strip
=== Chevron Menu with Scrolling Strip ===
- When you select a tab from the menu, the strip is zoom-scrolled so that the
* 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
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
that affects the plain Chevron Menu solution. However when the strip is
Line 40: Line 40:
tabs to the right and now left of the strip, meaning two menus need be shown,
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.  
perhaps at alternate ends of the tab strip. This sounds cumbersome.  
- D&D and keynav probably work in this case though.  
* D&D and keynav probably work in this case though.  


Chevron Menu with Tab Reordering (Visual Studio 2005)
=== Chevron Menu with Tab Reordering (Visual Studio 2005) ===
- LIFO ordering on the strip, sense of insertion is inverted. New tabs appear
* 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
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
eventually evicted into a menu. Selecting an item from the menu re-inserts the
Line 50: Line 50:
only not preserved, it is actively destroyed. They should have left it the way
only not preserved, it is actively destroyed. They should have left it the way
it was.  
it was.  
- Doesn't easily support D&D or keynav to non-visible items.  
* Doesn't easily support D&D or keynav to non-visible items.  


Scrolling Strip (buttons) (Visual Studio 2003 and earlier)
=== Scrolling Strip (buttons) (Visual Studio 2003 and earlier) ===
- Supports D&D and keynav while maintaining a single static piece of UI (scroll
* Supports D&D and keynav while maintaining a single static piece of UI (scroll
buttons)
buttons)
- Setting the scroll speed correctly is likely to be a challenge.  
* 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
* No instant way of getting to a hidden tab - speed of access relies on
scrolling and dexterity
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.
= 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.
Confirmed users, Bureaucrats and Sysops emeriti
812

edits