In interfaces, elements which are following a diagonal path can be made more natural by following an arc. ArcĪ ball thrown from a height follows a parabolic path. So, it is necessary to stage the LIKE action separately from other choreographed elements. So the important thing that the app has to do is to make the users like a song if they want to listen to similar types. It directs the user's attention to the intended element.Ĭonsider a music app which suggests music based on our interest. In interfaces, staging decides where the elements are placed and how they are choreographed when an interaction happens. It directs the attention towards the most important objects in the scene.
That is, how the objects are placed in a scene, how and when each animation is taking place and so on. Timing and easing alone can be used effectively to define your motion systems. You could see that the transition on the right seems more natural.Īdding easing to your interface elements gives more life and makes them appear more natural. For example, a free-falling object starts slowly and then gains momentum. Unless there is something in the way there isn't any abrupt movement. Most objects in the real world will speed up and slow down as it moves.
The transition on the right makes the user wait too long. Several design systems (like Carbon and Lightning) have considered motion as an important aspect and formulated specs (timing, easing etc) for each type of transitions. You can refer to Material Design, which has a good explanation of durations for each type of animations. Interactions like hover and feedbacks are around 300ms and elaborated motions like transitions are around 500ms. Usually, most of the interface animations lie between 200 - 600ms. On the other hand, your users may miss something if your animations are too fast. A lengthy transition makes your users wait too long. Timing along with easing function plays an important role in motion choreograph. Timing is a fundamental aspect of any interface animations. Timing also gives mood and character to the objects. More the frames, smoother and slower the animation is. In traditional animation, timing informs how the frames are drawn. This is a good example of anticipation since it reveals the info about the next thing. Interfaces which involves horizontal scrolling usually tend to reveal a part of the next element that would appear on scroll/swipe. Interactions on hover usually inform us that there is an action happening next. Whenever we hover on elements, certain elements react to it indicating that it is clickable and something is going to happen on clicking it. In interfaces, hover states are fine examples of this. A character bringing his arm back before releasing a javelin is anticipation.
It precedes the action that is happening next. AnticipationĪnticipation informs the viewers about what's going to happen. Other than buttons, this can be applied to any interacting element in an interface.īuttons which squashes and stretches on interaction. By controlling Squash and Stretch, we can easily define a character to the buttons. In interfaces, this technique can be easily related to buttons. A bouncing ball in a scene which stretches when it hits the ground is Squash and Stretch. In animation, 'Squash and Stretch' represents an object's gravity, mass, weight, and flexibility. So, this is just a curious attempt to relate some of those principles in designing interface animations. However, these principles can still be applied in designing interface animations. These principles were originally designed for traditional animations like character animations. It was put forth by Ollie Johnston and Frank Thomas in their book - The Illusion of Life. Disney's 12 Principles of Animation is one of the inestimable guides when traditional animations are considered.
0 kommentar(er)
