Beyond Tabs: Designing A New Browser Experience

By Aaron Travis

Travis1

There are over 2.4 billion Internet users in the world, and just about 100% of them use a browser to access it. Considering the importance and ubiquity of the browser, it’s surprising to think that they still operate in pretty much the same way today as they did when the first web browsers appeared in 1993.  The first browsers were created in an era when users only interacted with one website at a time.  However, I suspected that this was no longer enough for most people.  I’d like to recount the story of how I came to design a new browser, called PolyBrowser, which allows users to interact with multiple websites at once.

In the summer of 2011, I sat on my couch and browsed the web on my iPad, researching which Caribbean island would make an ideal winter getaway.  Pretty soon, my iPad’s Safari browser was filled to capacity with multiple searches, destination reviews, hotel websites, airline price comparisons and much more.  Ironically, the planning of an enjoyable experience in the future turned into a laborious process in the present, consisting of searching, refining, opening endless web pages and toggling back and forth to compare information.

As my frustration grew, it dawned on me that I was using an iPad, a device that has redefined how we think about computers and technology, yet there I was using a browser that was designed twenty years ago for using one website at a time.  I thought, “Am I the only one out there who uses more than one website to get things done?”  As it turns out, I’m not…

After some digging, I found existing research on the topic of how many websites people use at once.  According to an industry report by Patrick Dubroy, “having 10 or 11 tabs open is not that uncommon, even for people who aren’t ‘power users.” A Mozilla Labs Test Pilot Study supports this finding, stating that “there are plenty of users who have many more than 30 tabs open at a maximum. So while 10 tabs or less may be the most common state, there’s effectively no upper bound on how many tabs people do open at a time.”

So with this evidence, my experience as a User-Centered Design Professor led me to create an assignment for myself: Design a new browser built to allow users to seamlessly interact with multiple websites at once.  My assignment began with an investigation of what other attempts people have made previously to accomplish this task.  There seemed to be three options that existed.

Option1) Multiple Browser Windows

Travis2

By default, modern browsers allow you to open websites in new windows.   there they can be placed next to each other on the screen for comparison purposes.  To make this even faster, Windows 7 introduced a feature called “Snap” which allows users to automatically split their screen between two or more programs.  A similar utility, called Divvy, allows this on the Mac.

These are useful utilities for multitasking in a number of situations, but I found it less useful for searching and browsing because it involved manually tearing off tabs and moving them between the left and right browser windows.  Additionally, while I was able to use this method on my 19” widescreen monitor, my 13” laptop monitor wasn’t large enough to use the websites effectively.

Option 2) Divide the Browser

Another option for interacting with multiple websites is to divide the browser window.  I found an extension for Firefox called “Tile Tabs” that does just that.  As you can see in the screenshot that, while it is possible to view multiple websites in this way, the amount of screen space allotted for each site is reduced with every additional panel.  In the end, I found that dividing the screen into more than two panels made the amount of room for each website too small to use.

Travis3

Option 3) Organized Tabs

When browsing many sites, it is possible to end up with so many tabs open that it becomes difficult to keep track of them.  One notable solution to this problem is Firefox’s “Panorama” feature.

Travis4

Users can drag thumbnail versions of their open websites together into “tab groups” to keep them organized.  Clicking on the tab group hides all other tabs that are not part of that group, thereby making the tab bar seem less “cluttered” with too many/unrelated tabs.  Some people appreciate these capabilities, but I didn’t find them to be usefully for me.  Personally, I keep my tabs organized within different windows of my browser.  For example, I keep my email and social networking sites within the tabs of one window, and will execute a search within the tabs of a separate window.  This way, when I’m done with that search, I can just close that browser window and all of the tabs it holds will close as well.

My Solution: PolyBrowser

I found inspiration for PolyBrowser while using mobile Safari on my iPad.  While I was frustrated by the cramped screen and constant tab switching, I was at the same time inspired by the pinching and zooming capabilities of the browser.  This made the web seem to move more fluidly than on a desktop browser.  As I was scrolling around my web pages, I found myself constantly wanting to scroll “past them.” However, the characteristic “rubber band” effect on the iPad kept pulling me back.  I felt that if I could somehow break past that rubber band, I would see the rest of my websites waiting for me.  At that point, I had found my answer: a continuous scroll that would allow me to move through all of my websites as though they were part of the same plane.

I began to sketch layouts for this new browser over the next couple of weeks.  My sketched versions included vertical scrolling, multi-dimensional grids and side-by-side layouts.  In the end, I landed on a side-by-side layout because most websites have a fixed width, but variable length.

Travis5

Next, I coded a basic prototype in JavaScript and tested it out.  As I launched the prototype and began to open multiple websites at the same time, I felt a sense of excitement about the web that I didn’t think was possible.  For the first time, web browsing became “fun.” Not wanting to be blinded by my own creation, I showed it to a sampling of test users to get their impression. They, too, felt that this product had entered into new and innovative territory.

Travis6

As is true with most new technologies, the solving of old problems gives birth to new ones.Traditional bookmarks also only store and load one website at a time.  With PolyBrowser’s new emphasis on interacting with multiple websites, I realized that there was no good way to store and launch multiple websites quickly and easily. This led me to create a new technology, which allows users to instantly save all of their open websites as a single webpage, which I called a “PolyMark.” From a PolyMark, users can then re-launch some or all of their saved websites with a single click of a button.

 

PolyBrowserAt the time of writing this article, I am running a crowd-funding campaign to help fund the completion of PolyBrowser.  The campaign has brought me in contact with a number of “backers” who understand the benefit of this new way of browsing and have given their own money to help it become a reality.  The campaign has also put me in touch with skeptics who doubt that this new method will prove to be a worthwhile endeavor.  Who is right?  I again look to the radical changes brought about by the iPad for inspiration.

In late 2009, the iPad had not yet been released, but was being debated relentlessly by the tech media, with some of it betting against the iPad.  The prevailing wisdom of the time held that tablets had been done before (by Microsoft) and were a failure.  However, once consumers had a chance to get their hands on a real iPad, most of them just “got it” and changed their mind.  I’m hoping that once people get their hands on the new method of browsing offered by PolyBrowser, they will “get it” too.

Aaron Travis is CEO of PolySuite: Web Tools Reinvented. He has been working to develop user experiences for over 12 years in industries like education, video games, publishing and finance, most recently as User Experience Design Lead for Citi Private Bank. Previously, as User Experience Lead at Condé Nast Digital, Aaron architected for numerous high-profile magazines such as Glamour, Vanity Fair and The New Yorker. He has taught user centered desing an adjunct professor for the Interactive Media Graduate Program at Quinnipiac University.

Aaron received an MBA in Computer Information Systems, with highest honors, from Baruch College in New York. At the University of Michigan, Travis earned a Bachelor of Fine Arts degree, cum laude, with a concentration in digital design and animation. He is also a Human Factors International Certified Usability Analyst.

No comments yet.

Add Comment