Saving the high street: Using experimentation in-store to improve customer experience

Living in a world on fast forward is no easy thing. 

Dramatic transformation takes place in every aspect of our lives, every industry and every sector. Staying in the game is posing new challenges for businesses across the globe. And in-store retail is particularly vulnerable. 

This blog focuses on explaining the challenges retailers are facing and why experimentation could be the path for success in the new world of customer experience. 

The current state of retail

After the Great Recession in 2008-09, a new era started in the consumer market. A golden age of consumption driven by the dazzling evolution of technology. Anyone with a mobile phone and an internet connection got access to virtually any product or service. 

As a consequence, the previously almost non-existent online channel became absolutely crucial for most brands. E-commerce sales rocketed and expectations are that this trend will continue.  

However, in the offline world, things became less pink. With online taking up more and more market share, alongside fierce competition, polarising economics, high rents or rising taxes, led to more and more retailers cutting their losses and pulling down the shutters for the last time. 

Despite the headlines showing a gloomy perspective, more than 80% of the sales still come from stores. A FirstInsight report shows that consumers spend more time and money when purchasing in-store compared to online.

So then what is going to happen to the brick and mortar?

The transition from sales/sq foot to experience/sq foot

As the uprise of the online will continue, there is only one way the stores will be successful –  brands must embrace the paradigm shift that is taking place. Simply distributing products is no longer enough, as consumers today are not relying on stores as their sole means of access to goods. The reason consumers still go to stores is to engage with the brand, its products, and culture in an emotional way that cannot be replicated online. It’s the experience that drives them in.  

With more and more sales being attributed to mobile, social and online channels, continuing to measure success only by the conventional sales per square foot will indicate diminishing productivity for stores. This, in turn, will lead to more closures and missing out on a huge opportunity: capitalising on the in-store strategic importance to delivering powerful, unique experiences that create engagement and loyalty with a brand. 

So, how do we measure this new goal of optimising the customer experience?

Alongside the traditional ROI metrics, brands need to define their ROX (return on experience) KPIs. The first step is mapping consumers’ purchase journey and isolating the touch points and factors that drive experience. Then, invest in the parts of the company that will move the needle on those interactions and yield measurable results. It’s all about the ‘magic moments’.

In their Global Consumer Insights Survey 2019, PwC offer a list of questions to help build the baseline for ROX KPIs.

But, unfortunately there’s not much that has been done so far to define them. The well-known Net Promoter Score, which as many as two-thirds of Fortune 1000 companies use, is based on a single question concerning whether the consumer would recommend a product, service or company. Many companies hire vendors to track customer experiences with call centres and web properties. 

Coming up with good KPIs to optimise for ROX will probably be one of the milestones for the new retail industry in the upcoming years.

Delivering in-store customer experience through experimentation

So, why is experimentation the answer?

In the online world, user experience has increasingly become the focus of brands over recent years. We now have UX design teams trying to create products that provide meaningful and relevant experiences to users, and experimentation programmes that are letting us know how a change would impact KPIs before implementing it. More and more online businesses rely on experimentation to inform their decisions and strategy and improve CX (customer experience).

However offline, things are quite different. Management usually introduces ‘innovations’ aimed at improving revenue without analysing data and understanding what difficulties customers are facing or where the opportunity lies. Sometimes they get it right, at other times, it results in catastrophic failure. 

One example of things going wrong is that of J.C.Penney. In 2011 Ron Johnson, Apple’s senior VP, became J.C.Penney’s CEO. Without any testing, he immediately introduced a change that decimated Penney’s revenue. He introduced technology, which took over the cashiers’ duties. This made the checkout experience too formal. All forms of clearance sales and discounts stopped. Also, high-priced branded products became prominent in the stores. It took only a year and five months after these changes for J.C.Penney’s sales revenue to crash to an all-time low. Management reacted, relieved Johnson of his position as CEO and went ahead to reverse the changes. 

Blockbuster, the multibillion-dollar video rental giant, is another example. The company faced decreasing popularity in 2000 because of unreasonable ‘late’ fees customers had to pay if they didn’t return their rented movies in time. One of the proposed solutions for the problem  was to run a simple and cheap ($12,000 only) email-as-a-reminder experiment. But this was rejected on the basis that it’s not a ‘grand strategy’. Too simple. Instead, they came up with a transformative, big-budget effort to eliminate fees backed by a huge advertising campaign. The plan proved to be both unpopular and, ultimately, illegal. The estimated legal and business costs of this ‘extended viewing fee’ fiasco exceeded tens of millions of dollars. 

And there are plenty of similar examples. The conclusion – this is not a game of chance. As the era of ‘bricks and clicks’ and omnichannel is upon us, it’s time for the online techniques to be reflected offline and experimentation put to good use.

Surely everyone should be experimenting in-store then?

Testing in-store does pose significantly more challenges than online. And the main reason for that is organisational and technical complexities.

Having multiple store branches in several locations adds to the difficulty and complexity of experimentation. While online tests give access to a large pool of consumers from which companies can do a random sampling of any number they want, this type of sampling is not possible with brick and mortar. Carrying out experiments on thousands of store locations is simply not an option.

This challenge usually causes a company to carry out tests on only a small number of its customers which is not representative of the majority.

To make the most out of the in-store experimentation programmes, strategy, as well as it’s execution becomes crucial. Strategy identifies the goal of the programme, defines how success should be measured and uses data to inform hypotheses. Furthermore, commitment from all stakeholders involved is essential, as well as throughout feasibility and reliability investigations when it comes to experiment design and results analysis.

Where do we stand at the moment?

In-store experimentation, also referred to as business experimentation, is scarcely used nowadays, although it’s potential for driving customer experience, informing business decisions and strategy is massive. There are, however, quite a few examples that can build up a strong case in favour.

One example is Kohl’s – one of the largest department store retail chains in America, with 1,158 locations across the country. Back in 2013, someone suggested a one-hour delay in the opening of stores from Mondays to Saturdays to reduce operational costs. This threw up a strong debate within the company’s management, and they decided the only way to know what was right was to subject the idea to a comprehensive business experiment. After conducting a test across 100 stores, the result showed that a delay in store opening time would not have any serious negative impact on sales.

Another example is Wawa, the convenience store chain in the mid-Atlantic United States. They wanted to introduce a flatbread breakfast item that had done well in spot tests. But the initiative was killed before the launch when a rigorous experiment—complete with test and control groups followed by regression analyses—showed that the new product would likely cannibalise other more profitable items.  

While ROI is everyone’s focus, ROX as a goal is relatively new, and mainly the leading brands are the ones starting to understand it and make it part of their company’s strategy. There are a few factors (here at Conversion.com, we call them levers) that proved driving in-store customers experience as well as ROI: 

  • Technology is the one that stands out. In an era of fast technological advancements, there is a plethora of options for retailers to choose from to take their customer experience to the next level. 

The first example that comes to mind is Amazon and their Amazon GO shops where the world’s most advanced shopping technology turn lines and checkout into history. Computer vision, sensor fusion, and deep learning automatically detect when products are taken from or returned to the shelves and keep track of them in a virtual cart. When customers are done shopping, they can just leave the store. A little later, a receipt is sent, and customers’ Amazon account charged. 

Similarly, Sainsbury’s experimented with improving their customers’ experience by opening a till-free store in London back in April. This way, customers didn’t have to wait in long lines, and could self-checkout simply by scanning the products with their phone, after installing an APP. You can read more about the experiment here. The results of this experiment are still yet to be announced.

  • Employees are a powerful factor to drive ROX. However, research suggests that retailers tend to view store associates as an expense to be controlled rather than as a medium to provide better service for customers.

A randomized controlled experiment  was run in 28 Gap stores in San Francisco Bay Area and Chicago in 2015 by an interdisciplinary team led by Principal Investigator Joan C. Williams from the University of Chicago. For the experiment, retail associates were shifted to more-stable schedules to see how that would impact the sales and work productivity. 

The results were striking. 

Sales in stores with more stable scheduling increased by 7%, an impressive number in an industry in which companies work hard to achieve increases of 1–2%. Labour productivity increased by 5% in an industry where productivity grew by only 2.5% per year between 1987 and 2014. The estimate is that Gap earned $2.9 million as a result of more-stable scheduling during the 35 weeks the experiment was in the field. All details about the experiment can be found here.

Nevertheless, the best to exemplify the impact employees can have on ROX are the iconic Apple stores. They rely on a very effective communication technique adapted from The Ritz-Carlton – Steps of Service. Every employee is trained to walk a customer through five steps that spell out the acronym A-P-P-L-E:

A – Approach customers with a personalized, warm welcome.

P – Probe politely to understand the customer’s needs.

