Ajax Design Patterns

Chapter 16. Visual Effects

ARICH INTERFACE IS MORE THAN STATIC WIDGETS; THERE’S A DYNAMIC COMPONENT THAT HAS A BIG impact on usability. Used carefully, visual effects can guide the user’s attention and help him understand what the application is doing. And don’t underestimate the aesthetic benefits. It might be eye candy, but good eye candy (not just “how good am I” hacks) makes passionate users.^[*]

The “One-Second” effects are fleeting effects that sometimes convey a permanent transition from one state to another, and other times are used just to highlight something. One-Second Spotlight is a more general version of the popular “Yellow Fading Technique” and involves changes to brightness and color. In One-Second Mutation, the element changes shape, and in One-Second Motion, the element moves around.

Highlight is a more permanent effect where one or more elements are highlighted, typically because the user has selected them.

One-Second Spotlight

⊙⊙⊙ Attention, Effect, EyeCandy, Fade, Fading, Graphics, Refresh, Update, YellowFadeTechnique

Figure 16-1. One-Second Spotlight

Goal Story

Tracy is checking out her portfolio, which shows each stock in its own row. Suddenly, “Neverland Mining Co.” stock plummets, and its row lights up to reflect the change. Tracy’s attention is drawn instantly to this visual effect, and she immediately begins to offload her stake in the company.

Problem

How can ...