OKCOOL

One of the key design goals of our new Simple Web Management platform is ease of use. We want to deliver a joyous user experience.

If you read my post on password generation using twitter you will know I’m currently working on the process of adding users to the system. A neat little user experience trick I like, that you’ve no doubt seen elsewhere, is to check the availability of a username as the user is typing.

Looking up the username on the server and returning a response via AJAX is pretty simple (especially with JQuery), but every time the function is called a lookup on the user table is processed. Therefore, we don’t really want to do a lookup every time the user presses a key.

The first solution to the problem of this could be to add a ‘check availability’ link next to the username field, but this is a bit… erm… scrappy. The best option would be to wait until the user has stopped typing for a while. Well, thanks to a great little jQuery plugin called TypeWatch this is a doddle.

Here is my code. You’ll need jQuery and the TypeWatch plugin to make this work. Assumptions – my username field is ID’d Username, the AJAX query returns the text of the availability and puts it in to a span ID’d usernameAvailability.