Module 6: Interface Motion (User Interface Animation)

Summary

Animating user interfaces can help users and offer them a better experience, but in doing so these animated elements are made to feel so natural that we often don’t consider that they can be complex to design well. For this post, I’ve taken the general advice from Liz Blazer’s “Animated Storytelling: Simple Steps for Creating Animation and Motion Graphics” and applied it to UI animation. Combined with research examples, I was able to create a looping sequence of UI animations for my previously developed Milford Resident App prototype.

Reading & Writing

Animation is time-consuming to plan and just as time-consuming to execute. Because of this, it can be easy to forget things, makes mistakes, and not always make the best decisions for your project when building it. Even with the best pre-production plan to work from, finding success in the animation phase requires strategy, focus, and just the right amount of flexibility. In “Animated Storytelling: Simple Steps for Creating Animation and Motion Graphics,” Liz Blazer offers a helpful list of tips to follow when beginning to animate.

  • Break up challenging shots
    Don’t try to take on the more complicated pieces of your project all at once. Break each difficult scene up into smaller chunks to work on one at a time to decrease intimidation and allow yourself to pay attention to the details of the mini-story arcs of individual shots upon which your larger, overall story arc is dependent.

  • Be a brutally-honest editor
    To save time and effort question the necessity of every shot to your story before you invest the time in animating it. Don’t just do something because it’s cool or to show off your skills.

  • Back up work early and often
    The time-consuming nature of animation means it’s extremely pragmatic to avoid problems like lost or deleted files that cost you more time in the production process. Use an external hard drive or cloud storage or both to save every version of every project file just in case. Also, create a logical naming convention for your files to keep them organized and easily searchable.

  • Create key poses
    Key poses are more elaborate sketches of your shots than your storyboards that help you double-check your choices before embarking on full-on animation. These should be done in the medium or program you intend to use and should check that your planned motion is possible to create, that you hit your intended choreography marks, and that your assets are consistent with the world you’ve created for your piece.

  • Include anticipation and follow through
    To make your animation feel real you need to simulate the laws of physics in it. Anticipation is the motion that something naturally does before initiating a movement and follow through is the motion that naturally continues after a movement has completed. Everything that moves in your animation should have these or else they will seem robotic or flat looking to the viewer.

  • Compose directional movement for the whole piece
    Objects move along invisible directional paths that are horizontal, vertical, diagonal, or circular. The type of directional paths you use can impact the emotional experience of your animation so it’s important to make a plan for directional movements throughout your piece. To do so, look at your storyboards and draw lines to represent the paths movements will take then ask whether they support or detract from the story.

  • Avoid subjects in the center
    Shot composition with the subject in the middle is boring for viewers so use it sparingly. If you must have the subject in the center, try starting them somewhere else and moving them there to make it more interesting.

  • Vary shot length
    Too many shots at the same length are also boring to the viewer. Vary the scale of the subject in your shot and the amount of information in it to keep it both interesting and help if to better tell your story.

  • Vary shot timing
    Shots that all move at the same pace are predictable. Varying the timing of shots makes the viewing experience more interesting.

  • Use blur and vignettes
    Everything is in focus when animating with software. This makes shots less interesting and hard for viewers to know what to focus on compared to camera shots which focus on some areas and blur others. Adding blur, grain, grunge, or vignette effects can make animations more realistic and help you de-emphasize less important visual information for the viewer.

  • Be flexible with the soundtrack
    In the animation process, more often than not, things will change with your story or motion plan from pre-production to production. This means your sound may also need to change. Be aware of this and experiment during animation to see if your planned soundtrack still works or if something new is needed.

  • Hit sound marks
    Don’t animate in a bubble. Listen to sound while animating and let it influence your animation choices. This will help you to better choreograph your visuals with your sound and hit the sound marks needed to tell and enhance your story.

  • Mute sound
    While you want to include sound in the animation process, you also don’t want to accidentally lean too heavily on it. Turn sound off and watch your animation to make sure the movements you’ve create can tell your story as intended on their own. If without sound your visuals are boring or can’t story tell, then you probably need to do more visual work. This can especially happen when using dialogue. You want your characters to be acting in addition to talking just as they would if real.

