If you follow me on Instagram, you may have noticed that I started to post more videos there. I did a couple of short video tutorials, e.g. for MindNode, but I also posted a couple of videos exploring iOS UI Animation, i.e. Motion graphic design for iOS apps, or apps in general.

I feel like motion design is becoming more and more important in apps. Developers approach motion graphic design from the code angle, whereas classic designers seem to be a bit lost. The difference between still design and motion design is that with motion graphics the graphic itself can communicate what it does. In still design the graphic itself has to be clear enough to show what it does, without movement.

Developers often seem to be limited by their own code. People know what the frameworks they use are able to do, and they also know what they can’t do. It therefore seems obvious to use what’s available, than write something anew, that may or may not be working out. That’s totally understandable.
The problem that I see, right now, and that looks like it’s getting fixed now, is that mograph artists can’t produce code at the moment. It would be clever to make an app, or something, where a motion designer can work in, that spits out workable code at the end. There’s nothing that I would like to recommend at this point. We’re still better off to show animations, at various speeds, to developers so that they can work on a solution in code themselves.

I have written about this topic often enough. As motion designers we can assist in prototyping an app. As motion designer, we don’t need code. We can just build an interface and make it look like a real app.

The challenging part, that I like, is that UI animations are just visible for split seconds. Half a second to a second at most. The challenge is to come up with an animation that looks so good that, even after 50 to 100 times, and more, using an app still looks good, adds to the experience, and doesn’t get annoying.

I see motion graphics design become more important in the not-so-distant future of application development. It’s just until recently that home computers started to use animations more broadly across the board.

It is for these reasons that I look at various (iOS) apps from the view point of motion graphics design. The things that I like to look at is how motion graphics design can improve the user interaction and how motion graphics design can generally create a more custom experience.

Motion design that I find pleasing

 

Twitter

A video posted by Andreas Zeitler (@zettt) on

After I read Federicco’s Twitter Clients in 2014 review, I was curious to see how the standard Twitter app changed. It’s become a neat app. What I find pleasing are the notifications a user gets when they are inside the app. There are a couple of nice things to note here. Let’s look at the Mentions animation first. Notice how the small number doesn’t go straight up from the bottom middle. It goes in a curve. That curve helps the animation to undermine the speed of the notification. The animation is eased, this makes the notification appear to be faster. Both, the curve and the easing, help the animation to appear to be more quick than they really are. If they were in fact faster, the eye wouldn’t be able to catch them.
The second animation shows the user name that mentioned you. At the beginning there are two separate bars appearing from the left and right, but when they first appear they do not have the typical Twitter blue yet. The left one starts black, the right one starts white. Both then fade to the Twitter blue. Oddly enough, when I recorded this I realized that the two bars do not animate at the same time. The white one is one or two frames behind the black one. I presume that’s not intentional, but a limitation of the operating system/frameworks. The rest is self explaining. The @ symbol appears in the middle with a little fade, before it slides left to reveal the user name. Quite neat.

Where To?

A video posted by Andreas Zeitler (@zettt) on

As a recent client, it’s obvious that I also like to check out the apps I contributed to. Where To? had, for a couple of versions, an animation where the selection wheel animated its cells, when the app starts. Not a huge thing, but that little animation helps the user to identify how to use the app. When the animation is done, you start going “what am I supposed to do now?”, and one of the first natural things to try is to emulate the same “going round thing” again. It’s essentially a mini tutorial. A very nice touch of motion graphics design.
The second thing that’s special is how the table view cells appear in the settings menu. Again not groundbreakingly dramatic, just a little touch, but it looks neat enough to try it some times. The good thing is that the way the cells animate in, doesn’t take away from the experience, or speed, of the app. The animation adds something little like 0.3 seconds at most.

Motion design that I don’t find as pleasing

 

Reeder vs. Instapaper

A video posted by Andreas Zeitler (@zettt) on

These two examples show how one and the same interaction is handled entirely different in two of my most favorite apps. When a user touches a table view cell, and then slides left or right on iOS, it’s common to reveal a new menu with quick options.

The difference is that Instapaper merely plays an animation right after it indicated a slide in a particular direction, whereas Reeder allows full touch interaction with the cell. The way Reeder handles touch input feels much more natural. The interaction is completed when the user stops to touch the cell. Instapaper disregards whether the cell is still touched. I could have chosen a different app than Reeder. Dropbox has the same interaction. Actually most apps do. Instapaper sticks out like a sore thumb because it doesn’t.

Swarm

A video posted by Andreas Zeitler (@zettt) on

The Swarm app uses an implementation for its in-app notifications that I find clumsy at best. I first saw this in Tweetbot. In Tweetbot the user can tap an image to display in a larger size. To get rid of it, the user can just flick it. A nice natural interaction method, but the implementation in Swarm is suboptimal. When the user starts to touch and drag a notification, the notification becomes so lopsided after a while, that it just doesn’t look good anymore. I agree that this makes notifications much more playful, but in the case of Swarm, I don’t think that’s what the app needs. It just doesn’t fit the app.

Pin It on Pinterest

Share This