6

Due to the changing nature of people browsing and reading through information on the web, the bookmark has been getting less love compared to people leaving tabs open on browser windows (or multiple browser windows).

Are there any examples of design patterns that allow users to manage a large number of tabs?

3
  • 1
    Michael, you should know better. Use all browsers. Start with Opera. It's lead the way in terms of managing large amounts of tabs for more than a decade. Then try Vivaldi, from the same people. Use the vertical (right side, I suggest) tab stacking.
    – Confused
    Jun 9, 2016 at 2:10
  • 1
    @Confused I guess Opera (not mainstream) and Vivaldi (quite new) probably have more flexibility in terms of being able to adapt to new user behaviours. If you would like to put your comments down as an answer that would be good.
    – Michael Lai
    Jun 9, 2016 at 2:36
  • Where do Chrome, Safari, Mozilla/Firefox and IE get their ideas from?
    – Confused
    Jun 9, 2016 at 21:38

2 Answers 2

4

Firefox introduced a tab grouping feature ("Panorama") some time ago, but removed it again. I think the idea was good, but the implementation had issues (bugs, bad performance). A contributor states in a blog post that another reason for the removal was usability, but without going into details.

Panorama worked like this:

  • You have a button in the UI (and a keyboard shortcut) that opens a panel.

  • On that panel you can create/manage your tab groups (and optionally name them). All tabs are in a tab group (by default in an unnamed one). Tabs can be moved and closed here, too.

    Panorama: tab group panel

    (The screenshot shows three tab groups. The group in the top left has no name, and it contains so many tabs that they are displayed as a stack. If you make that tab group big enough, its tabs will be displayed separately, just like in the other two tab groups.)

  • On that panel you can also search for tabs in all tab groups. It highlights matching tabs.

    Panorama: searching for a keyword, highlighting matching tabs

  • If you click on a tab in this panel, you switch to the normal browser mode where that tab is focused. All the other open tabs are those from the same tab group.

  • If in the normal browser mode, you can move a tab into a specific tab group, e.g. from the context menu:

    Panorama: context menu to move a tab into a tab group

    (It says something like "Move into group", where I select my group "Stack Exchange questions to answer".)

It was exactly what I needed: Before tabs were introduced, I had multiple browser windows open, which was a mess. With tabs, it was a lot more organized, but then I opened way more pages than before, so at some point I needed to organize my tabs somehow. Going back to multiple browser windows, each with its own sets of tabs, was one solution, but it was a mess, again.
Panorama’s concept is similar to having multiple browser windows, each with its own tabs, but with the benefits that there is only one window and that you can search over all tabs.

(The add-on Tab Groups can bring this feature to current Firefox versions; but I didn’t use it yet, so can’t tell if it does something differently.)

1
  • 1
    I would also like to add that Tab Groups 2 improves upon tab management by adding new ways to visualize groups: a tabbed view, and a grid view where groups take up the entire screen and their size is managed for you. In both of these views, you don’t need to constantly resize and move groups as you add or remove them; instead, you can concentrate on your various tasks and more easily keep them separate without the need to manage tabs. Jun 16, 2016 at 4:42
2

Hierarchies.

One of my favourite tools is my tiling window manager. This lets me manage a lot of windows though a very nice hierarchy. Here's a rough simplification:

  • You have a number of workspaces (aka. virtual desktops).
  • Each workspace has a set of panes. A pane may be
    • a window,
    • a tab strip of panes (like a browser),
    • a horizontal or vertical "tile" of panes.

This lets you have a ton of active windows. Although I don't use them, there are browsers particularly for tiling window managers that don't have their own tab strip at all: you just use the tiling window manager's.

You can then have, for example,

  • 10 workspaces,
  • each with some layout of panes (depending on what you're doing you might prefer a fullscreen experience or multiple visible windows),
  • each with a bunch of tabs (this might be the window manager's tab strip or the browser's).

This workflow easily accommodates not just hundreds of tabs but hundreds of windows of any kind.

Note that this is what tab groups from unor's answer does, but with some differences:

  • There is no attempt to lay things out spatially. Spatial layouts have usability problems, despite their appeal. Spatial layouts
    • change more when you add and remove tabs than a list,
    • have higher cognitive load,
    • are harder to organize and reorder,
    • don't map well to keyboard shortcuts (especially next and previous),
    • take up UI space, requiring a modal interface.
  • The current context is constantly available. The list of workspaces with content on is in my main bar at the bottom of the screen, the available panes are visible and the tabs in a tabbed pane are at the top of the pane.

Now, I'm not suggesting copying a tiling window manager. Tiling window managers are serious power-user tools and rarely make trade-offs appropriate for the average user. (Heck, I have Capslock remapped to a modifier key.)

However, what does work really well is having simple, flat hierarchies. I would suggest something like this:

Simplified hierarchical tabs

The squares will select the tab group. The user then has the hierarchy of windows, then groups, then tabs. The squares might support user renaming.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.