Teach you to use the transition animation to enhance the user experience

Indeed, designing a form style seems to be a tedious and hard task compared to creative design activities such as drawing illustrations, creating theme pages, and designing the UI. But think about it, if you design a form that is the most important part of the payment process, the situation is different because it will be the starting point for the user to choose you and your business, as well as a testament to the user's trust. Therefore, the user experience of this link must be carefully carved, as far as possible to perfection. In addition to designing tables and UI styles, a reasonable use of transition animations can make the experience a lot better.

The animation used in this place is not simply a pleasure to the user, but the more important purpose is to let the user know what is happening and how to use the product efficiently. If the lack of animation in this link is something to be missing, then the animation is successful. If you remove the animation, the user feels that the same can be used, meaning that the animation is optional.

As the design team of stripe Checkout, we have carried on a lot of exploration in the experience design of mobile payment, and have spent a great deal of time experience. For the payment link animation design, we have a deep understanding. On the first day of designing stripe checkout, we began to focus on using transition animations to enhance interaction, because we believe it will greatly improve the user experience of the payment app. To show how it works, I'll use a few animated examples to illustrate this.

Input

The animation of the transition in the above figure is sufficient to explain the usability of the cartoon to the user. Click on the "Remenber Me" selection box, enter the contact method of the selection box with the transition animation gradually unfold. The occurrence of the animation will enhance the user's clear awareness of the "single box" and "input contact method" is linked, and is a direct causal relationship.

Jitter

When we fill out a form, it is often easy to overlook a few small mistakes, which makes it often necessary to comb through the places that may be wrong. However, many times, the system reminds us of the time when the information is wrong (especially in the payment process), the error message will make users feel frustrated, the process of checking will be at a loss, eventually the user will be directly to give up and continue to fill out the form. A small vibration of the interface, with the wrong content of the logo will clearly tell the user, information is wrong. This kind of interaction behaves like shaking the head more humanized, thus reduces the user churn rate.

Illusion

Using a good transition animation may make the user feel that time is faster than it actually is. Everyone knows that when the user is waiting, time will be slow like a snail. However, when the waiting process has animation effect, even if the waiting length does not change, people's attention will be attracted to the past, it will naturally feel the time passed. This animation effect is to use the human illusion of time.

Transformation

Subtle animation changes are my favorites. The image above is converted from payment info to pay $25.00 using minor color transitions and sliding effects to remind users that the process is advancing. And when the payment is complete, the color changes from blue to green, the change is obvious and eye-catching. After clicking on the pay, there is also a brief dynamic icon showing the success of the payment, reminding the user to pay the completion. I particularly like this design, because it will make the user feel the satisfaction of the completion of payment, so that they feel that the completion of payment is a pleasant thing,

Additional Design

This transition animation is actually a bit redundant, because removing it will not affect the entire operation process, nor will it affect the usage experience. But its presence can enhance the experience of the operation process.

Like others, I do not like the design of the website 10 years ago. But this transition animation will improve the user experience, let the user feel the design of goodwill, attract users to pay attention to the details and gain trust.

My cases, are in the ordinary people do not care about the details of the increase in the transition animation, improve the overall user experience. No matter what kind of application you're building, the proper use of animation can make users more aware of the results of the operation, change their perception of time, and make them happy.