Animations & Micro Interactions#

Note. LinkedIn Learning resources are in the process of being replaced.

In this lesson we go through micro-interactions in IxD and how they are used within UI/UX. Software such as Adobe XD and Figma are not true animation software but often animations are required to simulate micro-interactions such as scrolling, swiping, tapping, etc. Also in this category are micro interactions and often hint towards specific information intended to accentuate the user experience.

• Adobe XD
  • Watch this video on using the auto-animate feature in Adobe XD: https://www.linkedin.com/learning/adobe-xd-prototyping-tips-and-tricks/auto-animate?autoplay=true&resume=false&u=2087740
  • Learn how to create micro-interactions using auto-animate: https://helpx.adobe.com/au/xd/help/animate-prototypes.html
  • Create advanced animations with smart animate in Figma: https://help.figma.com/hc/en-us/articles/360039818874-Create-advanced-animations-with-smart-animate
• Figma
  • Follow the in the provided Micro-interactions in Figma LinkedIn Learning course (select the micro-interactions you would like to learn from the course): https://www.linkedin.com/learning/designing-microinteractions-with-figma/microinteractions-in-figma
  • Animations in Figma: https://help.figma.com/hc/en-us/articles/360040315773-Prototype-interactions-and-animations
• Additional resources
  • Ask a UXpert: How Micro-Interactions Can Enhance the User Experience: https://xd.adobe.com/ideas/principles/human-computer-interaction/how-micro-interactions-can-enhance-the-user-experience/
  • Motion UI Design: https://project-awesome.org/fliptheweb/motion-ui-design

Task#

Follow along with the tutorial to create an animated prototype. Experiment with different kinds of animations possible in a UI. You can repurpose screens you designed from a previous worksheet for this task. Do one of each of the following in your UI:

• A scroll/swipe animation
• A button animation
• A progress animation
• Identify an error to the user using a micro interaction

Submission: All the above can be done in a single screen or multiple. Submit a URL to your interactive prototype using the share feature in Adobe XD or Figma. Upload to forums if required.