Sequential Pixel

Digital Inspiration for a Creative World

affordance

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.

Mobile UI Animation as a Driver to Better Experiences

Woman holding a phone with her left hand and tapping with her right

The thing I appreciate most about Nick Babich’s article on UX Planet entitled “3 Key Uses for Animation in Mobile UI Design” is the liberal use of example animations as a way to communicate core concepts.

When talking about system status, he’s clear to delineate between loaders, refreshes, and notifications – all important aspects for users to understand that the system is still working. There’s the notion of perceived time that Babich seems to capture well with his reference to creative progress indicators.

With regard to Navigations & Transitions, he again brings examples of complementary design, transport effects, relationships. One thing to be mindful of with transitions is Fitt’s Law, which describes (among other things) elements being within the same range as one another. His explanations do a nice job here of that.

And finally, give the user control by providing feedback. While are mobile touchscreens are an abstracted view of the physical world, we should expect to have immediate and responsive feedback that empowers the user and gives them confidence.

Take a look at Nick’s other work and make sure you clap back for all of the great articles he’s put into this original post. For a deeper dive you can also reference some of the tools and tutorials links as well.