Use transition animation to promote the payment user experience

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, 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 http://www.aliyun.com/zixun/aggregation/17019.html ">stripe checkout", we have done a lot of research on the experience design of mobile payment. Also cost a huge amount of time to 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.

The animation is sufficient to illustrate the usability of 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.

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 when the information is wrong (especially in the payment process), the error message will make users feel frustrated, the process of checking will be confusing, and eventually the user will be directly to give up and continue to fill out the form. 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.

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.

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, make them feel that the completion of payment is a pleasant thing.

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 everyone else, I don't like web design 10 years ago. But this transition animation will improve the user experience, let users 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.