Improve UX that Will Result In Higher Conversions

When you invested in a website, your main plan was to use it as a platform to advertise your business and in turn offer valuable information to your site visitors. This would subsequently lead to tremendous prospect-client conversion rates and amazing revenue.

But,

This is not the case. Your website is experiencing a high bounce rate, low sales and you seem to be getting less traffic as time goes by. Have you ever stopped to think that an unfriendly user experience could be the reason for these frustrating circumstances?

What is user experience (UX) and why does it matter?

UX or User experience is basically what happens when your users interact with your business through online communications, application or website. It entails what your users or traffic see, do or hear, as well as their emotional reactions. This means that any unpleasant thing results in high bounce rates.

When your user has an unpleasant experience in your site, he or she will immediately leave and opt to visit another business, which is most likely your competitor. In all common sense, your clients will simply leave, give bad reviews and never come back.

Is that all?

No! An excellent user experience has several advantages. It reduces customer dissatisfaction and churn. It is reported that 47% of people expect a web page to load in two seconds or less and 40% of people will abandon a web page if it takes more than three seconds to load.

A great UX increases sales and online conversions. Do you know why? 52% of online shoppers claim that quick page loads are important for their loyalty to a site while 14% will start shopping at a different site if page loads are slow.

Also, 23% will stop shopping or even walk away from their computer.

Your brand perception is positively enhanced when your site visitors have an easy time surfing through your business website.

Here is proof:

50% of your site visitors will have a less positive perception of the company overall after a single bad experience and more than a third will tell others about their disappointing experience, further increasing your brand’s negative perception.

Now that you know:

Are you seeking to improve your UX? Here are several tips on how to do it and in-turn experience higher conversions.

Tip 1: Increase Your Site Speed

Have you ever loaded a page online, went to your coffee maker, made the coffee and still came back before the home page loaded? Were you patient with the site after that?

I guess not. This is exactly what your site visitor’s feel when they visit your website and experience slow site speed.

What do you do?

Increase your site speed!

In 2012, Tag management supplier, Tag Man, ran a test that sought to find out the correlation between page speed and conversion behavior. The study found that there was a very significant relationship between your site speed and conversion rate.

To understand this concept, the researchers measured the impact of average paid-load time a user experienced, and his likelihood to convert on the site. It was discovered that the conversion rate peaked up to two seconds, after which, it dropped by 6.7% after each additional second.

Here is the complete graph:

Basically, one-second delay in page load can cost you 7% loss in customer conversions.

Really? How can you calculate your conversion loss?

Well, it is pretty simple. You need to use a conversion loss calculator that will compute how much revenue you could earn by speeding up your website. This will help you set goals and even track your ROI. In addition to that, you need to deal with things that slow down your site.

Is that all?

Your site speed has an effect on your business’s SEO. Simply put, low speed leads to bad SEO hence lower conversion rates.

Here is why:

Since 2010, Google has been incorporating site speed as a ranking factor. This was after the search engine ran usability tests in 2009 and found out that slowing down the results search page by 100 to 400 milliseconds has a significant impact on the number of searches per user, ranging from -0.2% to -0.6%.

This is further proof that you need to increase your site speed. But before then, you need to know the underlying factors.

Okay, so what is slowing down your site?

There are about 20 things or more that could be slowing your site down, hence the low conversion rates. We will briefly explore some of them.

Problem 1: Bloated HTML

In addition to increasing the amount of data that should be transferred to your visitors, a bloated HTML could have a significant negative effect on JavaScript when manipulating the DOM.

Problem 2: Social Sharing Buttons

I am sure this is a shocker to you. You sure need to incorporate your Twitter, Facebook, Instagram, Google plus and LinkedIn among other social networking sites to further increase your conversion rates. These buttons help your site visitors share your content to other people, thereby increasing traffic.

We agree, but here is the problem:

The external JavaScripts that make social sharing buttons work, are responsible for significantly slowing down your web pages especially if you have not loaded them asynchronously. Remember that JavaScript is sending information from your site to the external site.

These factors contribute to the ultimate speed:

Your server’s response time, the site visitor’s speed to load social media buttons from a different location and servers, the distance to the social media’s website server and social media button load time, depending on the visitor browser technology.

When one of these works against your favor, a ripple effect is created and boom! You site gets too slow. One business to experience this is Narga, in which, social sharing buttons for a total of just 19 requests took 246.7k in bandwidth.

Here is an example of a business that experienced higher conversions after removing social sharing buttons.

Source: VWO