P – Present a solution for the customer to take home today.

L – Listen for and resolve issues or concerns.

E- End with a fond farewell and an invitation to return.

  • In-store design, fixtures, and facilities also play a significant role in customer experience. Proving that they understand how brick and mortar retail is changing in the age of e-commerce, Nike opened a new five-story, 55,000 square foot store in New York City. There is a mini indoor basketball court, a treadmill, a system that simulates runs in different locations, a small soccer enclosure, a shoe bar where shoppers can personalise a pair of Nike Air Force and coaches who put customers through drills to test out different pairs of shoes. It is as much a place to play as it is a place to shop.

To conclude, in a market with customers’ expectations higher and more dynamic than ever, businesses have a powerful instrument in their toolkit to help them understand and meet these expectations – experimentation

Putting experimentation at the heart of a business, not only leads to better and more innovative ways of doing things – but actually gives companies the confidence to overturn wrongheaded conventional wisdom, and the faulty business intuition that even seasoned executives still inhabit.


To find out more about our approach to experimentation, get in touch today!

Aesthetic-Usability Effect: Can beauty become the key to usability in online retail?

Retailers we have a problem.

iPerception’s 2016 report shows that less than 25% of people who intended to make a purchase ended up actually buying something. That’s a huge leak in the buying funnel.

Why did 75% of people leave?

Using iPerception’s report from 2009 the top #1 and #3 reasons are usability-related:

Lesson: Fix your site’s usability issues.

But the problem is even more severe when you realise that this statistic talks about those who stayed on the website.

The second biggest leak is people who didn’t even stay on the website. The average bounce rate for e-commerce is reported to be somewhere between 35 and 57%.

According to a study by Chao Liu and colleagues from Microsoft Research, there is a 10-20 second window where a user decides whether a website is worth giving a chance or not.

What happens during those 20 seconds that makes people leave?

Research led by B.J. Fogg shows that many factors affect people’s trust towards a website, but the most prominent issue is design.

Lesson: Make your website visually appealing.

But here’s something interesting.

It appears that a website’s aesthetics and usability aren’t independent.

Research shows that users find visually attractive websites easy to use, even when actual ease to use is poor. In one usability study, on average, users failed to complete more than half of the required tasks successfully. When they worked with visually appealing websites they still rated their user experience highly.

So, maybe you could kill 2 birds with one stone: by improving aesthetics you might not only convince more visitors to stay, but also increase the chance that they will put up with your usability issues, ultimately buying.

This principle is known as the aesthetic-usability effect.

The aesthetic-usability effect.

In the context of e-commerce, the aesthetic-usability effect is when users perceive more aesthetically pleasing websites to be easier to use than less aesthetically pleasing websites.

This means that better aesthetics can result in:

  • More people choosing your website over other sites
  • People putting up with your usability issues, making them more likely to reach the end of the buying funnel and purchase

(With that said, there are studies that show that severe usability problems will force users to judge usability independently of aesthetics. Regardless of how great your visuals are, if a user can’t find a product, she won’t buy.)

We saw the aesthetic-usability effect work not only in academic labs, but in real-life business, too. For example, one experiment we ran was solely focused on improving the design of a check-out form. This test resulted in a +3.6% uplift. Additional revenue from that uplift is estimated at €450,000+ per year.

How to apply that principle yourself?

Some of the most important areas to apply that thinking are:

Top Landing Pages.

A landing page is the first page that users see when they come to your website. It’s crucial because this is where users form a positive first impression of your website. How well those pages look thus determines whether users will stay or leave, and what’s their level of tolerance with your usability issues.

Each website’s situation is different, but in retail most often visitors enter through your homepage, your category pages or your product pages.

As an example, let’s look at a traffic report for PC World, a British chain of computer superstores.

Based on the limited data that Semrush can provide me with, I can see that their homepage gets the most traffic. Equally, their category pages are right at the top:

Checkout Flow.

Checkout Flow is the stage where people start to open their wallets. Not everyone does though with 69% of users abandoning the process. At least 2 of the top 10 reasons why people abandon could be mitigated by the aesthetic-usability effect:

As we already know, making this stage visually appealing can enhance users’ perception of the funnel being easy to complete and drive them to make a purchase.  

How to make my website visually attractive?

A website needs to be attractive, but how do we make it happen? After all, it’s subjective. You might like your website, but do your users think the same way?

There are 2 approaches to answering those questions:

  • Customer research (aka ask your customers)
  • Heuristic analysis (aka ask experienced UX designers)

I’m going to show you how you can apply both approaches, looking at examples of PC World’s homepage (customer research) and NET-A-PORTER’s mobile checkout flow (heuristic analysis).

PC World’s Homepage.

To understand if users perceive PC World’s homepage as visually attractive, we ran a small-scale survey, asking visitors to rate different aspects of that page.

For research we used VisAWI, an 18-question survey that was specifically designed for evaluating website aesthetics. The results of the survey showed that overall the website is visually pleasing. It scored 4.47 points out of 7. The benchmark for e-commerce is 4.05. This shows that PC World’s homepage is better than average:

In particular, users highly rated PC World’s layout as being “easy-to-grasp” and “well-structured”, indicating that it met their expectations as an ecommerce store. Overall, the majority agreed that the site is designed with care and looks professional.

But findings also highlight a number of areas that could be improved.

  • 49% of users agreed that the layout is “too dense”
  • 40% of users agreed that the choice of colours looks “botched”
  • 47% of users agreed that the design of the site “lacks a concept”

49% of users agreed that the layout is “too dense”

Some of the reasons why users might think so are:

Lack of whitespace

Text-heavy sections

The “reasons to shop” section is very crowded which adds to the denseness of the page. This is further complicated by how text-heavy this section is, which could leave users perceiving it as overwhelming:

40% of users agreed that the choice of colours look “botched”.

This might be because PC World’s color harmony is disturbed. According to color harmony theory, bright blue and red colors that they use for their promo campaign wouldn’t necessarily match their main brand color, purple.

The theory of color harmony tells us that PC World would be better off following Hulk’s example…

In other words, using green as a complementary color to purple (potentially alongside a more saturated red):

There are 5 types of color harmonies, and depending on the one you choose, you’ll find other matches. Here’s another one suggested by Paletton.com, a tool for creating complementary color combinations:

To me personally (feel free to disagree), it seems that there is their branded color scheme. When seen in isolation its colors match well:

There is the promo-campaign color scheme. Again, when seen in isolation its colors match well:

It’s combining the two together that creates a challenge, and might have resulted in some people feeling that colors look “botched”.

47% of users agreed that the design of the site “lacks a concept”

When users say that the design of the site lacks a concept this might mean that a page doesn’t form a complete and pleasing whole. Gestalt theory of psychology suggests that we look at an object as a whole first and zoom in on its individual parts next.

When we have difficulty making sense of objects, we tend to perceive them as less beautiful.

As we’ve already observed with the colour scheme, the page doesn’t form a unified whole as two separate colour scheme do not match each other.

Similarly, the product catalog is chaotically organised. This makes it more difficult for people to group the objects together:

How about grouping those objects by a unified theme? For example, one row of laptops, one row of game-related products, one row of home office equipment. This would’ve made it easier for users to make sense of the page.

Finally, the page doesn’t seem to have a unified purpose. Yes, the main theme is the promo-campaign, but what action should users take next?

With so many competing calls-to-actions this isn’t clear:

Every page should have a dominant call-to-action (CTA). (As you should know from our article on the paradox of choice when there is no dominant option users are likely to get overwhelmed and quit).

Their “summer mega deals” banner takes the most space. So, I assume this was meant to be their dominant CTA. The problem is it looks like an image, not a clickable element which is why people might have been confused as to what they should do next on the page.

If this is the dominant purpose of this page, PCWorld would have been better off designing their “Shop Now” CTA not as text, but as a button.

Look at what Maplin is doing:

While technically, this banner is one single image, the call-to-action was designed to look like a button, so it’s clear to people that they can click it.

If PCWorld did the same and made that button as prominent as the rest of the banner, it would be easier for users to identify the main CTA.

Checkout Flow

To show you an example of how heuristic analysis can be applied to improve aesthetics, we’re going to look at NET-A-PORTER, a luxury fashion store.

Our designer, Josh Lenz, quickly identified a number of problems:

  1. Lack of whitespace. Margins are too narrow and grey background overtakes the whole screen. Research shows that perception of simplicity is critical not only for general aesthetics, but also for creating a perception of luxury.
  2. Forms look outdated. They don’t reflect the previous stages of the user experience. This inconsistency with the brand and design could diminish trust and credibility.
  3. Third step looks broken or at least unprofessionally designed as “Select card type” field overlaps with “Card number” field.

