Astound your Users: Fade to Yellow

37signals, the paragon of Web2.0 UI spiffiness and creators of Ruby on Rails, took great advantage of Ajax when they created Basecamp, a project management and collaboration product. In many ways it's a showcase user-friendly web application.

An especially nice effect in Basecamp is the “attention-grabbing yellow fade”, in which a component flashes to yellow and then fades slowly away. The user’s attention is thus drawn towards the flashing component.

As this blog entry illustrates, adding the same effect to your own web applications is surprisingly easy. In fact, strictly speaking this isn’t even a true “Ajax” technique as such; it just uses some nifty JavaScript/DHTML.

Of course, it’s possible to overuse the effect, and end up with components flashing yellow (or whatever color you choose) all over the page. Naturally, this would lessen the technique’s impact, turning your page into one of those epileptic fit-inducing “congratulations you’ve won, click here!” flashing banner ads. The technique’s value is in its ability to stand out from an otherwise static background, so should be used with caution.

About the Author

Matt Stephens is a senior architect, programmer and project leader based in Central London. He co-wrote Agile Development with ICONIX Process, Extreme Programming Refactored, and Use Case Driven Object Modeling with UML - Theory and Practice.