Category: Website Optimization

How Eye Tracking Can Help You With Website Optimization in 2020

Eye tracking enables business owners and marketers to understand user interaction with their websites and landing pages. They can draw a lot of startling insights by using eye tracking with heat maps, and strategize the design of your landing pages.

Are you struggling to meet the desired business goals and want to consider eye tracking to peep into your user’s mind to uncover why? If yes, please read on.

What is Eye Tracking?

Eye tracking is the process of measuring and analyzing patterns of visual attention of your prospects when they land on your website. Fixation of eye movements is the typical metric of an eye-tracking system.

When collated over a period of time, the data can provide you with crucial insights, such as where on a web page or other pieces of digital content a visitor has looked and paying most of their attention. Analytical tools like heatmaps serve very handy when it comes to mapping eye movements.

What Eye Tracking Can Do to Your Website Design?

Eye tracking can provide you with valuable insights, such as:

  • Where your site visitors are looking and for how long are they looking
  • How did their focus move from one item to another on your web page
  • What parts of the user interface do they miss
  • How are they navigating through a particular page
  • How the size and placement of various page items are affecting their attention

Having said that, below mentioned are ten smart ways to use eye tracking to enhance your site’s design and improve conversions.

1. ‘Fold’ Isn’t as Important as You Think

People do scroll. You just need to give them the right design cues to prompt their curiosity and move beyond the first page fold. 

For instance, many marketers argue that placing your call-to-action(s) above the fold is always a better option as the chances of your visitors easily identifying and clicking on them are comparatively high. Several case studies prove otherwise. They’ve concluded that it typically depends upon your visitor’s motivation.

If, after looking at your audience’s eye movements, you think that placing your call-to-action on the left side of the page is not getting you the number of clicks as anticipated, change its position. Develop a hypothesis and run an A/B test. Rule out the guessing game and use actual data.  

2. Visuals Attract Instantly

Our brains are far more engaged by storytelling, especially when they’re accompanied by images and videos than heavy text placed all over the page. The reason being, people are more drawn towards visuals as they enrich their experience. 

See Google search results below from Moz’s eye-tracking study:

an eye tracking study of Google's SERP

Clearly, results with video thumbnails are getting more attention than textual results. 

Your prospects tend to look first at the image and then read on the text if the visuals are captivating enough. With this human behavior, the ball lies in your court as it can facilitate the rise in conversion rates by fast tracking the decision-making process of your prospects. 

Furthermore, the placement of your visuals and the kind of visuals you’re using matters. Exact Target, global SaaS provider of digital marketing services, increased their conversion rate by 40.18% by simply replacing their landing page image.

Formerly, the image on their landing page showed a laptop screen to draw attention to the announcement of the conference, giving a false impression that the event was a virtual conference instead of a live event.

control version of the landing page for ExactTarget
Control

However, their CTR shot to 40%, when they replaced the laptop screen with an image of a conference as shown in their variation below confirming that relevant images play a crucial role in pushing visitors down the conversion funnel:

variation version of the landing page for ExactTarget
Variation

3. Apply the Contrast Principle

Before-after examples allow easy comparison and force people to pay attention to everything you intend to bring to their notice.

Robert Stevens of ThinkEyeTracking.com experimented to confirm this behavior in real life. The first group of people was shown only the promotional items. 

The second group of people was shown promotional items stacked with full-price items. The eye-tracking study showed that these believed-to-be useless ‘pre-sale’ prices were not that useless after all.

Consumers from the second group took note of the full-price of items during the purchase. They were more satisfied with getting a good value for money rather than their counterpart, which was shown promotional items only.

contrast principle highlighted in the eye tracking study in an ecommerce mart
Encircled image shows consumers engaging with the full price of items that were stacked with promotional items.

4. Adapt to F-shaped Reading Pattern

It’s a human tendency to begin reading from the left side of the page and move towards the right. F-shaped reading pattern authenticates the same.

As a visitor lands on a page, they automatically pay attention to the elements placed on the left side of the page than the right ones and that follows even when they move further down.

a screenshot of a F-shaped reading pattern

So, this makes one thing clear — try and keep all your important content on the left side of the page. Underwater Audio, one of the leading eCommerce companies, used the F-shape pattern to their advantage and increased their sales by 35.6%.

