Blast from the Past: SDI and MDI

This is an entry I wrote on March 20, 2006 touching upon SDI and MDI:

Warning: This is a usability and interface topic. You may quietly exit through the back doors. No hard feelings. Otherwise...

I know that Adobe Acrobat 7 has been out for quite a while now, but I figure that I need to get the word out wherever I can. The following is a problem that's been bothering me since Acrobat 6.

Notice this. Earlier versions of Adobe Acrobat used a multiple document interface (MDI), where all documents resided within a single parent window. The problem was that they forgot to add "tabs" for easy navigation between the documents in this multiple document interface.

I wrote a complaint in the official forums a while back, and in version 7, it seems that they finally tried to solve the problem by switching to a single document interface (SDI), where each document has its own window on the Windows Taskbar. But the Adobe Acrobat team forgot something again. If you exit any given document with the Microsoft Windows [X] button (the red one in Windows XP), every single document closes. The expected behavior, based on other applications written for Windows, is that only that one document should close (not all of them).

Or perhaps the Acrobat team has a good explanation for this behavior? (I certainly can't think of one.)

My original entry: http://gordeonbleu.livejournal.com/20578.html

From Tabs to Thumbnails, and Back

The screenshots tell it all. The Opera 10 beta browser has a vertically resizable tab bar that turns into page thumbnails as they are expanded. To me, this is the most graceful approach I've seen towards representing open pages as thumbnails because it doesn't interrupt the view of the current page beyond what you control, in contrast to a full page grid of thumbs. I'm curious to see whether this takes off beyond the web browser into other tabbed applications.

Am I the only one who noticed this? Safari 4's Tabs Bar Lost Multitasking

I previously mentioned how Safari 4 Beta had stepped up their spillover tabs menu oversight by moving you to the area of the tab bar where your active tab sits, so that you could see its neighboring tabs. Suddenly, tabs that didn't fit on the visible part of the tab bar weren't segregated into an inaccessible menu.

This was what the Safari team gave us with Safari 4 Beta:


(To jog your memory, notice that wherever you are, the whiter part of the contextual menu shows which part of the tab bar is visible, and it would move you to that section of the tab bar.)

This is what happened when Safari 4 officially came out:


(Now we're back to being fixed at the front of the tab bar, and only one tab from the contextual menu can show up in the visible part of the tab bar at a time - at the very end of the tab bar. So if I selected the hidden spilled-over 16th "Flickr" tab, it would appear at the end of the visible tab section, beside the 10th "Google" tab. That misrepresents the sequence of the tabs, and reduces what we can do with it when moving tabs around.)

They quietly removed it, and while the blogosphere and media seem to be talking about the Safari 4 official release version, nobody seems to be talking about this. Am I the only one who noticed this? Surely I'm not the only detail-oriented person around here. Maybe all the designers out there just haven't noticed this yet. What a step backwards. My only redemption is that we now have access to the Chrome developer preview for OS X.

When Browser Tabs Spill

In the olden days, web browsers didn't provide us any real solution for tabs spilling off the edge of a tab bar filled with open tabbed pages. In the past few years, we saw multiple angles from the main Webkit/Gecko/Presto/Trident browsers. In the near future, these different approaches will likely merge, although you may be surprised by the results over which browser seems the closest there.

Safari 4 Beta: Menu of Visible and Hidden Tabs

Firefox 3.x/3.1-3.5 Beta: Scrolling Carousel Tab Bar + Menu of All Tabs

Chrome 1/2: Compact as Many Tabs in View As Possible (a.k.a. No Solution)

Opera 9/10 Alpha: Compact as Many Tabs in View As Possible (a.k.a. No Solution)

Internet Explorer 7: Scrolling Carousel Tab Bar + Menu of Visible and Hidden Tabs

Camino 1.x: Menu of Visible and Hidden Tabs

Surprisingly, Internet Explorer, the last of the current big browsers to implement tabs and generally seen as playing catchup with the rest, has shown the most complete system today for managing tabs in version 7, which naturally carries over to the recently released version 8. It allows both scrolling of tabs left and right, while distinguishing the visible and hidden portions of the tab bar in the tab list menu. Although it strikes me as odd that they decided to place the menu on the left, when tabs are created and spilled over on the right.

On top of that, it also offers a grid of thumbnails of the open pages, all out of the box. I'm not accounting for extensions or plugins for any of these browser comparisons because I'm concerned with what comes out of the box, which is generally what most users will use, and what you and I will use on a computer with restricted privileges, or a computer we're using as a guest.

Organizing Groups of Tabs in Windows

In the past few years, we saw browsers answer our micromanagement desires by finally giving us the option to drag tabs to rearrange their order. Some browsers took it a step further and allowed us to tear tabs off a window and onto another. Most mainstream browsers seem to have taken cues from each other and implemented this functionality more or less the same way.

Safari (3 and) 4 Beta: Draggable, Tearable Tabs with Preview

* The difference was that with Safari 4 Beta, the tabs could now only be dragged from the edges because of their new location at the top as both tabs and titlebar, contrary to Chrome.

Opera 9 (and 10 Alpha): Draggable, Tearable Tabs

* The behavior in version 10 Alpha is still the same. It remains to be seen whether the future beta and release versions will add previews.

Firefox 3.1/3.5 Beta: Draggable, Tearable Tabs with Preview

* Tabs could only be dragged within the same window in and before version 3.0.x.

Chrome 1 and 2: Draggable, Tearable Tabs with Preview

Internet Explorer 7: Draggable Tabs

Camino 1.x: Nothing

We'll see whether this will change with Camino 2.x Alpha.

Chrome and Firefox have the best approaches, as they allow tabs to be dragged or torn off from the full area of the tab. Safari 4 Beta introduced an oddball by doubling the tabs as a titlebar and draggable, tearable tabs. That meant that from 3 to 4 Beta, the draggable area shrunk to the right corner, leaving the us to awkwardly drag the window by the "titlebar" area in the tiny center of the tab, avoiding the drag area to the right and the [x] close button to the left. Firefox and Chrome provide distinct draggable areas to move the window alone, and to place it in and out of focus. Opera and Internet Explorer 7 are missing previews of tabs as they're being dragged, and IE 7 doesn't provide tab tearing. Camino 1.x offers nothing.

Conclusion

By now, most of the modern browsers (and probably many of the unmentioned browsers) have addressed the problem of what to do with tabs when heavily multitasking. To recap, there seems to be two major approaches - provide a contextual menu listing active tabs from left to the right, with grayed out items above or below for hidden items to the left or right respectively; or allow a carousel-like horizontal scrolling of the tabs in the bar to access the hidden tabs on either side. For moving tabs between windows, tearing off tabs (with previews) from one window to another is the most comprehensive form of a common approach.

What ever happens, the fact that we are in the middle of a second golden age of browsers with healthy competition means a lot of good for all of us users and developers.

We're outgrowing our tabs.

I've been getting this sneaking suspicion lately that we're outgrowing our tabs.

And then today, a reference on Slashdot brings the question into the spotlight again.

Tabs. They've been around for a while, though arguably they became even more prevalent with their rising popularity as the standard multitasking approach in web browsers a little over half a decade ago. For most people, their heaviest multitasking activity generally involves interacting with the web in pages. In the early days of the Internet, with our dial-up connections and relatively modest computing resources, multitasking for most people meant maybe several pages. The average seemingly climbed since then, to the point where tabs came in to answer that problem.

Tabs work great when you have a mild number of documents or pages to switch between. The tabs themselves don't offer much visually, just a title or file name, which you'll have to hope doesn't look like a series of "Untitled1", "Untitled2", "Untitled3"... This issue is exacerbated once you run into far more tabs, and the truncation that comes along with it.



One of the problems with tabs is that operating systems seem to be designed to handle window-based multitasking. Take Mac OS X for example. Expose works wonders with multiple windows, but does nothing to help our 10, 20, 100 tabs in Safari, Firefox, Camino, Opera, or even any non browser app that uses tabs.

Part of this problem is mitigated with the use of effective visuals provided by favicons, which works great in cases where you have the same tab text (example: truncated Google *) with different icons for each unique section - Google Reader, Google Notebook, Google Docs, etc.



But if you're looking at multiple tabs within the same section, and therefore exhibiting both identical truncated tab labels and icons, you're going to have to examine each tab to find the one you want. An example of this would be if you had multiple Google searches going on, or multiple articles from the New York Times open, or multiple stock pages of Yahoo! Finance open.



This is why there was a trend years back of people shifting text in title bars like this: "Site Name - Page Title" to "Page Title - Site Name", once tabs and truncation became common.

There's another implemented approach where previews are shown when hovering over each tab, such as in Opera, but that still requires hovering over each tab. Building upon this, there have also been implementations displaying grids or single columns of previews of open tabs, such as with various Firefox extensions or Internet Explorer 7, though there is the issue of how best to handle multiple windows, each with multiple tabs.

Nonetheless, most, if not all, operating systems today have not provided us a way to handle the increasingly growing amount of tabs we use, especially with the continuing move of web applications playing many of the same functions as desktop applications. If there's any elegant solution, it has to come from the OS.