Design Problem
While interacting with a remote service, the user needs to upload one or more files, and would like to do so without disturbing or leaving the current context of interaction. That is, users want to send files from their computers to the service, and don’t want to lose their place in what else they are doing, or lose track of information currently displayed on the screen.
Solution
Enable the user to prepare a list of files to send, selecting those files from various points in the local file system. Allow the user to review and modify the list, adding and deleting files. Display the sizes of the files in the list so that the user can assess the amount of data to be transferred. Once the list is complete, allow the user to transfer all the files with a single command or click. Allow the user to interrupt and restart the transfer, getting a clear indication of which files have been received and which have not. As the transfer takes place, continuously advise the user of its progress, in units familiar to the user, such as minutes and seconds remaining.
The image shows the Fluid Uploader in action. Note the greyed progress bars and the Stop Upload button. Two files have been transferred, and a third is in process.
Source: The Fluid Project
Use When
Use this pattern when the upload process is likely to distract the user from the main task, or has complexities over which the user would like some control. For example:
- Files are large and therefore take appreciable time to transfer
- There are several or many files to transfer
- Files are from diverse locations in the local file system
Use of the pattern is also appropriate if the user may want to construct and alter the list of files to be transferred, while exploring the local file system – the user may not have a predetermined list, and may want to build it on the fly.
The destination for the files is assumed to be already determined by the remote service. The user doesn’t have to decide where to put the files.
A trade-off to be considered is how appropriate this pattern is for the edge case where a user is uploading a single small file. Are the list, the metadata, and the feedback really required? Are there potential abnormal conditions that need to be handled, which this pattern provides for? Can the designer be certain that at this point in the application workflow, the user will always be uploading a single small file? There is also the consideration of consistency: if the user will frequently be using an upload service based on this pattern, then using it for all uploads may be reasonable.
How
- Keep as much of the current screen as possible exposed to the user, giving the user confidence that the current flow of interaction can resume as soon as the upload is initiated. Even if it is necessary to suspend the interaction until the upload completes, the current interaction display should remain.
- Present the user with a navigational display through which they can examine the directories in the local file system and select files into a list to be transferred. Display the growing list as the user selects files. Allow the user to interact with other processes or the current application without terminating navigation, file selection, or list construction. (If necessary, employ the local system's file browser, which may limit some of the flexibility suggested here.)
- Give the user the ability to alter the list before the transfer takes place through adding and deleting entries. Other actions such as reordering the list to set the sequence in which the files are transferred may also be allowed.
- Give the user some indication of how long the transfer is likely to take, and how much impact the files will have on the space available in the remote service. Display the file size. If the duration of the transfer can be calculated, it should also be displayed. Present a summary line which gives the totals of the sizes and times for all the files in the list. These considerations may affect the user’s decisions on which files to include in the list.
- Once the list is complete, enable the user to effect the transfer of all files with a single action: a mouse-click or keystroke, for example.
- Keep the user aware of the progress of the transfers, indicating which files have been uploaded successfully. If files are large, display an indicator of the progress of each transfer as it proceeds. If durations can be calculated, display the time remaining for each file as it is transferred, updating the value continuously.
- Allow the user to interrupt the transfer, to either suspend or abort it, with an indication of which files have been uploaded and which have not.
- Allow the user to alter the list after suspending a transfer.
- Allow the user to resume a transfer after suspending it.
- Give the user clear information and a choice of actions when an abnormal condition occurs, such as:
- A file of the same name already exists in the remote service
- The contents of a file in the local filesystem cannot be read
- A file is selected more than once for inclusion in the list
- Inform the user when the transfer is complete, by displaying the list with all files reported as having been uploaded.
- After transfer is complete, give the user the opportunity either to select more files for upload, or to dismiss the list. If it was necessary to suspend the original interaction, bring it back to the foreground.
- Do not confine the user to "file upload mode" if this can be avoided. Allow the user engage in other interactions while the transfers are taking place. The file upload should appear to be a background task. Unless the upload is critical to the workflow of the application, allow the user to continue with the current interaction.
In applying this pattern to a particular design, the designer must consider a number of trade-offs. The application context of the remote service should provide some insight into the correct choices. For example, if it is known that only one file will be transferred, and the application reports what files have been received, then displaying the list after transfer is complete may be superfluous.
Rationale
A central idea of this pattern is to minimize the distraction of the uploading task. The pattern therefore seeks to minimize the user’s having to remember things, and to eliminate repetitive actions. Building a list and then transferring all files in a single step serves both objectives, and is also more efficient, particularly when compared to selecting and transferring one file at a time. The user can first focus on which files are to be transferred, and then having selected them, start the transfer and monitor its progress.
While the user is setting up and then executing the transfer, the list of files is in view so that the user doesn’t have to keep track of them. The list may remain after the transfer is complete so that the user can do a final check before dismissing it from the display. All this contributes to the user’s sense of control and understanding of the process.
Examples
The Flickr file upload does not provide a way to stop and cancel an upload that is in progress, which we recommend offering as part of this pattern.
Accessibility Considerations
Examine all the actions available as well as each piece of information displayed for their effect on the user who relies on assistive technology or uses only the keyboard for input. As an example, consider that some visual information elements may not work well with a screen reader a growing progress bar for instance. In such cases text-based alternatives need to be considered.
There will be trade-offs. The principal consideration for the assistive technology user is feedback. Feedback can become noise when it is interpreted through an assistive device or software product. It is vital to provide useful feedback, giving the user control and understanding without an overload of noise.
Think about how the Uploader displays itself to the user when first invoked. Is it clearly distinguishable from other content on the display? Are its elements identifiable? Is there a clear navigation path through its functions?
Within the Uploader:
- Provide keyboard-only equivalents of mouse-based actions. Ensure that every point of interaction with the file upload has a keyboard equivalent or is accessible by using the keyboard.
- Provide instructions for keyboard-only interaction. Instructions for keyboard-only interaction are vital if the upload controls are not self-documenting. The instructions can be conveyed through insightful labeling of interface elements, by using a tool-tip or long description, or by having context sensitive help near the controls.
- Give feedback during the upload process. During the process of uploading a file across a network connection, accessible status feedback should be provided to the user, especially in situations where the upload operation will take a long time to complete. For users with visibility concerns, the feedback should be in plain text so that assistive technologies can interpret the information or adaptive techniques can be used (such as the applying of personal style sheets).
- Outline the upload procedure to give context. Consider briefly outlining the upload procedure to give users of assistive technologies context for the file upload controls and interaction points. Without a description, a text field associated with a browse button lacks the context that gives it meaning.
- Give feedback after the upload process. Once the transfer of files is complete, feedback should be provided, prompting the user about can be done next.
- Use WAI-ARIA Roles to describe the roles of the different interface components. Identify each element of the display with its ARIA role (see the W3C XHTML Role Attribute Module ). This is particularly important for controls that are implemented in a non-standard manner but are functionally similar to a standard action. For instance, if an image is used for the upload trigger instead of a standard form button, the ARIA role
button should be used to describe the functionality of the image.
Link is dead
By yann (not verified)The link to download this ressource is dead
This pattern is very great
By Eddie (not verified)This pattern is very great I am extremely impressed. Keep up the great work!
Post new comment