Enhancing your Windows application experience with animation

Enhancing your Windows application experience with animation

  • Comments 2
  • Likes

An important aspect of any application is the experience provided to its users. With so many similar applications, the user experience can be a key differentiator between your application and the myriad competitors. One approach to differentiating your experience from that of others is through the use of animations. Animations, when applied well, not only create a more immersive experience but can also result in a more usable and intuitive experience. For example, by applying subtle animation techniques to interactive user interface elements users are drawn to them naturally and are not left wondering how to negotiate with your features. In addition, user’s expectations about the application experience are increasing. Users spend lots of hard earned money for modern PC hardware with high octane GPUs and they expect, even if implicitly, that the applications they use will leverage it.

As a Windows developer, you are accustomed to choice when it comes to your development experience. Luckily, the Windows API surface for providing animations is broad. You can apply animation techniques whether you are an old-school native code developer or if you are creating RIAs via Silverlight or HTML or if you prefer the .NET framework and WPF. In addition, all of these techniques can be applied unconditionally. As a developer you don’t have to target the specific capabilities of the underlying hardware. Your application is written in a consistent manner, and the animation abstractions provide the best support they can for whatever capabilities exist. The next sections introduce the various programming methods for leveraging animation support in Windows.

Native

In C++, the animation abstraction is the Windows Animation Manager. It is a set of COM primitives and utility classes built on DirectX and GDI+. If you are unfamiliar with animation concepts, this MSDN article is a great place to start. MSDN of course also has some samples that cover the basic spectrum of the animation concepts. In addition to the basic samples, MSDN also has a great showcase application named Hilo. Among other Windows7 concepts like touch and taskbar integration, Hilo makes great use of animations to improve the user experience.

Silverlight/WPF/XAML

While the implementation details between Silverlight and WPF may not be identical, the animation primitives exposed from both share a common object model and mark-up language (XAML). In fact, if you compare the MSDN animation overviews for both you can see they are strikingly similar (Silverlight/WPF). One of the key advantages that Silverlight and WPF have over native programming is the use of XAML, which provides a declarative syntax for defining animations. This allows for better separation of business logic from presentation technology, and also allows designers and developers to work independently on the same project.

Internet Explorer 9

Internet Explorer 9 provides 2D animation support through the HTML5 canvas element and through 2D transforms using CSS3. Both mechanisms are hardware accelerated, providing extremely fluid experiences. You can start taking advantage of this support by downloading IE9 from Beauty of the Web. For a great demo of canvas animation, check out my favorite - Canvas Pinball.

 

References

Windows Animation Manager http://msdn.microsoft.com/en-us/library/dd371981%28VS.85%29.aspx
Windows Animation Overview http://msdn.microsoft.com/en-us/library/dd317017(v=VS.85).aspx
Windows Animation Samples http://msdn.microsoft.com/en-us/library/dd940528(v=VS.85).aspx
Hilo: Developing C++ Applications for Windows 7 http://msdn.microsoft.com/en-us/library/ff708696.aspx
Silverlight Animation Overview http://msdn.microsoft.com/en-us/library/cc189019(VS.95).aspx
WPF Animation Overview http://msdn.microsoft.com/en-us/library/ms752312.aspx
Internet Explorer 9 Beta Guide: HTML5 Canvas Element http://msdn.microsoft.com/en-us/ie/ff468705.aspx#_HTML5_canvas
Internet Explorer 9 Beta Guide: CSS3 2D Transforms http://msdn.microsoft.com/en-us/ie/ff468705.aspx#_CSS3_2D_Transforms
Beauty of the Web http://www.beautyoftheweb.com/
Canvas Pinball http://ie.microsoft.com/testdrive/Graphics/CanvasPinball/Default.html
2 Comments
You must be logged in to comment. Sign in or Join Now
  • Dear MS,

    as a developer I would like to say that we as a group might be better of having a range of preprogrammed animations, UI controls (Dark and light themed) within software like visual studio and expression blend.

    The software even from your company itself shows very different UI's. Each program (take Zune, Live Messenger, Office and IE9) look great on their own but within the OS there is still a lack of an overall feel. As a developer I struggle with this: the guidelines simply state some general things but there are no prescribed fonts, controls colors and so on. It makes designing a good UI to blend with the windows 7 os difficult: styles are often created by hand and try to like one of your programs (but often fail).

    It is the UI that allows customers to recognize and follow UI logic along different software. It also gives the user confidence when recognizing elements that are the same across the OS.

    Please provide us with more styles and animations so that applications can look more alike and properly blend in with the windows 7 os.

  • 7flavor
    352 Posts

    Still, Microsoft uses animations far less than Apple and should use them more. : ) Only then will developers use them more frequently.