Motion

At GO-JEK we use motion to make more delightful experience for our users. Incorporating motion to improve the user experience and thinking how the elements are going to move and react to the user interaction is a must from the beginning: movement provides personality, content and can improve usability.

Principles

When it comes to UI Interactions there is only one formula to create a bond between users and your app.

Emotional Motion = Story Telling + Delight

  • Story Telling — it’s about telling a story to the user which makes the experience fun and easy. It’s all about collecting those decisions and those ideas behind designing those screens and creating a fictional world which is exciting and feels like a part of user's life.
  • Delight — believe me or not, but adding a few drops of delight is what makes the user fall in love with your product. There is a very thin line between delight and suffering so you need to play with it, till you get it right.

Always guide user to the next stage like in left image buttons color changes to green which tells him or her what he has to do next in the flow.

motion example

This is the base formula we use to create motion at GO-JEK and to achieve it there are many principles you can use like -

  • Easing
  • Timing
  • Transformation
  • Staging
  • Exaggeration
  • Acknowledgement
  • Follow-through and overlapping

Easing

In the physical world, objects and humans need to pick up momentum before they can reach full speed. Similarly, it takes time to decrease speed before something can come to a complete stop. Easing allow the laws of physics to exist in your interface which makes experience more relatable to users.

Timing

Timing is the most important principle of all. If used wisely you can control users emotion, it’s a medium for you to express yourself, to communicate with user what’s important to focus on and what’s not. You have to think about user don’t make them wait for something or too fast interactions which can distract user attention.

Transformation

Transformation is used to show relationship between elements, to connect two states and to reflect the user actions. Transformation results in a seamless experience which creates a feeling of progress to the user which is very important and urges user to explore the app.

Staging

It’s very important to make sure that “What should I do next ?” never comes in the user's mind. Staging is all about guiding the user what he should do next in the process. Staging is used to create focus and to clarify the process.

Exaggeration

Exaggeration is making something feel dramatic, alive and fun so that it doesn’t look mechanical in nature. Exaggeration can be used to grab user attention in events like error states and feedbacks.

Acknowledgement

Your user has lots of questions in their brain while exploring the app and if you want to give them a good experience then you have to remove that load from their head. Giving feedback will help resolving those doubts which provides a sense of security and comfort. With every action there should be a meaningful reaction so that user know if they are doing right thing or not. Let the user know that you are listening to them and that you value their time. That is the best experience you can give someone.

Follow-through and overlapping

Everything is not independent, elements in your Interface is related to other elements. Some are parents and some are child to other elements and some are with high priority. So your interactions should also be clear enough that user can understand the relation of elements and their priorities.

When doing motion design, it’s important to not limit yourself. Ultimately motion aims for guidance and delight, and once those two conditions are satisfied, we break the rules.

Specifications

Timings

If you are thinking what’s the science behind this, how to calculate the timing for interactions then it’s not science, my friend, it’s pure art.

Good timing is essential for creating emotion in your interactions and it will be better if you think in terms of range instead of any fix magical number.

200ms to 600ms is a good range to make your interactions smooth

We use 0.2s, 0.25s, 0.45s, 0.6s for most of our interactions and for some unique cases we use out of above range also to make it look more understandable to user.

Curves

Curves play an important role in making interactions readable. If you use nature forces in your interactions then it will help user to relate your interactions with every day objects and curves will help you to achieve that.

We have added a touch of inertial force in our interactions and in some of the interactions use easing curves depending upon the type of interaction.

animationCurve = Spring(damping: 0.85)

animationCurveBump = "spring(250, 30, 0)"

animationCurve_particle = Spring(tension: 54, friction: 15, velocity: 10)