5 tricks to get the interactive effect done

First of all, I think you will have this question: what is micro-interaction (micro-interaction)?

Carrie Cousins from Uxpin, an online interactive prototyping tool, gives the following definition: "micro-interaction is the detail optimization of a single interaction process on an interactive device." ”

Maybe it's not too easy to understand, so just read it a few more times.

Before we get to the point, one thing I'd like to say is that the UI that I'm going to analyze next is a very powerful hand of God. I have great respect for them and their work, and they are very happy to share their experiences and unfinished manuscripts. But in my analysis of the work of many designers are very poor attitude. That's not my style. I look at design with a serious eye, but I can express my opinion in a entertaining way. If I happen to say something unpleasant, please forgive me.

　One, look at the hand-painted board, restrain yourself

Designers, like a budding flower, need the attention and care of the Qian (Jin) heart, but in the design of high-quality micro-interaction, before you finish is full of devastation.

Dynamic design is a good way to try new ideas and accept results. The following work comes from Sergey Valiukh (a person who is particularly cool in terms of font, typography, color, and motion).

Credit Sergey Valiukh

Let's analyze this one frame by frame:

1, the first can most intuitive feeling is the picture of "3D flip" effect, which in my opinion is completely unnecessary, or even illegal (a joke, just make sure you are still looking). In this work, it would be a good idea to take away any extra action and make it simple.

2, second, you may notice that the image in the preview stream is cropped, while the original size is in the editing interface. This is clearly not feasible in practical applications.

3, 3rd, you can pay attention to the top navigation bar icon transition time is particularly long. It would be great for the first time, but it would be annoying to see it for a long time. The micro-interaction should be quick, concise, and have a significant speed change, with a maximum duration of 300~400 milliseconds.

4. After reading these, let's take a look at the bottom, where the two icons do not appear at the same time, which means an incorrect interactive narrative process (extra emphasis) and an extension of the understanding time.

Conclusion: There are many such parameters to be considered in the design of the dynamic effect. You need to be clear about what you can use, what you can't use, where you can be short, where you don't have to spend too much energy, and get a clear and easy-to-use experience. This is not to say that you can't be wild and add some interesting details, just that the details may make the whole look cumbersome.

Tip: Get rid of the extra parts. Do you always remind yourself whether these details have kept a simple micro-interaction, or have the interaction experience become worse?

Key words: Restraint

　Second, do not sacrifice the narrative for the sake of effect

The interactive narrative process (narrative) is important in the user experience, partly because it is related to the expectations of the users, that the coherent interactive narrative process does not exceed the consumer's cognitive load, and partly because it is related to the way our brain collects and understands the information pattern. Besides, it's also related to our mental model. In short, the interactive narrative process is important.

The work of Srikantshetty (a strong animation designer) presents us with a very "good" example.

Credit Srikant Shetty

See the first feeling of this dynamic is not very strange, thought to be on the line input text, but it popped up a hidden text box. This sort of click-eject-Input interactive narrative process is annoying, perhaps to look cool. However, this interactive narrative process interrupts the expected flow of information when we enter it. We have to stop to face such an accident, adjust the mentality before we can continue to operate.

When designers have "inspiration", they will probably design this bizarre interactive narrative process. They tend to spend half a day on the effect of blowing up the sky, but they don't care about the core narrative process of the interaction. Doing so actually makes the interaction process look like a mess.

The good micro-interactive narrative process is clear and smooth, look at the works below and compare it to the above:

Credit Andrej Radisic & Matt D. Smith, respectively

Stand up, interactive narrative process is very concise and natural. Although the left side of the action has a wireframe bounce effect, it has played a detailed optimization effect, rather than gild the lily.

Tips: Keep The interactive narrative process simple and smooth.

Key words: Interactive narrative process

　　If you can't do it in one step, just give it up.

Almost all of the best micro-interactions are one-step or process-consistent, and those that are not very good tend to fail in overly complex dynamic effects.

In this case, the Romain Passelande (his dribbble not too good) to make me "tiger body startled."

Credit Romain Passelande

A friend who is not very familiar with animation may not see what I see. There are two separate actions in this dynamic: the conversion of the line and the rotation of the icon. These two actions can actually be merged into one action, but actually not, romain them apart. If it's not obvious, look at this contrast:

Credit Naseer Ahmed

The left and right sides of the dynamic effect is the conversion of the line and the rotation of the icon two of the action, the middle of the dynamic effect is to use an action uniform completed, neither cumbersome nor cumbersome.

Tip: Make sure that micro-interaction is done in one step, and if there are multiple actions at different times and places, then simply give up.

Key words: One step complete

　　The problem is not in the dynamic, but in the design planning

A friend who has studied UI fine animation may have a deep experience: it's often difficult to make split-detail moves with static samples. This can be understood, good micro-interaction design will have the problem: it is very difficult to make the action accurate to each frame. However, poor micro-interaction design makes people more vexed.

The following table is my summary of the theoretical knowledge of design and dynamic effect, you take it as a reference.

Generally speaking, everyone will try to point to the position. Dot I use purple pink so that everyone in the project in the middle of the time to quickly locate.

Then let's jump out of the theory into practice: How to split the action of a dynamic effect.

Credit⋈sam Thibault⋈

This is a work performed by Sam Thibault, and the puzzling transformation and shape change of the "Add to Cart" button in the artwork fills the blank below the picture, but it is superfluous and increases the user's cognitive load.

In the film production process there is a saying: if there is a problem, it must be the script out of the problem, the bad script is bad film, design is the case, poor design is bad micro-interaction.

Tip: Make sure your design is fine before you start working on it.

Key words: Not the action of the wrong

Five, do not omit any one detail

"You'll miss the shot if you don't catch the ball." "That's what Wayne Gretzky (the hockey player) said. Apparently he was good at avoiding the impact and dancing on the ice. Think carefully about how appropriate it is to describe the interaction designer's micro-interaction design: There's too much detail. Most designers are not very accustomed to designing 300~400 milliseconds, so it's easy to muddle through.

The following works were designed by Ivan Bjelajac, and I found 5 details to be optimized in this work.

Credit Ivan Bjelajac

1, menu button and return button can add simple and elegant transition effect, menu button with the page on the slide is not very coordinated.

2, the yellow square right arrow's scaling rotation effect is not very necessary. This may seem strange, it should change with the content.

3, gradually fade out of the body of the paragraph is not necessary.

4, from left to right to slide the title if it is from the content fade from the words will be much better than sliding fade.

5, in the picture converted to the top of the banner when the character photos were cropped. It would be better if you reconstructed the image here and echoed the content.

It's a far cry from the following dynamic works that are strict in detail.

Credit Colin Garven & Nick Frost &ramotion, respectively

Tip: Treat details without being lax and not omit any detail.

Key words: Grasp the details

Summarize

Here I want to say that even if you don't have any animation experience, as long as you keep in mind the following points, you also have the possibility to produce exquisite micro-interactive design.

Restraint

Interactive narrative process

One step complete

It's not a bad move.

Grasp the details

While this does not guarantee that you will be able to make a good move, it is in the right direction.