There was a time a couple years ago when the world needed browser pop-ups. It was awesome – it gave you the technology to launch a dedicated part of your website in a new window, and opened countless possibilities for the booming market of internet advertising. That certain factor of ‘coolness’, however, made people blind -they did not understand that popups had literally no user experience benefits at all (prove me wrong if you dare!).

Just at this very moment, history is repeating itself once again. Now, everyone completely agrees that popups are sooo 199-something and distracting, and bad UX alltogether. Everyone wants tabs now.

The problem of tabs

What’s wrong with those tabs then? Well, actually nothing! Tabs are awesome, and I couldn’t imagine going back to a browser that doesn’t feature them. The problem really isn’t about tabs (Klaus should be relieved now!), the problem is how people intend to use them.

What are tabs good for?

To start with an easy concept, tabs basically allow you to distribute content into several containers that can individually be activated one at a time, thus saving screen real estate. Tabs can be static or dynamic, meaning they can be opened and closed, and work excellent in situations where you’re opening instances of the same content format. Take a browser, for instance: You’re essentially opening websites all the time – content containers with the format “Website”.

What are tabs not good for?

The obvious issue people don’t realize is that only one tab can be visible at a time because they’re sharing the same visual position. This is the big issue : Tab do not work when the content is..

1. ..of a completely different (visual) layout
2. ..meant to be visible all the time
3. ..needs to be easy comparable against other content
4. ..important content

Of those three, the third and forth are probably the most important to realize. If you are currently utilizing tabs on your site, think for a bit if not seeing the complete content currently distributed is a disadvantage, or in other words: Does the UX become better if all content is visible at once? If your content is vitally important, do not hide it within secondary tabs! All tabs require user activation, and makes your content less visible.

Conclusion: be reasonable!

If your screen is getting crowded next time and you’re thinking about utilizing tabs, take a minute and think about the above mentioned issues. It might very well be that tabs work perfectly in your situation – it’s when you realize the tabs do not restrict the user experience.

Cheers!

What is morphing?

Bush-Obama morphing

Morphing essentially describes a state change on an element, transforming it into another. Many UI frameworks have helpers for morphing, usually in the form of class animations. jQuery UI has made it transparent to animate jQuery’s class manipulation functions like addClass, script.aculo.us has Effect.morph which essentially does the same.

Why is it useful?

From a higher level UI perspective, morphing really describes that one element becomes another based on the context. It is essentially very powerful because it gives your users a visual cue what is happening, how is happening and why it is happening. Instead of doing an instant change, the users eye can follow the motion and you therefore give them a better feeling of control over the whole situation.

Show me!

Let’s do an example. While working on smart.fm’s new item builder, I had to visualize the following steps: Clicking on a button to add text, then displaying a text input, and hiding the button since you cannot add text twice. Usually, it would roughly look like this:

However, with morphing, it not only looks hot but solves the issue in style:

This was a particularly lazy example, since it doesn’t even truly morph one item into another – it just animates the width of the button and fades in the input on top. But visually, the element clearly transforms.

Morphing in the wild: Inline editing

One technique that was is heavily inspired by morphing is inline editing. Essentially, you click on a paragraph or element, and it transforms into and editable element. Most solutions don’t actually morph, but you get the idea. There are thousands of other usecases out there waiting to be discovered, and if you have some, I’d love it of you share them with me!