7 Enhancing web layout with animation

 

This chapter covers

  • How to use animation effectively to enhance the user experience and usability of a website or application
  • When to use animation and what that animation should provide for users
  • How to plan animations in the design phase before coding begins

Animation is to a website or web application what the extra sprinkles are to a cupcake. The frosted cupcake is still as delicious and edible without the sprinkles, but the sprinkles (or other accouterments) create a unique experience for the person eating it. Suppose the sprinkles are gold flaked and elegantly wrapped around the cupcake frosting. This presentation would create a much more memorable experience for the person eating it. They may take more time admiring the edible gold flakes before deciding how to eat the cupcake. Perhaps even the pattern of the gold flakes influences their decision on how they choose to eat it. Extra sprinkles on top of the cupcake frosting also create a much more memorable interaction than, say, a cupcake with no sprinkles and just some frosting. The eater is less inclined to spend time with the cupcake if it’s just covered in some buttercream frosting. The cupcake is edible and still good, but it may not be memorable or delight the eater like a few well-placed sprinkles would.

7.1 Why use animation?

7.1.1 Improve usability

7.1.2 Create memorable interactions

7.1.3 Use as decoration to spark an emotional response

7.2 When to use animation

7.2.1 Providing cues for navigating the site

7.2.2 Giving users feedback when interacting with UI elements

7.2.3 Navigation and page transitions

7.2.4 Indicate the status of something in progress

7.2.5 Consider the long haul

7.3 How to plan animations

7.3.1 How to storyboard

7.4 Technical considerations of animation

7.4.1 Performance considerations

7.4.2 Accessibility considerations

Summary