March 25th, 2010

Improving download behaviors in web browsers

Saving the world, one file at a time

The confusing and inconsistent state of downloading files using a web browser has long been a pet peeve of mine. The current situation is pretty much a mess in every web browser. Issues with file systems in general notwithstanding, even doing simple downloads to a centrally defined folder can be confusing, even frustrating.

The aim of this article is to give an introduction to how the most common browsers behave when it comes to downloading files, what opportunities exist, and close with a set of recommendations for how to fix this in Firefox and other browsers. It is my hope that putting these ideas out there will spur some innovation in this area both in Firefox and competing browsers.

We’ll try to cover the most obvious issues in the most common browsers, so we can all get better at this. This article will cover:

Beverage warning

Every once in a while, I publish articles that may require some time commitment, because I think the subject matter warrants an in-depth treatment, and because that’s how I roll. As per Blaise Pascal, Je n’ai fait celle-ci plus longue que parce que je n’ai pas eu le loisir de la faire plus courteI would have written a shorter letter, but I did not have the time.

So find a beverage of a suitable size and persuasion — this stuff can certainly drive UI designers to go for the hard liquor — and let’s look at the current landscape for browser download handling, and how it can be improved.

Existing approaches

It’s useful to have a basic understanding of how downloads are handled in the various browsers:

Firefox

Let’s start with Firefox:

In addition to the download window itself, there’s also a download progress indicator in the status bar, that — when clicked — will bring up the download manager window:

There’s a lot to like about the current download manager in Firefox:

…but there are also elements that are problematic:

Internet Explorer

Moving on to everyone’s favorite browser, the approach is pretty simple, no dedicated download manager, everything is handled by dialog windows:

The good:

The bad:

Safari

Nothing revolutionary, overwhelmingly similar to the Firefox approach, with a few improvements and a few missing features. It has the same dedicated “download manager” window approach:

The good:

The bad:

Chrome

Chrome has actually done a fair amount of work on attempting to improve download handling, and is — in my opinion — one of the better experiences out there right now when it comes to handling files with a web browser. Of course, it has its share of problems too. The fundamental difference is that it puts downloads in a bar along the bottom of the browser window:

To make sure you don’t miss where the download goes, Chrome seems to follow the age-old philosopy of “if you want people to not miss it, make it big and red.” When you initiate a new download, it displays a falling arrow for approximately a second, to bring your attention to the download bar at the bottom. This does give the impression of “usability testing gone horribly wrong”, where — no matter what the UI designer does — he can’t get people to notice where the downloaded file went, since there’s no dialog box to obstruct the view and call attention to itself. Hence, the only solution is to add an arrow that is so big that you can’t possibly miss it.

To Chrome’s credit, they have iterated quickly on the download UI over the past few versions. Earlier versions had the download bar pinned to the tab it was initiated from — which is pretty much exactly the opposite of what you want, since you’re likely to browse other sites until the download is done. Thankfully, this is now fixed, and the download bar is now global.

A curious side effect of the global download bar UI is that it goes contrary to Chrome’s philosophy of taking up as little space for the browser UI as possible. The download bar steals the equivalent of two status bars of pixels in every tab you’re using unless you dismiss it by closing it:

Another problem, illustrated above, is that it doesn’t really have a solution for overflow. Similar to how Chrome doesn’t yet have a strategy to deal with the case when you have too many tabs (they just get smaller and smaller until they are unusable), the screenshot above actually contains three downloads — the only problem is that download #3 is (presumably) wrapped to an invisible line below the two visible downloads.

Clicking “Show all downloads…” will bring up a download tab, where you can see all the downloads you have made:

This was an approach originally introduced by Opera, which we’ll talk about next:

Opera

Does quite a few things right (as usual), but have some weird defaults that mar the overall experience. The idea of downloads-window-as-a-tab was first done in Opera, but can still be improved.

Opera shares most of the same issues as most of the other browsers (asks every time it downloads, opening with non-sensical applications like DiskImageMounter, etc), but overall it is standard fare. One thing to note is the amount of Power User functionality included in the main UI, with things like the “Quick Download” field that will download whatever URL you paste into it directly, its support for downloading all the resources linked from a page, etc. The quick download field is also curiously positioned in exactly the same location as you would expect to find a search/filter bar, and people do try to use it as such — with predictably bad results.

Suggested improvements to the download handling in Firefox

Informed by what other browsers do for downloads, it’s clear that Firefox already does a good job in comparison — but it can also be made a lot better without an ovwerwhelming amount of work. The infrastructure is solid, we have the necessary functionality for most of this already — but the user experience of how it all fits together can be significantly improved.

From the Firefox point of view, we have a list of things we can do to make the user experience of downloading more streamlined and easier on the users. This advice pretty much applies uniformly across all browsers, and as usual — feel free to steal any of these ideas for other browsers. It’s how we make web browsers better.

Replacing the download manager window

