Saturday, August 15, 2009

A Next Generation Desktop Web Browser

The interface that web browsers provide today is one that is very similar to the first browsers that came out in the 90's. The back button, bookmarks, location bar are all very similar even though users use the web differently. On the smart phone there is a lot of experimentation of the interface, but the desktop hasn't changed much. Isn't it time desktop browsers got an overhaul?

History

Originally history was just a way to color links on a website so you knew if you had been to a link or no. To go with this history by default was stored only for a few days. These days browsers are designed to be able to store every single URL you ever visit. A history menu was a dramatic leap forward in usefulness for history and some browsers have begun to add more features to the history such as full history text search, screenshots, and more. While the history menu is nice it does have too many limitations. Is there a better way?

Bookmarks

A manually managed list of urls was nice back when the web was small, search engines were just being born, but the interface was created for adding urls, not managing them. Removing, sorting, filtering and searching is hard when by default it is shown in a menu. The Bookmark star solve so of these problems as it provides a way to easy remove bookmarks you no longer want. Some browser have begun to add features to the bookmarks such as the ability to tag, automatically updating, bookmarking rss and more. From adding, removing, managing, updating, syncing, meta searching everything about bookmarks is hard. How can a browser make bookmarks better?

Home Button

The home button is just a bookmark that happens to sit next to the location bar. Worse off it has a whole different way to be configured. Many browsers have already started removing this button by default. It is there because people expect it to be there. These days browsers run for weeks at a time, and have the ability to present a "new tab" page that shows the most common sites visited, arguably a much better home page.

Tabs

Tabs have problems. While there has been work in different design ideas on how to manage tons of tabs there are fundamental problem. We should not be putting time and research into how to manage hundreds of tabs, but into how can the browser help keep the user down to around only seven open sessions. Beyond the simple fact that users can't manager more then around seven of anything having hundreds of tabs means you could have hundreds of running JavaScript programs and you will run into system resource issues (not to bring up the fact that you have hundreds of dom's, images etc using up memory). As an experiment before opening a tab write down the reason for why you opened it. Very quickly you will discover the horrifying true problem.

Dialogs

Do you think asking a user to go down to seven tabs is radical? How about if if I asked them to only go to one? This is what is happening with popup dialogs. All dialogs related to a webpage should be part of that surface and not part of the browser. Already some browsers have begun to move some of the dialogs into the tab where it belongs. How can we move all of the dialogs into that tab?

"Private Browsing Mode"

Private Browsing mode as it is today if flawed. It was best highlighted when FireFox 3.5 users were horrified that there porn sites were showing up in the location bar search because they had bookmarked them in a "hidden" folder. When using Private Browsing it destroys much of the value that a browser can provide (history, bookmarks, autocompleting in the location bar, disk cache!) while not actually fulfilling the feature the user wants. Users don't care if they run into their porn, they just don't want anyone else to every see it. How can we provide what the user actually wants?

Visible URL

Before search engines you needed to put in url's a lot. It was only natural that this input field did double duty and automatically changed to the current url of the oage. Then we got a go button, autocomplete with history, the bookmark star, rss button, security warnings, a clear button, a site icon, search, and so on. The location bar turned in to the bastard widget where every feature gets put in it because it is always visible. While users still input url's with search engines and features like Top Sites this is much less so. Its primary function is to show the current url and removing that has to be done carefully because of security reasons, but already there are implementations out there such as the iPhone that show this can be successfully done. Ignoring all of the widgets dumped in the location bar the other purpose is to provide a crude command prompt into the browser for users. Is there a better way to display meta data, the current url and a way for users to input commands into the browser?

Menu Bar

Of course on OS X you will never remove the Menu Bar (unless you go full screen), but with no history, bookmarks, and dialogs, you don't end up with many commands. And with no location bar or bookmark toolbar it is temping to try to hide the menu bar to get screen real estate back. Making an Action button button like seen on browsers like Chrome shows that this is very doable.


Slightly better resolution than 320x480

There is a fair amount of research going on to make a browser UI for a screen that is 320x480, but what about a resolution that is 1920x1080?

Given that sites design to fix on a resolution of 1024x768 we can easily put two pages side by side on a monitor with that resolution. Given that that we don't have a menu bar, bookmarks (no bookmark bar) and are not showing the url or the site our interface (including window decorations) can be as simple as:

---------------
| META | META |
---------------
| | |
| LIST | SITE |
| VIEW | VIEW |
| | |
--------------