They shifted important testimonials from the right side of the page to the left side so that they’re prominently visible before the call-to-action. As hypothesized, the testimonials influenced prospects’ thought sequence besides enhancing their user experience, helping them increase their sales as anticipated. 

Similarly, Baby Age website challenged the standard eCommerce design convention of keeping call-to-action (CTA) buttons on the right. When they switched the CTA to the left, they got a 16% sales boost.

screenshot of the website of Baby Age

F-shaped pattern also suggests that a website’s header gets a lot of attention. You should put information, such as free shipping, contact number, search bar, money-back guarantee, et al. in a strategic position to increase visibility and the website’s conversion rate. 

5. Guide Them with Directional Cues 

Human eyes tend to follow the direction they’re pointed in. As the call-to-action is your most important page element, you must point your prospects towards it.

Notice in the image given below how the arrow brings attention to the search bar immediately, making the purpose of the page very clear for prospects:

an example of how arrows on a website give directional cues

However, using a pointer is not the only way to guide an individual’s attention to a particular direction. With images, it gets more subtle than that. See this walking path in the image give below:

an image of a walking path in nature

Didn’t you naturally look where the path is leading in a quick first glance? That’s because the defined path is guiding your eye’s movement.

Similarly, eye-tracking studies have shown that it matters where subjects in images are looking. Subconsciously, people tend to follow the gaze of subjects and look in the same direction. This is illustrated in the image below, taken from an eye-tracking study[1]: 

a screenshot from an eye-tracking study involving the placement of photos

Make your subject look or point in the direction of your call-to-action (or important information you’re trying to convey) and test it to see how it impacts your conversion rate. 

ConversionXL conducted a research on which visual cues drive the most attention. They created variations of a lead gen page featuring different visual cues. 

The variations had one of the cues each from the following: 

  • Human looking away from the form 
  • Human looking towards the form 
  • Arrow 
  • Triangular graphics
  • Line 
  • Prominent form 

The following graph shows the results of how different cues impacted the average time of users looking at the form. Clearly, the variation showing an arrow pointing towards the form won.

a graph showing the results of how different cues impacted the average time of users looking at the form

6. Don’t Make Them Dwell on the “Dead Weight”

The Fitt’s law[2] principle states that an element’s ‘weight’ in the visual hierarchy determines the attention it gets. Your call-to-action should ideally have the highest weight on the page. But if a less critical, non-clickable element carries the weight that diverts visitors from the call-to-action, you must take measures to fix the visual hierarchy. 

A great example here is TechWyse’s case study[3]. See their original page below followed by its heat map:

screenshot of the landing page for Truckers Asset website

Heat map of the above landing page:

heatmap of the landing page for Truckers Assist website

The ‘No-Fee’ badge is attracting maximum attention on the page. But the problem is that it is a non-clickable element and hence, stealing away the thunder of the main call-to-action button. Removing the badge fixed the flaw in the visual hierarchy of the page, allowing the call-to-action button to get the attention it deserved: 

heatmap of the alternate version of the landing page for Truckers Assist website

7. Use Whitespace Wisely

Any space that is free from images or text is whitespace, no matter what color it might have. Appropriate use of whitespace increases legibility and allows natural eye flow on the page. As a result, essential page elements get the necessary traction and improve the chances of more conversions. 

Placing call-to-action and headline on whitespace helps to make them stand out on the page. When you use a larger-than-life image as the backdrop, it serves as a perfect whitespace to reel people in. 

Square Space pulls this off nicely: 

screenshot of the website of square space

Whitespace is extremely important to improve readability as well. 

an example of how whitespace is important to improve readability

The use of whitespace comes with a disclaimer, though. Too much whitespace can also give a sense of disconnect between your page elements. This is why when Trinity Insight displayed their product price closer to the ‘Add to cart’ button, it increased their sales manifold.

Their control looked as shown below:

an example of the control version of an ecommerce store

Their variation that lifted their conversion to 10% applied an efficient buy box strategy, as shown below:

an example of the variation version of an ecommerce store

8. Tune Your Typography

How you style or present your text is what makes people decide whether or not they’d want to explore and engage with your site. Crammed text like the one shown in the image above will dissuade people from reading it. But only taking care of text spacing isn’t enough either. 

