author avatar
By John Buchta User Experience Designer

*Views, thoughts, and opinions expressed in this post belong solely to the author, and not necessarily to SemanticBits.

M otion is becoming more prevalent in modern UI. A common misconception of motion design in UI is that it is only used to polish and delight users.

However, motion in UI can be used to:

  • Convey Hierarchy
  • Guide A User’s Focus
  • Foreshadow Actions
  • Distract the User from Loading
  • Polish + Delight

Motion can be used to convey hierarchy with objects on and off screen

Animating elements helps embellish their weight in the design. Adding motion to hierarchically important elements helps guide the user’s focus, as well.

  • Sending elements forward and backwards into z-space
  • Expanding elements
  • Using obscuration to make the user aware of primary context while secondary elements recede on the screen

Motion can be used to guide a user’s focus

Motion, if used correctly, can reduce cognitive load on a page or screen. It allows users to focus on primary actions and content. However, too much motion can distract the user.

  • Staggering elements help users understand the flow of an application.
  • Unifying, omnipresent elements draw the user’s focus to the next screen.
  • Subtle shifts in motion allow the user’s focus to be guided to elements that are next in the flow.

Motion can be used to foreshadow actions

Mobile applications lack hover interactions. Designers can user motion to help add affordances.

  • Adding resistance to the cards to show which have direct interactions
  • Button animations to give instant feedback to the user
  • Raising touched elements in space to portray the user’s interaction with them

Motion can be used to distract users

From annoying loading sequences to the time that is spent fetching and sending data, adding motion to distract users can add a sense of delight instead of frustration when it comes to loading.

  • Pull down to refresh feed animations
  • Loading animations such as a spinner or progress bar
  • Data-fetching animations

Motion can, of course, also be used to delight and polish

Adding motion can convey mood and personality to an application. Not all animations have to be “playful.” They can be refined and professional, depending on the motions.

  • Pull down to refresh feed animations
  • Loading animations such as a spinner or progress bar
  • Data-fetching animations