The current download manager tries to do a lot in too small a space, so we propose to split the downloads into the following two components:

  1. An easily accessible panel that shows you current state of downloads, your recent downloads, and gives you a good indicator of how far along your download is. Its goal is to surface status, not to perform download management outside of the basics of showing progress & number of files, as well as operations to stop & resume the download. A sketch of our current thinking is shown to the right; it will also light up when starting a download, and possibly add some subtle glow effects to indicate that downloads are in progress, and a more significant event once a download completes.
  2. A more powerful full-window UI for advanced operations like searching, clearing entries, sorting, and everything else related to Download History. This is also where operations like rename or delete are present. This window should ideally be shown as a tab, and since we have tear-off tabs, you can keep the old-style dedicated download window too, if you prefer that.

You probably caught on to this idea already, but the main point of #2 is that there is no need for a dedicated download manager. The download manager is a listing of history, and should simply be a filter inside the history window that says “show me only files”. Download history is intimately tied to browsing history, and sometimes the additional context is useful when looking for a download you did as part of a browsing task. Being able to show history, and then narrow down to only show files is a natural way of approaching download history.

Other things that would improve the experience:

File & application handling

On the infrastructure side, there are a lot of smaller problems that conspire to give the user a less-than-pleasant experience with regards to how files are handled.

Some of the issues that should be fixed:

In-content display of content we know how to handle

Firefox has always been about giving control to the user, which is why a dialog like this seems a little out of place:

Why can’t I open this file in the browser? Firefox knows how to render a PNG file, why should I have to open the Preview application (oh, and WTF is a “Preview Document”) just to look at the file?

In this case, the web site author or server software set the content-disposition: attachment header, which means that they insist on the image being downloaded. We should of course recognize and respect this, but we can do better, and present a UI that gives you an idea of what you’re about to download, so you can make that decision yourself, and not have it made for you:

The concept is to reframe the download UI to be a bit more like a print preview — you see the content, and get a bar on top with options, a “download preview,” if you will. Here is how it could work:

Additionally, when a plugin is being used to render content in the content area — and the browser did not instruct Firefox to download the file — we should probably display the same bar with command to download or open in an external application. In a lot of cases the user might be viewing a QuickTime movie or listening to an MP3 and they think “how can I download this?” The actual answer is to go to File → Save As, but because that is so rarely done, people usually do not successfully come to that conclusion.

Avoiding the “minefields of the web”

In the event that a download can’t be previewed (the user can’t “stay on the Web”), or the user asked Firefox to remember another behavior for the type of content, like automatic download or automatically sending to another app, we should change the cursor icon to indicate the action when they hover on the link, so that they always know what is going to happen ahead of time.

We’d like to introduce indicators in the cursor/pointer to give you a bit of warning before you click things that aren’t actually web pages. Showing a small envelope icon for mailto:, a small document icon for PDFs (on hover) could be a simple way to indicating that clicking the link will have a somewhat unexpected result.

Starting an application like a PDF reader or an email client — or just downloading any file — can take a lot of time, and is often an unexpected effect of clicking a link on a page. We should able to give people a better expectation of what will happen before they do this.

Unifying security questions

On modern versions of Windows and Mac OS X, the “this is a dangerous file from the internet” dialog has been handed off to the OS itself:

This means that when downloading anything using Firefox, you’ll get two questions about whether you want to open the file on these operating systems. This is unnecessary, and we should avoid asking on the platforms that already have this enabled. It’s not a real security measure in any case — and we should definitely still ask for so-called “drive-by downloads.”

Drive-by downloads

In general, we want to do the right thing when you download files — but there are cases where we should always show the download dialog, the cases known as “drive-by downloads.” In short, these downloads are triggered by events that were not caused by you clicking a link. A common variant is the page that redirects to a downloadable file, so you didn’t actually click the link to get the file.

There are likely to be edge cases that we don’t know about, but we should be able to find a compromise between usability and security — and err on the side of security when it isn’t possible to detect what the obvious thing to do is.

Next steps & feedback

Of course, we want to hear your ideas. Any obvious things that could be improved, any interesting approaches in other browsers or applications? The preferred approach is to put something on your blog (as long as you mention my name on the blog and link to this post, I’ll discover it), or you can give feedback in Mozilla’s dev.usability forum. If you want to email me directly, you can do that too: limi@mozilla.com.

Looking forward to hear your thoughts on this, and we hope this document can help make downloading in all web browsers better.

PS: I will update this post with links to bug numbers in the Bugzilla issue tracker once we have decided how the individual issues should be filed, and with a meta-bug that you can subscribe to if you’re interested in them all. I will post a short notice on this site when it’s ready.

Alex Limi is VP of Product Design at Highfive , a company that is transforming the way you work. Previously head of Firefox UX & Product Design Strategy at Mozilla , designer at Google & co-founder of Plone .

“No amount of genius can overcome a preoccupation with detail.” —Marion Levy