There are so many reasons you would want someone to register for your site. Whether you have an e-commerce site and want to get users’ emails for your abandoned cart and email marketing blasts or you planned a webinar and want people to sign up through your landing page  - you want those users to register! It’s a great way to increase returning users and you can use it as a tool to increase purchases or other conversions you have for your site!

 ”The probability of selling to an existing customer is 60 – 70%. The probability of selling to a new prospect is 5-20%” -Marketing Metrics

Here are 9 Best Practices for registration form optimization- and at the end of this post you’ll get an update on our latest case study results for the Registration Page Test we ran with Piktochart!

1. Short Is Sweet

If you can reduce the amount of required fields you need in order for users to sign up, try it in a test.  The thing about people these days is that we have a lower attention span than a goldfish (As of 2015 research, we have 8.25 seconds attention span, and a goldfish has a full 9 seconds).

 

In that same research, statistics show that only about 28% of words are read on a page with over 593 words, but 49% of words are read on a page of 111 words. Just to put this into perspective, 593 words is longer than the amount of words in Taylor Swift’s song, Shake It Off, and 111 words is the first verse and chorus of that song.

 

This means we want to keep our registration page with a minimal amount of words, and a low amount of fields because we want people to:

a. Stay  attentive for long enough to register.

b. Feel assured it will end quickly and easily!

This is important to test and not just change on your registration page as it is dependent on your target audience. There have been businesses who have found that when you actually increase the amount of fields you get less registrations, but those who do sign up are more likely to become paying customers. So test and see how your audience responds, checking both registrations and final conversions.

If you find that you need to add more fields, and you cannot make it short and sweet – consider splitting your registration page into easy, simple steps over a few pages and keeping a progress bar so that users always know where they are in the process and how close they are to the finish line! (aka completing the purchase you oh-so-want them to make). If you do decide to test this, we recommend you set up event tracking on each button to track the progress of users through the steps. If there is a drop on a certain step – work on optimizing that page!

2. Keep It Clean

When you want someone to do something on your page, you want to make sure they do only that and have no distractions. You want to make it clear that this is what you want them to do. It’s a simple website optimization technique – take away all distractors. As we saw before, data shows that many internet users do not have a strong attention span. That not only relates to time but also- oh look! A cute puppy and baby youtube video!….You get my point. Therefore, you want the least amount of distractors on your page so that people focus on doing what you want them to do: register.

Another tip to help focus your user is using an image that directs attention to the Call to Action you want them to click on or form you want them to fill out.

 3. Personalize It

Part of registering for your site involves trust. The user needs to trust that:

1. You will not give out their private information.

2. You will not bombard them with emails that are not interesting to them.

3. Signing up will give them value.

4. You are a trustworthy and honest person and they want to join your community.

You can use geo-location to personalize a site,  meaning you show the user that you know where they are. This can appear in many ways. You can make a site in their language. You can put the currency of a product to their local currency. You can give a local phone number for support, or offer free shipping! All of these will help users want to register more!

4. Make It Easy

If you can spare your users the time to fill out the form, do so. For example, if you need an address, perhaps ask for a Zip Code – and then City and State are all filled out! Or use a drop down menu that guesses the completed outcome, so that people can stop typing early.

5. Guide Your Audience

Nothing is more annoying than being told you are wrong about something when you didn’t have all the facts in the first place. You should be clear about what you want your user to do. If you write just “Username” and “Password” within the fields but the Password needs to be 7 characters long and include numbers and a capital letter, you’re going to need to tell the users about it, before they get that error message. There are different ways to do this. You can write it into the form field (showing them what you want them to do) or with small text or a question mark by the field.

6. Social Sign Ups

The Big Dilemma. We discuss in our articles on CTAs and conversion optimization and how important it is to have just one call to action. But then there are Social Sign Ups, and if you offer the Facebook login, do you offer a Google +Login? and then you have two Calls to Action! But if someone doesn’t have a social login, or they prefer not to connect to their social profiles, do you also provide an email login as well?

