O'Reilly logo

Designing Web Interfaces by Theresa Neil, Bill Scott

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Animation

In our everyday world, objects occupy real space and don't normally instantly appear and disappear. We throw a piece of trash into the trashcan and see it leave our hand and go through the air into the trashcan.

Considerations

In our interfaces, we do not need to mimic every movement from the real world. Interfaces would be dreadfully slow. But by using Animation to show where an object came from or is going, we can make it easier for the user to find the object again or feel confident putting the object away in the future. Using animation to position an object in a grid confirms that it went into the slot. This type of feedback clarifies the user interaction.

Zoom back

My Yahoo! uses a zoom-back Animation if a drop fails. It communicates simply that the module returned from where the user attempted to drag it (Figure 11-10).

My Yahoo! uses a zoom-back animation to show that a module did not get moved, but instead returned to its original location

Figure 11-10. My Yahoo! uses a zoom-back animation to show that a module did not get moved, but instead returned to its original location

While the use of a small gray rectangle for the drag object is less than helpful (a thumbnail of the object being dragged would be better), the image of a gray rectangle flying back to the module's original spot is simple and clear enough to communicate what happened.

Tip

Build association between elements on the page with Animation.

Drop animation

Another place to use Animation is when dropping modules on a web page into new ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required