One of the primary reasons for multiple tabs is websites like Google Search or reddit where users are present a bunch of links. If they click on a link to see if it is interesting they destroy the current page. Hitting the back button 1) takes just long enough to make this expensive (sometimes really expensive) and 2) can result in the web page changing (such as on reddit) because the browser will reload the page. So users open the links in a new tab. What if when you clicked on a link in the Link List page it loaded in the Site View? How about loading an article on the right window and loading the digg comments page on the left hand side? The first week I had this in action and in use as my primary browser was mind opening.

Reading Lists

Watching how people use tabs you will notice an interesting usage pattern. Users are leaving a tab open because they want to come back to it later. This is often referred to as a Reading List and can also be called a complete failing our the existing bookmark system. For long term reading providing the means for users to quickly tag a page they can then close it. For example when researching a new car a user will leave open tabs that they find vary informative rather than making a bookmark folder. The second type of reading list is simpler. When doing a Google search a user might click on every search result in a new tab. The user will then read through each tab to see if it has the content they want. The browser should provide a way to quickly push links into a reading list rather then loading them in a new tab and conversely provide the means to pop the next item on the list or even clear the list. With the split views and reading lists users should be able to use the browser for a single task with only the two web views.

Buffers

An average human can only keep around seven things in their head at a time. Even if a browser can handle five hundred tabs the user is probably only thinking about the 493-500'th tabs. Each task view with the two windows is a buffer that can be layered. While split views and reading lists are great for a single task users often have several tasks such as reading news, gmail, and some Java docs. Providing buffers for each task will result on average around 7 tasks and 14 web views total rather then the tens to hundreds of unsorted tabs that users have today.

