‘File Uploader’ Design Pattern
Role Sr. User Experience Designer
Story
Create a file uploader design with drag and drop capability.
PROBLEM
There are 2 problems that we want to solve with this user story.
The existing file uploader component located on different section of the software and other products were inconsistent. This is because each team developed their own file uploader designs.
The existing file uploader needed a “Drag and drop file” capability, on which it is a more modern approach and our users requested for it.
solution
For this case, the scope for the 'File Uploader' component is to enable the user to upload file for the 3 most popular use cases. Those are firmware update from a file, restore from a backup file and update the appliance from a file. It is important that this component is applicable for these situations and for other foreseeable use cases.
Impact
As a result, our team have successfully created a valuable, consistent, and easy to use component for the design and developer team to utilize on their products.
process
To start, there are already things that we know about how our user uses the uploader component. For example, how many files are needed for the task at hand (often times it is only 1 file), the size of the file, warning text or help related text (when applicable) to ease and to reassure to our users that they are doing the right thing, the type of browser used, and so on.
File Uploader with instructional text (basic style)
The below component is a basic file uploader. It describes a lot of the functionality and elements listed below. It is designed to be easy to use, familiar, with information set in a logical and natural order.
From stakeholder and team discussions, a baseline file uploader design is established. For example, it will have the following affordances and elements.
A file staging area. A drop zone area for the file to be staged.
A browse button for choosing a file.
Footer action buttons, e.g., Add, Upload,...
Other capabilities includes, a message banner, action mode options and a confirmation box.
Error states and text
Web & keyboard accessibility
File Uploader with Warning message on a Banner
Below is a dialog example with a warning message or instructional text with a link.
File Uploader with Mode Options
Referenced from a real world use case, this pattern enables the user to choose a mode to upload a file or select the mode in which a file is already staged by the system or from a previously staged action by another user.
File Uploader with double confirmation
Shown here is a design pattern example and a real-world use case. This double confirmation pattern on a dialog is used when there are actions that might have major implications for the system and when initiated and cannot be canceled or undone after it has started.
