More and more web developers and designers are starting to pay attention to the user experience of their web applications. This is an extremely good thing; webapps have traditionally been about “more is better,” when there are some lessons to be learned from “less is more.”

I think this change in mindset can be traced back to the original launch of Google. Instead of the bloated designs of “portal” sites like HotBot, Lycos and Yahoo, Google offered a very basic, yet functional interface. This minimalism made it much more pleasant to use their product, as well as easier for those less familiar with the internet to figure out. I think it was as much a key to their success as PageRank was.

With this in mind, let’s tackle one of the most awful web user-interface mistakes ever: adding text telling the user not to click a button more than once.

The Issue

This is the sort of thing which usually shows up on e-commerce sites. The submit button used to process the order has a warning - sometimes text, sometimes in a popup - warning the user that the process will take a few seconds, and to only click the button once.

The problem here is that the user will get impatient while waiting for their order to process, think something is wrong, and click the button again. This, of course, will send a new order, and they will be charged twice, resulting in angry customers and higher support costs.

However, telling the user what to do is a horrible way of solving this problem. Wouldn’t it be better to make sure they can only click the button once in the first place?

The Solution

Fortunately for us, JavaScript can do everything we need here, and easily. Here’s the code:

<input type="submit" value="Check out" onclick="this.disabled = true; this.value='Processing...'; this.form.submit();">

(Sorry about the backslashes, WordPress adds them, and I haven’t been able to remove them yet.)

As you can see, when the button is clicked, the onclick handler disables the button so it can’t be clicked again, changes the text to indicate that processing is taking place, and submits the form. That’s all there is to it.

You can see this technique in action, or download that file to examine it further.

This entry was posted on Wednesday, March 30th, 2005 at 10:50 pm and is filed under Code, Technology. 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.