Ubiquity [http://labs.mozilla.com/ubiquity/]

If we take away the editable location bar how will the user go to a website? As mentioned before the location bar is a widget that has become smarter over time, but is still little more then a crude command line interface into the browser. The Ubiquity projects shows a much better route moving forward. You hit ctrl-space and start typing. A window that could take up the entire screen provides rich feedback about what you are typing. You can do all of the classical location bar commands such as manually typing in a url, 'go slashdot.org' or searching Google for foo 'g foo' or Wikipedia 'wiki foo'. But you can also have a quick calculator, translator and many others. Because it is text based it is extremely rich allowing you do do many things and can be easily expanded upon. [ See ubiquity for more info as they have spent time writing up nice simple descriptions and examples ]

Temporary-Buffer

Another reason users often open a new tab is to do trivial one off things such as typing a word into google to spell check it, going to whatismyip.com. While ideally these should be Ubiquity commands the user could cause a single web view to appear that floats on top of the buffer that the user can use for a short time before returning to the existing buffer.

Html Configuration & No Dialogs

A browser has a fair number of configuration options and yet due to the classic assumption about how configuration dialogs are presented there is no way to search a configuration dialog. Moving the browser configuration dialog into the browser and making it a web page gives all of the features a browser presents including easy searching and the ability to present many options in a scrolling interface.

JavaScript alerts, downloads, file dialogs all of these can be embedded into the web page. Popups will be local to the web page and while they might be able to block the page they will never be able to block the while application. A user giving a demo on buffer 2 will never have a popup blocking him telling him to accept a security cert for the site that is loading on buffer #1.

When access the MySite for the information about a web page would be flipped over and on the back would be the site configuration and information about all of the data, cache, history graph, and more. By flipping over the page you are not limited to a small dialog, but get the full size of the screen.

Guest Mode

Private browsing mode fails for the basic fact that we tell users to use it when they want to hide something. Users of course forget to use it from time to time resulting in them deleting their complete history out of fear. And to top it off when they are browsing porn because our browsers don't have their history and so we can't provide basic services such as letting them search their history for that video they really liked last week. Fail all around. What users really want is if someone uses their browser they will not see something. Given that our data is encrypted you must authenticate yourself on start any time you are not authenticated you are in guest mode. Really guest mode and private browsing mode are the exact same thing, but used differently. With private browsing you use it when you want to hide something, with guest mode you use it when someone is watching or when someone else is using your browser.

Meta Information

On top of the two windows is a meta bar which depending on the OS can be in the window title bar providing maximum web page space. This meta bar is created dynamically and while a default is provided users should be encouraged to customize it by making it trivial. It could be the classic back forward button, URL line edit, and search, but by default it could be the site title and the widgets that you often find in the location bar such as the RSS icon, the site icon, and network information such as if we are using SSL. The URL of the site could be a band at the top of the page that scrolls with the web page only needed at the start to confirm the site you are on.

Command Reporting

If you disable cookies, use adblock, or click to flash there would be a way for the user to see what the browser has blocked to easily unblock.

Plugins

A browser is only as rich as the extensibility that is provided by the extension framework. There are too many features that can significantly enhance the browser for a user that should not be part of the primary application.

The replacement for History or Bookmarks: MySite

MySite is the collection of all information about a site stored together where they can be more useful and provide richer features.

History and bookmarks are really one and the same and it is time we tried to keep the separate. History is sites you have been to, bookmarks are sites you have been to that you want to remember. As you move beyond two basic lists, the features quickly overlap. When was the last time I visited a bookmark? Can I sort a bookmark folder of links based upon when I visited them? What did the web page look like when I bookmarked it? Based upon my history what sites do you think I should (in the classical sense) bookmark? Every time you visit as website there is all sorts of information the browser can store to be useful for a user. To start with simply keeping the cache of the web page. This lets the browser:
- Full text search of every site the user has visited in every version.
- Offline browsing of sites they have been to
- Provide screenshots that can be used for all sorts of tools like a "Top Sites" page and a rich visual history browser.

Given that users have TB hard drives why are browsers limiting their cache to 50MB? Why not 50GB? Beyond just making day to day browsing faster having a full history can be very valuable. Research has to be done to see how much would be of value, but just defaulting it at 50MB seems foolish.

On the data side all data for a site should be stored in a single place. Rather then having a cookie jar that handles every site out there design a cookie jar that can be cheaply created for each new site that stores the cookies for that site. Deleting all the data for a site could be as simple as deleting the entire cookie jar (file/folder/database) with no possibility of bugs. With a cookie jar that only has the cookies for site X there is no possible way for a script from site X to grab your bank.com cookies in a hidden iframe or anything.

Each site should have the ability to customize every browser configuration for that site. Today some browsers let you turn off a few things such as cookies for a site, but why stop there? Every single configuration option related to the web page should have the ability to be customized on a per site bases. Cookies, custom stylesheet, zooming factor, fonts, etc. This is done in a way that is cheap so each tool and addon (see adblock, and many similar tools) don't need to re-invent the exception/whitelist dialog.

MySite should store the URL's that were browsed including the referral URL and meta information such as how they left the site (click on a link, went to a bookmark or closed the tab), where was the scrollbar. This valuable information is small and can provide rich history/replay browsing later.

Rather then bookmarking a site, a user will tag a page with a bookmark. Free form tags on any page allows a user to not only quickly mark a page, but also add meta information about why they tagged it. Pages can have multiple tags and searching for tags is the default method for accessing tags. Tags are cheap, the user doesn't have to decide to bookmark a page, there is no tag management or bookmark menu tree to keep clean.

How valuable is your browsing history? Browsing history is literally your thoughts in computer form. Walking through the history of the CEO might tell you that he has been spending a lot of time reading up on a some small startup. Is he looking to buy it? What if that CEO was Steve Jobs? How about going through the average users history? You will discover where they are thinking of going on vacation, what car they might buy, where they get there news and probably what fetish they have. What if you saw someone was searching for "How to make an atomic bomb", "How to kill my wife/husband", spending time looking at Monster.com, a medical sites, a forum site where they post under an alias. This is pretty private information. If you were to sell a diary application what would be the first thing you would offer? Encryption. Given the amount of time users spend in the browser and how sensitive the history data is it is insane that browsers don't offer full encryption by default.

[http://www.chromium.org/chromium-os/chromiumos-design-docs/protecting-cached-user-data]

MySite has to parts, cachable and non-cachable. You can (usually) re-download a webpage, but you can't re-download your cookies if they are deleted. The non-cachable parts should be in a form that is sharable so they can be on multiple computers. From multiple computers, to reloading an OS what is the value of having a history that can hold 100 years of links if every six months they reload Windows?

While initial I did say that you should remove all of the classical UI elements that a browser has all of the backend changes could support the classical view, but that would destroy a lot of the value of those changes.


Further notes and ideas:

More Meta Information
There are various history tree viewing examples out there such as: https://addons.mozilla.org/en-US/firefox/addon/13316/

Direct History Views

From the Summer09 Mozilla labs design challenge TabViz
http://design-challenge.mozillalabs.com/summer09/

No comments:

Popular Posts