Windows Phone – Animations and Transitions

Microsoft is introducing a fresh approach on UI design and user experiences based on the Metro design language and principles. Even though you follow the Metro design guidelines you are according to me only half-way there to a perfect design and user experience. If you think about all the out of the box experiences on the phone you realize that they feel a lot more alive than most of the apps you download from the marketplace. How is that? The simple answer is user experience through transitions and animations. Animations and transitions on the Windows Phone platform are fundamental elements that are deeply rooted in the UI concept.

Animations and Transitions

Animations is probably one of the most important features of Windows Phone. Most developers and customers I have talked to in the past tend to see animations as something extra fancy that you don’t need in an application, especially not in a LOB (line of business) application. I would argue and say that they are as important in a LOB app as in any other app.

Animations and transitions extends the user experience by giving subtle feedback to the user on what is going on, what is happening and to what is about to happen. It increases the overall experience.

A lot of applications are really static, no specific feedback to the user for any actions they perform, transition between pages and so on. The apps would feel much more polished and alive if the designers would spend time on creating subtle proper animations and transitions.

The Silverlight toolkit makes page transitions and user feedback super easy to implement. But be careful, overdoing animations will only annoy the users and detract the user experience.

Let’s go through how simple it is to add page transitions to your application.

  • First of all you need to install the Windows Phone Toolkit
  • add a reference to Microsoft.Phone.Controls.Toolkit to your project
  • in App.xaml.cs locate the InitializePhoneApplication method and change the RootFrame from a regular PhoneApplicationFrame to a TransitionFrame
        RootFrame = new Microsoft.Phone.Controls.TransitionFrame();
    
  • you have now prepared your application to use any of the page transitions provided by the toolkit.
  • finally add a page transition to your page. Either add xaml code to each page (which eventually leads to a lot of copy-paste) or create a Style that you reference in each page.

Xaml in each page

Start by creating a name space to the Windows Phone Toolkit

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

add the following xaml to the page. This example uses the Turnstile transition. A good sample application that shows all the different page transitions is found at codeplex: http://pagetransitions.codeplex.com/

<phone:PhoneApplicationPage
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
… >
    <toolkit:TransitionService.NavigationInTransition>
        <toolkit:NavigationInTransition>
            <toolkit:NavigationInTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardIn"/>
            </toolkit:NavigationInTransition.Backward>
            <toolkit:NavigationInTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardIn"/>
            </toolkit:NavigationInTransition.Forward>
        </toolkit:NavigationInTransition>
    </toolkit:TransitionService.NavigationInTransition>
    <toolkit:TransitionService.NavigationOutTransition>
        <toolkit:NavigationOutTransition>
            <toolkit:NavigationOutTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardOut"/>
            </toolkit:NavigationOutTransition.Backward>
            <toolkit:NavigationOutTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardOut"/>
            </toolkit:NavigationOutTransition.Forward>
        </toolkit:NavigationOutTransition>
    </toolkit:TransitionService.NavigationOutTransition>

Better approach with Styles

To make the transitions easier to maintain, and easier to switch between different page transitions when trying out your application, I would suggest you to create a style resource for each different page transition you want to use.

    <!--Application Resources-->
    <Application.Resources>
        <Style x:Key="TurnstilePage" TargetType="phone:PhoneApplicationPage">
            <Setter Property="toolkit:TransitionService.NavigationInTransition">
                <Setter.Value>
                    <toolkit:NavigationInTransition>
                        <toolkit:NavigationInTransition.Backward>
                            <toolkit:TurnstileTransition Mode="BackwardIn"/>
                        </toolkit:NavigationInTransition.Backward>
                        <toolkit:NavigationInTransition.Forward>
                            <toolkit:TurnstileTransition Mode="ForwardIn"/>
                        </toolkit:NavigationInTransition.Forward>
                    </toolkit:NavigationInTransition>
                </Setter.Value>
            </Setter>
            <Setter Property="toolkit:TransitionService.NavigationOutTransition">
                <Setter.Value>
                    <toolkit:NavigationOutTransition>
                        <toolkit:NavigationOutTransition.Backward>
                            <toolkit:TurnstileTransition Mode="BackwardOut"/>
                        </toolkit:NavigationOutTransition.Backward>
                        <toolkit:NavigationOutTransition.Forward>
                            <toolkit:TurnstileTransition Mode="ForwardOut"/>
                        </toolkit:NavigationOutTransition.Forward>
                    </toolkit:NavigationOutTransition>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>

Then in each page where you want to use a page transition (note that we could omit x:Key to make this an implicit style and default for all pages) you simply reference the wanted page style in the following way

<phone:PhoneApplicationPage Style="{StaticResource TurnstilePage}" ... >

Enhance user actions with visual feedback

It’s also a good practice to add feedback to the user when he or she presses a button or selects an item in a list that performs an action. This can easily be done by using the Tilt Effect.

Conclusions

Adding page transitions to your app is really simple and increases the user experience a lot, but as noted before, be careful, overdoing animations and transitions will make your app annoying and potentially get really bad ratings.

Happy Coding!

Advertisements
  1. December 27th, 2011

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: