Sequential Pixel

Digital Inspiration for a Creative World

Archives for July 2020

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.