So, the checkout design looks not only hard to complete, but might also diminish users’ trust in the brand. To reverse that experience he made a number of changes:

All Steps

  • Changed style of progress bar – makes it more legible
  • Changed text to icons in footer – simplifies the page visually
  • Increased the spacing – creates a cleaner look which is easier to digest visually

Step 1

  • Simplified text fields – creates a better balance on the page
  • Changed tickbox and button style to match brand

Step 2

  • Placed shipping options in cards – card placement improves vertical symmetry of the page, adds more white space and creates more of a visual flow down the page.
  • Packaging options placed side by side – creates better balance on the page.

Step 3

    • Simplified text fields – creates a better balance on the page
    • Changed the ‘+’ icon and edit button style to match brand

My hypothesis is that since the page now looks modern, more clear and matches NET-A-PORTER’s brand, more users will perceive it as easier to complete. Not only will more users continue to complete their purchase as the page looks more clear, but users are also less likely to be scared by an experience that substantially deviates from the brand.

The next step would be for NET-A-PORTER to test this design change against the original, and measure if it actually impacts their bottom-line.

Key Takeaways (and Limitations):

  1. You should recognise that I don’t have a full insight into these companies’ strategies and user behaviour, so some of my suggestions above might not be in line with their business goals.
  2. It’s more important to understand the process and reasoning I followed rather than copy and paste specific suggestions.

With that in mind your main takeaways should be:

  1. Improving your aesthetics can drive additional revenue for your business. (In our experience, it could drive as much as €450,000 of additional revenue per year).
  2. One of the reasons why is people would perceive your product/platform as easier to use, making them more likely to stay and complete their purchase.
  3. To improve your aesthetics use research. Be it user feedback (with the help of such tools as VisAWI) or systematic analysis by an experienced designer (internally we use a UX Review checklist that consists of 52 criteria against which we evaluate every website we work with).
  4. Translate insights from the previous step into actionable test ideas. Tip: Hire an experienced designer who can translate your user feedback into action. For example, users can tell your colors look botched, but they can’t tell you how to fix your color harmony.
  5. Focus on the high-value, high-friction points in your user funnel (eg. your top landing pages, bottom of the funnel stages such as check-out flow).
  6. When applying aesthetic-usability effect, don’t change usability. As you could see in none of our suggestions we changed the core function of the website. In 2014 Marks & Spencer re-designed their website, changing both its aesthetics and functionality. A vast array of technical issues led to an 8% drop in sales.
  7. Measure impact. This can be in the form of gathering user feedback on your new design, but bottom-line impact is what we’re after. Treat your new design as a test, not a blind change. This way you’ll know how much aesthetics matters for your audience.

A Guide on How To Stop Overwhelming Visitors with Too Much Choice

Can you solve a puzzle for me?

Imagine you’re a business selling software that allows busy parents to share photos and videos with their close ones.

When designing your pricing strategy, should you offer your users a single plan? Take it or leave it.

Or should you offer 2 different plans, so that everyone can find something that works for them?

Back in 2010 the right answer would be: you should offer a single plan. When Ash Maurya ran these tests, he found that less people signed up when they were shown 2 plans, and as a result less people became paying customers. One explanation is that people could not decide which plan to choose. So, they left.

This brings us to the long-time problem that marketers have to solve: what number of options should we offer to our customers?

Is large range always better…

…than a small range?

On the one hand, choice plays an important role in our daily lives. More choice can mean customers are more likely to find what matches their taste. In fact, we humans love to make choices. Research shows that the act of choosing activates brain regions associated with motivation and reward.

On the other hand, more choice can lead to indecisiveness, less satisfaction with the made choice and poorer decisions. This phenomenon is known as “choice overload”. Barry Schwartz popularised it in his book, “The Paradox of Choice”.

Since then multiple articles proclaimed choice as a conversion enemy. This even led to some exaggerated statements like the one below:

As always, my job is to separate the wheat from the chaff. As a data-driven marketer you don’t want to follow best practises. You want actual research, so that you can create your own hypotheses and find out what works for your business.

I have done the research for you. Meta-analysis by Benjamin Scheibehenne and his colleagues gave me 50 experiments to work with.

In this guide you will find out:

(If all you want is actionable advice, skip straight to the last 2 sections).

Why is choice harmful for your bottom-line?

Analysis paralysis.

Analysis paralysis is when a person over-thinks the decision to such an extent that he/she does not make it. In marketing context, that means the person won’t buy.

Ryan Engley from Unbounce tested removing the number of options for its webinar sign-up form. After reducing the choice down to 3 options he saw a 16.93% increase in conversions. Perhaps this was because people did not get caught up in thinking what day of the week would work best for them.

The Buyer’s Remorse.

The buyer’s remorse is when a person regrets making a purchase. As the number of choices increases, it is easier to imagine a different choice that may have been better than the one selected. As a result, that kind of post-analysis decreases satisfaction with the purchase.

Image credit

Iyengar showed this effect in their 2000 series of experiments. They found that when people had to make a choice from a limited number of options (6 vs 30), they expressed greater satisfaction with the made choice. As researchers explain one of the reasons why is because people regretted their decision less. They measured ‘satisfaction’ and ‘regret’ using questionnaires and found that the two were related (r = -.55, p < .0001).

Thinking more long-term, more regret could mean that the customer would not become an advocate of your brand. In the worst case scenario she might cancel or return the product.

Decision fatigue.

Decision fatigue is when we start taking shortcuts as we exhaust our mental energy. Research suggests that humans have a limit on how many active, deliberate decisions they can make in a certain time period. The more we exhaust that reserve, the more likely we are to look for shortcuts.

In one study researchers analysed more than 1,100 decisions made by court judges. They found that as the day went by (and judges made more decisions), judges were becoming more likely to take shortcuts when deciding which prisoners to release before their official sentence was over.

Result?

Prisoners who appeared at the start of the day received parole about 65% of the time. Those who appeared late in the day received parole less than 10% of the time. Put simply, as judges got tired they used the least-risky option and allowed only a small number of prisoners out.

To translate it to business context, consider onboarding process of eHarmony, an online dating website. To register at eHarmony, you need to answer more than 130 questions about yourself. It’s not as simple as “When you were born?”. Questions range from estimating how warm, clever, dominant you are, etc. down to how often you felt happy, depressed, etc. in the last month.

If you try to have an objective sense of reality, you will likely stress your mental muscles to estimate where you should sit on that scale. After answering 130+ such questions you’ll be exhausted.

By the time you get to the final stage, you might be so tired, there will be no willpower left to figure out why you can’t see anybody’s profiles. The path of least resistance is to abandon the process.

At the same time you might feel so invested into the process, decision fatigue might be in eHarmony’s favour. After all, you just made an active, effortful and uncoerced commitment to meeting a partner online. The alternative shortcut is to pay for a membership.

Decision fatigue will cause customers to take shortcuts in your conversion funnel. The shortcuts might be in your favour, but the opposite might also be true.

Why is choice beneficial for your bottom-line?

Perception of better choice can be a competitive advantages for retailers.

In the review by Benjamin Scheibehenn and his colleagues, they write, “retailers in the marketplace who offer more choice seem to have a competitive advantage over those who offer less”. After all, that’s one of the reasons why we shop at Amazon.

Customers associate higher variety with higher quality.

A study done at Stanford shows that brands that offer higher variety are perceived as having higher quality by the customers.

Adding decoy options can increase average order value.

The Economist offered 3 subscription plans to its customers:

The middle option seems redundant as it is the same price as the last option. So, from “choice overload” perspective we should remove it. But what we’ve missed is that the print & web subscription option seems like a real bargain when compared to the print subscription option.

That’s what Dan Ariely found in his experiment with 200 MIT students:

Image credit

This extra option more than doubled the number of people who chose the more expensive option.

Choice means freedom. Restricting visitors’ freedom might backfire.

MECLABS Institute tried to reduce friction on a client’s check-out page. They eliminated one of the options in the choice set. Instead of giving users an ability to choose among different subscription lengths (1 month, 6 months, annual), they only offered a monthly plan.

Mike Xiao, research manager at MECLABS Institute, explains that this is what the majority of visitors chose anyways. So, for them, elimination of this step should have only made the checkout process easier.

However, instead of seeing the conversions go up, they saw a 40% decrease.

Mike’s explanation is similar to the Economist experiment. People preferred the monthly plan when it was presented in relation to more expensive 6-month and annual plans.

I want to offer another potential explanation to this result. Visitors might have left the funnel because they did not like that a billing method was forced onto them. Choosing how you pay is an important decision to make, especially when 30% of consumers believe subscriptions are bad value for money.

