Ajax; The “Yellow Fade” Technique

With the rise of Ajax applications on the internet, user interface designers suddenly found themselves wanting some kind of technique to let the user know that something had changed on a page. They needed this because users are used to pages reloading and then looking for their changes. However, since Ajax applications rarely reload pages (breaking the convention), some way to tip off the user that an element has changed was desired.

This technique was made widely popular by 37Signals’ use of it in their spiffy applications such as Basecamp. The way it works is when a user makes a change to an element on which the developer wants to cue them, the element is tagged with the function that essentially highlights it in a light yellow to call attention to it, and then slowly fades back to transparent. It’s a nice subtle effect that does the job nicely.

Of course like any effect like this, particularly an animation, care must be taken not to overuse and abuse. When every page has five yellow fading elements the effect loses its worth quite quickly.

The technique is surprisingly simple and easy to implement. So much so that this will be the shortest article I’ve written, but I think you will find the effect a worthwhile addition to your Ajax library. There’s really no way to show a screenshot of an animation, so go ahead and take a look at the html page and load it up in a browser. In the text field marked “Title of Project”, change the words in the text box and then tab out or click out of the text box, just as if you had made a change in an application.

You will see the box containing the text field change to yellow and slowly fade to white. And you thought your life lacked excitement!