Introduction:
This design guide is applicable to interactive fretting effects in UI interface, covering entry, exit, transition and loading dynamic effects. It provides some general design suggestions on the selection of time and slow motion curves to help designers clarify the design ideas of dynamic effects and improve design efficiency.
I. Scope of application of this Guide
This guide applies to interactive fretting effects in UI interface and belongs to functional fretting effects. Unlike motion effects that focus on providing entertainment experiences (such as animated movies, games, etc.), functional motion effects are designed with a clear logical purpose and are focused on helping users understand their current state.
Dynamic effect range covers:
Enter & Exit, Transition and loading
Ii. Design principles and considerations
An excellent interactive fretting effect should be designed in accordance with the following three core principles:
In order to ensure that the dynamic effect has a clear purpose and can achieve the goal, please consider the following aspects when designing:
Response time and duration
Time is the core element of dynamic effect. Two types of time — response time and duration should be considered when designing dynamic effect
3.1 Response time
Response time refers to the time between user action and feedback. Different trigger mechanisms have different response time limits: · For feedback directly triggered by user actions, the ideal response time should be within 100 ms. · For feedback indirectly triggered by user actions, the response time should be allowed to reach about 1 second, and no feedback should exceed 2 seconds. · When the feedback time is 2-9 seconds, a cyclic loading style can be used (such as the common chrysanthemum turn) · When the feedback time is more than 10 seconds, a loading style with progress indicator must be used (such as 60% of the load, 30 seconds left)
3.2 Duration
The duration of interactive fretting effect should not be too long to avoid wasting the user’s time and affecting the user’s reading and operation efficiency, and its duration generally does not exceed 500 milliseconds (except for loading dynamic effect).
If you want the user to be able to clearly capture incremental changes to the element, it should last for more than 200 milliseconds. If you don’t care if the user thinks the change of the element is instantaneous, you want to save the user as much time as possible. You can also design the duration to be less than 200 milliseconds (such as hover button color subtle change).
On the one hand, the specific duration is affected by the size of elements and the complexity of dynamic effects. On the other hand, it can also be affected by dynamic targets and devices that operate mobile efficiency:
· The effect of slight changes of small elements (such as fade in and fade out, size change, etc.) is generally within 200~300 ms. · The effect of complex changes of large elements (such as large range of slow displacement) can be as long as 400 ~ 500 ms
· Faster action is more likely to attract users’ attention and save time. If the dynamic effect element is out of the user’s line of sight, in order to attract the user’s attention and take action, the dynamic effect that changes greatly in a short period of time (such as position movement and speed change) can be used; If the motion-effect elements are already in the user’s attention range, they can be terminated after completing the necessary transition (such as fading in and out) in order to maintain visual continuity.
· Slower dynamic effects are less distracting to users and more suitable for scenes not directly triggered by users. If the dynamic effect is not directly triggered by the user and the user’s attention is not expected to be diverted, the dynamic effect with small change in a long time can be used (generally there will be no position movement).
· Screen sizes and features vary from device to device and the ideal duration varies. In general, for mobile devices, the larger the screen tends to be, the larger the displacement of the dynamic effects, and therefore the longer the duration should be (about 30% faster on wearables and 30% slower on tablets). However, the dynamic effect design of desktop devices is often simpler and faster than that of mobile devices (it is common between 150ms and 200ms). This is because the complex dynamic effect is prone to frame drop and lag in desktop device scenarios, which is avoided by the dynamic efficiency of instantaneous response.
Download File
(Duration wearable device < mobile < tablet, video from Google Material Design)
Download File
(Desktop devices have simpler and faster motion effects, videos from Google Material Design)
· The entry dynamic effect is generally faster than the entry dynamic effect (for example, when the entry dynamic effect is set to 230 ms, the entry dynamic effect can be set to 200 ms). This is because the user generally needs to read and process the new information when the element enters, while the entry of the element usually indicates that the user has completed the task on the element and does not need to pay attention to it any more. Getting out quickly saves users more time.
Four, common dynamic effect types and application reference
The changes of position, scale, rotation and opacity are the most commonly used, easiest to implement and guaranteed performance in browsers. When changing any one or several of these four properties can achieve the purpose of interactive fretting effect, There is no need to add other unnecessary attributes to avoid affecting dynamic fluency.
Attribute changes are generally categorized into liner and curve changes.
4.1 Linear change
Linear change has two characteristics of uniform speed and sudden stop. It is generally applicable to transition dynamic effects unrelated to physical attributes (such as the change of transparency attribute, including fading and fading or switching between colors) or regular loading dynamic effects (such as uniform cycle, numerical change or schedule change). In changes related to physical parameters (such as changes in position), try to avoid using linear changes, otherwise it is easy to give a stiff and unnatural impression of dynamic effects.
4.2 Curve Changes
There are many types of curves. In interactive fretting effect design, easing curve has the widest application scope, the most natural effect and less interference to users. It is mostly used in the property changes related to physical attributes, and the common scenarios are as follows:
conclusion
The interaction fretting effect is mainly functional and must follow the three core design principles of restraint, clear focus and natural fluency. Before the design, we should think about how we hope to affect users’ attention, what is the target of dynamic effects, what is the frequency and trigger mechanism of dynamic effects, and choose the appropriate type and duration of dynamic effects and pay attention to the response time of feedback during the design, so as to make it reasonable and convincing.
Tags: Interaction Design, Dynamic effect Design, fretting effect