a4apphack

It is the revolution of web browsers; they rule internet now. Browsers have evolved so much from what we had seen during the days of IE6. Now Firefox, Chrome, Opera, IE are on war to prove who is the best. They try different ways to win the heart of users; Firefox took a great leap by introducing the ‘panaroma’ feature – focus on multitasking, chrome gets appreciation for its fluid design – focus on simplicity & ease of use, Opera and IE has browser stability on priority – focus on robustness.

During this evolution, some browsers tries to standout from others by introducing a new feature which had never been available in any of their counterparts. But the other browsers instead wait for the users comments on the new feature implemented, if appreciated, they implement the same feature in theirs, may be in a better way. The browser who introduced that feature first might even loose its credit in due course. User is forced to switch from their  favorite browser for a ‘single feature’ they found useful in the ‘other’ browser. Once they completely switch and get used to the new browser, the old one brings out the same feature plus few bonus features. This cycle never ends. Firefox introduced tabs and extensions when IE did not have in them, people were attracted to it and finally switched to firefox. Then the light weight chrome came with Tab tearing, web apps, new tab page with speed dial and many other features, made few users to make chrome as their default browser. Firefox then inherited few of chromes’ features, syncing and expose like tab candy/panaroma effects. We don’t have to switch browsers just for UI features, and if at all we do, it should be seamless.

This article tries to identify best features in each of the browser and the features we expect to be part any modern browser. Here, we try to baseline few ideas, those ideas which takes browser design to the next level.

Browser Main Screen (Mockup)

Highlights

Main Screen

1. Menu Button

Drop down to access frequently access browser actions like preferences, print options, edit etc. To replace standard browser tool bar. (Inspired from firefox/opera)

2. Extension Button

Displays drop down that contains icons of the extensions to activate/deactivate them, or displays extensions options in sub-menus. Does not consume your address bar space as used to in firefox or previous chrome version. (Inspired from Chromium resizable bar that displays extension icons)

3. Bookmarks Button

Displays organized bookmarks in dropdown, no more bookmarks bar – (Can be created in firefox by customize options for toolbar)

4. Only Favicons in tab title

We just need favicons to know which tab is what. Most of the websites have favicon now-a-days (Inspired from faviconize tab firefox extension/pin tabs/app tabs)

5. Tabs that behaves like Dock/Taskbar icons in OSX/Win7

One favicon displayed for one domain/website. Its like transformation from Win XP quicklauch to Win7 Taskbar. 2 pages from Facebook are to be indicated by one tab and should allow user to switch over the pages from that single Facebook icon displayed. For example, hovering over the icon should display preview of different pages open from that same site. So this keeps the number of tabs open in the browser under control. (Inspired from OSX dock/Win7 Peek).

6. Tab Sets/Groups

Tabs should be grouped to different sets and only those tabs belonging to that set should be visible on the browser window. This gives us distraction free environment. We should be able to move the tabs across the tabset by drag-n-drop (Inspired by Opera Tab Sets/Firefox Panorama)

Example -

• SOCIAL Set – Facebook, Twitter, LinkedIn etc
• WORK Set – Stackoverflow, Superuser, Dev Forums etc
• FUN Set – Youtube, Failblog etc

7. DropZone for Downloads

We don’t need a separate downloads window to keep track of our downloads.  All we need is a small icon which displays the status of our downloads and should reveal the items downloaded only when required. So idea is to click on that dropzone icon to pop up a stack which displays the downloaded items/in progress ones. Another feature we would want is to be able to drag and drop the target URLs directly to the dropzone to start the download to the default downloads folder. (Inspired from Download statusbar firefox extensions/ flashget)

Check the Mockup

8. Semi Transparent Status Bar to display full URL (Autohides)

Status bar displays only when we hover over any link (Inspired from Chrome)

9. Unload the tabs on demand/Not all tabs are loaded during browser start

Some of the websites sends Ajax request continually load the time based dynamic content every n seconds even if the page is not active. For examples gmail syncs with the server to check for new email and there might be different apps that does the same. But we might not want gmail to do so and we dont want to close the tab either. So the solution is to unload the tab and activate/load it only when required. This happens during browser start as well, we load only the last tab this significantly increase browser startup time. (Inspired from Bartab Firefox addon)

10. Mouse Gesture Support

Less keystrokes – More usable browsers will be. Built-in support for mouse gestures. (Inspired by FireGestures Firefox addon and Chrome Gestures addon in Chrome)

11. Sync ‘Everything’

Every time you do a fresh install of your favorite browser anywhere, you have to spend hours to customize it. Do it at home and you repeat all again at work, or on your new laptop. All browsers should have built-in capabilities to sync preferences, extensions, bookmarks, and everything to ensure that user doesn’t even notice any change if browses at home or at work. He should be given options to create profile and sync those at work or home. (Inspired from Firefox weave, built-in with Firefox 4 though)

New Tab/ Hidden Address Bar

1. Pops-up on demand

Address bar consumes unnecessary space of our precious screen real estate. We need address bar only when we access a new page so why should it be visible all the time? Clicking on the newtab icon displays a popup that has a tiny address bar. This is like a omnibar/awesomebar which means single box to accept URL as well as search string. (Inspired from AppPanel enabled using startup switch in Chrome).

2. Search Site

Below the address bar are the favicons of the currently open tabs. Example, select the icon of twitter then enter the search term to search twitter for something. Reduces many steps this way.

3. Top Sites (Starred)

Few starred sites/frequently used sites (may be top 10) are displayed in drop down when the Star icon is clicked. So open these sites with a click (Most visited in Chrome, Top Sites in Safari)

Tab Grid

A new perspective to our usual browsing experience. This displays preview of currently opened tabs in a grid, tabs can be easily identified/switched to from here. We should be able to close the tabs with a click without switching back to the page.

1. New Tab from Grid

This is the best part, we can create tabs by just entering the address of the page you want to access from the grid itself. Example – create tabs for Google reader/ Gmail or any site instantaneously and let it load when you are still in the grid. So in future grid enables user to quickly create and open multiple tabs. (Inspired from IE in Win7 mobile)

2. Switch Tabsets from Grid

Click on the tabset button to preview the tabs belonging to that set. Easily drag and drop the tabs to different sets from the Grid as well. (Inspired from Firefox Panorama/OSX Expose)

• Counter on Panorama feature – This feature in Firefox will become little complex and unmanageable after opening maybe 30 tabs (or on laptop screens). We will end up in have 10 or 15 tab piles. But the method mentioned in this article lets users to manage tabs on that tab set and does not display all the tabs in all the sets.

3. Open New Page of Opened Tab

List of opened tabs displayed in the Grid, click on it to clone the site to a different page.

Conclusion

Like the term ‘Tabs’ which is now a standard in all the browser, we expect the ideas mentioned in the post to be integral part of every browser. Let the users have seamless browser switch if the opt for. So in future, users should consider the parameters like speed, stability, performance to let them decide on the chosen and not just the UI based influences.

Mockups Below For Reference

Please mention in comments if there are any features you would want to see in all the browsers or you deny on any of the idea mentioned.

Author of this post is familiar with different web browsers like IE 4 – 8, Now Defunct Netscape Navigator, Firefox (all versions), Opera, Chrome (all versions), Safari and many others. Has been evangelizing web browsers since 90s.