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

Tabbed Browsing/User Interface Design/Tab Overflow (view source)

Revision as of 08:48, 8 February 2006

2,033 bytes added , 8 February 2006

no edit summary

Mconnor

Confirmed users, Bureaucrats and Sysops emeriti

812

edits

@@ Line 1: / Line 1: @@
 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.
-== Goals ==
+= Goals =
 Support faster access to a larger number of tabs
@@ Line 12: / Line 12: @@
 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:
@@ Line 25: / Line 25: @@
 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
 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
 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
 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,
 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
 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
 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)
-- 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
+== 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.