My Entry for the Mozilla Design Challenge of Spring 2009: The Browser Dock

Mozilla Labs' Pascal Finette posted a design challenge invitation on http://www.ixda.org/ . The design challenge is “What would a browser look like if the Web was all there was? No windows, no unnecessary trappings. Just the Web.”

The goal of my design idea is to reduce the use of the address bar in a browser as far as possible. There are scenarios where a physical keyboard may not always be available for use with web enabled technology platforms (eg. surface computers.)

One inspiration behind the design idea is that there already is a significant number of internet users who despite having a physical keyboard present for url entry, tend not to use the address bar that much if at all for web navigation (based on personal observation.)

 

How do users navigate the web today without using the address bar?

  • Quite a few users primarily browse the internet using:
    • The search bar in their browser toolbar
    • The search on their default homepage
    • Browse link directories on information portals such as yahoo to find websites of interest.
  • An additional way that users browse the internet is by clicking link received in email notifications from websites or web applications that they have registered with or have been invited to join.
  • Since the advent of the web browser, a significant number of users  browse the internet by clicking links on website pages to navigate from one website to another website (a trend called web surfing with no intended task or direction.)

 

How can a browser or embedded devices used to access the web cater to use cases where the url bar is seldomly used if it can be used at all?

My design idea to cater to such use cases is a browser dock containing a horizontal row of items with each dock item containing a web pages title, a screen shot of the webpage and the url of the web page.

 

Mock ups of the Browser Dock:

My initial idea was to place a dock at the bottom of the browser chrome as can be see in the embedded mock up below:

 

Universal Browser Dock Tabs With Sampled Images

Univeral Browser Dock Tabs With Sampled Images SteveJB
 
While the above embed simulates how OSX and Windows 7 handles docked applications, the same bottom alignment transferring over to a browser could lead to a few complications:
  • First time users may not notice the dock at the bottom
  • Mouse travel to the dock on the bottom of the screen can be excessive when a browser is used for extended periods.
 
 

The embed below has the dock items aligned to the top of the browser chrome. The left most dock item can be the homepage of a user.

 

Universal Browser Dock Revision 3-SteveJB

 

 

Advantages of implementing the dock

The main advantage is that users can instantly recognize which websites they visit the most often (or are intended to visit) while accessing them with minimal keyboard and mouse input (currently users have to open up a bookmarks folder and then browse bookmarks even if they bookmarked only a few websites a process which I believe are two clicks too many for often visited websites.)

In the mock up, there's no longer a home button near the back and forward buttons since the left most dock item is/can be the home page dock item. When the left most dock item is used as the home page, it completely replaces the function of the home button in the conventional browser chrome while adding more information such as the title of the currently selected home page as well as visual cues to what's on the home page.

As screen sizes expands horizontally, the dock can accommodate more items. By default the user can manually select the websites to be dock (see call outs 2 and 4 in the above mock up) or the dock can have links automatically generated based on user activity.

 

Who would benefit from the browser dock?

For business use cases such as in an office or service stations where productivity depends on web access the dock items can be used as links to visit websites or web applications. For additional security (as in the case where the computer terminals are for public use)  the url bar can be hidden with the dock items used to visit a few selected web applications (such as a book directory in a book store) or websites (an information kiosk at an exhibition can allow visitors to visit websites related to the displayed products or services.)

Internet cafe owners can have the dock items set towards websites the cafe owner would prefer users to visit. A childrens section of a cafe can have educational websites docked, a section of the cafe with a 13-35 year old audience can have social networking websites docked, etc...

For home users, the dock can pick up on the users most frequently visited websites or display dock items manually. The dock items can display according to which websites a user frequently visits at a certain time of day, month or time of year.

A reserach survery I've read (source to be identified) states that the average internet users regularly visits 4 to 5 websites. The dock allows such users to visit regularly visited websites  without having to type in the url or browse their bookmarks or recall the website from memory since the website could either be manually docked or automatically displayed based on their previous browsing habits.

Combining manual and automatic dock item selection:

A few dock items can be selected as fixed (by default grouped towards the left) while the remaining dock items can be generated automatically based on a user's browsing habits.

 

Additional Info

Dock  Items in relation to Bookmarks

The dock does not drectly replace the bookmarks folder. If bookmarks are enabled, dock items would be automatically added to the bookmarks folder (if available.)

The dock items can be viewed as shortcuts to bookmarked items while the browser dock as a whole can be an extension (or evolution) of the bookmarking function (more details to be written on the aspect of dock item system being an addon/extension that extends and possibly can evolve of conventional bookmarking.)

Dock Groups

Can be used to group items that are frequently accessed (in a similar yet quantitatively limited manner to book mark folders.) A dock item on click or on hover can display (in a similar office to the Microsoft ribbon) a set of websites that may need to be frequently accessed. Due to limited horizontal space on most screens, the dock group functionality may be limited to a few use cases.When a horizontal row of dock items and/or grouped dock items exceeds the browser width, the excess items can appear on a second row (would not be available by default.)

Blog Notice

From 2010 onwards, blog posts below can be viewed in full on: http://stevejbayer.wordpress.com

SteveJB's Recent Posts

Most Recent Blog Excerpt:

The quotes below are from Don Norman’s article: Design Thinking: A Useful myth …more important, and more legitimate reason to embrace the term “design thinking.” It positions design in a unique way, forcing companies to view design differently than before. The emphasis on “thinking” makes the point that design is more than a pretty face: [...]

Usability News Feeds

My Groups