As I explained in my article on the foot-in-the-door technique, when we feel that someone tries to force us to do something, we often respond in such a way that will re-assert that freedom. In that case, leave the checkout. This process is called psychological reactance and giving customers choice is an effective way to counteract it.

10 factors that drive/mitigate ‘choice overload’

Research by Benjamin Scheibehenn and his colleagues gives us a good idea of what factors make “choice overload” less (or more) likely to happen. We can use that knowledge to design better experiences for users while reaping the benefits of offering more choice.

All 10 factors are based on sound theories, and some of them have already been validated by research. You should remember though that you will only find out if it works by testing it on your own audience.

Factor #1. Users’ preferences towards (and familiarity with) the items in the choice set

If people have strong preference for a particular product, choice won’t overwhelm them. They will simply choose their favourite option.

In 2003 Alexander Chernev, a professor of marketing at the Kellogg School of Management, showed that people with clear prior preferences had no problem choosing from larger assortments. The larger the number of options they could choose from, the more likely they were to actually choose something and to be more satisfied with their choice (study 1 and 2). This is the complete opposite of the research we covered above.

Another study showed that only those people who were unfamiliar with the product category were less likely to be satisfied with their choice.

For example, if I visit SkateHut and know nothing about longboards, I will most certainly be overwhelmed. I don’t have a preference for any brand or type of board. This makes it difficult for me to make a decision.

The solution would be to find out if a large proportion of visitors are actually novices (like me). You could do this by using surveys (see example below), examining live chat data and talking to your sales team.

If the data shows that yes, there is a significant proportion of customers who are novices, the solution would be to educate them. If users become more familiar with different types of boards and brands, it will be easier for them to navigate through a vast array of options.

For example, the following SkateHut page ranks first for a keyword “longboards” in Google:

Instead of sending novices straight to the catalog, SkateHut could offer them educational material first.

In Russia I saw ecommerce websites educating visitors with the use of quizzes. Once you are on a product catalog page, there is a quiz at the top that asks you a set of questions. Based on your answers you will be shown products that match your criteria.

The bot asks me, “Who are you choosing a self-balancing scooter for?”.

I need to tell if it’s for an adult or a child. As I answer these questions, it explains how I should choose my wheels, why some factors are more important than others, etc. As a result of my answers, it shortlists the whole catalog down to 9 options and I even understand why it shows me those 9 options.

At the end I just need to choose the colour I like:

Factor #2. Presence of an obviously dominant option in the choice set

If there is a clearly dominant option, then choice is unlikely to be complicated. Some offers are so inferior relative to one outstanding offer, people would not need to give it much thought.

At a glance, AQF wrist wraps seem way more superior than other offers in the choice set. They have over 700 reviews, most positive and price-wise it’s a real bargain.

The term “dominant” is open to interpretation though. In my view, it means that a user can quickly identify which option matches his use case and it is clear that the other options are inferior. In the example above, all the other options are inferior because they lose on both the number of reviews and price.

Perhaps a better way to think about dominance is through the lenses of elimination. Can a person easily eliminate all the options apart from the one that meets her needs?

In retail review ratings and bestseller tags can act as such filters. We will cover them later.

In SaaS creating plans that match different customer segments can help. Ruben Gamez, the founder of BidSketch, does a great job in simplifying his plans. Users don’t have to make substantial trade-offs when deciding between them.

Solopreneur? Then, Solo is for you. Several members using the software? Then, Team or Business. He makes his plans almost mutually exclusive. At its core plans only vary on the number of users.

Important note: The 2 factors above are necessary pre-conditions for “choice overload” to occur. Put simply, if you can ensure that visitors coming to your website have already developed strong preferences for a certain product and/or the options are presented in such a way that each customer segment will identify one of them as dominant, you won’t have problems with choice overload. In practise, this is difficult to ensure. That’s why we cover 8 other factors that help us beat “choice overload”.

Factor #3. Categorization and Option Arrangement

One study found that an increase in the number of options decreased satisfaction only if the options were not prearranged into categories. Categories make it easier to navigate the choice set and decrease the cognitive burden of making a choice.

HSBC gives its customers only the names of the different credit cards. Unless a person is closely familiar with HSBC credit card offering, those are a poor guide on which credit card is best for you.

FCA carried out research on different motivations of credit card holders. They found that generally there are 4 types of customers:

When either one of these people comes to HSBC website, it won’t be clear what card will help them to achieve their goal.

In contrast to HSBC, Barclays groups its credit cards into categories that fit the motivations above.

This both lowers the number of options that people have to choose from and ensures that people choose only from those options that are relevant to them.

Similarly, HostingAdvice.com categorises its web hosting providers based on use cases.

Not only that, ordered assortments can also ease up the burden of making a decision. For example, WhoIsHostingThis.com presents its web hosting providers in a ranked order. Ranking makes it easier for the user to make a choice.

Factor #4. Difficult Trade-offs

The more difficult the trade-offs that we need to make between different options, the more likely it is that “choice overload” will occur. Research suggests that the trade-offs are particularly tough when options have unique features that are not directly comparable.

To get our heads around it, let’s consider an example.

What credit card would you choose?

Everything is the same apart from a number of differences:

To decide you will need to make some trade-offs. Is a generous rewards scheme more important than balance transfer and purchase rate offers? Is £195 annual fee justified by 80,000 (potential) reward points?

Let’s assume that I am looking for rewards, so purchase rate and balance transfer offers are not important. Unfortunately, HSBC provides no guidance for me to figure out if rewards justify the annual fee.

In contrast, Barclays tells me the exact reward value that I will get based on my monthly spending level:

This lets me to compare the price of the card with the value that I am likely to get out of it. No burden of making mental calculations in my head. Thank you Barclays!

Factor #5. Ease of comparison

To get to the stage of making those trade-offs I needed to compare 2 cards. If the banks make it hard for me to do this, I might drop out of the funnel even before I get to “trading” one feature for another.

HSBC is a bank that certainly does not make it easy.

Continuing with the scenario where I was looking for rewards, I found 2 cards that have them:

Those cards have some common and some unique features. Even for the common features I can’t easily compare them. One gives specific information on how many rewards you will get, the other one does not. One gives specific information about its annual fee, the other one does not. One has “enhanced” travel benefits, but it’s unclear how “enhanced” benefits are better than standard benefits.

If this was the time of the day when my mental energy had been already exhausted, I would have started looking for shortcuts. I could go to MoneySupermarket.com despite originally starting with my bank. Adiós HSBC!

Compare this to what Royal Bank of Scotland is doing. They compare their credit cards in a clear table format:

Not only that, they provide guidance on which card would suit which customer best with their “Decide if it’s right for you” section.

Factor #6. Information Overload

Information overload theory points out that it is not necessarily the number of available products that causes ‘choice overload’, but the number of factors that you need to consider when making a choice in your head.

For example, in SaaS the industry’s standard is to to have between 3 and 4 packages in your pricing grid. It seems like you could have that number, highlight one of the plans as “most popular” and be ok. But your conclusion will be different if you look at the issue through the lenses of information overload theory. What becomes clear is that it’s not the number of plans that matters, but the amount of information that a person has to consider.

Compare the two pricing pages below.

While both offer 4 plans, BidSketch purposefully presents its users with only 1 factor to consider, number of users. In contrast, Surveygizmo used to give its users 15 factors. According to information overload theory, choosing a plan at Surveygizmo will be more overwhelming than choosing a plan at BidSketch.

So, what can we learn from that?

When I interviewed Ruben Gamez, founder of BidSketch, he explained to me that he purposefully omitted many of their features, to simplify the plans. He identified the ‘value’ features, i.e. the features that people considered to be most important. He did this using both data from analytics and Jobs-to-be-Done interviews. Not only that he also did ‘sensitivity testing’, i.e. removing a feature to see if it actually affects conversions.

Factor #7. Time Pressure

Graeme Haynes, psychologist at University of Western Ontario, found evidence for choice overload only if he constrained the decision makers’ time to make a decision.

Thinking of how it applies to the real world, time pressure can be due to seasonal changes (eg. Christmas) or due to time constraints you put on the customer yourself (eg. limiting an offer by a certain number of days).

In these circumstances, you are in an even higher need to simplify the purchase decision for the customer.

As an example, let’s assume I’m looking for perfume for my girlfriend. It’s 15th of December. As someone who hates queues, I search “female fragrance” and come to theperfumeshop.com:

Looking at bestsellers is a not-so-bad shortcut, but obviously ‘bestseller’ does not mean my girlfriend will like the smell. Product descriptions don’t help either.

