- What is functional animation
The functional animation is a technic used by designers to help users to understand the logic behind the user interface. A well-designed functional animation could greatly improve user experience by reducing users' cognitive load. One of the most well-known examples is the loading animation. The loading effect indicates the status of a system. This could provide a positive feedback to users after they requested some resources from the system. This could also reduce the negative emotions raised by the waiting.
Loading effect example
- What makes a good functional animation?
1. Responsiveness
Similar to the criteria of other UI/UX designs, a functional animation is supposed to appear immediately after a user's operation. It is a common feature that people are always looking for feedbacks after an operation to learn the functionality. A good functional animation should satisfy users' desire.
The animation is responding to user's clicking
2. Correlation
A functional animation should always closely related to its trigger. For example, if clicking a button in the page could show a menu on the same page, the location of the menu should be around the button. Otherwise, users would be confused about the relation between the button and the menu.
A good example from Google material design
3. Being natural
A functional animation should follow the basic physics rules. Designers should consider the gravity and friction in their animations.
A user wanna check the details
From the gif above, we could see the process of the animation is begin->accelerating->decelerating->stop. This process is natural and predictable.
4. With purpose
There should be a proper purpose for using the animation. Designers should avoid using pointless animations.
User clicks an item in a calendar
In the above gif, clicking an item in a calendar triggers an animation to show the details of the item. The animation used in this scenario could help users to understand the relation between the item and the popup.
5. Fastness
A well-designed functional animation should avoid making users waiting for the animation finish. A long and tedious animation could greatly reduce user experience.
Good example Wrong example
References
1. https://www.smashingmagazine.com/2015/05/functional-ux-design-animations/
2. http://mp.weixin.qq.com/s?__biz=MzAwNzc5NjgxMg==&mid=2651802272&idx=1&sn=03e7f232bb0a1e67b0f6d41a521e832f&chksm=80834b83b7f4c2959dc611053d0c8b3d87adce052236ceb2d6d9ac543975a78c3dc461c758e5&mpshare=1&scene=23&srcid=0319b4qeWRtAgtI9vv0XLKEN#rd
3. The gifs are collected from material design.
No comments:
Post a Comment