Browser-Design Experiments (2010–2017) #5
Tab-Free Browser (2017)
An interactive demo of a zoomable Web browser.
This post is part of a series of experiments in redesigning the Web browser. In this design, from 2017, I created an interactive demo of a minimum viable product — an evolution of my previous design for a zoomable browser/OS.
Since I created my previous design, the design for my browser/OS continued to evolve. So, in graduate school, I decided to use the latest version of the concept (the one in my head) for an assignment. Below is an interactive demonstration of a how a minimum viable product would work. This is followed by screenshots of each of the stages of the demo along with an explanation of the design.
Summary
The problem I am trying to solve is that of Web-browsing management: it is difficult to keep track of your browser tabs and stay focused on your task when everything is mixed up together. The issue is exacerbated as the number of tabs increases. Worse still, sometimes what you’re looking for isn’t a tab but a page hidden behind the Back button of a tab. This last issue is caused by the partial redundancy between the Back button and the tab bar: with every link, we have a choice whether to add it to the current tab’s history or to open it in a new tab, thus deciding whether the current page will become hidden or not.
My solution was inspired by an xkcd comic (#214: The Problem with Wikipedia). It demonstrated how all pages that start from the same page together form a tree structure — regardless if a node was opened in the same or a new tab. I realized that this tree can be flattened to show a logical sequence of all pages (just as if every single link were opened in a new tab). Moreover, I realized that browsing becomes especially messy when multiple trees get mixed up together, with unrelated pages next to each other. The solution thus has two parts: flatten the tree into a linear sequence (by eliminating the Back button and replacing the tab bar), and keep trees separate.
My replacement for the tab bar was heavily inspired by Palm webOS, which allowed the user to stack related cards/windows into a neat stack. I have extended the metaphor for the purposes of creating a simple interface for my solution, which I call Tab-Free. In this app, every page is its own object, which can never be replaced by another page (unlike with tabs). Opening a link creates a new page in the stack directly behind the current page. Opening a new page manually (with the ➕ button) creates a wholly separate stack.
Tab-Free has an object-centric interface, since almost everything is a page. I have, therefore, chosen to use Material Design extensively to match the “materialism” of the interface. Pages and page stacks look as such, have appropriate shadows, and are organized spatially.
To demonstrate the capabilities of the prototype, I have chosen to do so via a a tutorial/walkthrough. The tutorial will teach the user of the various gestures required to use the app, which will also serve as a demonstration of the way one browses within it.
The demographics for this app are the same as those of any browser: everyone. However, considering that its interface is designed to be simpler than other browsers, the range of people able to use it should be even greater. Finally, the plan for Tab-Free is to create a minimal viable product for a 1.0, and then to add missing features later, such as folders, zoomability, and commands.
Research
The design of Tab-Free draws inspiration from many products and designs. However, there does not seem to be a single product that implements the core ideas — that browsing trees should be displayed separately and that each tree should be organized linearly.
The following is a list of other browsers that deviate from standard browser design in ways that bear some resemblance to Tab-Free or helped inspire its design.
1. WorldWideWeb (1990). Tim Berners-Lee’s very first Web browser does not seem to have had the browsing structure of later browsers. The Back command did not exist and was also not necessary, as links always opened in new windows. Thus, like with Tab-Free, there was a one-to-one relationship between pages and windows. However, due to poor window-management capabilities of desktop environments, later browsers opened links in the same window.
2. Pad++ Web Browser (1996). This was a zoomable browser where the tree view was the browser. Instead of windows (or tabs), you switch pages by following your trail along the tree, which was always visible, while the current page was merely enlarged. This way of browsing the Web has the advantage that the display should match the user’s mental model better. It also naturally kept trees separate and made the Back button unnecessary. However, since the tree structure is two-dimensional rather than flattened, it added an extra mental burden on the user, who now has to navigate not only the Web but a complex tree.
3. Palm webOS Web (2010). Palm webOS’s browser was fairly standard, as each “card” had a Back button and its own history. However, when combined with webOS’s card interface, it had the most potential. In webOS, apps often created new windows (‘cards’), which were automatically placed together with the parent card into a stack. Thus, related cards tended to stick together, while unrelated stacks tended to stay apart. In the browser, however, following links didn’t create a new card unless the user purposefully did so. Moreover, the interface and gestures for navigating the stack were limited, and it was not possible to view any card at the top of the stack except for the rightmost one.
4. Firefox Tab Groups (2011). Originally called Panorama, this was a hidden feature in Firefox for many years. It was eventually removed and turned into an extension. This feature allows users to manually organize their tabs into groups/folders. Visually, there is some similarity to the overview in Tab-Free, and it also allows organized users to manually keep unrelated tabs separate. However, since it’s just an enhanced organization system for tabs (each with its own page history and Back button), it does not fundamentally solve the problems of Web browsing, as it does not implement the key features I outlined above.
Therefore, while there are many ways for one to maintain control over their Web-browsing, there still is no conceptually unified solution. Tab-Free provides a solution that fixes the model for Web browsing, allowing the automatic organization of many more pages than was previously feasible, while presenting those pages in an interface that is so simple that it requires only one button.
