Sequential Pixel

Digital Inspiration for a Creative World

animation

Animation in UI Design: The What, When, and Why

Conglomerate of many UI screens

Having perused the icons8.com article on 3 Key Uses for Animation in Motion Design in addition to reading up on What Science Can Teach You about Designing Great Graphical User Interface Animations from Ditte at the International Design Foundation, I can tell you that there are many reasons you should seriously consider what motion design is and isn’t before you begin adding it to your designs.

As the icons8 article clearly outlines, the main issues to consider are System Status, Navigation & Transitions, and User Feedback. System Status is important because it gives the user visual cues as to where things are in progress and notifies the user of when the system is looking for input from the user. Likewise, Navigation & Transitions provide the mechanism by which users can traverse the experience, often guiding the user on their journey through the app or website. And lastly, providing user feedback on the actions they have taken it an affordance needed for users to completely understand what has just taken place – whether it’s a button, form element, or a confirmation screen.

Ditte’s Interaction Design Foundation article is more of an in-depth guide to understanding the “Why” behind various issues. He includes animation as a metaphor for real-world scenarios and covers how they will often mimic the movements from the real world. This is done for comprehension and familiarity (think tabs in a navigation system), but also provides an expected behavior that helps anchor users to the UI. The article goes on to further identify what drives behavior, including things like the properties of physical objects and how we relate to them from our formative years all the way through adulthood. The article is then rounded out by a brief explanation of material designs and its core tenents including Material as a metaphor, Bold/intentional/meaningful, and finally, motion provides meaning. This final concept circles back around to the original icons8.com article nicely.

Having always considered animations for things like onboarding and in-app interactivity, it was refreshing to get the various perspectives on how animations can and should be used. On the one hand, they’re incredibly important to convey meaning and purpose. On the other hand, if used gratuitously, they can lead to cheapening the experience and leaving the users wishing for more.

UI Animations Must Begin with Affordance

After taking a look at InVisions highly bombastic article in The 8 most important UI animations of all time, I realized that while some of these make a lot of sense (the cursor, the spinning beach ball, and iMessage dots), others (like the Sega and AOL logos) didn’t seem to fit in with the theme. They certainly don’t warrant the “of all time” moniker in my mind.

This got me thinking about UI’s and what objects had lasted the test of time and what objects hadn’t. When I think about affordance, I go back to the definition from James Gibson’s book The Senses Considered as Perceptual Systems which he describes as “what the environment offers the individual.” We’ve all seen this before. It’s the handle on the door that indicates that it’s something to be pulled or the bar on an emergency exit that you push down on to exit. Some doors (especially glass ones) are so confusing that people resort to putting signs on them.

While not ideal, this type of ill-suited design is everywhere. Think about a UI where there is no obvious way to proceed to the next screen in a shopping cart or confusing roads to nowhere with no immediate call to action on what to do next. These are all frustrations born out of a lack of perceived affordance.

Don Norman in his book The Design of Everyday Things and subsequent writings introduces us to Perceived Affordance, which is the idea that the user should be able to understand what the next action is without actually having to know anything upfront. A great example of this is buttons and scrollbars. Those are two instances in which the user intuits what is going on and can take action accordingly.

While not as obvious as the Sega Genesis animation or even (for the time) the AOL loading screen, these feel closer in trying to attain the lofty goal of “most important” and fit a little better within the realm of the blinking cursor and the loading menu. If I where picking my 8, it may look something like this:

  1. Blinking Cursor
  2. Rollover & Hover States
  3. Focus Element
  4. Button States
  5. Scrollbars
  6. Typing Bubbles
  7. Tap, Swipe, Pinch & Zoom Gestures
  8. Loaders (Skeleton & others)

While simple, these represent things that have lasted the test of time. Granted, you could weigh whether or not they rise to the level of “important” but I think you could also say that loaders (whether they’re from Twitter, Uber, or AOL) are essentially all the same. What do you think? Is this something missing? Let me know in the comments area.

Inspiration from the Big Screen to the Mobile Screen

If you’ve spent as much time watching movies as the average person, you’re well aware that the intro or title sequences at the beginning of the movie can really set the scene for the entire film. A site called Art of the Title has become an archive for some of the most amazing introductions to cinema and television shows with wonderful critiques, examples, influences, and interviews. Not only does the site offer an extensive list of designers and studios responsible for creating this killer content, but they’ve also got some amazing, in-depth write-ups that go into the nuances of how each came into being including scripts, storyboards, and quotes from the creators.

