User:Dmose:Fx-Docs:DownloadManager/User Interface

Other Download Managers

• Download Managers in Firefox 2, Safari 2/3, Omniweb 5, Shiira 2, Opera 9, Maxthon 2, IE7

Iteration 2

Feedback and takeaways

Feedback from the first set of mockups:

• put simple UI for finding a specific download in the Downloads Manager, and link to more advanced search UI in the Places History with a button
• go back to using wider progress bars to make it "feel" faster
• use nicer date formatting
• show time remaining, file size remaining and download data rate, use emdashes to separate these pieces of information instead of commas
• show what a queued state would look like
• show what happens when you "Get Info"
• needs better icons for the various actions

Mockups

note: icons are from Silk set provided by FAMFAMFAM and are not final, but are meant to be evocative of the metaphors that the icons should use, and can be used for milestone builds.

The new mockups follow an interaction scenario in an attempt to illustrate the design. All download times and file sizes are fictional, so no nitpicking, please! :)

Start: downloading one file, has one paused, and one is queued by the server

• on OSX and Win32 the file icon would be provided by the OS based on file type
• double clicking the file icon would do the same action as the first button
• there are always two buttons, a primary and secondary action
  • when active: pause, cancel
  • when paused: resume, cancel
  • when queued: force start, cancel
  • when completed: open, get info
  • when cancelled: retry, get info

One file completes, user has clicked "get info" on another file

• the newly completed file is inserted at the top of the "Completed" list
• clicking "get info" spawns a popup
  • clicking the URL icon will open a browser on the URL, which is the URI up to the point where the file name started
  • clicking the local file icon will open the finder to that folder, with focus on the downloaded file; if not found, we should throw to the OS specific "find this file" service
  • the popup is non-modal, and is dismissed when the user clicks outside of it, or on the "Get info" button again; the other files in the "Completed" section are greyed out to put emphasis on the selected file

Another file completes, the user searches for "avi"

• the "Completed" section disappears and is replaced with a "Search Results" section
• when no downloads are active, the window title lists the number of paused downloads

The paused download is cancelled

• when no downloads are showing in the "Active" section, it disappears

Iteration 1

Mockup and Specification

• the title bar lists the number of downloads & time remaining to completion
• each entry shows
  • the icon of the file being downloaded
  • the name of the file being downloaded (if too wide, the center of the filename should be replaced with an ellipsis, such as "Really really re...ng name.txt")
  • during a download ...
    • time remaining
    • amount transferred (always using the same units within each entry)
    • download speed
    • progress bar
    • show details button
    • pause button
  • for a paused download ...
    • "Paused"
    • amount remaining to be transferred
    • show details button
    • resume button
  • for a completed download ...
    • "Completed"
    • show details button
    • open/launch button
• toolbar at bottom of dialog contains a "Show: Today|Completed|All" drop-down filter control and a "Clear All" button
• Accel-F adds a Find Bar at the top of the dialog allowing someone to quickly find an entry in the list
• "Show Details" would launch the properties window as an overlay dialog (to be mocked up) that would show ...
  • original download location
  • destination file location
  • average speed and time taken for transfer
  • buttons for "download again", "show in explorer", "delete download" and "open"

Note that this design removes the "Remove" function from a download. That function would still be available on right-click, but the idea would be that management of large numbers of downloads would be made easier by the "Show" drop-down along the bottom, and the fact that backending to sqlite will be faster than RDF.

(feel free to modify using the [1] OmniGraffle files used to make this mockup)

Questions & Design Thoughts

The first version of this design was very basic, and done to give sdwilsh something to start on based on functionality required (search, resume) by the PRD. From there I tried adding a more standard looking find bar and eventually came to the above design.

There are several questions that I'd like feedback on, though:

• does the Find Bar metaphor work, or do we want a typeahead filter system more like what is mocked up in the original design?
• are we showing the right amount of information in each entry?
• are we offering the right set of functionality from the primary download manager window?

And a few things I'd like to add to the mockups and specifications:

• minimizing the dialog to the status bar instead of the task bar
• the "Show Details" information pane overlaying the download manager like a file inspector
• how download manager entries should show up in History searches, allowing richer search functionality