In addition to increasing the site speed, the site visitors were not distracted from the main goal, which was buying. As a result of this action, taloon.com experienced 11.9% more conversions.

Problem 3: Using Public Networks For Private Data Transfer

When scaling, many publishers and developers opt to split their database and web servers. While this is good, the big mistake is failing to connect to two private networks and opt to use one public network. This results in a huge bottleneck and point of failure that can easily impact website performance.

Problem 4: Sharing Web Hosts

The affordable cost of hardware, purchasing or leasing powerful servers has made it easier for businesses to get affordable hosting services. Even then, some still opt to use shared web hosting services.

 

Yes this is cheaper, but;

Did you know that if the host runs a poor-performing application your website will also perform poorly? This also happens in cloud environments.

Problem 5: Using The Wrong Web Server

There are numerous web servers out there and you definitely want the best. Most likely you are torn between Apache and IIS, which are mature and very viable options. But, the pertinent question is whether your preferred web server is the best choice.

Before settling on a web server, there are certain factors that you need to consider. Making the best web server choice is hinged on cost, support and capabilities among others. This means that failure to consider these factors, especially capabilities, would in turn slow down your website.

Tip 2: Optimize For Mobile Devices

There is enough evidence that mobile usage has tremendously increased in the past years. This means that it is utterly important for you to optimize your website for mobile devices. Do you know why? Let’s refresh these statistics that you already know.

46% of mobile users report having difficulty interacting with a web page while 44% complain that webpage navigation was difficult. Additionally, 48% of users say that if they land on a website not optimized for mobile devices, they perceive it as a sign that the business simply doesn’t care.

Okay, so where is the evidence that optimization will increase sales?

Let’s look at one more statistic. Did you know that 62% of companies that designed a website specifically for mobile had increased sales? Here is one such company.

Proflowers, a business dedicated to help you deliver fresh flowers to your loved ones, decided to optimize their website for mobile devices. The business had 3 main goals- to make flower orders easy for mobile shoppers, increase mobile conversions and continually improve mobile user-experience.

The approach:

The business created a mobile-friendly site with less text and streamlined check-out, deployed and progressively tested Google mobile ads and also used an analytics tool for insight and mobile optimization. At this point we highly recommend using the all-in-one TruConversion analytics tool.

The results:

The business was able to establish its leadership in the mobile space amongst other floral retailers. It was also able to increase its conversion from mobile users by 20-30%. Currently, the website’s traffic now entails 15-20% of mobile visitors.

Look at how high ranking the business was in the first quarter of 2014:

Source: SearchEngineWatch

Now that you know, it is time to optimize your website for mobile devices.

So, what are the ways of optimizing for mobile devices to increase your conversions rates? We explore a few of them.

Strategy 1: Design For The Device

It is crucial for you to remember that people navigate differently on tablets and mobile phones compared to desktop computers. This group of people has a different characteristic from people who use computers.

This is what Google found out:

Mobile users are goal-oriented. They expect to get what they need from a mobile website immediately, easily and on their own terms. This aspect consequently requires marketers to strive to understand their mobile market, design their sites to conform to their visitor’s needs, but not to sacrifice their content’s richness.

You also need not be too ambitious when designing for mobile devices. Users also complained about some of the common mobile site features. For example, it is frustrating to keep pinching and zooming in order to clearly see small features in a page.

Confusingly though, some people complain about sites that do not allow them to zoom in order to see the small site features. This fact further emphasizes the need to understand your audience. Reading though customer reviews on the user experience is a great source of this information.

Important tip:

In addition to a mobile site, it is prudent to include an app for your business. Grocery chain Safeway is one business that has used this trick.

Strategy 2: Ensure That Your Call-To-Action Is At The Front and Center

Remember when we said that mobile users are a more focused lot than computer users? Failure to consider this when placing your call-to-action will sure lead to lower conversion rates. What exactly do you want your site visitors to do? Where is the focus?

Is it to buy? Download an app? Send referrals? Whatever the case, you want higher conversions. Place your call-to-action buttons at the easiest places they can be seen. This is at the front of your webpage and at the center. For faster conversions, make it easy for one to click on these with just one finger.

While you do this, ensure that your most persuasive element of your site start’s first. For example, look at how Ruth’s and Chris steak house has organized its mobile landing page.

Strategy 3: Incorporate Site Filter and Search tabs

Believe me, when a user visits your site, sometimes they know what they are looking for. If not, they might see something that would trigger their curiosity, hence the need to find out whether you are offering what they need. This is where the search and filter tabs come in handy.

