Mobile User Experience Mobile User Experience

What Does Animation Have To Do With Mobile UX?

Rachel Hinman, a research scientist in the area of mobile user experience, argues in this article for Smashing Magazine that motion has become a significant mobile design element. She uses Frank Thomas and Ollie Johnston’s 12 basic principles of animation as her starting point, and illustrates how each of those principles are relevant to UI elements in a mobile app.

Hinman misses the mark on a few things. She doesn’t understand squash and stretch because it’s not present in either of the examples she uses to illustrate the concept. She also misunderstands straight ahead versus pose-to-pose as meaning full versus limited animation. But the broad arc of her argument—that user experience designers need to pay closer attention to animation—is quite valid. Whenever I use an app, I’m always cognizant of the animation elements, and more than once I’ve been frustated by a clunky use of animation in an app’s interface. It’s safe to say that as motion becomes an increasingly integral part of mobile user experience, the demand for classically trained animators to work in the field should also grow.

(Photo of woman via Shutterstock)

  • I couldn’t agree more. I’ve done app work at places where the joke was, “Out of the 12 principles of animation, you can pick 2”. I showed them how better animation leads to better user experienced and in the process was able to save some jobs that were going to be outsourced.

    The tests that came back from the overseas studio had the company’s owner wonder why their animation didn’t have that “pizzazz” that our team was able to pull off quicker and better.

    Audiences in general are seeing overall better product in features, television and games, and they are expecting production quality to be at a professional level, because now they can tell the difference.

  • That’s not really new. I was working in a multimedia company since 1995, and as one of the two animators it was my job to train the graphic designers in basic motion design. First in Director, later in Flash, their work improved greatly with just that bit of application of principles.

  • Nic

    Ah, and the connect between design and animation finally appears.

  • It is a nice article, though it unfortunately perpetuates one of the biggest misunderstandings students have when they learn the 12 principles. A squirrel’s tail movement is NOT an example of Secondary Action. It is an example of Overlap and Follow-through.

    Secondary Action is what the old guys referred to as a character ‘doing some business’ that made the scene richer and more interesting. If that squirrel was trying to keep her little squirrel hat from sliding off while running along, using dainty little feminine squirrel movements that helped define her character, THAT would be a Secondary Action.

    Frank and Ollie weren’t stupid, and they didn’t create two distinct principles that referred to the same thing. Overlap and Follow though are about physics. Secondary Action is about storytelling.

    • Nicky Rahman

      So true…i have had a tough time re-orienting my students’ references so they differentiate overlap and secondary animation properly.

  • Paul N

    Good article. Don’t agree that she misinterpreted straight ahead vs. pose-to-pose; she has the concept down. She may have picked poor supporting examples, but her description of the techniques is correct.

  • Mac

    This ‘tradition’ that revolves around “Frank and Ollies 12 Principles”, is irrelevant to the larger industrial world. I agree with Nic, graphic designers in time will all learn how to make their graphic designs move, they’ll use the graph, they’ll all know how their favorite curves always make it do what they want, and how it corresponds, and they’ll be fine.

    Just because animation is everywhere in our screen popping society, doesn’t mean its exactly relevant to like, The Animators, who infuse crude matter with the illusion of life. For as long as such exist, they’ll always been way better than graphic designers.