Comments on Motion with Meaning: Semantic Animation in Interface Design

34 Reader Comments

Back to the Article
  1. Just a heads up: might want to check that Meteor Toys link.

    Copy & paste the code below to embed this comment.
  2. Thanks, Tobias, for your article and showing the animation examples.

    Different triggering events may or may not be in the user’s mental model. They may have associated the zoom animation with tap, double tap, home button press, double home button press, pinch, and spread. That build up of prior experience may or may not contradictory. When we consider what the person has semantically encoded as a triggering behavior, we can design more cohesive interactions and experiences.

    I think one of my challenges is figuring out what people have already learned to do vs. what they have yet to learn to do. I try to keep that learnability gap as small as possible, and at the very least, recognize that the gap could be large or small, depending on the person who’s going through the experience.

    Copy & paste the code below to embed this comment.
  3. Was pleasantly surprised to see a shoutout to GNOME in this article. Nice read. :)

    Copy & paste the code below to embed this comment.
  4. Semantic animation feels a lot like how Prezi has you design the presentation on a giant ‘canvas,’ and then control keyframe points in to, out of, and around the components.

    Copy & paste the code below to embed this comment.
  5. great paper from great designers!

    Copy & paste the code below to embed this comment.
  6. I liked the content of this article, but a special shout out for the citations - they take your assertions beyond opinion. I wish there was more of this sort of thing in our field.

    Copy & paste the code below to embed this comment.
  7. @Amin Al Hazwani Your point is well-taken. I’m currently doing UX design for two apps whose audience is kids and teens on the autism spectrum, and I think it will be very important for me to try to figure out what they already have as mental models of interactions and gestures. I’m totally new to interaction design, so this piece is great food for thought.

    Copy & paste the code below to embed this comment.
  8. Thanks! A nice read with insightful illustrations.

    Copy & paste the code below to embed this comment.
  9. Great article guys!
    One thing. You say that “... two different transitions tell the user conflicting things, completely breaking their mental model of the interface.” when comparing the “open-app” animation with the “cross-app-navigation” animation.

    Wouldn´t it be more fair to see the open and close animation as living within the same spacial perception? Those are consistent in my opinion.

    Cross navigation is conceptually a different mental model, and need to see applications within the OS in relations to one another including “time”.

    Copy & paste the code below to embed this comment.
  10. Would love to see how you might remedy the iOS multi-tasking animation to be consistent with the App Launch animation.

    Copy & paste the code below to embed this comment.
  11. Great article, but I believe your assessment of the iOS transitions is incorrect.  First, you claim the switch from app view to multitasking view is the reverse of launching an app, when it is not.  Pressing the home button is the reverse of launching an app, and switches your view to the home screen as you left it, following your statements about consistency and context.

    Next, by faulting the iOS transition to multitasking, you seem to imply that transitions should be limited to 2 views—either app or home.  In fact, the multitasking view can be seen as a third, intermediate view, providing options BEFORE you return to the home screen.  You can choose another app to zoom into, or zoom all the way out to the home screen. You could argue the inconsistency here: from an animation standpoint, launching an app from the home screen should take you to the multitasking view.  But clearly that would be less productive, requiring more steps to get to where you want to be.

    As UI animation becomes more prevalent and sophisticated, it seems reasonable to expect that transitions beyond 2 views will be employed, having the potential to better communicate spatial location in applications and provide additional navigation options. Of course, this will be effective when, as you say, the animation is done well.

    Copy & paste the code below to embed this comment.
  12. Hey Guys, great read.

    Copy & paste the code below to embed this comment.
  13. This is really a great guide for designing tips and animation in interface design

    Copy & paste the code below to embed this comment.
  14. I tend to disagree with many examples. In my view UI animation has a tradeoff between ergonomics and logic.

    Lets take movies as an example. Consider the beginning of this scene https://www.youtube.com/watch?v=OtmQ-NyE6Cw
    The camera is moving while keeping the actor in focus. This is logical, since you as the observer would have to move your point of view to observe an actor that is moving.

    Now take beginning of this clip https://www.youtube.com/watch?v=jEDjLoc1RoI
    There are hard cuts and there are transitions in the point of view. Do hard cuts have logical explanation from the point of view of the observer? No. Do full transitions provide meaning in this case? No. Would it make you sick if the whole movie would be filmed with full transitions? Yes.

    Hard cuts, and disconnected transitions can be ergonomic and more pleasant to people. Because we are not robots, we don’t need everything to be logical, we can understand abstract spaces and find them comforting.

    I am not saying that semantics are not necessary, in contrary they are often neglected. But the examples above don’t provide a clear comparisons. Take for example Ubuntu vs OS X launcher. The OSX example is fantastic, it is pleasant to watch, while being rich in animation it is not distracting when used 100 times a day. Also, the OS X dashboard can be invoked by doing 3 fingers pinch which makes it semantic in this scenario. Where is Ubuntu can be excessive when used frequently, and its elaborate animation might not bring any value either, since your Application launcher stays at the same place.

    In my opinion a better question to ask is: When there is a need to use semantic animation? Like in the first movie example the continuous (aka logical transition) has a purpose of communicating the scene and emphasizing dramatic state transition. Because the scene is continuous we understand the state change and space better. But in the other type of scenes directors use hard cuts, to make things faster, ergonomic or simply less distracting.

    Copy & paste the code below to embed this comment.
  15. This was a good, thought-provoking read. Thanks.

    Regarding the GNOME Application Launcher: We know that application icons aren’t actually coming out of the icon that’s been clicked on the desktop. What’s presented is a fiction in service of building a stronger connection between a click event and the resultant action in the mind of the user. And this example does that well.

    I’m left wondering though: What if the way that interactions were presented came out of an attempt to visually represent the actual processes taking place? This relationship between form and function in the digital space is very appealing, at least, to me.

    While the impetus for this inquiry has more to do with design considerations than user experience, I see no reason that such work could not satisfy both things.

    Copy & paste the code below to embed this comment.
  16. Great, eye-opening article, thanks.

    Copy & paste the code below to embed this comment.
  17. I don’t ever use the OS X launchpad, but the GNOME application launcher is nice.

    Copy & paste the code below to embed this comment.
  18. I feel Pasquale D’Silva’s on Spatial Interfaces should be mentioned here. https://medium.com/elepath-exports/spatial-interfaces-886bccc5d1e9#.9889s5bud

    While I agree that animation/motion should consider and support the framework, I think the iOS multitasking example is broken at the framework level. Therefor, animation won’t completely solve the weirdness and confusion of the multitasking framework.

    Otherwise, great examples and I’m glad people are discussing this!

    Copy & paste the code below to embed this comment.
  19. Great article! I really like how you explained that an interface isn’t a series of screens anymore, but a collection of semantic components inside a single, continuous space.

    Ultimately, animation is about guiding the viewer’s eye to focus on a what you the designer/developer wants them to. Developers that want to improve their animations would benefit by learning some animation principles. Here is a break down of Disney’s Twelve Basic Principles of Animation https://vimeo.com/93206523

    Copy & paste the code below to embed this comment.
  20. I’m curious what was your rationale for using the word “semantic” to describe this way of thinking about the types of animation you presented?

    Copy & paste the code below to embed this comment.
  21. It was a well-spent time to read this article.
    I might need it for my web design bangkok company.

    Semantics are necessary, it’s now clear more than any time that multitasking is a concrete consequence of this.

    iOS follows up this trend, and offers us a useful device that can now do almost everything we need.

    Copy & paste the code below to embed this comment.
  22. “We start multitasking. The app zooms out. We should get back to the icons around the app on the homescreen, but instead we see a stack of other apps.”

    Really? That’s a bit of an assumption isn’t it?

    I wouldn’t expect that to happen because to start multitasking I’ve had to press the home button twice in quick succession. If I press it once then I get back to where I was. This makes perfect sense to me.

    Anyway good article with some nice ideas and examples.

    Copy & paste the code below to embed this comment.
  23. great post thanks!

    Copy & paste the code below to embed this comment.
  24. I just want to say thanks for your wonderful post, it is contain a lot of knowledge and information that i needed right now. I have searched many sites but was not able to get information same as your site.
    http://www.juegosfriv2018.live/
    I really like the ideas and very intersting to read so much. Please update and i would love to read more from your site. Thanks!

    Copy & paste the code below to embed this comment.
  25. Sorry, commenting is closed on this article.