Ok, here goes. Here's my response to the Mozilla 2009 Design Challenge: SxSW Edition

http://labs.mozilla.com/2009/03/announcing-the-mozilla-2009-design-chall...

The general premise of the challenge is "the file upload widget sucks, improve it".

To start playing around with that idea, I gotta dive into the initial statement a bit.

Why does it suck?

1. It's missing some basic features that most other form controls have.
   • no / minimal client-side validation options
   • it's difficult-to-impossible to do any meaningful styling with CSS
2. It looks like a text field, but doesn't act like one.
3. Uploading files can cause a significant lag in page refresh, with no real understanding of status.

What about the other side of the coin? Why doesn't it suck?

1. It's consistent looking. It looks more or less the same in every browser. (ok, Safari is a little bit different)
2. It's understood. The control has looked that way forever, people are used to the metaphor.
3. It's mostly intuitive. Novices understand buttons, it's pretty clear what is going to happen when you click the button. Ok, so the read-only text-field is weird. But first time users can grok it pretty well.

What other constraints are there?

Whether we like it or not, the textfield with a "browse" button next to it is pretty firmly entrenched as part of the visual vocabulary of the web. Any changes should be evolutionary, and not a radical departure. It's probably also worth keeping in mind that we wouldn't want to do something that would drastically alter the cross-browser experience. That's not to say that it can't be a much better experience in FF, it just shouldn't be so different that someone who's used to one browser gets stuck when trying to do the same task on another.

All that said, what are some options for improvement?

1. Add basic client-side validation

Not sure what kind of security issues impact this, but it would be great to have some attributes for the maximum (and minimum?) file size, as well as a way to specify a type(s) of files that can be selected. Of course you'd validate on the server as well, but something like this would provide a nicer user experience.

<input type="file" MAXFILESIZE="10mb" MINFILESIZE="500kb" ALLOWEDFILETYPES="jpg,png,tif" />

2. Allow greater control over the look and feel

It's currently really hard to style the upload control. A designer should be able to choose things like whether to hide the textfield, or even the button for that matter, seeing as how currently the entire control is clickable. Playing off another idea that's been discussed, if an improved control supports drag and drop, the designer should be able to make the hit area as large as possible, if he so chooses.

3. Provide better upload progress notification

Showing inline progress bars are helpful, but they require an AJAXy interaction which may or may not be what the back-end is set up for. There needs to be a lowest-common-denominator solution for the full-page-refresh experience. This could take place on the control itself, but would be confusing in the case of long forms and / or multiple inputs. It seems more appropriate for the browser to address this with something outside of the viewport. There are already a couple places in the browser chrome that provide notifications when something is downloading, why not repurpose them for uploads, as well?

Notifications could take place in the status bar

Or, perhaps more appropriately in the title bar (or tab title, depending on how many tabs are open.)

Another option is an interstitial page or modal dialog that shows upload progress, this would allow a lot of flexibility in terms of what you could display, but may feel a little bit like they were intruding on the experience of the site being interacted with.

4. Make it so the user is able to clear the field

This last one is a minor point, but please allow clearing of the field. Currently, if I select a file, I can click the field again to change that file, but there's no way to clear the field entirely. I can imagine a scenario where there's a long form and one field is a file upload field. After filling the rest of it out, someone selects a file then changes their mind about it. They have no way to clear the field without clearing all the other data they've entered. That shouldn't be the case. update: this actually bit me as I was typing this post. I selected a file for reference, and couldn't submit the form without uploading something.

This was a fun thing to think about, I'm psyched to go to the meetup in Austin on Monday and hear the Mozilla team's take on it.