The Magic of Transitions and Animation in Mobile Interaction Design

May 11

Magicians hat and playing cards

This is a continuation from my previous article - Mobile Interaction Design for the subconscious mind, where we looked at how Interaction Design and Animation can help form mental models for mobile touch-screen navigation.

The Magician shuffles the deck of cards. "Pick a card, and place it back into the pack", he says. As the deck is reshuffled the chosen card's location is traced as it transcends through the pack, sliding over and under each card in turn.

"It’s the quickness of the hand that deceives the eye," the Magician says, as he flips the card over to reveal the Ace of Spades.

The playing card analogy works well when Designing Mobile Interactions.

Take half a dozen cards and place them on top of each other, now think of how touch gestures can be used to explore the cards, and how various techniques should be used to present information.

In the video below we use a number of playing cards to help visualise the importance of animation in Mobile App Design

Slide Over

Slide over

Method: Using either a tap or swipe gesture to slide a new screen above the one currently in view.

Use: Often used to display a modal dialogue, interrupting the users current flow.

Real example: Selecting the 'Sign in' link on Google's Mobile App will slide over a 'Sign In' screen - Slide Over Example

Slide left/right

Slide right

Method: Using the swipe gesture to slide left and right

Use: To navigate back and forth through a sequence of screens


Flipping playing card

Method: Partially slide the screen in focus left or right to reveal a new screen underneath.

Use: To reveal app navigation, or information that is in context to the overall application.

Real example: An obvious example is the Facebook app or Path app, however here is an example that I 'Pinned' on my Pinterest board a while back Reveal Example


Flipping playing card

Method: Tapping or double tapping on the current screen in view (side A) will flip the screen over to display the other side (side B).

Use: Side B presents a more detailed view of information than that on side A, or displays settings that can be adjusted, effecting the information displayed on Side A.

I hope the playing card analogy helps demonstrate the subtle differences in animation and how we can use these techniques to form the basis of our Mobile Application Design.

Related articles
Designing for Mobile, Part 2: Interaction Design
Better Navigation Through Proprioception
A New Mobile UX Design Material
Mission Transition

Filed under:
Posted by:
James Griffin
May 11, 2013