We recently released a couple of updates to NSW eTendering that included a significant improvement to the way users interact with a key process on the site – responding to government tenders electronically. Previously this was a simple form with a couple of file input fields. We have some JavaScript in place to validate certain filename rules on the client-side (to avoid telling users there was a problem after they’d uploaded what can be some pretty large files). And we have a script that pings the server prior to upload in order to log the fact that a user’s transaction has commenced — responses are time-sensitive, and when upload speeds can vary widely, so it’s important to record just when a user hit that submit button.
But as with many HTML forms, the feedback provided to users wasn’t ideal. Support staff would regularly field calls from users unsure if their upload was going through. When you’re uploading a large proposal on a slow connection, and your only feedback is IE’s little flag waving around, it can get pretty disconcerting.
Part-way through the redevelopment of eTendering, we came across Moo’s implementation of SWFUpload, a JavaScript/Flash library that provides an interface to Flash’s FileReference, allowing us to greatly enhance the file uploading experience. We researched the implementation options and pitched it to Commerce, who responded enthusiastically. One of their most common feature requests was for more feedback around file upload when lodging responses, so the feature was quickly scheduled in as a post-live enhancement.
The Design
The system degrades gracefully – users without the Flash Player get ordinary file fields. With Flash Player 9+, users get a single ‘Browse’ button, which pops up a Flash driven file dialog when clicked. After selecting a file, we output the file name and size alongside the button.
The flash uploader interface
Users hit ‘Lodge Response’ and the uploads begin, with a progress bar showing actual upload progress, and a countdown timer showing our best-guess time remaining. Users can immediately get an idea of how long the largest file is going to take, and can see if a connection drops out and the upload progress just stops.
The flash upload interface showing upload progress
Once files are uploaded, the system has to compress and encrypt the files. Depending on the size of the files, this process can take up to a minute and previously at this point most browsers would just stop giving feedback altogether. So we’ve added some extra progress indication in the form of three steps “Uploading files”, “Encrypting uploaded files”, “Preparing response receipt”. The system highlights the current step in bold, and greys out the completed step/s.
The flash upload interface with file upload completed
Conclusion
The take-away? Never stop thinking about the end-user’s experience. We had a system that we thought worked, well enough. But a little extra feedback goes a long way.
We’ve uploaded a screencast (1.5Mb SWF) of the new process in action.
February 28th, 2009 at 7:36 am
Interestingly both Flick and Gmail have recently taken similar approaches to improve their multi-file upload processes.