Tabs is a basic building block of any UI, but they can be greatly varied in appearance. The key to creating tabs that are usable and fun to use are:
Layout
The general use case for tabs can be described as allowing users to switch between panes of information. The design of the tabs should therefore be heavily influences by the kind of content your users is going to switch between.
The horizontal layout is my goto layout for tabs. They are a poor choice if you have more than 5ish options to show as they can’t be scanned over as easily as a vertical tab list, but they have the added benefit of doubling as a header/divider for a section if used correctly.
In the example above the tabs form a nice header for the dialog and the user’s eyes is naturally pulled from reading the dialog titlebar to reading the tab labels.
The vertical layout on the other hand is great when you have a ton of content to display. Vertical tabs are very easy further to subdivide into sections which in turn makes them more digestible by the user.
I would avoid a collapsible tree of tabs. They are lazy design and just because you can fit dozens of tabs into a vertical layout doesn’t mean you should. Even with vertical tabs going past 15 options is not advisable. In you do need that many tabs you are doing something wrong and you need to re-examine your information architecture the group things better.
Angled tabs is a variant of the horizontal layout that works really well with guided content. Because they are used to indicate progress through a series of choices, they aren’t normally clickable. Instead buttons are used to navigate through them.
The buttons used in the above example is based on the buttons used in my previous blog post. The only change I made was to angle one side of the buttons to match the forward and backward flow of the tabs. Not strictly necessary (positioning left and right is enough), but adds a nice little touch of flair that will be appreciated by users. You will probably not be able to use pure CSS to obtain this visual look.
Upside down tabs is another variant of the horizontal tabs. I don’t see this very often, but i think if you give pagination the tab treatment they become much more visually interesting and make a lot more sense behaviorally.
In this example I simply stick the current page’s tab out slightly further to make it stand out. For the :hover state you can either copy that style, or do a a half-way step between the two. It is quite satisfying moving your mouse of the row of tabs and having them pop out.
Aesthetic
Designing the aesthetic of tabs is quite a bit different than that of buttons. Whereas buttons have a very real presence in the real world, user interface tabs are slightly abstracted from their real world counterparts making the more tricky to emulate. Their aesthetic also varies greatly with their layout and usage.
The key to making any tab aesthetic work is to make it really simple, and then add a little but of visual flair. The bare minimum would be something similar to what 37signals does: a solid colored box behind the active tab, and something which that box connects to. It looks like a tab and the user will understand how to use it, but it is ugly and unpleasant to look at.
The flair is there to add visual interest. As much as web 2.0 is mocked for the excess gradient usage, gradients are more visually interesting than flat colors. Subtlety is the key. Hard edges and hard colors are, well, hard. Throw a gradient on it and round the edges and suddenly you have a much softer and more pleasant object to look at.
Adding some extra visual flair to the active tab will help make it move obvious which tab is selected. The stronger that distinction is the better. In the example I gave for the pagination the distinction isn’t ideal. It is about as subtle as you can go.
Animations
The thing that makes tabs fun to use is speed. It is often tempting to add some sort of animation to tab switching in the form of a slide-in. If you are designing an interface to be used multiple times by the same user it is safer to just avoid them. After a while animations will start to feel slow and the fun will be sucked out of it. Soon it will start becoming frustrating to use and a detriment to your user’s experience.
The only example where animations might be ok is on marketing sites such as the Coda website. Their primary purpose is to convince viewers to buy the software. It would be rare that anybody would be using such a site multiple times.
4 notes |#