Sequential Pixel

Digital Inspiration for a Creative World

Content/Sidebar/Sidebar

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.

Icons for Your Next Project

Having used several icon suites over the years, It was refreshing to stumble upon Iconshock, a site that professes to offer up to 2 million icons for a variety of different industries and topics.

The UI of the site differs from other sites like Iconfinder and other sites in that it’s more economical, running $99 for a lifetime subscription which gives you access to the full collection. Like some of its competitors it does offer free icons you can download and use, however, they don’t include SVG or vector files, therefor your usage will be limited until you sign up. The free icons are quite nice. Here’s an example from one of their iOS line sets:

As designers, we’re often running around looking for icons on various sites. It’s nice to know that Iconshock has a robust collection that’ll keep your stock of icons robust.

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.

NN/G: Accessible Animation

Neilsen Norman Group logo superimposed over a webpage

The Nielsen Norman Group, a longtime leader in user experience, has published an article regarding accessibility and animation best practices entitled, “Executing UX Animations: Duration and Motion Characteristics.”

While interactivity can be used to great effect in making things noticeable on mobile and web, defining a purpose to your animations is paramount. The author, Page Laubheimer, describes the various ways you can disorient and (at worst) cause seizures or sickness when animations are done without consideration given to all audiences.

Animations usually begin with a trigger, whether it’s a tap, gesture, page load, or click. Laubheimer provides wonderful examples that show nuanced interactions such as hovering over a button, tapping on an icon, or even scrubbing a timeline that indicates helpful affordances for the user.

Speed and timing are also discussed and harken to the 12 Disney Animation Principles, with overly exaggerated stop sliders and adjusted length of time so as not to disorient the user. Some of the examples refer to Google’s Material Design library as well.

12 Principles of Animation article (screenshot) from the Disney.com website

The author determines appropriateness for things like duration — specifically when screens change like when a modal window comes into view. The recommendations are prescriptive (200-300ms for a modal appearing, then 100ms less to disappear for example). When it comes to easing in and out, many software programs handle it differently, which means the design to production handoff should be coordinated to ensure both teams are speaking the same language.

The ultimate takeaway is that animation is a visual language in and of itself, requiring a more nuanced approach to design. Milliseconds and easing can make a huge difference. All the more reason to create design standards for your own team to ensure you’re considering all facets of communication.

Be sure to check out this and other articles like it on the Neilsen Norman Group website and sign up for their newsletter.