Headings and subheadings must stand out to adapt to online scan behavior. Give them relevant h1, h2 tags. Use short paragraphs and sentences, and a font style and size that’s easy to read. See how you can easily spot headline and subheads in the squint test[4] below in the left image: 

a screenshot from the squint test conducted

Bullet points in the text also come handy when it comes to giving a quick overview to readers about the important points. Sometimes knowing what to emphasize can make a big difference. 

Royal Discounts, a leading eCommerce company, increased the font size of their sale price on their product page only to see their conversions improve by 36.54%.

Their control looked like as shown below with the sale price mentioned as standard text which was not standing out from the rest of the content:

screenshot of the control version of the website

Their variation, as shown below, had the price emphasized in the bold font that resulted in a massive rise in CTR as well as in revenue:

screenshot of the variation version of the website

9. Encapsulate What’s Important

The foundation of good visual hierarchy is based on prioritizing your website goals that are aligned with your business goals. Call-to-action buttons, lead-generation forms, or even some important points listed in a box can all work really well for your conversions. 

Frames draw eyes to what’s inside them. For example, Ozscopes rests buyer anxiety by addressing their main concerns in a neatly-designed box that cannot be missed on their product pages. Check out the image given below:

an example of how we can address the major concerns of visitors on product detail page

Conclusion

All the above points are necessary to understand how you should guide visitors’ eyes on your webpage for better conversions. 

However, you must do your research and ensure that your business goals are well-aligned with your expectations from the eye tracking tool, before finalizing it as a potential website marketing strategy for your enterprise.

The post How Eye Tracking Can Help You With Website Optimization in 2020 appeared first on Blog.

7 Thank You Page Examples That Can Boost Visitor Experience in 2020

Typically, a thank you page loads after a conversion has happened on your website, making it a step beyond your conversion funnel. But, have you ever given a thought that even this very page can get you repeat conversions? 

Extend Your Conversion Funnel Final

For most marketers, a thank you page is nothing more than a means to express their gratitude to their users for making a purchase on their website or subscribe to their newsletters. But, a thank you page has the prowess to encourage prospects to take many other desired actions on your site than just accepting your acknowledgement. They can give your business countless conversion opportunities and even increase revenues manifold.

If there’s one page that can serve as a goldmine for your website – it’s not your product pages or the check out page, rather… it’s the ‘thank you’ page.

In this blog, we’ll walk you through some smart thank you page examples to extend your conversion funnel beyond the Thank You page and scale up your conversion rate.

Smart Ways to Use your Thank You Page

Ask for Referrals 

Getting new business onboard is often an ongoing challenge for most online businesses. But there’s one smart channel which, when utilized properly, can turn into a great source of revenue: referrals. As per a survey conducted by Ogilvy, nearly 74% of people identify word-of-mouth as one of the primary key influencers in their purchasing decision. Hence, it’s no surprise that most businesses invest a lot in asking customers to refer them to their friends and family.

For example, Hubspot uses its thank you page to get more referrals from its customers.

thank you page for hubspot.com lead generation

The company believes that when a customer is content with their services and is ready to sign up on their platform, they’ll be more than happy to refer them to their peers.  

Increase Social Media Engagement 

In addition to referrals, another way to utilize your thank you page is to drive more social media engagement through the page. And, according to a survey, 39% of digital marketers around the world even believe that social sharing is a very effective tool to boost conversions

Punchbowl’s Thank You page is a good example to quote here.

thank you page of Punchbowl.com

As you can see in the image given above, rather than just placing social media icons on the Thank You page (as done by most brands), Punchbowl takes the time to explain exactly what their target audience can expect by engaging with their brand on Twitter, LinkedIn, and Trends Blog. 

Cross-Sell Your Products or Services

Although most marketers argue that a checkout page is a perfect page for cross-selling products and services, we believe that the thank you page is a better horse to bet on! 

The reason being, when a customer lands on a thank you page after making a purchase or subscribing to a brand’s blog site, they’re in their prime stage. Meaning, this is the time when customers are most likely to convert again than if they come back on your site after a month. So, use your thank you page to encourage your customers to buy more from you. Lure them by offering coupons or something valid only for the next 48 hours of their purchase, maybe? 

