An Information-Centric Web Browser

Overview:

For my final submission, I didn't develop an interactive prototype mainly because of insufficient time and my unfamiliarity with prototyping tools. I felt that if I forced myself to create a low-quality prototype, it would distract, rather than help, the judges from understanding my design.

My design consists of the following main features:

Address Bar - The main purpose of this feature is to allow the users to check the status of the current web page and to go to another destination. In my original mockup, I had included some implementation details on how the address bar works. But now I think its behaviors should be determined by the users' preferences and conceptual model. But one thing is certain: the address bar should not be overloaded with too many functions. Doing so will complicate the interaction and obscure the purpose of the address bar.
Status Bar / Notification Area - The functions of status bar are integrated into the address bar to achieve simplicity and consistency. Furthermore, the notification area is now a standalone feature that offers developers the ability to notify the users at their discretion. Depending on the robustness needed, the notification could be implemented by using web feed technologies or add-on.
Tabs - The use of tabs have improved the users' workflow when using a web browser. While a conventional tab bar might achieve a good balance between simplicity and functionality, its limited usefulness does not satisfy many users' needs. Thus, an additional tab manager is used to implement several different viewing options, including list, thumbnails, tree, grid, etc. In particular, the grid view allows the users to view multiple pages at the same time. The layout of the grid could be specified by using a simple table editor.
Contextual Menu - The purpose of the contextual menu is to facilitate sharing information across different online services. Since the intended scenario for this competition is set at a somewhat futuristic time, I assume that there will be a working implementation of semantics markup that will help the browser offer relevant commands. But to implement this feature at present time, the best we could do is to use a default menu for all selection. The user would then browse the categorized commands to perform their tasks. Even though natural language processing could help improve this process, I am not sure whether a web browser should handle this complicated problem. An ineffective use of natural language processing would offer little UX improvement while making the browser bloated.
Main Menu - The main menu consolidates all the different managers, including the bookmark manager, tab manager, etc. Even though it is called menu, it offers more than just a list of commands. It is a full-featured interface that supports all UI controls. The users could also dock the menu to the side and use it as a sidebar. The main goal of this feature is to improve visibility, consistency and coherency.

Short Summary:

This is a concept design for a web browser that helps the users (1) provide information, (2) access information, (3) connect information.

Mockups:

Description:

Thought Process

Before I designed the web browser, I asked myself: "What is Internet?" And my definition is that: The Internet is a platform where people use services and applications to share information through various media (e.g. text, image, video, etc.) As a result, a web browser should provide the necessary mechanisms to assist users in sharing information.
In order to make the browser as minimalistic as possible, I've used the bottom-up approach, i.e., I started with a blank UI and incrementally added features that I think will be necessary to a web browser.
The following are the features that I've come up with.

Address Bar

A browser should provide a way for the users to go to their destination web page.
Cybercrime will only become a bigger issue in the future. From a security perspective, it is crucial to know where we are when we are surfing on the internet. And unlike the real world, the Internet is a place in which everything could be fabricated. Therefore, it is necessary for the web browser to provide additional UI elements that help the users to determine the credibility of websites.
The address bar is good candidate for satisfying these two needs.
Implementation Details:

What I have in mind is basically a combination of what Firefox 3, Chrome, and Internet Explorer 8 have done with their address bars.
When the users click on the address bar, a drop-down menu will show up. It contains a list of websites with high "frecency" value and websites that users have specified (analogous to bookmarks bar.) The idea is that the users don't need to enter anything to go to their most frequently visited websites.
As the users start entering the address, a list of matching addresses from history and bookmarks will be shown. Also, the drop-down menu will show suggested addresses that match what the users are typing. This list of addresses will be categorized to eliminate any confusion.
When the users press enter, there are three outcomes.

If the users enter keywords only, the browser will send the query to the default search engine. Therefore, the address bar could also serve as a search bar.
If the address is a complete URL, the browser will take the users directly to that website.
If the users press a combination of keys (e.g. ctrl + enter, shift + enter, etc), the browser will always take the users to the most relevant web page regardless of the completeness of the address entered.

Status Bar / Notification Area

The two most important features of the status bar are the progress bar and preview of a link address. I think that these two features could be moved into the address bar. Other than saving space, this approach could also improve consistency by bringing the status and the address of the current page together. As for the preview of a link address, displaying it in the address bar reaffirms the purpose of the address bar, which is to take users to a specific web page. Therefore, the users only need to look at the address bar to determine the location and status of a web page.
Sometimes, the status bar is used by add-on developers to display notification. But I think that notification is important enough that it deserves its own space. Very often, we go to a web page to see if there is any update. This polling process is not efficient, which also explains the usefulness of web feed. Therefore, the ability to notify should extend to other online services.
Implementation Details:

