Editor’s note: How do you make “right” motion effects instead of “gorgeous” motion effects for a novice with no experience? Today’s Medium post is a case study to help you learn the basics of animation from five aspects: restraint, interactive narrative flow, one-step, not the fault of motion, and mastery of detail.
First of all, I think you have the question: what is micro-interaction?
Carrie Cousins from UXPin, an online interactive prototyping tool, offers the following definition: “Microinteraction is the detailed optimization of a single interaction flow on an interactive device.”
It may not be easy to understand, so watch it several times.
Before I get into this, I want to make it clear that the UI effects I’m going to analyze are the work of some pretty awesome people. I have great respect for them and their work, and they are more than happy to share their experiences and unfinished manuscripts. However, when I analyze the work, many designers have a very bad attitude. That’s not my style. I look at design with a serious eye, but I express my views in an entertaining way. Please forgive me if I happen to say something offensive.
Let’s get started!
First, for the sake of the hand-painted board, restrain yourself
A designer is like a budding flower that needs a lot of attention and care from Qian, but when it comes to designing high-quality micro-interactions, it’s full of interruptions before you’re done.
Dynamic design is a great way to try out new ideas and see the results. Take a look at this one from Sergey Valiukh (a genius for typography, typography, color and motion).
Review images
Let’s break it down frame by frame:
1. The first and most intuitive thing is the “3D flip” effect of the image, which in my opinion is completely unnecessary and even illegal (just kidding, just make sure you’re still watching). In this work, it would be a good idea if any superfluous kinetic effects were removed and expressed succinctly.
2. Second, you may have noticed that the image in the preview stream is cropped, while in the edit screen it is the original size. This is obviously not feasible in practical application.
3. Third, notice that the top navigation icon takes a very, very long time to transition. It’s great the first time, but it gets annoying over time. Microinteractions should be fast, concise, have significant speed changes, and last 300-400 milliseconds at most.
4. With that out of the way, let’s look at the bottom, where the two ICONS don’t appear at the same time, which means a wrong interactive narrative flow (needless to say) and extended comprehension time.
Conclusion:
There are many such parameters to consider when designing dynamic effects. You need to figure out what you can use, what you can’t use, where you can be short, where you don’t have to put too much effort into it, and get a clear, easy-to-use experience out of it. That’s not to say you can’t throw in some fun details, just that they can make the whole thing seem cumbersome.
Tip:
Cut out the excess. Remind yourself whether these details are keeping the microinteraction simple or making the interaction experience worse.
Key words:
Don’t sacrifice narrative for effect
Narrative is important in user experience, in part because it is related to the user’s expectations, and a coherent narrative flow does not exceed the user’s cognitive load. And partly because it has to do with the general patterns in which our brains gather and interpret information. It also has to do with our mental models. In short, interactive narrative flow is important.
This work by SrikantShetty (a brawny animator) gives us a very “good” example.
Review images
The first impression of this action is strange, thinking that you are typing text on a line, but instead a hidden text box pops up. This click-pop-input interactive narrative process is annoying, perhaps in an attempt to look cool. However, this flow of interactive narrative interrupts the expected flow of input. We had to stop and face the unexpected, and get our minds right before we could move on.
This is the kind of weird interactive narrative flow that designers often create when “inspired”. They tend to spend a lot of time trying to blow things up and pay little attention to the core narrative flow of the interaction. This actually makes the interaction process look like a mess.
A good micro-interaction narrative flow is clear and smooth. Take a look at the following work and compare it with the one above:
Review images
The interactive narrative process is very simple and natural. While the motion effect on the left has a wireframes bounce effect, it is a detail enhancement rather than an overkill.
Tip:
Keep the interactive narrative process simple and smooth.
Key words:
Interactive narrative flow
If you can’t do it all at once, just give up
Almost all of the best microinteractions are one-step or one-step, and those that aren’t are often defeated by overly complex ones.
In this case, Romain Passelande (his Dribbble is not too bad) gave me a kick.
Review images
My friends who are not familiar with animation may not see what I see. There are two separate actions in this dynamic effect: line conversion and icon rotation. These two actions can actually be combined into one, but they don’t, and Romain separates them. If it’s not obvious, take a look at this comparison:
Review images
The dynamic effect on the left and right sides is to separate the conversion of the line and the rotation of the icon, while the dynamic effect in the middle is completed by a uniform movement, which is neither tedious nor cumbersome.
Tip:
Make sure microinteractions are done in one step, and if there are multiple actions at different times and locations, don’t do them at all.
Key words:
One step
Fourth, the problem is not in the dynamic efficiency, but in the design and planning
Those of you who have studied detailed UI animation will probably know that it is often difficult to create split detail actions with static samples. This is understandable, and a problem with good microinteraction design is that it is very difficult to get the motion right to every frame. Bad microinteraction design, however, makes it worse.
The table below is a summary of my theoretical knowledge of design and dynamic effects for your reference.
Review images
Generally speaking, people will strive for the spot position. I used purple and pink dots to help you quickly locate them in the middle of the project when you’re in a hurry.
Now let’s jump out of theory and into practice: how to split up action effects.
Review images
In this kinetic work by Sam Thibault, the confusing shift and shape change of the “Add to Cart” button fills in the space below the image, but it is too much and adds to the cognitive load of the user.
There’s a saying in filmmaking that if there’s a problem, there’s a problem with the script, and a bad script is a bad movie, and so is the design, and bad design is bad microinteraction.
Tip:
Make sure your design doesn’t have any problems before you start poking holes in efficiency.
Key words:
It’s not the motor effect
Five, do not omit any detail
“If you don’t catch the ball, you must miss the field goal.” That was Wayne Gretzky. Apparently he’s very good at dancing on the ice while avoiding collisions. When you think about it, this is an apt description of how interaction designers approach microinteraction design: there are too many details. Most designers aren’t used to doing 300-400 millisecond animations, so it’s easy to get sloppy.
The following piece was designed by Ivan Bjelajac, in which I found 5 details that could be improved.
Review images
1. The menu button and the back button can add a simple and elegant transition effect, and the menu button is not very harmonious when sliding on the page.
2. The yellow square’s right arrow zoom rotation effect is not necessary. It seems a little strange, but it should change with the content.
Fading body paragraphs are not necessary.
4. A title that slides from left to right is much better if it fades in and out of content than if it slides in and out.
5. The character photo was cropped when the image was converted to the top banner. It would be better to refactor the image to match the content.
It’s a far cry from the detailed action works below.
Review images
Tip:
The treatment of details can not be lax, do not omit any details.
Key words:
To grasp the details
conclusion
Here’s what I want to say: even if you don’t have any animation experience, it’s possible to make great micro-interaction designs if you keep these tips in mind.
- restraint
- Interactive narrative flow
- One step
- It’s not the motor effect
- To grasp the details
It’s not a guarantee that you’ll get great performance, but it’s a step in the right direction.
A collection of popular articles in the past
25 Epic Graphic Design Tips for Creating Great Design
The world’s ugliest Websites of 2015
Why is the Level of Japanese graphic design so high?
By Willenskomer
Review images
[Yushi.com original article submission email: [email protected]]
= = = = = = = = = = = = = = = = nets about optimal set = = = = = = = = = = = = = = = = “optimal set uisdc.com” is the most popular web designers learning platform, dedicated to share web pages design, wireless terminal design and PS tutorials. 100 Books designers Need to Read: The most comprehensive Guide to Designer books ever: hao.uisdc.com/book/. Design micro blog: with 1.12 million fans of the popular micro blog @excellent web design, welcome to pay attention to get web design resources, download the top design materials. Design navigation: the world’s top design website recommended, designers must navigation: hao.uisdc.com