Blog Insights into great design
that delivers

Tab-based Interfaces

I was recently spurred by a question on a forum to collect a bunch of tab-based interfaces. Surprisingly, it is hard to to find good examples of modal tab UIs on the internet. I looked a lot a few years ago, and glancing around now, nothing jumps out at me either. This post is going to be a round-up on tab interfaces, heavily biased towards OS X, because that’s what I use. If you send me an example, I’ll add it.

Note: I’m not going to talk about “browser” tabs, such as seen in web browsers like Firefox, etc or other document based UIs.

What are tab interfaces?

Tab interfaces are based on the principle of progressive disclosure. With limited screen real estate, tabs are a convenient way to quickly offer a user several large areas of functionality which are not dependent each other. Essentially, they allow you to be get extra layers of interfaces without expanding your visual footprint. However, what you gain in the compactness of your interface is traded off by increasing the cognitive workload of your user. In essence, tabs are the antithesis of WYSIWYG– you’re not seeing everything you can do, and it quickly becomes easy to forget (or not know in the first place) about functionality.

What are they bad at?

Tab-based interfaces get a bad rap in interface design, and rightly so. They’re a powerful tool that’s easy to abuse and hard to do right. Let’s look at some of the specific problems:

Transparency

A tab is a perfect invisibility cloak: very useful, but hard to find when it’s not in your hands.

This one is blatantly obvious, but often forgotten. Sure, every time you startup the application, you’re staring at the that first tab, and forgetting all the rest. So you’re lulled into a false sense of security that you’re keeping your interface transparent and showing all of your functionality or information. I’ll be the first to admit I’ve worked on tab-based interfaces where I’ve completely forgotten what was in the other tabs. And I designed the UI!

Screen Real Estate for the Feature

Tabs often loving embrace your layout, and then choke it to death.

Tab interfaces are usually given 1/4th to 1/3rd of the available screen real estate in the app (there are notable exceptions). This means you may be trying to squeeze a set of functions and information that really needs an entire window into a tiny sidebar.

Encouraging User Engagement

Initially, 3 out of every 4 users will never use what it is in that tab. Over time, this may go down to 1 in 4.

You see this one a lot, especially in interfaces that originally did not have tabs UIs. Suddenly, a new awesome feature is introduced and there’s no where to put it in the existing UI. What to do? Tabs to the rescue! Unfortunately, that awesome feature is now hidden away on some other tab where users will never find it. My rule of thumb? Putting functionality into a tab will knock down its chances of being used by 25%, at least. With new or novice users, I’d put that number at 75%.

Teams and Product Decision

Tabs are like nails. Once you’ve used them, it’s hard to not try hammering everything with them.

In a team setting, it’s hard to judiciously use tabs. Everyone becomes drunk off tab grog and starts seeing every nail as just something to toss in another tab. If you’re designing a tab for a team, you’re constantly in fear that the next day there’ll be a whole new set of features and everyone’s response will be “just put it in another tab.” After a few months, your interface is useless and awash in a sea of tabs. As a designer, it is very difficult to counter with “we already have too many tabs” or other well reasoned arguments. Everyone else has seen this easy solution- there’s already the code for the tab UI and works, and now you’re the buzz killing prima donna who wants to introduce new design work, again. Why don’t you go work at the MOMA if you always want to be doing something different?

What are they good for?

Okay, enough about why we all hate tabs and hope that they never come to our birthday party. Tabs do have several compelling reasons to put them in your application.

They’re Known

Tabs get around. A lot.

Thanks to (or cursed by) Windows 95 and onwards, tabs have been a reliable part of the everyday user’s interface diet for years. Unlike a lot of other UIs related to showing/hiding things, users are comfortable with tabs and understand how they work. Of course, that doesn’t mean your tabs will not still suck to use if you have uninformative tags like “Cool” and “Boring” along with icons of ponies and unicorns.

Prioritizing

Hey! Tab #2’s functions probably aren’t going to be useful for me as Tab #1’s functions. Thanks Interface Man!

Let’s face it, some parts of your application aren’t as needed as other parts. They’re also usually conveniently related to other, more useful things. Tabs make it easy to automatically prioritize features for your user. For example, if I had an application for controlling my internet-enabled oven, it would be useful to have a set of tabs, let’s call them Baking, Advanced and Diagnostics. My Baking tab simply shows some common settings, temperature, cooking time, etc. My Advanced tab contains functionality that’s secondary, but I still want access to, like Cleaning Mode, Convection Fan, etc.

Easy to Access

Just click and bam! A whole new interface.

One great thing about tabs is that they’re much faster to get to than navigating through some menu or opening a new window. In the oven example above, even though I rarely use it, I can easily get to the Diagnostics functionality very quickly and see if the oven is just turned off, or there’s a gas leak and I should run screaming from my house. In contrast, think about how long it would take me to hunt through menus, or a well-meaning but vast grid of inputs.

Hooray, examples!

Below are a few sets of example tab interfaces I’ve come across. I’m purposely ignoring document-based tabs and tabs on websites and focusing on application, modal based tabs. Or basically, tabs in an interface which primarily act as sidebar or modal switcher for views. From the interfaces I could find with tabs, they seem to follow three styles: Icons, Text and Micro.

Icon Tabs

Firefox 3.6’s Preferences

A nice combination of icons and text, it’s clear what each tab is focused on.

OS X 10.5 System Preferences

An interesting approach to the tab hell that usually arises in Windows preference panes which have many, many different areas to configure.

iTunes Preferences

A sleek version of the Preferences window. Notice how the selected tab is much more apparent compared to the older implementation used by Firefox.

OmniGraffle’s Inspector

Nice iconography-based approach by OmniGraffle for controlling different attributes of an object

Office 2007 from KrAzY KorY on Flickr- Click to view full size

Microsoft’s famous re-working of the menus in their Office product line into the Ribbon. Jensen Harris, the lead manager on the Office UX team has a great presentation on how they developed the Ribbon.

Text-based Tabs

Panic Transmit

Transmit (a FTP application) uses tabs to allow users to filter/select what type of server they want to connect. Although it contains icons, I think the type is most dominant.

Aperture 3

Apple’s photo processing software, successfully uses tabs to move between viewing the entire photo library and metadata/post-processing adjustments for a single photo.

OS X 10.5 Date & Time Preferences

This is one of the few examples of the classic Aqua tabs I could find still remaining the UI. Perhaps a bit worn now, but certainly clear and effective for a text-based modal tab

Papers

Papers tabs (in a sidebar related to a selected article) are far too subtle for my tastes and look almost like a tagging interface.

Things

Things, a productivity app, in contrast, uses tags as “tabs” for filtering views.

Photoshop CS4

Photoshop. I hate this interface. However, it’s worth noting how the decision of having the tab’s pane float over the image leads to a lot of interface hassle and constantly juggling windows around

Delicious Library

Delicious Library’s simple, but clear tabs. An interesting side note is that you have to manually click an edit/save button before switching away otherwise you loose changes.

Micro Tabs

iTunes Music Browser

The very small, but very clear tabs for changing the music browsing view in iTunes

Eclipse Workspaces

Eclipse loves stuffing functionality into little packages, and their tab setup for changing between workspaces is no different.

OS X 10.5 Finder

Xobni

I was involved in the initial design for the top of set of tabs.

Wrap Up

As you can see, there’s a variety of ways to style tabs. What sort of information do you want the tab to communicate? How many tabs do you need to accomodate? What does a selected tab look like? Although I didn’t discuss it here, the future of tabs is clearly in the mobile domain, where space is limited.