We’ve all seen web applications that require the user to do a repetitive task. Unfortunately, programmers often ignore how unnatural it is to go through a multitude of form fields, how unclean the design looks, and how hard-coding the number of elements one can enter at a single time limits the use of your application. Stick with keeping it simple, and keeping it simple means keeping things clean and intuitive.

One of the poorest implementations of this was Gallery1’s photo upload feature. Myspace and a few others do it wrong too, but let’s stick with Gallery. In it’s newest version (Gallery2), they’ve implemented what I’ll call the add another input method:

At the bottom of the input fields, there is a “More..” link that once activated adds another form field without reloading the page. This is good. It allows the user to post a number of photos all at once so they can sit back and hit upload. If this description doesn’t make sense, and you’d like to see this in action, checkout this tutorial I wrote a few years ago.

The tutorial I wrote and Gallery’s interface might seem a little archaic with the commonplace use of Ajax in web technologies today, however Gallery is one of those important applications where you wouldn’t want to use some sort of Ajax call to the server right then to upload your photo because it would take too long to upload. All the user wanted to do was select file 2. A simple javascript function, similar to the one that Gallery2 uses and the one I wrote about in my tutorial, is all you needed.

Back to Gallery2 and its improvement. Previously in Gallery1, you were limited to 6 photos and no way to add another without submitting your 6 and then going through the process again. Picasaweb, a recent web application I’ve fallen in love with utilizes the redundant method I’m saying is bad:

There’s no way to add another photo. 5 at a time is all you get. Why? I want more and I want it to be easier!

Photos might be a bad example for two reasons: First, there is the whole file size/server timeout issue — however all that means is that we need a better method to circumvent the timeout problem. Second, recent trends report people opting to use photo management applications such as iPhoto or Picasa to upload photos to a web-based photo hosting site, which pretty much renders these “upload a photo” forms useless. Regardless, this principle can absolutely be applied to lots of other functions in web applications.

This entry was posted on Tuesday, February 13th, 2007 at 3:04 pm and is filed under Ajax, Frameworks, Javascript, User interfaces. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.