Motion is web page
shock and awe!

Week four projects: Animation   Bounce a ball

---

Bonus reading

In order to communicate content updates to users, many AJAX applications have adopted attention-getting techniques to highlight interface changes. Color change and animation are two of the most common approaches.

Using color alone to indicate change requires establishing significant contrast between the updated element and the rest of the interface. Colors that sit opposite each other on the color wheel (referred to as contrasting colors) are good candidates for creating contrast. When used with equal brightness, these colors have a tendency to compete with each other for attention (a phenomenon referred to as simultaneous contrast). As a result, they can be used effectively to bring attention to areas of change.

Animation is also effective because of our instinctual attraction to motion. Incorporating a simple animation in an interface lets users know something is happening in response to their action... Animation can also be used to slow down an interface update to make sure users notice it. Though this approach may seem to contradict the responsiveness that makes AJAX applications great, if users don’t know their change has been made they may assume “no responsiveness”.

AJAX & Interface Design Luke Wroblewski

---

A student writes ...

I'm working on week 4 animation, I can pretty much figure it out until right before "Adding some images" the page doesn't work anymore in IE, but will in Firefox. Help.

Terry talks...

[Regarding the file "Terry-week.4.animation.html" on our Share spaces]

There were a couple of errors

You called the function "setUp()", but had not created such a function.

Internet Explorer reports an "error on line 1". I'll suppose that you're not fiddling with the YUI library files so that must mean that there is an error in line 1 of your CSS file.