Not long after tabbed dialogs started showing up in GUIs, there came a need to display more tabs than would fit on a single row.
DIALOGS WITH TWO ROWS OF TABS
In the 1990s, dialogs appeared that spread the tabs across two rows when they wouldn’t fit on a single line. Such layouts can still be found today. Figure 1 is a screen shot of the System Properties dialog for Windows® XP. It uses two rows of tabs. It seems like a good way to show all the options, but the problem is that the rows switch places so that whichever tab is selected is displayed on the bottom row. Rearranging controls is never a good idea. On this particular dialog the General tab is selected by default and as long as anything on the same row of tabs is selected, the rows stay in place. But selecting something from the top row changes the layout. Users new to a GUI and to this concept can be very confused by this behavior.
Figure 2 shows a screen shot of the same dialog with the Automatic Updates tab selected. Notice that the rows have now switched places, putting the selected tab on the bottom row.
This type of layout can also be found in applications. Figure 3 is a screen shot of the Paragraph dialog from OpenOffice® 3.1 on Windows XP. Notice the Borders and Background tabs displayed on the first row, above the row with the currently selected Indents & Spacing tab. These tabs behave in the same way as the Windows System Properties dialog, switching the position of the rows depending on the current selection.
There should have been more thought put into these layouts so that two rows of tabs were not required.
In Windows® 7 the System Properties options have been rearranged to the point that two rows of tabs are no longer used. Figure 4 shows the new Control Panel with the System Properties dialog over the top.
Notice that some of the configuration settings that were formerly on the System Properties dialog have now been moved to other locations and accessed differently through the Control Panel. This was the right move. I’m surprised it took so long to fix this.
MULTI-DOCUMENT INTERFACE: WORD PROCESSORS
The fact is that for a known number of tabs, as is displayed in the above dialogs, a design should always be found that will not require multiple rows. The problem is different when there is an unknown number of tabs. Tabs are often used in multi-document interfaces (MDIs) where neither the number or title of the tab is known ahead of time.
Figure 5 is a screen shot of Corel® WordPerfect® 9 with four documents open, with the document names displayed in the status bar along the bottom left.
This implementation behaves as a tabbed layout with the name of the current document displayed in bold text. This display works for the current window width and these short file names, however problems become evident when (the maximum) nine documents are open at the same time as shown in Figure 6.
Because all nine of my documents begin with the same letter, the display is useless until the mouse cursor hovers over a tab, revealing the full name of the document. Not a fantastic implementation. Microsoft® Word® avoided the problem by always opening a new window for each document in its MDI, and continues that practice today with Word 2010. Of course OpenOffice follows that model.
MULTI-DOCUMENT INTERFACE: INTERNET BROWSERS
Internet Browsers are also MDIs, which in the current implementation for the most common browers on Windows (Microsoft® Internet Explorer®, Mozilla® Firefox®, and Google® Chrome®), use tabs for the various URLs currently open. Figure 7 is a screen shot of Chrome with over 12 tabs in a narrow window.
Chrome is the newest of the three, so I suppose it’s to be expected that it is still a little rough, but this implementation of multiple tabs is not awesome. Notice that there is no indication whatsoever about what URL is displayed on any given tab until the mouse cursor hovers over them. That’s not very helpful. Notice also that only a portion can be seen of the last tab displayed, and actually there are more tabs that are not shown at all. It’s also not great that the “+” icon for a new tab is displayed over the top of the second to last tab, making it very difficult to either hover over or select that tab. Hopefully Chrome will make some improvements in this GUI in the future.
Figure 8 is a screen shot of Firefox 3.7 with too many tabs open to display all at once. This GUI does not allow the tabs to become so narrow that they are useless. Instead, when more tabs are open than can be displayed, left and right arrows appear for scrolling as needed and a down arrow also appears so that the list of all the titles of the open URLs can be seen and used for selection. Very nice.
Figure 9 is a screen shot of Internet Explorer 8 with multiple tabs open.
with Too Many Tabs and Quick Tabs
This implementation takes the display list one step further and actually highlights the titles of the tabs currently visible with icons and titles and then uses bold text and a check mark to indicate which URL is displayed. Fantastic.
Figure 10 shows how IE takes it even another step beyond that.
IE also has a “Quick Tabs” icon that displays a thumbnail image of each of the open tabs for quick selection. This is outstanding! (Extremely unfortunate is the fact that IE9 actually takes this button off of the display by default. Why??)
OUTSTANDING IMPLEMENTATION: ECLIPSE®
I currently use Eclipse® for my web development work. Eclipse is an Open Source Integrated Development Environment (IDE) that has many great features. I’m especially partial to its solution to the “Too Many Tabs” problem. Figure 11 shows a screen shot of Eclipse with more tabs than will fit in the horizontal size of the window.
Search Option
Notice how Eclipse doesn’t reduce the width of the tabs so much that the text display is overly truncated. Instead, when there are too many, then it simply displays a drop-down button with a number indicating the number of tabs that are not currently shown. Clicking on the number drops down a box that lists all the open documents, using bold text for those that are not currently displayed, making it easier to identify which are which.
Figure 12 highlights another great feature with the Eclipse IDE. The top line of the drop-down list box is actually a Search option. There is a flashing caret that indicates the keyboard focus is there. Typing in characters immediately filters the list of files as you type so that a given file can be found very quickly. I have at times had as many as 30 files open at one time and this feature is absolutely fabulous! Very, very well done.
KEY DESIGN POINTS
- Don’t ever move a control when it is clicked, such as a tab to a new row (I guess that means there should never be multiple rows of tabs!
). - Don’t truncate the text of the displayed tabs so much that it is useless.
- A drop-down list is an absolute minimum, but features like Quick Tabs (when appropriate) and Search will make your users very, very happy.
[…] Figure 22 is a portion of a screen shot of the Settings display which appeared when Manage labels is selected. The Settings area is displayed as a secondary option to the Mail navigation, filling the right side of the window. Notice the Labels selection at the top. This is another “floating selection” tab control implementation, but only the items on the top row appear to float; the items on the bottom row connect to the area below as with a classic tab control, as seen in Figure 23. Figure 23 is a portion of a screen shot of the Inbox settings. (At least they don’t rearrange the rows. For a discussion on tab controls with multiple rows see Too Many Tabs.) […]
My wife will be quite sad when Tab finally goes away this year. It was her drink of choice for many, many years!