Bliss, with its clean thank you page design, provides a perfect case in point here:

checkout page on Bliss's ecommerce store

The page showcases the brand’s top-selling products, luring customers to check them out and even consider buying them then and there. 

Offer Relevant Content Material

The next amazing way to convert your thank you page into an efficient selling machine is by adding relevant and personalized content recommendation materials on the page. These could be anything – blogs, articles, white papers, product guides, eBooks, and so on. 

Pat Flynn, from Smart Passive Income, understands the importance of adding content guides on its website’s thank you page. After a person opts-in for his newsletters, the website showcases them a series of eBooks that solve a variety of popular customer pain points.

promotion of content on thank you pages

The tactic not only encourages people to download the guides but also helps increase engagement on the website. 

Add Testimonials

Some customers need more nurturing than others to make them to refer your brand to peers or follow you on social media channels.
In such cases, use the power of reviews. Make them read through some of your top client testimonials on your thank you page to ensure continuous engagement.

Best Fitness does this well. 

example of testimonial on thank you page

Collect Feedback

Notice the “Tell us what you think” box at the end of the Apple’s thank you page. Now a happy customer may not always click on the box and submit the feedback, but a frustrated customer most probably will. If not anything else, you’ll have some valuable feedback that you can work upon to improve your conversion rates in the future.

example of collecting feedback on the thank you page

Talk Money with Fully Nurtured/Returning Visitors

Another great way to utilize your thank you page to talk money with your fully nurtured or returning visitors. For these are the people who trust your brand and are ready to engage with it beyond just attending webinars or reading your site’s blogs. Ask them if they want a sales call or a product demo.

Here’s an example of how WordStream does it for its users who’ve signed up for its “Does Facebook Advertising Work?” ebook:

example of WordStream promoting ebook on it's thank you page

Basic Structure of a Thank You Page

While there are a plethora of ways in which you can design a thank you page, following a set framework always helps. Below mentioned are some basic things which your thank you page must-have.  

  • The thank you message,
  • Details of the conversion (like ticket details of the theater seat, transaction amount, show timings, etc.)
  • Communicate if any further action is required, such as stating any guidelines a user must follow. For instance, a thank you page must state if a user needs to carry an ID proof to collect tickets at the theatre counter, and so on. 
  • Brand contact details. 
  • What should the visitor expect next from your side, such as a phone call in one business day, an immediate verification email, SMS, and so on. 
  • What should the visitor do next? This should define the goal(s) of your thank you page 

Do’s and Don’ts of a Thank You Page

The goal of a thank you page, in addition to expressing gratitude to a person for making a purchase or taking the desired action on your site, is also to push them to the next stage, i.e., increase their chances of converting again. And, there’s no better way to achieve the goal than to keep in mind the following do’s and don’ts. 

Do’s of a Thank You Page

Show Some Enthusiasm

Don’t be boring! Throw in some power words such as “Congratulations,” “Success,” “Hurray! You’ve Successfully Done It!” which makes a user feel happy and wanted.

an example of displaying enthusiasm on thank you page

Add the Human Touch

Include a picture of the CEO, the team, video of any team member talking, or a human signature. This will add to the credibility of your website. And people are definitely more convinced to take action when they trust your brand.

Keep Your Call to Action or Text “Above the Fold”

You only have a few seconds to grab the attention of your customers before they close the tab. So, always add your call to action or important text above the fold.

example of call to action button on thank you page
Image Source

Display Your Ongoing Offers and Let Them Share

Showing ongoing offers and social icons to your customers on your thank you page is one of the best ways to push repeat purchases as well as increase social media engagement. But be careful about what you’re displaying on the page. Also, ensure that your products and social icons are correctly hyperlinked to increase engagement and conversions. 

Don’ts of a Thank You Page

Don’t Flood the Page with Too Much Content

Never add more than 4 to 5 lines on the thank you page. Unless really necessary, let the page give some breathing space for your site visitors. For it can be overwhelming for them to read long, winding content even on a thank you page. Besides, too much content may also make your CTA go unnoticed. So, be minimalist and engage better!

Don’t Promise Something You Can’t Deliver 

If you’re not sure whether your executives will be able to get back to your customers within the next 24 hours, then don’t such commitments! Instead, tell them you’ll get back to them shortly. It’s always better to convey what is true to your customers than making false claims and failing at a later stage.  

