The reason why I translated it is that the animations in the text touched me. Thinking about each animation can give me a lot of associations and inspirations. I would like to share it with you, and I hope you can gain something~
Of course, some people may say, how to achieve these animations, development can not be done. But I think: Although some micro-interactions may be difficult to implement at present, we designers must first have these awareness, that is, to be able to identify which experiences are good and which are not. I think this awareness is very important for creative work. Very important.
Well, without further ado, let's take a look at the translation:
In this article, I'll show some examples of effective microinteractions, explain how they improve the user experience of a product, and teach you how to test microinteractions. You can use this information to convince your boss or your design team (or even yourself) that microinteractions are flexible and a must for designing rich interactive experiences.
The attention to detail required by microinteractions is a key tenet for an effective, powerful user experience. Every part of the design process is important, and having useful and memorable details can make your app stand out.
Micro-interactions create some interesting moments throughout the user's interaction with the product. Typical microinteractions such as drag and drop, when the user starts to drag, the target object is highlighted, which helps the user know exactly which element is being dragged and where it can go.
1. The advantages of micro-interaction in the interface
1. Switch animation between pages
Micro animations make smooth transitions between interface states and improve the app experience. Users can better understand previous and b2b data current status. At the same time, micro-animations give the application a "mood" and at the same time add the necessary details.
by Anton Skvortsov for Norde
2. Infinite scroll to match top animation
Micro animations in the Polarsteps app are a great way to show progress to the user, users can see how their actions relate to what's scrolling, personalization and pointers are the best way to search for photos on a specific date.
3. Upload or Download Status
The upload/download status is shown using a micro-animation, in this case the micro-interaction also shows how many Mbytes were downloaded, and the animated progress bar adds fun to the boring download process.
by Nick Buturishvil
4. Notification
Micro-animations allow users to quickly identify and efficiently interact with applications, while also making the actual displayed form more elegant.
by Mikhail Gribkov for Kultprosvet
5. Pull down to refresh
Refreshing this frequently used content action will be the highlight of your interface design, which includes thoughtful, unique micro-animations. Use an animation to notify the user that the page is loading and disappear when the download is complete.
by Hoang Nguyen
6. Responsive clicks
Responsive micro-animations encourage user action, which is a key reason why users interact more with an interface.
by Tigran Manukyan
7. Motion design makes filling forms more fun
Micro-animations improve the tedious process of filling forms with fun and interactive elements, an annoying experience becomes more valuable with the addition of micro-animations, users will not hesitate to fill in an email even if they need to enter it multiple times the entire form.
by Clay Walte
8. Text animation
Text animations give your designs uniqueness and showcase innovative approaches to UX design, no doubt these clever effects are especially popular in minimalist interfaces.