Meaningful Transitions – With Material Design Animation

Introduction: We know that Google has launched a design guideline Material Design. The design is created as a visual language for users which unifies the experience across all the devices.

Animation which comprises of essential parts like motion, transitions and interactions are key parts which helps in gauging the quality of the animations done. Having talked in detail about Material Design in our previous blog, now is the time to study in detail about how to go about the process of Animation in Material Design.

A. Authentic Motion

The shape of any object is a good indication of how that object might behave, similarly object on the move demonstrates whether it is light, heavy, rigid, small or large. Material Design explains motion as spatial relationships and functionality with beauty and fluidity. Let’s see what that means.

A1- Mass and Weight

The animation in Material design must not start, stop or change abruptly as they may appear unnatural. Motion in material design must relate to the real-world behavior of physical objects without even compromising the elegancy and simplicity of the designs.

A1.1 – Natural Acceleration and Deceleration

  • Changes in acceleration or deceleration must be very smooth during the complete process of an animation.
  • Asymmetric acceleration and deceleration creates a natural and delightful motion.
  • Acceleration or deceleration must be smooth otherwise movement can appear mechanical.

Tip: In case you want to add any character to an animation, keep varying its change in speed when starting and stopping.

A1.2: Entrances and exits

  • The change in speed and direction of the object is what draws a user’s attention.
  • As the change in the speed of the object when it enters and exits indicates the distance it is travelling hence when it slows down while exiting draws attention and implies that an object will stop near the frame edge.

Tip 1: During transitions, consider what part of the entrance or exit must receive the most attention.

Tip 2: Do not try speeding up when object enters and exits otherwise you may end up drawing undue attention and users will get distracted.

A 1.3: Easing-in and Easing-out

“Ease in” and “Ease out” are terms used both in traditional and UX animation.

A 1.3.1 Traditional Animation and UX Animation

“Ease out” indicates to motion while departing from a pose and “ease in” refers to motion when entering a pose. Motion leading into and out of a keyframe is “easing in” and “easing out”. It is same in case of UX Animation.

A1.4: Make Some Compromises

  • One must use curved motion and should avoid using linear spatial paths.
  • Designers must identify the qualities of motion which must be best suited to your object, therefore representing their motions accordingly.

B – Responsive Interaction

Responsive interaction fosters in-depth exploring an app thereby creating timely, logical, and delightful screen reactions to user input. As the design is made for user, hence the user interaction must never be distracting. Let’s see what all factor plays major roles in making design responsive.

B1- User input

  • The apps using material design are responsive to user input like touch, voice and mouse and keyboard are important input methods.
  • UI elements appear tangible even if they are behind the glass layer which we may call as device screen.
  • With multiple visual and tactile responses, responsive interaction improves the information-delivery service.

B2- Surface Reaction

Surface Reaction embraces that on an input event, the system must provide some instant visual confirmation at any point of contact.

B3- Material Response

  • Material Responses can lift up when touched hence indicating active state.
  • Touch in material responses helps user in generating new or transforming existing material.
  • Material can be resized linearly or radially.

B4- Radial Action

  • Through visual reactions add clarity to user input.
  • Visually represent in a way of tying an input event and on-screen action together.
  • Transitions, or triggered actions should visually connect to input events.

C – Transitions Work

Motion design can be a great guide for getting user’s attention.

C1- Visual Continuity

Transitions between two visuals must be clear and smooth. A flawless transition gives an idea to the user where to focus their attention.

Considerations:

  • Directing the user’s attention.
  • How should the incoming, outgoing, and shared elements be emphasized or de-emphasized through transition.
  • Create visual connections between the transition states using color and persistent elements.
  • Consider how moving certain elements can add clarity and delight to a transition.

 

C2- Hierarchical Timing

  • In transitioning, consider order and timings of element movement.
  • The timing of transition elements must flow smoothly and avoid feeling incoherent.
  • Choose using overlapping motion to direct user attention.

 

C3 Persistent Choreography

  • Consistency is the beauty of material design.
  • Transition of elements must behave in a coordinated manner.
  • Haphazard motion is distracting.
  • Direct user attention with coordinated, orderly motion.

 

D- Delightful Platter For User

  • From detailed icons to key transitions and actions, animation does exist within all the components of an app.
  • When all the elements are combined together cohesively, it comes out to be a seamless and beautiful experience.
  • An app can truly delight a user if animation is done beyond the obvious.
  • An app becomes as a delightful platter for user when it gives a moment of wonder and a sense of superb craftsmanship.

Collaborate more on Material designing and make the blog more interactive, by sharing your examples and user-experiences on Material Design launched by Google.

Related Posts: Prototyping Mobile Apps -­ Benefits And Best Design Tools and How to Start Designing for the User: Basics of UX Designing.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s