So, after grilling their customer support for half an hour, here’s how we made progress on what perfume to buy:

  • Support: Do you know of anything she has liked before?
  • No
  • Support: Do you have a budget in mind?
  • Around £40
  • Support: Her age?
  • Early 20s
  • Support: Preferences: Floral or oriental?
  • No idea. I would describe her current perfume as having a rich smell, but at the same time light (in a sense that you can smell it, but it’s not overwhelming)
  • Support: Paco Rabanne Lady Million “It is a warm scent that lingers nicely on the skin but not overpowering” or Gucci Guilty “feminine fragrance that is very distinct”
  • Not sure which one to choose, both have good reviews.
  • Support: Would you like to visit a local store and try them or you could get a gift card instead?
  • Perfect! Gift card is a risk-free option.

Now imagine analyzing hundreds or thousands of such dialogues. We could reverse engineer them into a feature that would help novice customers like myself make similar progress:

In this industry visitors are likely to feel ‘choice overload’ because the products are difficult (if not impossible) to compare. After all, you need to smell them. Time pressure during Christmas escalates that problem.

Instead, the feature above could simplify the choice down to answering a couple of questions. And even if the answers are not perfect, the visitor would still feel like he is making progress. At the end he might end up going to the local The Perfume Shop store or buying a gift certificate. All thanks to not being overwhelmed with choice and closing the website.

Factor #8. Maximizing behavior

Maximisers are those who search for the best option, not just the one that is “good enough”. It is assumed that maximisers would consider more factors, overcomplicate their decision-making and thus be at a higher risk of choice overload.

I believe that maximising behaviors can be identified. For example, imagine a user of Match.com, an online dating website. Instead of contacting a set of matches who have been presented first to him by default, he continues to scroll down, loading all the profiles, analysing who he should contact first.

We could identify users with such behavior and guide them to take action. Otherwise, they might get caught up in analysis paralysis.

For example, we could show a pop-up box to everyone who loads more than 5 extra pages of profiles. The message will prompt them to start a conversation rather than to keep scrolling through.

(By the way, that research is somewhat true. Read this paper.)

Factor #9. Choice Justification

Scheibehenne found an effect of “too many options” when people knew that they would have to justify their choice later on. Perhaps this effect will most likely occur when a purchase involves several people. For example, you work in an industry where one person will be the user of the product, but above them is a person who approves the budget.

Or it’s a purchase that will be likely discussed with peers (eg. new clothes or a new car).

That means that your role as a marketer is to help customers justify their choices.

3D printing is an industry where multiple stakeholders are often involved in the purchase decision. iMakr, a 3D printing store, not only categorises its printers by the use case…

…it also compares 3D printers in each category, making it easier to justify the choice for a particular 3D printer. For example, B9 Core 530 seems to be the ultimate 3D printer in the jewellery category:

iMakr also gives guidance on who a particular 3D printer is right for, again helping to justify the choice:

It all goes back to helping the user find the ‘dominant’ option.

Factor #10. Simple Decision Heuristics

Many studies have shown that users cope with excessive choice by using mental shortcuts that often guarantee “good enough” decisions.

Some heuristics are useful to know if you’re a marketer:

  • the elimination-by-aspects strategy that quickly screens out unattractive options
  • the choice of a default option

The elimination-by-aspects strategy

Retailers give customers an ability to screen out some options from the others by providing such cues as review ratings and bestseller tags:

Search filters play an equally important role where users can screen out all the options that don’t match their criteria:

The choice of a default option

Charities use default options on their donation forms to both simplify the decision-making and increase revenue. A 2014 study found that donations closely corresponded to the default amount that was set.

In the same spirit SaaS companies make certain options default. Instead of explicitly asking users how often would they prefer to pay (choose monthly or yearly), they default users to one or the other:

Key Takeaways:

(Think about advice below as ideas to test)

  • Educate users about your products, so that they can easily navigate a large set of options and develop preferences for particular products. This could be done with the use of chatbots, targeted tutorials, etc.
  • Help customers to identify the dominant option in the choice set:
    • This could mean making it easier for users to eliminate “inferior” options in the choice set (review ratings, bestseller tags and filters).
    • This could mean designing products for distinct segments, so that users would not need to make complicated trade-offs between products.
  • Categorize and order large choice sets in a meaningful way, so that users can quickly find what they are looking for.
  • Make it easy for users to compare different products (eg. add a feature where users can compare products in a table format).
  • Assist users with making the trade-offs between different types of products.
    • This can be done through educating users about what’s more important to “get right” in your product. For example, chatbot for the self-balancing scooters explained to me that wheels is the most crucial part of the decision. Incorrectly chosen wheels can result in a terrible driving experience.
    • This can be done through performing all the calculations for the user if quantitative factors need to be weighed in.
  • Provide guidance on which product would be right for the user (think of RBS example).
  • Think about not only reducing the number of options in the choice set, but also the number of factors that users need to consider when making a decision.
  • In the conditions of scarce time, users are more likely to look for shortcuts in their decision-making. Give them an opportunity to take educated shortcuts (think about The Perfume Shop Christmas feature).
  • Identify perfectionists who try to make the best decision possible and guide them to take action.
  • Make certain options “default” instead of explicitly asking the user to make a choice.

60 Free UI elements from our 20 day design challenge

Our designers work tirelessly on creating impactful new versions of our clients’ websites, pages and UI elements – and are always balancing persuasive impactful changes and matching the look and feel (or brand guidelines) provided by clients.

As a creative exercise the team decided it would be a fun challenge to try and create 20 unique user interface elements each – in 20 days. Each day the team had one specific element to work on (e.g. “simple price comparison element”), and got to create the element without any brand guidelines or guidance to adhere to.

Today, we’re giving away the output as inspiration – check out the gallery of all 60 elements.

The team have answered a number of questions to provide more detail about the project and what they learned.

How did you come up with the idea?

Justyna Kusa (Senior UX designer):