Well, in this case we would start with considering your product. What information would be most useful for you? Are you providing a newsletter, in which case you’ll want an email? Or are you capable of providing notifications, etc on social profiles?

Next, if you found that you prefer collecting data and connecting with users via their social profiles, we would recommend researching your target audience. If your target audience is young and tends to connect with social media, consider putting only one social login option. If you have a range of audiences, consider placing on large call to action, and other options as text links below. Or if you want to put all three, which we considered doing, you can do so but give them equal priority so people can choose what they are interested in most.

7. Something Special For Mobile

Statistics from 2015 research show that Mobile Internet Surfing time is now passed desktop and other mediums, mobile at 51% compared to desktop at 42%. This shows you how crucial it is to be able to access your site from mobile. But the mobile experience is very different from the laptop experience. It is touch screen, the screen is smaller,  and the loading time can differ. Therefore, you should make sure you have a separate registration form specifically fit for mobile.

8. Use Helpful Validation

Validation means when you make sure that your user has filled something out correctly, and if not, they get an error message. Error messages show up when someone forgets to fill something out, or they didn’t follow the directions correctly, or their phone number was entered in the wrong format and they get a message saying “Hey! Correct this!” This is the aspect of the registration process that a lot of us don’t think through but there are good ways to validate and there are not as good of ways. You can also have your registration page validate while an individual types it in to the box, or when the person hits the “submit” button. We recommend you think this out and match it to your page – whether you have a pop up alert, or small red letters near the appropriate field.

My favorite registration process is by Prezi and I’ll tell you why.

First of all, when you put in information, Prezi have these exclamations in green that interact with you and cheer you on. I wanted to fill out more info just so I could see what was waiting for me! They also use conversational language like “So what do you do?” which feels like they are really just trying to get to know you. Lastly, they give options to connect with LinkedIn or Facebook in case you are interested, but use text links so as not to give more than one call to action.

They use humor in their little exclamations, like “You’re on a roll!” which made me smile while going through the process as well – I won’t tell you all the text so that if you ever go through it, you’ll enjoy the surprises. But that’s not all – they have very clear Validation messages as well:

They show you what you got right with the green arrows and the green outline, and they show you what you’re missing with both a red line and an explanation. They keep true to their straightforward style by explaining to you why they want you to fill out that field – to give you a better experience! It feels personal and motivating.

The Registration page is that page in the process where a user decides whether they are sticking with you and want to get that added value, or not. So make sure that, from the homepage, your users know what they’re getting. Use these tips to make the registration easy, straightforward, and filled with the energy you want your users to feel!

 

And now, the moment you’ve all been waiting for…(*drumroll please*)…  The Piktochart Registration Test results!

Original:

Variation:

We designed a page that had less text above the fold, emphasized email more so than social log ins by moving them under the email registration, and kept the energy going from the previous page through the registration process with the bright colors, the fun mascots, and the big bright button. We kept the social proof (testimonials and relevant numbers) on the page below the fold for the information seekers who still weren’t sure.

We tried two different variations actually – one with the social logins below the email sign in, and one with the social logins beside the email registration – for equal focus.

Overall, these pages increased registration conversions by 14%!

What does your registration page look like and do you have your own registration best practices?

 

 

The call to action button is one of the most important elements of your conversion optimization funnel. Designing high converting call to action buttons requires planning; In this post we’ll cover important information about CTA buttons, check out different landing pages and their call to action buttons & learn how to optimize them for better conversion on websites, emails and blogs.

The CTA Button

The call-to-action (CTA button) is an element that most commonly appears as a button or a link prompting visitors into taking a certain action. A CTA button can be anything from a ‘subscribe’ button trying to get people to sign up to a service or blog to a ‘purchase’ button getting people to complete their purchase or pay for a service. There are 3 key elements you should follow regarding your call to action buttons:

 

1. Attention
2. Messaging
3. Strategy

