ux.artu.tv » Blog Archive » 24 Weeks of Windows Phone Metro Design | #17 Motion Catalog in Windows Phone

24 Weeks of Windows Phone Metro Design | #17 Motion Catalog in Windows Phone

 24 Weeks of Windows Phone Design Index


Alive in Motion is one of the Metro Design Principles. Motion is what gives Windows Phone depth. Windows Phone relies a lot on the concept of depth. It provides horizontal depth with controls like Pivot and Panorama which make you feel as if you were dealing with content that spans beyond the screen limits. Windows Phone also conveys depth on the Z axis with the help of motion. If it wasn’t for motion we would think Windows Phone is completely flat but it is with the swipes, rotations, slides and tilts that objects in Windows Phone reveal themselves as planes in 3D space… had you realized that? Metro is not flat. It is made out of 2D planes floating on a 3D space.

A catalog of animations are available with the Silverlight Toolkit for Windows Phone for designers and developers to apply to Windows Phone UIs. Here is a brief description of 5 of the animations available in the Toolkit. If you would like to see these in action please download this small Powerpoint slide deck which includes 5 short videos demonstrating each of these motions.


The Turnstile animation helps convey to the user that you are moving her into a different context. You are here, now I’m taking you there - to a completely different place. It is a more aggressive animation that tells the user that they are being “teleported” to another place. For example when you are moving from one app to another.


Continuum is the opposite of Turnstile. It is meant to convey continuity between different sections of the same application. It is meant to tell the user that new or different information will be presented to her but that she will remain within context. An example is an email or messaging app - you are in a list view with all the messages and you tap one of them, the continuum animation plays and the contents of the message are displayed…


Swivel is great for dialog boxes or transient UI. Imagine a dialog box that presents an OK button to the user… the user taps it and it gets dismissed. Or an Accept and Cancel button… the user selects one and the dialog is dismissed.


Slide is great for conveying dead end scenarios. For example you select a category of settings to define, you are taken to a selection mode, you make a selection and you come back.


Tilt is an animation that plays when you tap an object. Lists for instance have list items, you tap one of them, it tilts to convey interaction and then an action occurs - perhaps this action links to one of the other four motions mentioned above…

5 Responses to “24 Weeks of Windows Phone Metro Design | #17 Motion Catalog in Windows Phone”

  1. Mauricio Says:

    Interesting article, but it looks like the link to the PowerPoint deck is dead…

  2. 24 Weeks of Windows Phone Metro Design | Motion Catalog in Windows Phone | azkafaiz.com Says:

    […] source: ux.artu.tv […]

  3. Akshay Zade Says:

    I don’t know if the comments are still being moderated and replied to, but I’ll take the chance. I couldn’t find any definitive and really easy to understand guide to Continuum transition anywhere. Other transitions are conveniently applied using Windows Phone Silverlight Toolkit.

  4. virtual office Glasgow Says:

    virtual office Glasgow

    […]ux.artu.tv » Blog Archive » 24 Weeks of Windows Phone Metro Design | #17 Motion Catalog in Windows Phone[…]

  5. Fabio Barreiro Says:

    Hey man… your articles are simply amazing. Found your blog recently and it changed completely the way I think about Windows Phone design. Great balance of technical skills, tips and insights.

Leave a Reply