• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Sequential Pixel

Digital Inspiration for a Creative World

  • Inspiration
    • Design & UX News
    • Mobile News
    • Movies
    • Desktop
  • Tools
  • About Us

Microinteractions

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.

Primary Sidebar

We’re Pixel People

Pixel PeopleThis site is made up of a small but passionate group of animators, designers, and developers sharing information and resources with one another. More about us

FacebookGoogleInstagramTwitter

Email Newsletter

Sign up to receive email updates and to hear what's going on with our company!

Footer

Text Widget

This is an example of a widget which can be used to describe a product or service

You can also use widgets such as latest tewets, featured posts or even display a custom menu built with wordpres

 

Recent Posts

  • Animation in UI Design: The What, When, and Why
  • Icons for Your Next Project
  • UI Animations Must Begin with Affordance
  • Inspiration from the Big Screen to the Mobile Screen
  • NN/G: Accessible Animation

Tags

affordance animation app application behavior Blockquotes Brawn news cartoon character comic creation concept design Don Norman elements experience feedback Headlines human interface icons iconsets interactivity james gibson metaphore Microinteractions mobile navigation Nielsen NN/G Norman Ordered Lists Part-Time Comics prototype publishing resources Review royalty free software stock subscription titles tools UI Unordered Lists UX voiceover