We were inspired by similar initiatives, like “40 days of dating” by Jessica Walsh and Timothy Goodman (http://fortydaysofdating.com/). The main aim was to find a task where we’re not limited by any brand guidelines (as in our regular work) and we can still focus on something web or app related. Setting a UI challenge sounded like a good solution. We wanted to commit and work regularly on a project and know that it will end after a set period of time.

Natalia Magda (UX designer):

We wanted to make something together, as a design team, that will wake up our creativity. We wanted to play with colours, typography, ux solutions. To try something new. And we also wanted to challenge ourselves and learn new skills.

Ana Araujo (UX designer):

We came up with this idea to challenge yourself to create something new, exciting, full of creativity and that could give us the opportunity to do a nice project together as a team.

What was the hardest part about the challenge?

Natalia: 

Some days were pretty heavy with client work, so it was hard to find time and energy to work on an additional project.

Ana:

Manage the time between the client work and this challenge and also sometimes it was difficult to achieve the final result that I was 100 percent happy.

Justyna:

The hardest bit was finding enough time for a side project and work on our clients’ designs. In both areas we wanted to provide the highest quality output and that turned out to be quite challenging. The second difficulty was to be inspired all the time. Sometimes you can come up with a great idea straight away, other time it can be quite long process.

Which design element did you find most challenging and why?

Ana:

Day 19 – Payment method, took me a long time, lots of experimentations until I get this final result.

ana payment method

Justyna:

It was probably on the 6th day, when we agreed to design a contact us form. The topic certainly wasn’t new, but I was trying to experiment with a style that was a new area for me. I tend to design in quite a subtle way, so I wasn’t quite sure if the stronger route that I chose was the correct one.

justyna contact form

Natalia:

The first task was the hardest for me. I needed to get into it, get inspired and start the challenge.

404 page natalia

Which is your favourite element you designed?

Justyna:

I like music app from day 18th. Probably because I was listening this album a lot while working on the entire challenge!

justyna music app

Ana:

I will say 18 day – Music app. Zero 7 is my one of my favourite bands since I was a teenager, especially that album, every time I listen  just give me a good Vibe and I think it comes through in the design.

ana music app

 

Natalia:

Music app – because I never worked on anything like this before.

natalia music app

What did you learn from the challenge?

Natalia

I reassured myself that simple solutions are (usually) the best ones.

Justyna:

I explored a few visual styles that were new to me. But every topic was not only challenge from a visual point of view – I wanted every piece to present a solution that will be friendly for a potential user. That was a big learning experience as well.

Ana

Well, I got to explore my creativity a lot, and try different approaches from my usual style.

Is this something you’d recommend to other designers or design teams?

Ana

Of course! All design teams and designers should do this type of project from time to time. The challenge increases the level of creativity, allows you to explore new approaches and get out of our safe ‘space’ and just do things that you’ve never done before. It’s a great project for a design team or an individual designer.

Natalia

I would definitely recommend it to any design team. It was fun to do something together, outside of the day to day projects.

Justyna

I would definitely recommend it! It’s good to prove to yourself that you’re able to do a bit more. It’s great for warming up and focusing on creative thinking. It was also a very nice team building experience. We were supporting each other and sharing a constructive feedback all the time.

 

Go have a look at the full gallery and if you want any help with persuasive UI elements drop as a line: hello@conversion.com

How we increased revenue by 11% with one small change

Split testing has matured and more and more websites are testing changes. The “test everything” approach has become widespread and this has been a huge benefit for the industry. Companies now know the true impact of changes and can avoid costly mistakes. The beauty of testing is that the gains are permanent, and the losses are temporary.

Such widespread adoption of testing has brought the challenge that many tests have small, or no impact on conversion rates. Ecommerce managers are pushing for higher conversion rates with the request:

“We need to test bigger, more radical things”

Hoping that these bigger tests bring the big wins that they want.

Unfortunately, big changes don’t always bring big wins, and this approach can result in bigger more complex tests, which take more time to create and are more frustrating when they fail.

How a small change can beat a big change

To see how a well thought out, small change can deliver a huge increase in conversion rates, where a big change had delivered none, we can look at a simple example.

This site offers online driver training courses, allowing users to have minor traffic tickets dismissed. Part of the process gives users the option to obtain a copy of their “Driver Record”. The page offering this service to customers, was extremely outdated:

Default-2-Control-26808934
Wireframe to demonstrate the original page layout for the driver record upsell

Conversion and usability experts will panic at this form with its outdated design, lack of inline validation and no value proposition to convince the user to buy.

The first attempt to improve this form was a complete redesign:

Default-0-Variation-No-Tooltip-26808924
Wireframe to show the initial test designed to increase driver record upsells

Although aesthetically more pleasing, featuring a strong value proposition and using fear as a motivator, the impact of this change was far from that expected. Despite rebuilding the entire page, there was almost no impact from the test. The split test showed no statistically significant increase or decrease.

This test had taken many hours of design and development work, with no impact on conversion, so what had gone wrong?

To discover the underlying problem, the team from Conversion.com placed a small Qualaroo survey on the site. This popped up on the page, asking users “What’s stopping you from getting your driver record today?”

Qualaroo (1)

 

Small on page surveys like this are always extremely valuable in delivering great insights for users, and this was no exception. Despite many complaints about the price (out of scope for this engagement), users repeatedly said that they were having trouble knowing their “Audit Number”.

The audit number is a mandatory field on the form, and the user could find it on their Drivers License. Despite there being an image on the page already showing where to find this, clearly users weren’t seeing it.

The hypothesis for the next version of this test was simple.

“By presenting guidance about where to find the audit number in a standard, user friendly way at the time that this is a problem for the user, fewer users will find this to be an issue when completing the form.”

The test made an extremely small change to the page, adding a small question mark icon next to the audit number field on the form:

Default-1-Variation-Tooltip-Added-26808932
Wireframe to show the small addition of a tooltip to the test design

This standard usability method would be clear for users who were hesitating at this step. The lightbox which opened when the icon was clicked, simply reiterated the same image that was on the page.

tooltip_final

Despite this being a tiny change, the impact on users was enormous. The test delivered an 11% increase in conversions against the version without the icon. By presenting the right information, at the right time, we delivered a massive increase in conversions without making a big change to the page.

An approach to big wins

So was this a fluke? Were we lucky? Not at all. This test demonstrated the application of a simple but effective approach to testing which can give great results almost every time. There’s often no need to make big or complex changes to the page itself. You can still make radical, meaningful changes with little design or development work.

When looking to improve the conversion rate for a site or page, by following three simple steps you can create an effective and powerful test:

  1. Identify the barrier to conversion.
    A barrier is a reason why a user on the page may not convert. It could be usability-related, such as broken form validation or a confusing button. It could be a concern about your particular product or service, such as delivery methods or refunds. Equally, it could be a general concern for the user, such as not being sure whether your service or product is the right solution to their problem. By using qualitative and quantitative research methods, you can discover the main barriers for user.
  2. Find or create a solution.
    Once you have identified a barrier, you can then work to create a solution. This could be a simple change to the layout of the site; a change to your business practices or policies; supporting evidence or information or compelling persuasive content such as social proof or urgency messaging. The key is to find a solution which directly targets the barrier the user is facing.
  3. Deliver it at the right time.
    The key to a successful test is to deliver your solution to the user when it’s most relevant to them. For example price promises and guarantees should be shown when pricing is displayed; delivery messaging on product pages and at the delivery step in the basket; social proof and trust messaging could be displayed early in the process; and urgency messaging when the user may hesitate. The effectiveness of a message requires it to be displayed on the right page and in the right area for the user to see it and respond to it at the right time.

By combining these three simple steps, you can develop tests which are more effective and have more chance of delivering a big result.

Impact and Ease

Returning to the myth that big results need big tests, you should make sure that you consider the impact of a test and its size as almost completely different things. When you have a test proposal, you should think carefully about how much impact you believe it will have, and look independently at how difficult it will be to build.

At Conversion.com, we assess all tests for Impact and Ease and plot them on a graph:

Dave Graphs

Clearly the tests in the top right corner are the ones you should be aiming to create first. These are the tests that will do the most for your bottom line, in the shortest amount of time.

More impact, more ease

So how do you make sure that you can deliver smaller tests with bigger impact?

Firstly, maximise the impact of your test. You can do this by targeting the biggest barriers for users. By taking a data driven approach to identifying these, you are already giving your test a much higher chance of success. With a strong data-backed hypothesis you already know that you are definitely overcoming a problem for your users.

You can increase the impact by choosing the biggest barriers. If a barrier affects 30% of your users, that will have far more impact than one only mentioned by 5% of your users. Impact is mostly driven by the size of the issue as overcoming it will help the most users.

To get the biggest impact from smaller tests, you need to look at how you can make tests easier to create. By choosing solutions which are simple, you can much more quickly iterate and get winners. Simple but effective ways of developing simple tests can include:

  • Headline testing – headlines are a great way to have a huge impact on a user’s behaviour with very little effort. They are the first part of the page a user will read and allow you to set their mindset for the rest of the session
  • Tooltips and callouts – In forms these can be hugely effective. They are small changes but capture the user’s attention when they are thinking about a specific field. By matching security messaging to credit card fields, privacy messaging to email and phone number fields and giving guidance to users when they have to make difficult selections, it is easy to have an impact on their behaviour with a very small change.
  • Benefit bars can be a very effective way of delivering a strong message without a major change to a site. With a huge potential impact (being delivered on every page), but a small impact on page design and layout (usually slotting in below the navigation), benefit bars they can be very effective in getting your core messaging across to a user.
  • Copy testing – by changing the copy at critical parts of the site you can impact the user’s feelings, thoughts and concerns without any complex design or development work

A simple approach for big wins with small tests

By following the simple three step process, you can greatly increase the impact and rate of your tests, without having to resort to big, radical, expensive changes:

  1. Identify the barrier to conversion.
  2. Find or create a solution.
  3. Deliver it at the right time.

The impact of your testing programme is driven more by the size of the issues you are trying to overcome and the quality of your hypotheses than by the complexity and radical approaches in your testing. Focusing time on discovering those barriers, will pay off many times more than spending the time in design and development.

10 Quick wins to increase your web form conversion rate: part 2

This is the second post in a two-part series: 10 quick wins to increase your web form conversion rates. You can find part 1 here

6. Inline question mouse highlighting

Comparethemarket.com offers a great way of using the user’s mouse movement to highlight the question they are on.

CTM 3
Comparethemarket use a hover feature to highlight what question the user is on.

This helps to keep the user focused on what’s important – completing the quote. However, if the user does happen to become distracted, upon their return, the field will continue to stand out. This will again reduce the effort placed on the user.
As you’ve got this far I’ll give you another free tip (turning your forms up to 11)! When a user completes a field, why not offer them visual confirmation of their achievement? At the start of 2014 we user tested a number of Axure interactive wireframes. We found that placing a tick next to a completed field, not only offers the user visual confirmation and reassurance, it also helps to offer a visual progress bar throughout a question set.

7. Placeholder text in each field

Rather than leaving fields blank, pre-populating them with common answers can really help.

Hopefully, you have a rough idea of your primary persona. Do you know what users normally select in your form? Could you pre-populate less business-critical questions with some answers? This will reduce interactions, increasing the completion rate for those types of users.
On questions where you can’t pre-populate the answer, be sure to add placeholder text. By leaving the field blank, you’re missing an opportunity to help your users. Being able to see an example of the answer will help to reduce the effort placed on the user. We also found that it helps to reduce the chance that users inadvertently skip a question.

8. Tooltips accessibility

During usability testing, we noticed that a particular field was causing users to question “why” the company actually needed to know this information (“what is your marital status”). The reason why the company wanted to know this was explained in the tooltip. However, the tooltip in question could only be accessed once the user clicked into the field.

Clicking into the field reveals the tooltip, but it also covers part of the header question – Moneysupermarket.com 02/04/2015.
Clicking into the field reveals the tooltip, but it also covers part of the header question – Moneysupermarket.com 02/04/2015.

Forms and tooltips go hand in hand. If you’re asking users to spend time filling out their information, make sure information within tooltips can be accessed before the user interacts with the field. The most standard way of displaying a tooltip icon is a small question mark.
Bonus tip: If you do implement tooltips, be sure to check them on phones and tablets, they’ll need to be tappable with a minimum of 36px to ensure they’re easily interacted with.

9. Progressive disclosure

Users are put off at first sight of a long and complicated question set. It’s no coincidence then why moneysupermarket.com, confused.com and comparethemarket.com ask users registration numbers before starting a quote. By presenting a basic question to start a quote, users are not immediately put off, whilst the initial investment (no matter how small) increases the likelihood that they’ll complete the rest of the form. This is because of the sunk cost bias – once a user has already committed to and spent time on a part of your form, they are motivated to see the task through to completion to avoid the initial effort going to waste.

Whilst gaining commitment from the user can help to reduce bounce rates, there are other techniques to hide a large question set.
A simple option would be to hide certain future questions until the user has filled in another. Google Compare does this dynamically with the protected no claims discount field. There are quite a few different ways of applying the technique to reduce the initial impact on users when they first see the form.

cover details

Google Compare hides the protected no claims discount question until the user tells them that they have no claims discount.
Google Compare hides the protected no claims discount question until the user tells them that they have no claims discount.

One last way of reducing the impact on users would be to split the questions over multiple pages – a progress indicator is something worth considering here too, to let users know where they are in the process. However, as with any changes you make, be sure to test it thoroughly as also having a ton of pages can just as easily put users off. The trick is to tweak and test iteratively until you find the perfect balance.

10. Ambiguous Answers

Finally, let’s look at the pre-set answers to your questions. When analysing them, you’ll need to ask yourself “what happens if the user doesn’t fit into that option you’ve provided?”

Users will likely do 1 of 4 things:

  • If you have a telephone number/email/live chat, (hopefully) they will contact you to find out what to do.
  • They may try to guess the answer (your analysts will hate that)!
  • They may search online to find out the answer, and if you are not hot on search marketing search terms, then you may lose your business here.
  • They give up, and you’ve lost a potential customer as well as damaging your brand.

The answer to this is to offer an “other” or “not sure” option. This won’t please analysts who want clean data, but it’s better than losing the sale. Once implemented, it will significantly reduce the chance of users dropping out over confusing or complicated questions.
If you’re interested in capturing more information (and you don’t mind analysing it), it’s worth displaying a free text field to capture what those “other” responses are. This way you can work them back into the question set and clean up your data.

Final thoughts

I’m conscious that we’ve gone through a lot of different points in this series. We’ve covered a lot of common mistakes in form usability that can affect the user’s journey and ultimately your conversion rates, many of which can be very quick and easy to change. However, whilst we’ve seen that these common mistakes can reduce your conversion rates, please do not make the number one mistake of making changes without testing them first. What works on one site may not work on another.

The primary reason behind this article is to help you to find ways of improving your form usability. It pains me to visit a website and come across, time and time again, some easy to rectify mistakes. The user experience of your site matters, do not underestimate the value of a good experience.

10 Quick wins to increase your web form conversion rate: part 1

This post is the first of a two part series discussing the quick wins – and pitfalls – that could make a dramatic difference to your form completion rates and your customers’ experience.

Form usability can be a tricky area of web design. There are many examples of websites investing vast amounts of time and money – almost in an F1 fashion – just to make minor tweaks that fine-tune their forms for the best customer experience. On the other hand, there are still plenty of websites that could do with going back to basics and doing some good, old fashioned research. Insight methods such as usability testing, heat mapping, surveys and form analytics will highlight pain points in web forms. Getting started or knowing where to start can be a difficult task. In the next section, we’ll go through some basic but important areas of usability that can dramatically increase conversion rates. As ever, with any changes, be sure to test them!

1. The number of questions – do you absolutely need them?

Have you ever found yourself filling in an online form, only to be faced with a never-ending set of questions?  As a user, I’m always hoping that the end result will justify the hard work. As an optimizer, I’m always looking to gather the least information required to move the user through the form. Even a small reduction in questions can drive a dramatic increase in completion rates. Before you think about removing any questions you’ll need to go through a few simple, but important tasks:

  • Step 1: Go through your question set and note each one down. I find using Google sheets or Excel the easiest place to start.
  • Step 2: You’ll need to note what type of form is used to capture the answer e.g. dropdown / free text / radio button.
  • Step 3: Add the possible answers for each question (or N/A if the question is open-ended).
  • Step 4: Mark each question to show if it is mandatory.

An example of how you could layout your question set analysis. In a previous life I worked in the Insurance industry – the first time I carried out this task, I noted 67 questions (poor customers)!

Next up, time to review the questions! At this point if you’re not in complete control of the question set, you may need to discuss the impact of removing them with the relevant members of staff.

Start by challenging each question with the following:

  • Is this question essential or just “nice to have”?
  • Is this question still relevant, or is it legacy?
  • For any question that you’ve not marked as “mandatory” – do you still need it?
  • Could you use an API to look up that information rather than asking it?

Like the mobile first approach, every question on your site should serve an essential purpose. If it’s not useful, remove it!

Comparison sites often offer great examples for how to shorten a question set. They use APIs such as the DVLA vehicle lookup to find information such as make/model/seats/transmission etc. They have even experimented with an API which reports back an average vehicle price, to reduce the deliberation which causes customer friction.

Screenshots showing how MSM use a vehicle lookup API to reduce the amount of questions required.

2. User interactions

Removing questions will reduce unnecessary user interactions. Why is the number of user interactions important? The more times you ask your users to interact with or think about something, the more cognitive and motor effort is required. As Steve Krug quite eloquently puts it… “Don’t make me think”!

In the same excel sheet it is worth noting how many interactions it takes to answer your question set. For example, a simple drop down box might need up to 3 interactions:

  • Initial click on the drop down
  • A scroll of the mouse wheel
  • Click to choose an option

Whilst this sounds like a tedious task, it’s useful to know how many interactions are needed to complete your registration form, not just the number of questions you’ve asked.

Drop downs vs radio buttons

Are you using dropdown menus where you could be using radio buttons?

Replacing dropdowns which only have a few options (as a general rule, anything under 6 answers) with radio buttons provides a quick win. Not only do radio buttons offer fewer interactions, but they allow users see the answer before they interact with the initial section, speeding up the question and answer process. This is also a big benefit on mobile, where users find dropdowns much harder to interact with. Yes, this will create longer pages, but thanks to social media and mobile adoption, users have learnt how to scroll proficiently.

Example showing how a drop down could be turned into a radio button to reduce user interactions.

Mobile

Is there a way you can help the user move through the journey? By automatically scrolling the browser/app window to the next section, fewer interactions from the user are needed. This is something Virgin America do to help users navigate smoothly through the process:

Virgin America’s use of an auto-scrolling responsive site makes using a mobile significantly easier.
Virgin America’s use of an auto-scrolling responsive site makes using a mobile significantly easier.

Get creative, don’t make users think.

Example

During usability testing, we tasked our users to get car insurance quotes from comparison sites and compared their experiences with moneysupermarket.com with competitors. Whilst comparethemarket asks a similar number of questions to competitors, users not only completed forms faster, but they found it easier to use simply because it takes fewer interactions to get a quote.

Comparethemarket.com uses big button style radio buttons to remove the need of drop down boxes.

3. Calendars

There’s a time and a place for calendars i.e. when it’s important for the user to know what day in the week a particular date falls on, such as when booking a holiday. Anywhere else and it’s a needless calendar, and my personal pet hate!

Here are a number of common issues:

  • Generally stock calendars offer a very poor affordance
  • It’s not clear whether to choose the day or year first
  • It’s not clear that you need to choose a year. I’ve watched helplessly as users select a day but then ignore the year section. Thinking they’ve done what’s required they click onto the main page to hide the calendar, to find out that the field is not completed. This just completely confuses users, as they don’t understand what went wrong. At this point, they’re stuck in an endless loop trying to figure out how to complete your form.
  • After choosing a date, if you want to change the year (let’s say your user made a mistake), your user will need to not only change the year, but also then reselect the day again.

Two common poor examples of calendars used by websites to capture a user’s Date of Birth.

At this stage, there are two options:

  1. Either completely remove the calendar and keep a text field/drop down box (this makes more sense for a DOB field, for example).
  2. Spend time ensuring the calendar is both clear and user-friendly. I would highly recommend carrying out user testing to make this as friction-free as possible.

4. Readability

This is a nice simple one! How readable are the questions and answers on your site?

Are you using a big enough point size and line spacing for your target audience? What is your primary persona’s age – has this been taken into consideration? A great example is Saga (over 50s). Their customers may require a larger font size to that of users who visit www.onedirectionmusic.com! The recommended size will vary depending on your brands chosen font. Using Arial as a baseline, the question titles should be 16px with the question labels falling to 14px.

Standard font size for form question titles and their labels. Note how the titles are slightly bigger than the labels. This provides an easy way of identifying the hierarchy.

When users fill out forms their eyes will flicker between the question and the answer. This will be more pronounced on sites where it’s imperative that the user enters the correct information – such as a mortgage or job application. The further the question is from the answer, the more distance the eye needs to cover, which translates into more effort for the user. Conversely, the closer the question and answer, the less effort.

Placing the question title above the answer is the best way of reducing the distance the eye needs to travel, thus reducing effort.

A number of different examples of ways websites layout their forms. The question title above the question label has proven in countless eye tracking tests to reduce the time it takes for the eye to move between title and label.

5. Inline error handling

I’m sure that we’ve all had this common experience. You encounter a long question set (with dread I might add); complete it, only to find that on the form submission you’ve made a number of errors… Gah, time to scroll through and find what you’ve done wrong!

Why wait for the form submission to notify users of an error? Rather than wait for the user to reach the end of the form, highlight the error as soon as possible. This will keep the user focused on what they were doing and keep de-motivation to a minimum.

Lastly, make sure the error-handling wording is helpful, rather than ambiguous. “Please select a correct value” or “Please tell us your name”  is more helpful than “answer is invalid” or “field cannot be empty”, because it addresses the user, not the database validation.

For part 2, click here.

Design for decision making: why it matters

Exhibiting information in a clear, yet compelling way is one of the more challenging nuances of UX design. As users become increasingly reliant on technology to provide answers in a given situation, designers come under more pressure to play the role of the choice architect. There’s a conflict between the task of the product or service provider (assuming impartiality) who wants to display all the relevant information as clearly as possible; and the user who wants to filter out the extraneous possibilities and get right down to a smart selection. Given that the average person makes over 200 decisions a day just about food in our choice-riddled society, it’s no wonder users want the burden eased when it comes to choosing the right product for them – (on that note, skip straight to end for the 5 key takeaways).

Map A – London Underground

Map B – Geographic tube map of the London Underground (source: Mark Noad)

They say the road to hell is paved with good intentions. Often, the intention to provide users with all options results in a choice-paralysis which can both hinder customers in their journey, and harm your conversion rate – potentially sending users back a step and opening them back up to your competition. Alternatively, misrepresenting, or failing to emphasise important factors going into the decision-making process may cause users to overlook these factors, and adversely impact the eventual outcome the user ends up with. Let’s first look at this in the context of the transport industry, where the user literally just wants to get from A to B.

Metro maps and schematics have been the go-to solution for route planning since transport lines began to converge – the earliest map for London transport was published in 1908. They are integral to the smooth-running of big cities – particularly when you consider the growing population and the suburban sprawl of city workers. The trouble is, public transport maps do not scale with geographic reality. A recent study found that this distortion affects travelers perceptions of relative location, route selection and associations of different routes – e.g. train journeys that look ‘long’ are often actually quicker on foot – seemingly small oversights that can actually have quite significant consequences on efficiency among other success factors, when applied at such a large scale. The study uses an example of a passenger travelling from Paddington to Bond Street with a choice between two seemingly equidistant routes according to map A – either travel to Baker Street and change to the Jubilee line (Path 1), or change at Notting Hill Gate for the Central line (Path 2). Path 2 is about 15% slower by time on-train, and actually starts in the opposite direction to the destination on a geographical map, however the experiment found that 30% of passengers chose path 2, probably because on the schematic tube map, path 2 is about 10% shorter than path 1 and Notting Hill Gate is shown to the south (not west) of Paddington. Map B shows the map scaled to London’s geography.

The London tube map suggests that Marylebone and Baker Street are significantly farther apart than in reality

Another example is that Baker Street is shown slightly south of Marylebone and significantly further away, when seasoned Londoners know the two are actually situated only 5 minutes apart on foot (and are on the same road).

Some app designers have already begun tapping into this opportunity to more intelligently guide users’ transit decisions. Apps such as Citymapper and Tube Map provide additional insights to help users make contextually informed judgements, such as approximations of taxi fares, walking times or weather-based alternatives such as ‘rain safe’ options:

This is something UX designers will be tasked to consider increasingly as the discipline evolves and matures. User interfaces need to make it easy for users to choose, not just to use, and having this practise baked into web and app designs is guaranteed to be the difference between those who grow and those who stagnate, especially in competitive market spaces.

The e-commerce, travel and SaaS sectors are choice among those to start putting serious weight behind their online choice architecture.

Dressipi checks that it’s making the right predictions during onboarding, then learns continually once the user is actively engaged

Et voila, the user is given a personalised shopping experience with stylist-approved items customized to their preferences; whittling down the selection and boosting customer confidence in their eventual purchase.

Littlewoods and Very.co.uk have confronted the barrier of an expansive clothing catalogue and indecisive female shoppers (need I say more?) with a ‘style adviser’ – a super smart backend system courtesy of Dressipi designed to narrow and intelligently guide womens online fashion shopping, based half on self-preference and half on insider stylist tips and tricks.

Users primarily search by map, determining the results they’ll see and filtering out extraneous possibilities that typically clutter the accommodation selection experience in travel.

For hip traveller types who know that location is everything, Airbnb allow (even encourage) you to search by map, turning the selection process on its head by honing in on their users’ priorities. Custom filters can then be added by region, amenities, and user generated keywords to further refine the options, continually driving users towards their end goal. In future, a nice touch might be to extend the crowd-sourcing with user-generated contextual cues within the map for different areas and districts – e.g. good for shopping, coffee shops, nightlife or museums – but I digress (occupational hazard!).

In the SaaS space, Rackspace know their visitors are arriving with a diverse array of needs, and realise the importance in getting to the bottom of that quickly to avoid losing out on custom.

By guiding users through a smart flow of options, the urge to overload visitors with a comprehensive range of services is removed, and you can avoid confounding users who aren’t really sure what they need yet. For more complex hosting problems, the flow diverts to live chat or callback, whilst the outcome and final CTAs leave users assured that they’ve taken positive strides towards resolving their specific needs which are now ready to be picked up on the other end.

The key to solid choice architecture, whatever your business, is quite simple: know your customers. Anticipate their needs, and learn to see things through their eyes.

Don’t know who your customers are or what they need? Ask them. In the long run, gathering a little intel is better than leaving your customers alone in the wild. Package it up in some effortless UX and users will feel like it’s part of a bespoke service tailored to their needs.

Here are some golden rules to set you on the path to informed, but guided customer conversions:

  1. Ask the right questions. If a user can see why you’re asking, and what’s in it for them, they’ll already be bought in to the process. Make sure the user benefits and can see the rationale behind every question – if they can’t, lose it, because it’s not helping them.
  2. Don’t tell your customer what to do. Choice architecture is not a substitute for effective information architecture – make sure that you’re only ever guiding your customers decisions and not shoehorning them into buying something they didn’t want. Let your users know you understand them and are there to give honest and impartial guidance to help them reach the best outcome for them. The alternative could erode trust and potentially hurt your future relationship.
  3. Set clear progress indicators. Answering a few intelligently structured questions is all good and well, but if your user can’t see the light at the end of the tunnel, they’re likely to lose hope and abandon the process. Make sure the method is organised and transparent if you really want your customers to engage.
  4. Refine choices, but stow the rest away somewhere that’s visible and organised. No-one likes to feel that they might be missing out and some users may prefer different ways of navigating through your site. Sometimes it’s curiosity; sometimes a need for confirmation we made the right choice – we want to be able to see what we didn’t go with. Keeping this transparent is key to a healthy customer lifecycle.
  5. Make alternatives omnipresent. Ultimately, the customer knows best, and if they lose faith in your  site’s ability to meet their needs, make sure they have a jumping off point to avoid losing their custom altogether.