How to Enhance Mobile UX with Motion and Animation

June 27, 2013

The iTunes App Store has almost reached one million different apps. Long gone are the days when you could simply launch a product and watch the downloads take off; now, elements of growth hacking and previous “niceties” like design are differentiating factors in delighting users.

Notice how those little details add up into a much more intuitive design experience for companies like Apple? Even the animation on the login screen when you type in the wrong password is natural; it shakes, much like how in real life we shake our heads to indicate a negative response. Animations were also used in the earlier ages of the web (remember those Under Construction pages?).

George Paravantes, an interaction designer who has designed mobile experiences for companies such as Volkswagen, Nokia, and BlackBerry, believes that animations are a tried-and-true method of designing outstanding apps that will delight your users. Paravantes is also currently the Multimedia Design and Development program co-ordinator at Humber College.

12 KEY TYPES OF ANIMATION

In mobile interface design, animation is a design ingredient that was overlooked, and is now emerging as a solid detail. Paravantes stopped by mobile solutions firm Xtreme Labs to conduct a Lunch & Learn on how designers and developers can make use of animations to enhance their mobile experiences. He highlighted six out 12 animation options that are in use in mobile today:

Squash and stretch (Flipboard’s rigid animation and Apple Maps’ organic animation)

Anticipation (Apple’s Shutter when the Camera app is opening and the Tiles on Microsoft’s home screen)

Staging

Straight ahead action and pose to pose

Follow through and overlapping action (Apple Inertia scrolling, Android 4.0+ glowing edge)

Slow In and Slow Out (Apple has a slow in and out photos)

Arcs (iPhone Games with fishes and water, Android panels)

Secondary Action (Apple panel switch)

Timing

Exaggeration

Solid Drawing

Appeal

For a better idea of how these animations look, have a look at this resource.

Paravantes also pointed out that movement in real life doesn’t just abruptly stop. Hence, that is why animations such as the slow in and slow out are effective: they add more realism and feel more natural, and intuitive, to the user. Similarly, follow through makes something bounce back, like it has elasticity to it.

3 WAYS TO USE ANIMATION

1. Apply restraint.

There is nothing more annoying than a mobile experience with too much animation applied. While animation is fun and exciting, don’t over do it; think of those powerpoint presentations that have gone overboard with transitions and animations (which some of us are all too familiar with). Instead, an animation should have a reason for existing or a story behind it.

2. Use complementary principles.

When applying transitions between screens in a mobile experience, animation principles rarely exist in isolation. Rather, the most effective animations are an orchestration of many principles applied together. Paravantes uses the analogy of a cook and herbs: do these herbs complement each other?

3. Use animation in a supporting role.

Animation should complement the mobile experience; it shouldn’t be the star (which often happens in Powerpoints and Prezis). Make sure your animation supports the user interactions in the experience and doesn’t detract or confuse.

THE FUTURE OF MOBILE DESIGN

Paravantes believes that interfaces will evolve beyond tap and touch; other natural interfaces, such as gestures, movement-based (e.g., Kinect), and voice activation. These natural user interfaces will augment or complement multi-touch interfaces.

He also mentioned that the keyboard and mouse had a run of about 30 years; so multitouch will likely be around for a while. These natural interfaces contribute to multitouch; the challenge is figuring out where they fit in the mobile experience.

With limited time and resources to gain the users’ attention, design choices and details such as animations grow increasingly important. Paravantes mentioned that iOS 7 was heading in an interesting direction, and will be making further use of animations.

Paravantes shared some advice on more effective design: for example, when in a testing phase, Paravantes suggests giving your mobile app to a child to play with. They are naturally uninhibited and curious, the honest response will give you an idea of how delightful or intuitive your app naturally is.

He also recommends podcasts such as Debug and Iterate in order to further understand other designers’ processes.