Research to Inform

1. This UI animation is from speedtest.net. The “Go” button transforming into the speed gauge is both satisfying and practical. This animation works to keep the user occupied while the test is being performed and makes them feel constantly informed about what’s going on as they await the results. The addition of the line that traces the speed changes over the course of the test also works as a clever progress bar to help users know what to expect in terms of the test length.

2. The animation of this menu opening is enjoyable in its surprisingly organic shape and movement. Usually, hamburger menus will expand from a side of the screen in a traditional square. This one flows out in a rounded shape from the top of the screen. How the hamburger menu icon turns seamlessly into the close X in the same spot also helps users to know exactly where to go to close the menu even though there’s been a pretty large visual change on the screen.

3. This animation is from the “Things” organization app. The plus button allows users to add an item to an existing list. However, if the button is moved in the way it is here, a user can write down an item to just save in an uncategorized list known as their Inbox. This is great if the user thinks of something unrelated in the middle of something else and just wants to jot down a note to remember and do the work of organizing it later. The expansion of the inbox symbol allows users to know clearly what action they are taking. Increasing the target size of the area the user needs to hit to initiate the action also alleviates potential anxiety about needing to hit the mark exactly.

4. This animation takes the basic concept of a toggle button and makes it fun. I can just imagine this working really well for a Christmas-themed app or website. Having the motion simulate the rolling of the ornament brings more of a 3-dimensional quality to this and the transition from green to red very clearly tells the user when something is on and when it’s off.

5. This example is also a new and inventive take on the toggle button. the bright and 3D colors of the egg sunny-side-up egg is a clever way to indicate a positive or “on” position to the user while the muted and flatness of it sunny-side down speaks to an “off” position. I love how instead of the expected sliding movement of the toggle, this animation employs the more natural and familiar movement of flipping an egg. For a cooking or food-related product, this would be both practical and entertaining for users.

6. I like this animation because the motion feels diverse and interesting. “Share” could just disappear when clicked and the icons appear, but instead the information in the whole row slides off and on the row, and the icons all bounce up and down in stair steps. Then the motions are done in reverse to close things. How the arrow on “Share” flies across the row and morphs into the X is also something that attracts the user’s eye to follow. This helps the user more easily and quickly discover where they need to tap to reverse the action they just took.

7. I love how inventive and surprisingly clever this animation of refreshing a list or feed is. Users can have fun by using the refresh pull-down motion to launch a rocket. The release even initiates a natural bounce motion in the bottom edge of the graphic that adds to the effect. The experience of this is momentarily enough to engage them and distract them from the brief wait for the re-load of the screen.

8. This is a really simple icon animation, but it’s helpful for the user when using a menu like this where there are not visually divided areas for each button. Filling the icon with the brighter color makes it look like its active which makes it clear to the user which item their cursor is on and what will happen if they click.

9. Instead of just having a notification bubble appear, this UI animation makes it a little more interesting. The entire button is bumped back as if it’s being pressed. This motion is used as the reason why the bell is making the motion of ringing. Then the bell ringing causes it to fill with color to match the notification bubble that slides up. This series of interconnected motions helps attract the user’s attention in many ways and makes it clear that a notification has just come in.

10. There are parts of this animation I like and parts I don’t like as much. I like how the dots in this animation fly out of the opening envelope into the notification bubble to instigate the number in it. It’s quite different than any way I’ve seen of showing message or email notifications and clearly communicates what the notification bubble means to the user, along with just being attention-grabbing. I’m not as crazy about the bubble bursting into the paper airplanes if only because it doesn’t make sense. Paper airplanes are a symbol for sending or replying. It feels like this motion is more appropriate inside the messaging area rather than on the icon.

Create

To create the above UI animation sequence I began with an app prototype that I’d previously designed in Adobe XD. Not only did I already have some ideas for how I wanted elements to animate in this app, but the integration between XD and After Effects made it as easy as a couple clicks to start adding animations to this design.

Once my selected XD artboards were imported into After Effects as compositions I focused on 3 interactions: opening and closing the menu, receiving a chat notification, and loading a new message in the chat feature.

The biggest challenge for creating the menu animation was figuring out the best method for creating the motion I’d envisioned. Inspired by the waves in the Milford logo I’d created a wave-shaped menu in my prototype that I’d imagined to animate like flowing water in some way. My second UI animation example above gave me a good starting place for how this might look, but building it proved challenging.

I tried 4 different approaches that all lacked the ability to create a smooth, curving motion. Then I found a YouTube tutorial on After Effect’s Puppet Pin tool and that approach worked perfectly to create the animation you see here. I ended up using 3 pins in the menu shape layer – one each at the top, middle, and bottom – and changing their position with keyframes so they followed a wavy path. To create a more extreme easing to the finish of the opening and of the start of the closing, I simply spaced those keyframes farther apart than the ones at the start of the opening and at the end of the closing and used easy ease.

The logo button in the corner partially disappears when the menu opens, except for the waves which transition to white and then cross to make the X button for closing. I used a layered Illustrator file of the logo and simply copied that whole layer in After Effects in the same position, changed it to white, made all the logo’s elements except the waves invisible, then used keyframes to change their opacity and rotation in coordination with the timing of the menu shape layer’s movement. The rest of the menu text and icons were faded in near the finish of the opening.

Once I had all of these moving elements in the menu figured out it was fairly simple to copy and paste keyframes to reverse the process for closing. The final touch was adding a tap mark on the logo and X buttons to initiate the movements.

To visually show the tap motion I created a separate composition with 2 grey circle shape layers and placed scale keyframes on both to scale them quickly from 0% to 100%. I then used Alpha Inverted Matte Mask to make one of them a mask. The circle mask had its keyframes slightly offset on the timeline from the other circle’s so its motion was delayed creating the look of the circle popping or tapping. To get a clean, finish with the main circle completely gone I changed its second keyframe to scale to only 99% so it was completely covered by the mask layer at the end. The finishing touches were just easy easing all the keyframes and turning on motion blur.

This composition was added to my main composition as a layer. I then just adjusted its position to be over the logo and X buttons, scaled it to fit appropriately in relation to everything else on the screen, and took down the opacity to make it translucent so the elements below it could still be seen. The trickiest part was just timing it up with the menu opening motions to look natural. Once that was set, the layer was duplicated and timed out for the closing.

For this second motion, I drew some inspiration from the notification icon examples in my research, but then worked out the most natural movement for the icon I was working with. This animation turned out to be much easier to build than the menu.

I simply created 3 new solid blue circle shape layers in the same size as the dots in the chat icon. Using a series of opacity keyframes with easy ease I quickly faded in and out the dots and solid circles to create the blinking chain motion in the icon.

The notification bubble is made up of a circle shape layer and a text layer for the number. I added easy eased scale keyframes to both to create the popping-in effect. I started with keyframes at 0% then added keyframes for the final scale sizes. About one-third distance from the end of these transitions, I added keyframes at a scale size of about 10-20% bigger than the final scale sizes. These middle keyframes expand the layers beyond the desired size before they are quickly contracted back to normal size creating a bouncy, organic look to the movement.

Another duplicate of the tap composition was added after this motion, repositioned, and timed to complete this interaction and transition from it into the next one.

This message loading animation probably has the most moving elements of the 3 interactions. I knew that I wanted to animate the Milford logo so that the waves were subtly moving and the boat was rocking back and forth. I thought the circle around it would also work nicely for adding the traditional circular loading motion. My goal here was to create a more interesting and unique refresh experience like the rocket example from my research.

