Design & UX Archives | Conversion.com

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.

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

5 Books every e-commerce manager should read (to increase conversions)

Keeping a healthy online sales engine is no walk in the park. From web usability and UX (yes, they’re different things) to copywriting and consumer psychology, there are many factors at play when it comes to your customers behaviour and their chances of converting (i.e. purchasing) on a given visit. With average e-commerce conversion rates at only 2%, an e-commerce manager needs every weapon at their disposal to ensure their visitor-to-transaction ratio is at optimal performance. Knowing the impact of each conversion lever – and how to pull accordingly – is an art which, in the long-run, is well worth the initial investment.

Whether you’re starting to think about testing, already running your own experiments or just looking to brush up on a few essential skills, this list has everything you need to get focused, and start thinking critically about your website conversion strategy and performance.

Usability

Don’t make me think – Steve Krug

dontmakemethink

A staple for the CRO community, Steve Krug’s Don’t make me think is refreshingly real and to the point, bringing some much needed simplicity to the often over-complicated world of web design. Krug eats his own dog food by keeping right to the point – the book could easily be read over half a week’s commute – with relevant (and occasionally hilarious) examples which paradoxically, will make you think a lot about your website design and user experience. The beautifully obvious takeaways make it both a satisfying and highly actionable read, guaranteed to trigger your first few site changes and make you think about your longer term optimisation strategy.

 

The Design of Everyday Things – Donald A. Norman

everydaydesign

The Design of Everyday Things is one of those books which will enrich your thinking far beyond your professional remit. Besides the vast reassurance that you’re not alone in your daily struggle against doors, microwaves and all the minutiae of present-day life, the takeaways for e-commerce managers, UX designers (or anyone concerned with web performance for that matter) is nothing short of profound. By delving into the mechanics of human-environment interactions using concepts like perceptual psychology and embodied-cognition, the reader’s discovery is something to have legitimately been described as ‘life changing’. Everything will look different after reading this book, not least of all your website, which is sure to undergo some gestaltian re-analysis after you’re done.

 

User Experience

Hooked – Nir Eyal

hooked

Not your run-of-the-mill UX recommendation, true, but Hooked makes the list here for it’s priceless contributions to the importance of UX in customer habit formation and retention. 30% of an e-commerce website’s customer base purchase only once per year – Hooked shows you how to create a sense of dependency in key moments and then keep users engaged enough to guarantee their return through association, just as soon as their needs arise again. As Nir Eyal puts it – “the result of engagement is monetisation”. The book centers around a clever model known as ‘the hook canvas’, and is handily split into succinct chapters for each phase.

 

Psychology/Behavioural Economics

Influence: The Psychology of Persuasion

influence

The seminal guide to persuasion, Influence single-handedly opened the literary floodgates of consumer psychology and behavioural economics to the masses. Cialdini’s six principles of persuasion – reciprocity, commitment, social proof, liking, authority and scarcity – have become a major basis for every subsequent publication in the field, so if you’re only really going to give the time of day to one, let this be it. When you start running experiments based on cognitive-behavioural levers, you’ll get the testing bug, not just because you’re playing directly on your consumers motivations, but because it creates so much potential for agile optimisation and reactive campaign formation. Loaded with enchanting stories that make for a surprisingly fluid read, it’s guaranteed to stay with you, especially as you might read it two or three times.

 

The psychology of price – Leigh Caldwell

psychofprice

Applying well documented behavioural insights, the psychology of price gives a solid structure to pricing effects you didn’t realise you already knew (most likely from experience), all set to the backdrop of the fictitious Chocolate Teapot Company. This works perfectly by helping you to absorb all the theory whilst providing tangible examples, with practical application guidance and case studies throughout. Add that to the list of 36 solid pricing techniques providing abundant price test ideas and the book will likely pay for itself several hundred times over. Putting this in your bookcase is definitely a no-brainer.

While there are definitely many worthwhile books out there for this diverse (and demanding) profession, these would have to be our five ‘desert-island’ e-commerce necessities. Are there any you think we’ve missed? What did you make of our list? Let us know in the comments below!

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.