One of my favorite shows on AMC several years ago was Halt and Catch Fire, named after the early 80s programming function in which the computer would freeze up, causing a full system reset. Programming idioms aside, you can find a great interview on their site with the creators along with a ton of behind the scenes information that extends your understanding of the show in a fun, yet meaningful way.

Other titles from the small screen I’ve been impressed are from the Marvel Comics catalog — in particular, Netflix’s Daredevil and Luke Cage which is also represented on the site. While these shows are no longer actively being produced, it does provide some insight into how they set the stage for future shows.

The big screen is not neglected, as they’ve got the Black Panther represented as well. I enjoyed watching the trailer again as it captured all of the excitement from the movie. It’s a great way to relive it from the creators’ perspective.

And lastly, the site does a great job paying homage to the classics such as Terminator, and the creepy Se7en intro with powerful typography and images that really add to the horror. Not only are they mindful of things that made movie history, but they also roll up recent title sequences into Top 10s by genre. Here’s an example:

If you haven’t spent time on the site perusing all of the great talents, I highly suggest you do. At the very least, it’ll provide inspiration for your next animation project. Check it out here.

Animation Best Practices

The Animation Handbook, By InVision

I’ve been using InVision for the past several years now at an enterprise level and am always amazed by the quality of content they put out for their customers. The Animation Handbook, a free guide for understanding UI animation, is no different in that regard.

My animation needs have ranged from loader animations to video prototypes, to actual clickthrough examples of how a UI works for better shared understanding across teams. I found this handbook particularly useful for several reasons, one of which being the great examples they cite, but more than that it was about measuring the value of the animation to determine ROI.

When it comes to the Business value of animation, the book references Headspace and the success they’ve had with their animations being used to note progress within their mobile app. As users progress, additional animations are unlocked. This is something my team and I have incorporated into one of our own applications to track Rewards, however, they take it a step further by sharing the animations on youtube as mini advertisements for the application. Watching the animation compels people to download the app because they see the value in it. This allows HEadspace to track and measure as they would any other marketing channel. Not only is it a wonderful way to provide multiple avenues for engagement, but it also can prove value through attribution.

Metrics are a huge part of anyone’s repertoire these days, and the Animation Handbook doesn’t disappoint there. It touches upon qualitative data, asking the right questions including collecting people’s experiences and feelings towards the offerings.

Take a look and learn for yourself how you can differentiate with animation. You won’t be disappointed. More amazing articles on animation can be found on the Design Better website as well.

Cartoon Animator 4

Screenshot of the Reallusion website featuring Cartoon Animator 4

Several years ago I purchased CrazyTalk Animator and while I had fun using it, I was never really able to put it to practical use. With the release of Cartoon Animator 4, Reallusion is hoping to make authoring animated characters even more robust.

Taking a quick peek at a recent CreativeBloq review would lead you to believe that this tool is the easiest tool on the market for round-trip design production. Having seen several applications claim this over the years including Adobe’s own Character animator, I was interested to see how the product has evolved.

With a more advanced set of features the product is priced at a reasonable $99 for the Pro version. CrazyTalk Animator also came in two different flavors as does this one (Pipeline and Pro), with the Pro being fine for individuals looking to extend Photoshop, Clip-Studio Paint, or Affinity Designer.

The “killer features” or what makes this product unique in my mind are the dead simple Bones effects to control character movement and the Z-depth control, enabling you to do some pretty sophisticated parallax scrolling with it. The Bones tool comes with varios presets for how humanoid characters would behave, which saves a ton of time

Cartoon Animator 4 User Interface

And with the Z-depth feature, you can explode out the various sections of a background scene into its respective layers, affording some really fun and interesting effects.

Layered background broken out into different sections using Cartoon Animator 4

While most of my work consists of UI animations and micro-interactions as of late, for content creators who are looking to extend their skillset into content publication via animation, Cartoon Animator 4 could be for them. They’ve got a trial on the website which is available for both Mac & PC.

CreativeBloq’s article is an “Advertisement feature” therefore take it with a grain of salt. I can say having used the earlier version of this product that it was easy to use, fun, and worked well with Photographs. I’m looking forward to giving the trial a try.