Skip to content

Animation Guidelines

January 29, 2007

Here is a snapshot of the animation section of the Ux (User Experience) Guidelines for WPF:

Animations

There are five basic types of animations:

  • Illustration animations communicate information visually instead of verbally.
  • Effect animations create interactions to model their real-world counterparts.
  • Relationship animations show relationships between objects (where objects come from, went to).
  • Transition animations show major UI state changes.
  • Feedback animations show that something is being done correctly or incorrectly, or show processing progress.

The human eye is sensitive to motion, especially peripheral motion. If you use animation to draw attention to something, make sure that attention is well deserved and worthy of interrupting the user’s train of thought.

Animations don’t have to demand attention to be successful. In fact, many successful animations are so natural that users aren’t even aware of them.

Do’s:

Illustration animations

  • Use illustration animations that have a single interpretation. They have little value if confusing.
  • Show one thing at a time to avoid overwhelming users.
  • Play at the optimal speed—not so fast they are difficult to understand, but not so slow they are tedious to watch.
  • Gradually increase the speed of repeated animations. Viewers will already be familiar with the animation, so increasing speed slowly will feel right.
  • Use timing to emphasize importance, such as slowing down for important parts.

Effect animations

  • Use effect animations for objects that the user is currently interacting with. Such animations aren’t distracting because the user is already focused on the object.
  • Minimize use of effect animations that show status. Make sure:
    • They have real value by providing additional information users can actually use. Examples include transient status changes and emergencies.
    • They are subtle.
    • They are short in duration and therefore not running most of the time.
    • They can be turned off.
  • Keep effect animations low-key so they don’t draw too much attention to themselves. Avoid movement or use small movements, but prefer fades and changes in overlays.

Relationship animations

  • Must start or end with the selected object. Don’t show relationships between objects the user isn’t currently interacting with.
  • Must complete within a half second or less.

Transition animations

  • Use to show relationships between states. Animating state changes makes them easier to understand and appear smoother.
  • Make sure transitions have natural mappings. For example, an opening window transition should be upward and expand; a closing window transition should be downward and contract.
  • Must complete within a half second or less.

Feedback animations

  • Must have clearly identifiable completion and failure states.
  • Must stop showing progress when the underlying process isn’t making progress.

Don’ts:

  • Don’t use animations that can noticeably affect performance. Consider performance over slow network connections or when many objects are involved.
  • Don’t draw attention to things that aren’t worthy of attention.

Are we missing guidelines?
What examples would you like to see?
Any other comments?

Additions (after initial post)

Shawn Van Ness emailed me:

The comment about slow network connections isn’t entirely clear, to me. (Is it referring to TS?)  I expected to see something about power or battery life, there.

Can we put in place a guideline to turn off animations (or greatly reduce the DesiredFrameRate) when running on battery?

Yes, I would guess that network is talking about TS??
Yes, it is good practice to not hit the CPU when you are running on battery…now the question is how easy can you detect that…

 

* A few other guidelines I found on the web: [1] [2] [3] (just collecting them for now…)

From → WPF

3 Comments
  1. Pavan permalink

    Rob,   Thanks for posting the guidelines. Its very useful. I would suggest that MS should build a reference application that demonstrates these concepts. Having a concrete app alongside the guildelines doc will make things more clear and will greatly benefit the community.Thanks,Pavan

  2. Daniel permalink

    >>…now the question is how easy can you detect that…
     
    The answer is: http://www.danielmoth.com/Blog/2006/09/vista-power-aware.html

  3. Unknown permalink

    Amberdigital Branch,Southern Stars Enterprises Co is specializing in the development and manufacturing of ad players, advertisement player and LCD advertisings. Established in 1996, we have explored and developed the international market with professionalism. We have built a widespread marketing network, and set up a capable management team dedicated to provide beyond-expectation services to our customers.

    amberdigital Contact Us
    Southern Stars Enterprises Co (Hong Kong Office)
    Add:3 Fl, No.2, Lane 2, Kam Tsin Tsuen, Sheung Shui, Hong Kong
    Tel:+852 2681 4099
    Fax:+852 2681 4586
    Southern Stars Enterprises Co (Shenzhen Office)
    Add:DE, 16/F, Building 2, Nanguo Tower, Sungang Road, Shenzhen, China
    Tel:+86 755 2592 9100
    Fax:+86 755 2592 7171
    E-mail:sstar@netvigator.com
    website:www.amberdigital.com.hk
    alibaba:amberdigital.en.alibaba.com[aicagafbe

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: