I use cookies to give you the best possible website experience.
By using COIDEA, you agree to our Privacy Policy.OK, CLOSE

How to get people to sign up to your website, product or a newsletter? The question is simple and the truth is out there, I'm sure. You can find various tips and methods everywhere on the WWW how to do it successfully. Some tips are good, and some are a total failure. Let's be honest.

COIDEA - Sign up Flow Visualization

Today, I do not want to go into details and write yet another article on how many fields must contain a registration form or which fields... or how to do it successfully. All I want to show today is how to visualize the registration process in an interesting way.

As we know, sign up forms are not the most likable web pages. They force the user to share personal information that he might not be comfortable with sharing, and as a result these pages usually have very high bounce rates. This is the moment when this visualization of the registration process becomes important. Whether your sign up form is for a product, mailing list or a webinar, the goal is always the same  —  have as many users sign up as possible. Visualization of the registration process can help you to keep users longer on the sign up page as well as to give them a fun during the registration process and in the end, to get more registered users.

My demo has several animations made with TweenMax. Before you begin filling out a form, you can obviously notice a small and simple animation when you look at the rocket. :) After we populate the first field, we will start the first step of our main animation in the demo. The rocket will move and be "one step closer to launch". Also, in this step, we activate the first animation on the icons. After completing the second field, we will move the rocket step closer to the launch, animate icons again and activate the submit button. After clicking on the submit button, we will launch the rocket and see the animation to display "Thank you" messages. And yes! I would like to point out that validation was created only to support this idea of the visualization and it would not be wise to use it (without upgrading security) in production.

I hope that you will enjoy and that you will agree with the fact that registration forms do not always have to be strict and boring, as we can see on many websites.

References and Credits