Interaction Design: Tab Management

Creative work desk

Another post, another UX idea! The latest browsers releases are not the memory hogs they once were, but one of the things they cannot yet handle perfectly are tabs. It must’ve happened to you as well: after an afternoon of merrily browsing the net you end up with dozens of tabs open. It’s still difficult to handle for most browser: I’m looking particularly at you Chrome! This is not an issue only from a technological standpoint, but also an UX one. Too many tabs are difficult to have a complete picture of, they cannot be meaningfully grouped and are not really visible. Today’s idea will try to solve this.

Multiple tab on mobile

There are multiple add-ons trying to tweak the management of multiple tabs on the desktop browsers. It’s always useful to check other approaches before embarking on new design challenges. The most popular of such programs I could find are: OneTab and Tree Style Tab. While the first could be basically boiled down to a webpage containing a list of related pages, the second one has a more interesting approach. It gives you a hierarchical view on the side of the page, it’s useful albeit maybe an overkill. Also, it would be nice to better integrate the feature in the UI. The idea I’m presenting here is different and will mainly take inspiration from the carousel of tabs that we see (to the left) in the Safari iOS app. I forego entirely the possibility of hierarchical grouping for a more simple and accessible approach.

Let’s take a look to a simple two-site browsing session in Safari.

Browser Google homepage

In this case we have two sites opened, Google and my blog. Adding pages to a group would be integrated in the UI as we said, so let’s see what the operation necessary to create a new group would be. We open three websites (in our case Amazon, Facebook and Hacker News) and then:

  1. Drag their tab onto each other to create a group.
  2. Hover the mouse cursor over the tab to view the group; action accessible also via a short-cut (it’s always necessary for pro user).

What we would see is shown below:

Site grouping feature

We can observe a carousel of tab previews inspired from the mobile UI of Safari. They would give an immediate feedback over the content of the group: visibility also signalled by the use of transparency between tabs and by following similar design guidelines already seen in the interface (e.g. the translucency of tabs already present). As you can see the new group have a name “Research group” which is different than any of the sites contained. We’ll get on that later. More importantly, how do you navigate through the group content? Let’s zoom in.

Group scrolling feature

With the cursor still over the tab, scrolling with the mouse you can select Facebook. As you can see in the picture now the focused site has changed. To open it you simply click on the preview. This should be intuitive enough, given that the presentation is very similar to other experiences e.g. the mentioned mobile UI, Android app switcher, etc …

The thing I want to go over now is how to enable the group creation. Wouldn’t it be now impossible to change the order of tabs if by dragging one on top of the other creates a group? Let’s look at the areas of interaction of a single tab:

Tab interactivity

We highlight here what happens interacting with each zone:

  • Group Naming â–ˆ red, by double-clicking over the name of the group (which by default is the same as the first site in the group) you can edit the name;
  • Adding a Tab â–ˆ green, by dragging another tab over this area you would add a new site to the group or create one anew;
  • Reordering Tabs/groups â–ˆ yellow, by dragging a tab over this area you would position it before (left), or after (right) it in the bar, like it happens right now.

This would take a few moments to getting used to, but I’m confident the modes of interaction are intuitive enough, since the borrow heavily from already well proven paradigms (double-click for editing, hover to preview and so on).

Number of tab grouped

The last addition I want to go over is a counter next to each group/tab name, indicating the number of tabs contained in each group. This is especially necessary for list of big sizes and it would increase the visibility of the system. The counter would necessarily be distinctive from the title since several websites (e.g. Facebook) use the format “(0..9)” to indicate the number of notification from the site. Here we can see that the counter follows stylistically from the rest of the UI elements; rounded corner and dark grey background.

The addition of this feature to the web browsers wouldn’t change significantly the usability. All the actions mentioned are not in conflict/used for other purposes and by designing carefully the size of the interaction areas of each tab the feature could be almost invisible to distracted users: making the one who don’t want to use it unaffected and the one who care empowered.

Hopefully you liked the article, I’d love to hear your ideas and suggestions in the comments below!

Published by Daniele Spaccapeli

I'm a computer science major who loves entrepreneurship and UX design.

One thought on “Interaction Design: Tab Management

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: