The Yellow Fade Technique...!

A lot of web sites & applications make you feel a bit like "Where am I, Did the update / submit I did on the website worked?". Hmm, now you might as well ask that Why does this matter anyways? The answer lies in User experience.

When we edit something on a Webpage - the whole webpage reload happens. The issue is once the page reloads, it becomes really difficult to spot and confirm the change. This is particularly noticeable in cases when the changes occur in middle of a heavily loaded webpage.

Imagine, having a feature wherein the user gets to know whether requested changes (read updations) were done or not as a feedback on the screen!! No, hang on - I am not telling about throwing the POPUPS but have the graceful feedback instead - I tried using the YFT and believe me its so amazing.

The YFT uses JavaScript to create a yellow highlight that briefly spotlights the change when the page reloads. Then, in a second or two, the highlight fades and the page reverts to its normal state. The YFT makes it super easy to spot edits/changes yet its unobtrusive nature lets people quickly get back to work once a modification is confirmed. Many AJAX applications are now incorporating the yellow fade technique. Whenever something changes on a page (without a page refresh), the area is highlighted in yellow and then fades to its original background color. The purpose is to call attention to a change in the interface.

I got a little curious and decided to explore this a bit further. I was particularly intrigued by Google as always with its every product using YFT !! Hope the following Image looks familiar. (Feedbacks like these are shown on every user activity done on Google Products like Gmail or my personal favorite Google Reader.

Since I am still not quick 'n' smart with AJAX Concepts, Javascript was the only thing I could have played with and here's what I did.

• Defined RGB values for “base” color (by default, it’s a shade of yellow).
• Defined the “holding” speed and “fade” speed of the Fade as per my wish.
• To make an element fade I simply call the function chinmayzfade(”name”) where “name” is the id of the element inside DIV Element.
• Its nothing too fancy or may be it is ;)

A mini-implementation of the same can be seen if you click on the button below. (The background on the above text will flash yellow than fade).

Do let me know suggestions or any ideazzzzz for making this fade better Or join BaseCamp instead!!