The users have complete control over what notification they want to see.
The notifications are not intrusive. But they are noticeable enough that the users could always see what have been changed.
Clicking on the notification icon will bring up a small preview menu. An example might be a short list of unread e-mails.

Tabs

Tabbed window has been a great tool for multi-tasking in web browser. But I think that it would be more useful if the browser offers a way for the users to look at multiple web pages at the same time. This could be done either in the OS level or the browser level. From a consistency perspective, I think that windows management should be handled by the operation system. After all, we don't want to have a messy windows environment where the users have to use both Multiple Document Interface (MDI) and applications windows at the same time. But I also think that web pages are different from typical documents. The relations between different web pages could be used for organizing them. And the browser is more capable of determining that relation than the operation system. There is also the problem of demand. After all, not all users need to look at multiple web pages at the same time. So I think that in addition to the tab bar, the web browser should have a tab manager that could be used for satisfying different users' needs.
Implementation Details:

The tab bar is located below the address bar. Regardless of the number of opened tabs, the tab bar will always squeeze them together instead of hiding them by using horizontal scroll or vertical scroll. If the users need more space, they could resize the tab bar by dragging its edge. Although the tab bar will lose the essence of "tab" when it has multiple rows, I think this approach is quite user-friendly because it is visible and it gives users the ability to control the tab bar to meet their own needs.
The tab manager offers multiple viewing options. Add-on developers could always extend the tab manager by adding more options. Some default examples include the list view, the thumbnails view, the tree view, and the grid view. The grid view is used for viewing multiple pages at the same time. I've designed a new control element that is similar to a table editor. First, the users need to specify the number of rows and columns. But this symmetric layout is not flexible enough. In order to create a more complex layout, the users could click on a cell and add another grid inside it. And the maximum level of grid is two. Any more than that will be unnecessarily complicated. After setting up the grid, the users could arrange the web pages by dragging the tabs to different sections.

Contextual Menu

I think that no matter how advance and different web technology is in the future, the basic structure of a web page will be the same: it is a canvas that consists of various informational elements. And I think that the use of semantics will become much more prominent in the future. Therefore, the web browser should provide the necessary tools for the user to select and use these informational elements.
Implementation Details

A more streamlined and extensible right-click menu is used.
The top of the right-click menu is the title. It describes the semantics of the current selection. E.g. name, address, event, contact information, etc.
Below the title, there is a preview of the current selection. It improves usability by making the selection easier to evaluate.
Below the preview, there is a list of the most relevant and frequently used commands.
At the bottom of the right-click menu, there is a list of categories. This list is fixed. It shows all the available commands for the current selection.

Main Menu

No matter how simple a web browser is, it always uses a lot of individual UI elements to accommodate all the functionalities. Putting them in one place could greatly improve consistency and visibility.
Implementation Details:

A vertical menu located at the top-left corner will be used for consolidating all the default managers (e.g. downloads manager, bookmarks manager, history manager...)
In terms of appearance, the menu is organic and fluid. Upon hovering on a label, its corresponding interface will appear in a way that is similar to a typical menu. The difference is that the sub-menu is not just a list of commands. It is a full-featured interface. The size of the sub-menu would also change dynamically. So calling it "menu" might be a little misleading.
In terms of displaying behavior, the menu could either hover like a regular context menu or dock at the side like a sidebar.
In terms of functionality, the menu is extensible. Add-on developers have the option to implement their UI within this menu. For example, developers could implement an instant messenger or a text editor inside the menu. Because of the robustness and accessibility of the menu, the users could easily provide and access information with it.
Some default sub-menus:

Actions - By having a list of available commands, this sub-menu is similar to the contextual right-click menu. The difference is that the users could specify their own input (e.g. entering text, uploading image and video, etc).
History, Bookmarks - Search engines have been much more effective and efficient. As a result, the current approach of using history and bookmarks seems somewhat outdated. Since the focus of this design is not about history and bookmarks, I assume that a list of links will be displayed in these two sub-menus.
Miscellaneous - This is where the browser put other unrelated UI elements into. Some examples include printing, saving, etc.

Since this menu cannot satisfy all UI needs, add-on developers can use toolbar icons to access their own interfaces.

About me:

My name is Chaowen Tan. I'm an undergraduate student at the University of Texas at Austin. I've recently changed my major to computer science in order to pursue my passion for user experience design.

This work is licensed under a Creative Commons Attribution 3.0 United States License

Features