These 3 key elements have a large impact on a  CTA’s conversion rate and can make a world of difference by simply optimizing them:

Attention

Creating effective call to action buttons leads to higher conversions, the first part you want to address will be the attention the call to action buttons grab. A call to action button has to stand out and be the first natural place a visitor turns to. By making sure your call to action button is attention grabbing you’re making sure more people click on it. That being said, you do not want to exaggerate or overwhelm your visitors with a huge button, there are additional ways other than size that can grab your visitors attention:

Size

Size does matter. Compared to other elements on the page you want to make sure your CTA button stands out. The size of an element on your landing page will indicate it’s importance so make sure it is larger than any other buttons or links. This tip applies not only for landing pages but checkout processes too, the call to action has to be more dominant than other links or buttons and if possible, all others should be removed.

Color

The color of a button has a huge effect on its conversion. Other than the psychological effect colors have on purchasing habits, colors are a great way to make your call to action button stand out and be more prominent. Use highly contrasting colors for your CTA relevant to the elements on your landing page. Place your call to action on a background that helps bring out the CTA and doesn’t swallow it. Charity:Water has a great landing page that uses both a highly contrasted button color – blue on a green background and uses the image of the girl to direct attention to it. The use of this specific image is very interesting, it would be interesting to test different emotional triggers on this type of landing page.

Image

The image of your landing page takes the biggest part in your CTA’s attention. Other than making sure that your image isn’t grabbing all the attention from your button, the image can be a huge help and indicator for your users. Our brains process images 60,000 times quicker than text, meaning the image you have on your page will have a crucial roll in pointing people in he right direction. Make sure all your elements and images are complementing the call to action button and in some case even pointing at it. This landing page has 3 important elements emphasising its CTA:

• The size of the button – making sure the CTA is the most dominant on the page
• The Image clearly points to the CTA
• The color is dominant and noticeable

An image doesn’t necessarily have to point to an image but it should be connected to it in different ways – the image will determine where visitors look and move to use it as an indicator. Have an image of a person staring in the direction of a button or have the other landing page elements gather around the button. This example by Incredimail shows how to have different elements surround the button and draw attention to it: Another great example by Cheezburger.

 

Whitespace

Framing the CTA button with whitespace is a great way to detach the button from other elements on the page. Whitespace gives call to action buttons a more dominant presence. Basically by allowing enough whitespace (nothingness) around your buttons you’re giving it a more dominant place on your page. Remember: You don’t want the space to be too big as it can create an illusion of disconnection from the page entirely.

Positioning

The oldest rule in the book: place your CTA above the fold. The ‘above the fold’ area is the part of the landing page visitors see without needing to scroll. This area is where you place all your important elements – the CTA for example. The majority of visitors do not scroll and since you only have a limited amount of time to convert visitors into customers you have to position the CTA where it can be seen immediately.

Microsoft places their call to action buttons at the bottom of their page, making visitors scroll all the way down to convert (if they did actually go looking for the CTA). Not the best idea.  

Messaging

When designing your call to action the text and messaging has a huge impact on its conversion rate. Having a call to action button that just says “submit” or continue” isn’t enough to drive conevrsions and add value to your visitors. There are 3 rules to follow regarding your button messaging and text:

• Short and to the point

• Action oriented

• Clear and easy to understand

Convey a sense of urgency and value in your call to action buttons. Make sure the text stands out, offers true value to the visitor and tells them what to do. ‘Roon’ has a great call to action button in both contrasted color (giving it the full attention it requires) and action oriented text. The button provides exactly what a visitor is looking for: to begin writing a post. Another bonus is the supportive text they’ve added below the CTA, giving the conversion requested extra value.

CTA Best Practices

Before we move on to the third and last element of the CTA (strategy), check out these different types of call to action buttons we can learn a lot from: Avocode’s call to action button collects emails and leads for their beta launch in a great way. A few good points to look out for:

1. There’s only one field to fill in
2. The high contrast of the button color against the background
3. Great amount of whitespace around the CTA.
4. The use of the color blue projects calmness and trust

Gengo’s call to action is a great example for:

• Highly action oriented allowing visitors to start the funnel in seconds.
• The button is large enough to call attention to itself
• Its color is the same color as the footer which projects trust and empowerment.

Another cool example by Whistle -

• The dog pointing towards the CTA
• The call to action button in full contrast to the landing page
• One thing I’d change: The video button takes a lot of attention from the main CTA, one way to solve this is to move below the actual call to action button and not have it as a button, but more as a link.

Strategy

The call to action button is not enough. The CTA button is part of a larger element – the landing page. The call to action button needs to compliment the landing page by adding value to your visitors and more importantly making the next step obvious. The entire landing page should convey a certain strategy and emotional trigger. Having a good call to action on a landing page with no strategy is not enough. Remember you only have 2.8 seconds to convert visitors into your funnel, after that 40% will be gone. Make sure your landing page and call to action offer actual value to your visitors, and help them navigate through your site with ease. Call to action buttons are the gateway to your funnel. Build and design them in a way that opens that door and invites people to convert.

Have you ever thought about the effect the color of your landing page has on your visitors? With the average time on page decreasing from year to year (now 2.4 seconds), we have a limited amount of time to convince our site visitors to stay and convert. Our brain processes images and colors much quicker than text, which is why the image used on a landing page and its colors have a significant impact on conversion rates.

In past posts we’ve discussed creating the right call to action buttons on landing pages, connecting with your customers emotionally and which tools to utilize for higher conversion rates. However, we’ve seldom discussed color which has a large effect on conversions and ties in with all three. When it comes to persuading your users to take the action that you require colors have proven emotional effects on people and can affect the performance of your landing pages dramatically. For example,

• In 2011 a research found that people who are exposed to the color red react in greater speed
• Another interesting research found that the usage of blue streetlights was believed to prevent street crime!

Throughout the course of our research period at Conversioner for any client, colors are examined and tested to discover what effects they have on different customers and how we can use them to make people feel certain emotions without the need to say it. For example, instead of saying a business is trust worthy and well-known you can use the color blue which is considered to make people feel safer and relaxed. Purple on the other hand projects “prestige” and royalty.

The emotional affect of colors is discussed vastly when it comes to decorating rooms and offices for their effect on people’s moods. So why not start considering it when optimizing a landing page? It’s not just about brand colors.

The Emotional Effect of Colors

Choosing the color palette for your sales site is a science. Wired into the human psyche is our emotional response to different wavelengths of color. Every color on the color wheel evokes a different mood or feeling. While color effects can be subjective, and vary from culture to culture, some colors have a universal meaning. For example, red is perceived as a warm color, and blue as a cold one. Since every color stimulates a corresponding reaction, we can use these emotional built-in triggers to our advantage on landing pages and in call to action buttons. Check out these call to action buttons below and the emotional effect of colors on conversion:

Let’s consider a few examples:

• Impulse shoppers respond best to red, black and royal blue. You’ll find these colors in fast food outlets, outlet malls and clearance sales – and they can work well as call to action buttons for impulse purchases.
• Brands with a friendly, cheerful and confident brand personality will use orange in their corporate livery and on their websites: Fanta for example, is all about taking action, right now!

• Looking to attract users who want stability and safety? Check out the brand colors of companies like American Express , Skype and Pfizer and choose blue for your website. A call to action button in blue will be saying: lean on us; you can trust us; we will give you a reliable service. Navy blue catches the attention of shoppers on a budget.

The Emotional Effect of Colors on Conversion

Whilst it goes without saying that your call to action buttons need to command attention without overwhelming your design, you can go a long way to improving your landing page performance with the right colors. So, if you find yourself asking, which color converts best, think of the qualities your target audience admires or resonates with, think about the action you want to provoke in your users. Guide your users through your sales funnel by using color cues to persuade them to make the choices that lead to conversion.