Why include the filter tab?

Filter tabs help your site visitors have more accurate results. This in turn saves them time and makes their search less frustrating compared to when they have to sift through numerous search results to find a particular thing.

For example, imagine a user looking for laundry services in a particular city when your business has branches in more than 10 cities? He or she will probably have irrelevant information on other cities popping up. However, filters that allow your site visitors to search based on location and among other choices is a great addition.

Ralph Lauren, uses filters quite well in its mobile site. The screenshot below shows how another business, Grantnet, has effectively used filters to narrow down search results.

Source: Grantnet

Strategy 4: Give Clear Interaction Cues

There is one clear difference between computer user experience and mobile user experience. This is the interaction cues. When you hover your mouse over a web page on your computer, your cursor has the ability to change and show you clickable links.

Unfortunately, most mobile websites lack this feature. Viewing sites on mobile devices can be slow sometimes and this gets more frustrating when you accidentally click on a link that you didn’t know was unclickable. Then you subsequently have to wait for the site to slowly get back to where you were.

Here is how your website should look like after you use the signal and cue features.

Strategy 5: Refrain From Being Too Iconic

We understand that you want to put as much information as possible in the small mobile phone screens. So what do you do to seem smart? You turn everything into an icon! While this is genius on your part, you are set to experience lower conversions rates. Well, unless your site visitors are sophisticated digital natives.

Why hide your entire navigation menu then turn it into three lines full of symbols? Maybe your website is full of information and you do not know how to group it and present it in an organized way. Let’s see how Goodyear has organized their webpage.

If you must use icons, ensure that you have used as few as possible. Look at how Verizon has used only 3 icons for navigation, detailing the rest on the information on other parts of the webpage.

Tip 3: Use Animations

Animations are sometimes perceived as distracters. While this is true, effective and clever use of animations in your website could better your UX and in turn generate higher conversions. Generally, there are 4 ways that you can use animations in your site.

Does it mean you need a site overhaul?

Absolutely not! A site overhaul is unnecessary when adding animations to your site. Almost any site can take advantage of animations by tweaking a few things here and there. For example, you can change your loading sequence, navigation or call-to-action.

How can you find these functions?

It is pretty easy. Several new web development capabilities allow easy implementation of animations. CSS3 for example has a complete library of animation functions, which can be used on any element on a web page.

This means that animations are not only accessible to established and advanced websites and mobile apps, but also other less advanced websites. In our view, this is great news, right? No matter the type or cost of your website, you can get great animations to drive up your conversion rates.

Let’s explore some rules to follow:

Rule 1: Focus Your Animations On Where You Need The User’s Attention

Remember we had earlier indicated that animations have the potential to distract your site visitors, causing them not to act like you would want them to. This is why the first rule of animating emphasizes on placing your animations in places where your users will not be distracted, but at the same time, appreciate your website’s look.

Did you know that visuals that move on the screen attract different amounts of attention based on their location on the page and speed? The ‘back to top’ button is a great example to use. This button enables your users to jump back to menu after reaching the bottom of a page. This is good but,

Here is the problem

This could be a complete distraction from the main content. Instead of looking at what the webpage contains, a user is more focused on the web page’s side bars. For example, look at what happens at the Festival of Marketing site. It has two main problems affecting their conversion rates.

Here is a video on what happens on the site:

First of all, site visitors spend most of their time on the left side of the screen, focusing on content from left to right. This aspect causes the visitor to pay more attention to the animation than the content itself.

Secondly, the speed of the objects attracts immediate attention. Instead, the user should be exposed to this feature after reading the whole webpage.

What happens if this was fixed?

Here is a video that explains it:

As you have seen, the button has been placed on the right side of the screen, seeming less conspicuous on the user’s visual field. Instead, more focus is on the sites content. In addition to that the button remains in one location and instead fades slowly.

The result:

Less attention on animation and more focus on the content. Ultimately, users get to see the web page content before moving back up.

Rule 2: Only Use A Loading Sequence That Will Keep Your Users Interested

Before we delve on this rule, it is of utmost importance that you remember our statistics in a webpage loading time. One-second delay in page load can cost you 7% loss in customer conversions. We realized that increasing your site speed was a great solution.

But, there is another interesting one:

Use animations to hide your slow load time by visually occupying your site visitor. Here are 3 examples on how to do this.

Example 1: Use Multi-part Transitions

While giving a presentation for Intel, on how to avoid loading indicators, Luke Wroblewski gave the participants insight on how to make a website seem more active and prevent loss of conversions.

