Aug 7, 2012

Grouped Tabs

Design is ultimately about problem solving. And many times, the way to solve problems is to make things better. I've been paying attention to my workflow recently, and thought about a feature I'd love to have in the browser. It may already exist or it may be impossible. But I figured I'd go through the exercise nevertheless.


First, a confession. I'm a tab-a-holic. Take a peek at my screen at a given moment and I might have upwards of 20 tabs open. I know, I know, it's bad, and there are apps to help me be more organized, I know, I know. But it's because of how I browse, and how I think — a lot of times I'll save articles to read for later (thank you Readability), but other times I'll leave groups of tabs open that share a common theme, and that I need to sort through later.

Enter the Grouped Tabs concept. I love what iOS does in grouping applications. It's brilliant. I can put a bunch of related applications inside of a folder, which makes apps easier to find in addition to reducing clutter. I'd love to be able to do this in the browser as well. So here's what I have in mind — it's not perfect; it's definitely a brain dump, but the exercise is fun.

So let's say you have a few tabs open in the browser, and several of these are related to one another. And you'd like to keep these tabs together to review later. Sure, you could save each to Evernote, but at this point you don't know WHAT you want to do with these tabs yet...you may end up deleting most of them. The point is you want to unclutter your viewport quickly, and without having to sort through each right away.

So borrowing from iOS, you click on the tab you want to make a group out of, and drag it on top of a related tab like you see above. The 'bottom' tab has some sort of visual hover state to indicate a group will be formed once the click and drag is complete.

After this action the highlighted page is actually the group that you've just created. When it's active it looks and functions like a regular tab except for the unique icon to the left. Clicking on this icon would expand all of the links in the group to separate tabs (you'd do this when you're ready to sort through the tabs). Additionally you get a grid view of all of the items contained within your group. You could click on an item to visit the link, systematically delete items from the group, etc. Lots of potential functionality here.

Once you click out of the group by clicking on another tab, the group tab takes on different styles to highlight that it is, in fact, a group. We could even add a notification icon to show how many links are included in the group, but I left that out in this example. But the point is we've cleaned up our tabs quite a bit without losing any of them, giving us the ability to sort through them at a later date.

And once again, you can always click on the group icon to expand all of the links contained within the group into separate tabs.

So there you have it. I know it's rough, but I could see something like this working very well for my workflow, because I tend to keep a bunch of tabs open to sort through later. This would unclutter my browser window quite effectively. And yes, it's a better practice to just sort through your tabs at that specific moment in time, but for one reason or another that hasn't yet become a habit for me.

I'm not much of a developer, so I have no clue if something like this is currently possible. If it is, I'd love to see it come to fruition. And if you want to actually work on making something like this happen, let me know, I'd love to be a part.

I'd also love your thoughts on the idea in general. But at the end of the day  I'm content with the exercise. Because design is about solving problems, and working through details like this helps me think critically about how to make experiences better.

Comments

Tumblr