CRO Minidegree Review — Week 2

This is the second post in the series of twelve posts where I will be reviewing CXL Institute’s Conversion Rate Optimization Mini-degree, once every week. In this post, I will be covering Best practices in designing some important pages on websites.

Best practices, at best, are starting points to relook at your pages. This post highlights some important principles which ideally should be considered while designing or redesigning important pages on your website (and a lot of these would apply for mobile apps also). However, these should be used only for drawing from the experience of others. Your actual design choices should be driven by your data.

So, let’s dive straight in:

WEBFORMS:

Most websites have forms for activities like signup, lead gen, inquiry, etc. However, most forms are poorly designed. What a waste of conversion opportunity! Our top priority when looking at redesigning forms is reducing friction. Here are some of the key things:

1. Set clear expectations: The user should know what kind of information would the form need. Don’t surprise the user negatively. For example, suddenly asking for the credit card information would lead to massive drop-offs vs. pre-informing the user before the form is getting filled. Visual cues can also be added showing stages in multi-step form — 1. personal info, 2. payment information, etc. Another good practice is to mention the time it will take to complete the form or what to expect after finishing the form.
2. Minimize the number of form fields: A good thumb rule here is to ask only for what is absolutely needed and skip asking for optional information. If you need to ask for it, indicate clearly that the field is optional or differentiate it visually by using/avoiding symbols like *. A good practice is clarifying why a piece of certain information is needed or how will it be used. It is important to note that removing information ask isn’t the best practice always. Sometimes, asking for relevant information needed to serve your product or service right can actually help your conversion as well. This brings us to the next point.
3. Improve lead quality by increasing friction: You might want to ask a few additional questions which, while increasing the length of the form, will help in getting more qualified leads. It can help you with lead scoring.
4. Multistep form: Long forms are overwhelming and they hurt conversions. A better alternative is to break a long-form into smaller, more manageable steps. A good tip here is to store the most important data like name, phone number, and email id as soon as that step is done (for non-EU people — GDPR compliance). Include progress bars to give a sense of progression. Another way to manage long forms is to organize the form fields into different sections.
5. Start with easier fields: To get people started, always ask for easy fields like name or email id first — it helps in gaining momentum. Small tips in managing the fields are as follows:

• Keep field labels — preferably on the top but can be on the left if the form length is long. Avoid inline or left-aligned labels.
• Keep labels in normal font. Bold font is difficult to read.
• Use drop-downs where the choice of fields is more than 5. Else, radio buttons will do.
• Keep a single field for getting password but have the option “Show Password” to reduce error

6. Pre-select whatever is possible: An example of this is auto-populating city and state once a user enters pin/zip code.

7. Feedback & error validation: Nobody wants to see an error message. So, do whatever it takes to avoid them in the first place. This can be achieved mostly by making requirements clear upfront. Real-time inline form validation also helps.

8. Avoid captchas: Equally bad for bots and humans.

9. Address Fears, Uncertainties & Doubts: Trust seals conveying safety & security of user’s data are important to build confidence.

10. Form analytics: Understand the fields which cause the most friction and optimize them.

ECOMMERCE CATEGORY PAGES

The purpose of the category page is to help users find what they need. It is achieved by narrowing choices based on the user’s criteria, sorting them in the order a user would want to see, and making users understand if a product is the right choice for them or not.

1. Use filters: Identify the criteria to chose your product category and make those available at filters. Filters can be put on the top or on left-hand side depending upon how many choices are possible. Left side when the number of choices are limited.
2. Product badges: Used to highlight certain products. Use self-explanatory badged sparingly to make them effective.
3. Sorting: Make choice easier by sorting products in logical orders which can help users to decide. Think price, customer ratings, etc rather than the date of uploading, which, for a user, doesn’t add value.
4. Photos, Name & Description, and Price: These help a user decide if a product is the right fit for them.
5. Breadcrumbs: Ideal for navigation and orientation
6. CTAs: Test if they help with traffic to product pages. Don’t scare users away with “Buy Now” — chose CTA wisely.

BUTTONS & CALL TO ACTION

The objective is to make clear what the next step should be. “Don’t make me think” and “now what” should be our guiding principles here.

To make the CTA noticeable, do the following:

• Identify the single most important action you want the user to take on a page — that’s primary CTA
• Use a Button rather than a link
• Make it Big enough
• Use a good amount of whitespace around it
• Use a different color from the rest of the page to make it stand out
• Use the right copy

For CTA copies, a good formula to use is to have your CTA finish the sentence “I want to …”.

3 important things to keep in mind while writing CTAs:

1. Specific: What happens after clicking must be clear.
2. Conveys a benefit: Start making money!, Get Conversion Tips, etc.
3. Contains a trigger word: Words that trigger users into taking action. If the user is looking for ‘pricing’, and your link says ‘pricing’, they’re going to click on it. So in this case, ‘pricing’ would be the trigger word.

FOLD & PAGE LENGTH

The further down the page you go, the fewer people scrolled there — mostly true. So, serve the most important information first.

People should be able to complete the primary action on any page without having to scroll down.

ECOMMERCE SIGNUPS

1 in 4 people abandons online purchases due to forced registration.

Offering guest checkouts help but giving 2 choices on the same screen upfront can be confusing for the user. There are better ways to handle it.

Some tips:

1. Land users to a tab for signing in. Another tab can be for new users. This shows only one option to the user.
2. Another good way to ask for email id only (if the user selects that she is a new user) or email id & password (if the user selects that she is an existing user) — this helps in capturing important information for abandoned cart recovery.
3. An even better way is to take the user to guest checkout by default. People with existing accounts can log in via link, and new clients are offered to create an account after they pay.
4. A great thing to do is to offer an incentive to create the account after the purchase has been made. A lot of important information has already been captured like name, email id & address.
5. Social logins — reduces the process to one click.

INCOMING PHONE LEADS & CALL TRACKING

Getting people to call you takes work. It doesn’t happen on its own. Things to take care of:

1. Have the right offer — Give them a reason to call. Communicate a benefit that they’re interested in.
2. Ensure right visibility — Offer should be put in 2 places — above the fold and in the bottom half of the content (at about 75% down the page). Make it prominent enough so it gets noticed.
3. Measure every step — Set up pone tracking with Google analytics. We want to know:

• What did they do before calling? What pages were they on?
• Which page did they call you from?
• What PPC or SEO keyword did they use?
• Which online marketing really sucks

HOMEPAGES

A homepage has two main goals:

• To give users information
• To provide top-level navigation towards additional information further inside the site.

Every homepage needs to answer 3 questions:

1. What can I do here?
2. Why should I do it?
3. How’s this better/different from other offers?

The second goal of the homepage is to get users deeper into the sales funnel. So, a clear “Call to Action” is important.

PRICING PAGE

Pricing is a crucial part of sales flow. Reducing friction here impacts conversion directly. Here are some important principles:

1. The higher the price point, the more we need to explain
2. People have no clue what they want to pay for a product or service. So, don’t ask them. Test and find out what works better.
3. Things to test — multiple vs single price (usually multiple options work better), decoy pricing, price anchoring, pricing ending in 9s etc. A very detailed post on pricing by Peep Laja is here.
4. For variable prices, offer a quote calculator or give them a ballpark sense — weeds off a lot of unqualified leads.
5. Make your pricing easy to understand and compare. What does a user get in one pricing option vs another?
6. Address FUDs (fears, uncertainties, doubts) using FAQs.
7. Incentivize long-term commitment — discount on annual plans is a good way.
8. A clear CTA on the pricing helps to direct users towards the next step.

SHOPPING CART PAGE

This page is closer to sales. Hence, it is very important to improve conversion here. Here are some important principles:

1. When people add a product to their cart, there must be a clear confirmation of the product addition to the cart.
2. Post product added to the cart, you can either keep the user on the same page or redirect him to the cart page. Both approaches have their pros and cons. This needs to be tested. The objective here is to optimize Average transaction value & Average quantity per transaction.
3. Display cart contents well — the contents of the cart, shipping cost & taxes, etc. must be clear. It should also be easy to control — update quantities, remove products, update sizes or shipping information.
4. Get visual hierarchy right — 2 CTA buttons (like Amazon), trust badges, etc. help.
5. The coupon field must not be very prominent
6. Remind users about Shipping (cost or free), return policy & that their transaction is secure.
7. Maintain a persistent cart — helps users to pick up from where they left — whenever they come back.

CHECKOUT PAGE

This is where you get paid. Even a small improvement here could be massive in terms of returns.

1. Start with small asks — Name, email id, shipping info etc. before asking for card information — build on the principle of consistency & commitment.
2. Design a payment form that looks like an actual credit card. Test to see if this helps conversion.
3. Make it look secure — SSL logo, conveying that their payment is safe and protected, etc. can help.
4. Store the card information, if possible. Of course, you have to deal with compliance but it is totally worth the effort.

There are other areas also for improvement like website speed, visual hierarchy, user search experience, etc. I have tried to cover all the important pages here. A summary of this post can be seen here.

Here’s the link to the previous post.

Happy learning!

Yatin