In one example, Wroblewski talked about the Google Search app, which uses transitions to keep the screen animated while preparing search results. Basically, the page uses 3 transitions to load. It first slides in from the right, loading bar progresses from the left then the content smoothly fades in.

Google search app is actually adhering to the principles of webpage animations, outlined by the UX research firm, Nielsen Norman Group. According to the firm, fast animations grab user’s attention while slow animations draw less attention, causing the site visitor to focus on the content.

This means that a combination of the two speeds work perfectly in engaging users, without necessarily diverting attention from content. This is an art that Google Search app seems to have effortlessly used.

This is what Wroblewski says:

You can watch the video here.

Example 2: Loading A webpage In Pieces

Basic animation can be achieved with backend web development. Facebook engineering for example uses BigPipe to make the site load faster in a cool way.

The process uses JavaScript and PHP to break down the homepage into pagelets, which individually load on the webpage simultaneously. As a result, the page appears in chunks, loading in parallel.

The next time you are on Facebook, be keen to notice this. Your timeline loads its layout, followed by the advertisement column. The left-hand menu then pops up and lastly, your chat column appears on the right hand.

As you can see, Facebook is first interested in feeding you information on your timeline. This is why the timeline loads first. You can incorporate this aspect in your website too.

Example 3: Make Use Of Skeleton Screens

These screens are responsible for completing the user interface incrementally before fully loading the content. The content cascades onto the page skeleton, subsequently keeping users interested during slower load times.

See how this works:

This is a great way of hiding your load time as well. The skeleton images load faster because they are small and in small sections. It is also a great addition when optimizing for mobile users because the images can be locally stored, allowing you to use more complex images.

This is what Wroblewski says about skeleton screens.

Rule 3: Periodically Give Users Feedback On What Has Been Accomplished

Have you ever visited a site and an animation popped up telling you that there was an error or the site was not working as expected? This was very valuable information that informed your new-found perception on that particular business.

According to Katie Sherwin from Nielsen Norman Group, who reiterates our earlier statement, using animations to give users feedback on the current working state makes site visitors more tolerable.

Here are two proven ways you can use to increase user gratification:

Example 1: The Beauty Of An Animated Shopping Cart

It has been reported that an animated feedback can help users navigate a busy interface by topping the visual hierarchy. As a matter of fact, these can be used to confirm if an action was taken.

Look at this example from Vimeo

The beauty of this technique is the fact that even if the site owners decided to use a very complicated shopping cart, the user would still not lose track of purchases made.

Example 2: Easily Detectable Warnings

Animations sometimes do what text cannot do. For example, show you that an action has been completed real-time. Text is generally good at giving warnings. Look at this example.

As you can see, the text warns the user not to click twice. However, it does not indicate if the first click was successful. This is what Katie Sherwin says about text:

The solution:

Use an animation that will indicate success or failure. First of all, disable the button after it has been pressed. At this point, animation can be used to emphasize that the page has been disabled and also show that the submission has been received.

For an ecommerce website for example, there are several ways of improving the payment experience with animations. Look at what Stripe does for example.

At first, the client is asked to pay $25.00 for a product as seen in the screenshot below.

The user pays and receives instant feedback on whether the payment has been received or not. See the screenshot below.

The green line and tick confirm to the buyer that the payment has been received and it’s time to proceed to the next step.

Rule 4: Prevent Your Users From Getting Lost

Reportedly, site visitors lose the context of what they are viewing if web pages change instantaneously. As a matter of fact, abrupt changes are hard for users to understand. As a result, they will find your website to be user unfriendly and opt out.

Method 1: Use Animated Page Scrolling

In this method, it is important to let your site visitors see where they have left and how they have landed in the next page. Don’t allow them to spend more than 3 seconds to figure out where they have landed and how.

Method 2: Use Expanding Forms

Who loves filling endless forms? No one! As much as your prospects will have the patience to wait till the very end, using forms that open in other pages is enough reason for your prospects to leave. So, what do you do instead?

Build sign up forms that will lead to higher conversions. A great way is expanding the forms. This is however not a chance for you to create an unnecessarily long form. Only include relevant fields and as you expand, ensure that your prospect knows why that field is important.

Animations will help show where new objects are coming from. As a result, a user will understand that his actions are what caused the new fields to appear, most likely for important reasons.

Tip 4: Improve Your Check-Out Page

Finding the best and affordable product in a website is already hard enough. Now imagine this hustle coupled up with an extremely long check out page. Would you buy? Reports show that over 60% of customers abandoned their shopping carts without completing their purchase.