Don’t Fail with the Page Design

No matter if you put a lot of time perfecting the content of your thank you page, if its design is not attractive enough, it’s not going to grab anyone’s attention. So, work on your thank you page’s design. Make sure it’s nice-looking and has all the necessary elements to grab a customer’s attention.

To conclude, if a particular page has the potential to add value to your conversion goals, then why not leverage it? So what if it’s not a part of the funnel, it can still impact the metrics of the whole site and get more conversions than you could imagine.

The post 7 Thank You Page Examples That Can Boost Visitor Experience in 2020 appeared first on Blog.

How to go from “Zero to Hero” with Website Revamp

Got a website you’re not entirely happy with? Worse still, your customers aren’t entirely happy with it either. They’re not converting – and they’re not really visiting anymore. 

Here’s the thing, a poorly designed website can kill your conversions, and your whole company. The importance of a website for any business can’t and shouldn’t be underestimated.

But we get it, undertaking a website revamp can take up a lot of time, effort, and energy.  

Well, it doesn’t have to if you understand the key stages of a website revamp and stick to a plan. Moreover, once it’s done – it’s done.

Join us as we take a look at some website revamp best practices so you can take yours from zero to hero in one go.

Signs Your Website Needs a Revamp 

Before we get into the stages of a website redesign, let’s take a look at the signs which indicate that your website needs a revamp:

  • Your bounce rate is high – A consistently high bounce rate is one of the prime warning signs that it’s time to update things. It usually means that the user experience is poor and that your visitors are not finding the product or service they came on the website for. 
  • You’ve got technical issues – If your site is taking too long to load, looks horrible on mobile devices, or has any other big technical issues – it is time for a website revamp. 
  • Conversions are down – Let’s say that your bounce rate is actually pretty low, but your conversion rate is down too. While there can be many reasons for that (price, missing Call-To-Action, poor copy, etc.), one of those reasons is often poor UX optimization and website navigation. 
  • It’s old – If your website has not seen any major updates in years, it’s already fallen behind the latest trends and best practices. It’s time to give it an overhaul, even if the only thing you need is to bring the outdated website design to the 21st century. 

How to Improve Your Website in One Revamp 

Before you begin putting ideas into action, it’s a good idea to take a closer look at your existing data to help you take the next step. 

1) Assessing a Revamp: Dos and Don’ts 

The good news at this point is that you don’t have to overhaul everything on your website (phew!). 

In fact, there’s a very good chance that there are a number of things that are already working rather well, and which can either be left untouched or just tweaked a little.  

However, this is the time to concentrate on things that need to be changed. It’s a good idea to create a list and make a note of what’s working and what isn’t. To help you figure this out, a good place to start is tools like Google Analytics and dynamic heatmaps

  • Google Analytics – This powerful, free tool gives you insights into which pages perform better than others, which ones have higher bounce rates, and which ones lead to more conversions. Aside from that, GA can give you an in-depth insight into who your target audience really is and how are they finding you online.
  • Heatmaps – Heatmap tools are here to give you answers that GA can’t. While GA can tell you where the visitor has come from and how long they stayed on a particular page – it can’t tell you what they were (and weren’t) looking at and how they behaved – but heatmap tools can.

Review your target audience
Target audiences don’t always stay the same. For website revamp best practices, reengage with yours so that you know who you’re aiming your website at. 
Go back to the drawing board and create new buyer personas that firmly outline what your target audience looks like today. Knowing what they like/dislike will allow you to redesign your website in a way that will have a higher chance of striking a chord with them and get them engaged. 

Perform a content audit
If your business model depends on monetizing your organic traffic, this is a perfect time to perform a content audit. This will give you insights into your best performing posts so that you can decide which type of content to focus on, and which type of content to either drop altogether or at the very least, modify.
A content audit will also highlight your content gaps, which is especially important if you are putting (or plan to put) a lot of effort into content marketing. 

Perform an SEO audit
Last but not least, it’s important that you conduct an in-depth SEO audit. Since you plan to do a big website redesign, it is only logical that you want to end up with an SEO optimized website. 

2) Create Your Website Revamp Checklist

Armed with the data and knowledge gathered from your research, it’s now time to put together a website revamp checklist. This is a to-do list based on your analysis from the previous steps. 