I started by creating a composition out of the logo’s layered Illustrator file. Animating the waves was very straightforward using the wave warp preset and adjusting the settings to exactly the width, height, and speed I wanted. The swaying boat was accomplished by just using a repeating set of easy eased rotation keyframes to move it from side to side. Animating the smooth repeated filling and un-filling of the circle, though, was a little more detailed to build.

I first used the radial wipe preset and added 3 equally-spaced keyframes on the completion setting that go from 0% to 100% and back to 0% to create the filling and un-filling. To create a singular direction for this movement I added 3 keyframes on the wipe setting in the same places on the timeline as the completion keyframes. These change from clockwise to counterclockwise and back.

To make this loop continuous I added the loop out expression to all these keyframes. It sounds more complicated than it is. All you need to do is select all the keyframes in an effect setting, hold the option key before clicking on the clock icon, select “position” from the dropdown menu on the arrow button, and finally choose “loop out” from the list of expressions. All the code and math is built-in and just automatically creates the continuous loop.

After I completed the logo animation I added this composition as a layer to the composition that was made when I imported my chat feature XD artboard. I placed the logo animation layer below the message list layers and added a white shape layer to hide it.

To show the pull-down for refresh movement I just added 3 easy eased position keyframes to the message list layers. These keyframes transitioned the layers from their initial position to the bottom of the screen, then quickly bounced them back up slightly to a final waiting position just as expected when a user finishes their swipe and let’s go of the screen.

After a few rotations of the loading animation circle, I used another keyframe on each of the message list layers to move them back to the top. This time, however, the messages move at a slower pace than the menu button at the top and do not return to their initial position like the button does. I added another layer with opacity keyframes to fade in the newly loaded message into the empty space left between the button and message list at the same time as the other layers move up on the screen.

To represent the initiating action of the user here I had to create a scroll motion. In a new composition, I created a grey gradient rectangle with rounded corners and placed a circle of the same width at the top of it. To the circle, I first added easy eased opacity keyframes to the timeline to fade it in and out at the beginning and end of the action and between them I placed easy eased position keyframes to move it from the top of the rectangle to the bottom.

To the rectangle, I added easy eased size keyframes at the same place as the circle’s position keyframes to transition it from the size of the circle to its original size. It also has easy eased position keyframes in the same spots to move it from behind the circle at the beginning to the middle as it elongates over the whole path of the circle.

This composition was then added to my chat feature composition. It took some back and forth adjustments between the swipe and message list movements to get the exact timing, but I think it worked out well. Finally, the chat composition was added to my overall composition in sequence with the menu and notification animations.

Reflections

Once I completed these 3 interactions and timed them out just the way I wanted for a seamless loop from the beginning to the end of the video I was pleased with them visually, but the experience of watching them felt flat without audio.

This was surprising considering I usually experience these types of animations on my phone in silence and, in fact, get annoyed when I accidentally have the sound on and hear interface audio. But for a more presentational use of UI animations like this, I think audio is key for having a more polished end product.

Adding just simple sound effects to represent each of the interface animations lifted it up so much. I even think the audio helps direct the viewer from one animation to the next more seamlessly. For example, when watching the sequence I wasn’t automatically shifting my eyes to the notification animation until the bubble popped up because it’s much smaller in comparison to the menu animation and at the opposite end of the screen. Having the sounds for the blinking dots in the icon helped direct my eyes there sooner.

I knew I wanted sounds that felt simple and smooth before I started animating. I took Blazer’s advice to allow this sound choice to influence my motion choices while at the same time not leaning too much on audio to do the work that visuals should. This combined with other pieces of her advice for animation – such as breaking up challenging shots – really helped see me through this project. Even though the application of UI animation is quite different from what we view as the traditional application of animation in film or TV, having a grounding of knowledge in the latter can help significantly with the former.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s