One of the main reasons for this is a poorly designed check-out page. To improve user experience and in turn experience higher conversions, it is advisable that you consider redesigning your shopping cart.

First:

We will explore 4 main checkout conversion killers.

Killer #1: Inconspicuous Shopping Cart Button

You will be shocked to realize that there are many instances when a shopper visits your site, picks an item he likes , adds it to cart and instead of checking out, forgets all about the transaction. Normally, the fault is in a low-key shopping cart button that a user hardly sees.

Look at this example:

Solution:

It should always be obvious to your shoppers that they added something in their shopping cart. You can refer to our earlier tip on how to use animations and incorporate them in your shopping cart. A checkout or continue shopping animated call-to-action would really help.

See this improvement:

Killer # 2: Slow or Non Dynamic shopping Cart

At this point, we need not remind you the importance of a fast load time for businesses. A slow-loading shopping cart will cause a significant shopper bounce rate.

Truth is:

Shoppers don’t want to keep updating their shopping cart to keep tabs with the number of items bought. Worse still, they don’t have the patience to wait another 5 seconds before the system refreshes and updates the cart.

Solution:

Ensure that your checkout page is dynamic and automatically updates itself once a new item is added to cart. See this screenshot for example.

Every checkout element has been highlighted in green and is calculated automatically and immediately, without refreshing the entire page. As a result, there is less customer friction and great improvement in the conversion rate.

Killer #3: Long Uncategorized Forms

One company experienced shopping cart abandonment of 80%. These frustrating statistics caused the business to set out to understand why they had such a high abandonment rate and also find solutions to the problem.

The goal:

The company strived to reduce the abandonment rate to 70% and seek 50% increase in sales. After extensive analysis, the business discovered that their checkout had a few problems. Long uncategorized forms, lack of guarantees, lack of live customer support and lack of customer testimonials.

The company rectified the problem and as a result, had an abandonment rate of 54% and great conversion rates.

This is how the old and new forms looked like.

Source: Kissmetrics

Killer #4: Forced Registration

It has been proven that forcing every buyer to create an account before buying anything from your online store for example, massively cuts down your conversion rates. A survey carried out by e-consultancy found out that 25% of shoppers abandoned their purchases due to forced registration.

Your reasons for forcing buyers to create an account are valid. After all, it is one way of generating leads. However you could be depriving yourself of impressive revenue.

Here is why this is a big deal:

Let’s look at this problem from a shopper’s point of view. When a shopper comes to your website to buy stuff, he will most likely see something he will like and add it to his cart. At this point, his mind is fixed on buying an item and nothing else.

Then boom! Somewhere along the way, the buyer is forced to generate a password. What are the chances that this buyer would stay? Very slim if you ask. The good news, is that there is a small yet significantly profitable way of fixing this.

Here is how one company corrected this mistake:

User Interface Engineering replaced a ‘register’ button with a ‘continue’ button. This one simple tweak generated approximately $300 million in revenue.

How it started:

Before then, users had to register before entering payment information. The idea behind this act was that first time visitors would not mind the extra effort while repeat clients would purchase faster. The business afterwards realized that clients were not there for a relationship but to get what they needed.

After analyzing the system, it was discovered that 45% of all clients had multiple registrations, some having up to 10 of them. There were about 160,000 password requests per day and 75% of people who requested for passwords actually did not finish the purchase.

The $300,000 tweak:

The register button was replaced with a continue button and a message that told clients that registration was optional. Additionally, the business highlighted the benefits of registration, leaving the client to make the choice.

The result:

Number of purchasing clients increased by 45%, and the business earned an extra $15 million in one month. In one year alone, the business made $300,000.

To properly deal with this issue, it is essential that you learn checkout page strategies to improve your UX and increase your conversion rates.

Final Thoughts

In writing, we say, content is king. But in business, customer is king! This means that you need to strive to ensure that your clients get only the best. Of course, as we have discussed, user experience is a great determinant of your conversion rates.

We have discussed in depth, 4 key tips on how to improve your user experience. These are increasing your site speed, optimizing for mobile devices, using animations in your website and improving your check-out page.

We hope that you will incorporate this advice in your business and feel free to share with us your results. In addition to that, the best way to learn how to improve your UX is by listening to your prospects and clients. Take their suggestions, criticism and comments seriously.

While you are at it, remember to check your conversion rates and analyze how your business is progressing using an all-in-one analytics tool that we offer here at Truconversion. You can read our customer testimonials for proof that this is a must-have.