Of course, this will differ from case to case That being said, we will cover things that usually end on this to-do list.

To do #1: Overhaul your content marketing strategy
Content continues to be important for the success of your website, but it could well be that a poorly planned and executed content marketing strategy was the reason your bounce rate was high in the first place.
Take another look at your target audience and use the information you’ve gathered to create more content that hits the spot with them. You can use tools like BuzzSumo, Quora, and Answer the Public to help you understand what type of content you should be producing more often.
Then, put together a stronger content marketing strategy going forward so that you start to pump out regular content that boosts your conversions. 

To do #2: Pick the right host 
Revamping your website into something you can be proud of is a great feeling. However, one technical difficulty is enough to ruin the user experience. Review if part of your current issues is related to your hosting provider. 
If that is indeed the case, just switch your hosting – there are plenty of affordable web hosting providers you can choose from.

To do #3: Focus on brand consistency 
A key element of your website revamp strategy must be brand consistency. If you lose this, you will lose out because customers look for brands they recognize and can connect to.

Source

 Therefore, it is important that your fonts, typography, logos, color schemes, and images are consistent across all your pages, and that they stay consistent beyond your website too – from email and social media to business cards and brochures. 

It’s important to remember that your branding doesn’t have to be loud and eye-catching. It can be simpler and understated – as long as it matches your brand personality.

Developing a strong brand identity can only help you to build a better relationship with your target audience.

To do #4: Optimize for Search Engine Optimization (SEO)
You have probably already read countless articles about the importance of SEO, so we are not going to drill you with that. You know it is important and should be a part of your website revamp strategy.

To do #5: Improve the user experience 
One of the most common reasons why a website performs poorly and needs a revamp is that the user experience is awful – be it because the website is too colorful, too cluttered, too difficult to navigate, takes ages to load, features broken elements, and so on.
Don’t fall into the temptation of cramming every single inch of your website with copy, images, and content. Instead: 

  • exploit whitespaces in order to make the prospect feel more relaxed and at ease
  • take the time to organize your pages so that it’s easy for your customers to get from A to B easily
  • use gathered data to optimize your CTAs (for example, heat maps can tell you if people are getting distracted by other elements on your page when they should be focusing solely on your CTA)

Be it your blog, featured pages, or landing pages, make sure you apply web design principles that work.

3) Execute the Website Revamp Strategy 

It is time to get to work. Do what you know you can, outsource what you can’t – don’t half-ass things just to save a few bucks – you will just end up needing another revamp a year later.

You could begin with a soft launch and gather some feedback first. That way, you won’t waste unnecessary time on a total website revamp that hasn’t quite worked.

Make sure to test, test, and test. This includes testing your site speed using Google PageSpeed Insights, the navigation of your website, and its mobile readiness. Test on different screens to see how things work and function, and cover all the bases. 

Ask friends and colleagues to test the website too. It is always a good idea to have some fresh eyes that were not a part of the revamp process. 

Website Revamp Examples 

Before we go, let’s take a peek at a few websites revamp examples to showcase visually what you need to aim for. 

Here’s Rev’s before website:

Website Revamp Example #1- Rev

Source

And here’s the new look:

Source

The before website looked dated with its retro graphics, while the latest version looks modern, crisp, and clean. The font is much improved and bang-up-to-date with audience expectations. They introduced simple animations that give more dynamic to the page, but are low-key enough so as not to distract from the CTAs. 

Website Revamp Example #2 – ATW

Here is ATW’s before website:

Source

And this is their after version:

Source

The above is a good example of a simple revamp which aim was to replace an outdated look with its modern counterparts. Just by looking at these screenshots, you can see that this now looks like a legitimate business website and not somebody’s blog from 1999.

Conclusion 

The next step is to solidify your own website revamp strategy using the advice in this article and get to work. A website revamp doesn’t have to be super time-consuming. If you can get the right team on board, you’ll soon be well on your way. 

Once it’s done, you’ll have a fresh and clean website that pulls leads in, instead of turning them away. Then, it’s just a matter of consulting your analytics for polishing tweaks that will ensure you keep moving in the right direction. 

The post How to go from “Zero to Hero” with Website Revamp appeared first on Blog.