What are the features that define user-friendly navigation, efficient checkouts and streamlined product filters? How can we make e-commerce websites more effective by using user experience (UX) design to increase conversions? Here are the key e-commerce elements that can benefit from better UX design: Responsiveness The most important – and obvious – thing in user experience design is to remember that you are always designing for the user, not yourself. The user journey through your e-commerce website starts with your website visitors using a device to get there. It is essential to understand what devices your users will be using…
We talk a lot about marketing strategy on this blog. But today, we are getting technical.
In this post, I team up with WiderFunnel front-end developer, Thomas Davis, to cover the basics of server-side testing from a web development perspective.
The alternative to server-side testing is client-side testing, which has arguably been the dominant testing method for many marketing teams, due to ease and speed.
But modern web applications are becoming more dynamic and technically complex. And testing within these applications is becoming more technically complex.
Server-side testing is a solution to this increased complexity. It also allows you to test much deeper. Rather than being limited to testing images or buttons on your website, you can test algorithms, architectures, and re-brands.
Simply put: If you want to test on an application, you should consider server-side testing.
Let’s dig in!
Note: Server-side testing is a tactic that is linked to single page applications (SPAs). Throughout this post, I will refer to web pages and web content within the context of a SPA. Applications such as Facebook, Airbnb, Slack, BBC, CodeAcademy, eBay, and Instagram are SPAs.
Defining server-side and client-side rendering
In web development terms, “server-side” refers to “occurring on the server side of a client-server system.”
The client refers to the browser, and client-side rendering occurs when:
A user requests a web page,
The server finds the page and sends it to the user’s browser,
The page is rendered on the user’s browser, and any scripts run during or after the page is displayed.
The server is where the web page and other content live. With server-side rendering, the requested web page is sent to the user’s browser in final form:
A user requests a web page,
The server interprets the script in the page, and creates or changes the page content to suit the situation
The page is sent to the user in final form and then cannot be changed using server-side scripting.
In laymen’s (ish) terms:
When you visit a SPA web application, the content you are seeing is either being rendered in your browser (client-side), or on the server (server-side).
Basically, the page is incomplete upon arrival, and is completed within the browser.
If the content is being rendered server-side, your browser receives the application HTML, pre-built by the server. It doesn’t have to fill in any blanks.
Why do SPAs use server-side rendering?
There are benefits to both client-side rendering and server-side rendering, but render performance and page load time are two huge pro’s for the server side.
(A 1 second delay in page load time can result in a 7% reduction in conversions, according to Kissmetrics.)
All of which to say, with a complex application, client-side rendering can lead to sloooow initial load times. And, because client-side rendering relies on each individual user’s browser, the developer only has so much control over load time.
Which explains why some developers are choosing to render their SPAs on the server side.
But, server-side rendering can disrupt your testing efforts, if you are using a framework like Angular or React.js. (And the majority of SPAs use these frameworks).
The disruption occurs because the version of your application that exists on the server becomes out of sync with the changes being made by your test scripts on the browser.
NOTE: If your web application uses Angular, React, or a similar framework, you may have already run into client-side testing obstacles. For more on how to overcome these obstacles, and successfully test on AngularJS apps, read this blog post.
Testing on the server side vs. the client side
The original page loads, the content is hidden, the necessary elements are changed in the background, and the ‘new’ version is shown to the user post-change. (Because the page is hidden while these changes are being made, the user is none-the-wiser.)
As I mentioned earlier, the advantages of client-side testing are ease and speed. With a client-side testing tool like VWO, a marketer can set up and execute a simple test using a WYSIWYG editor without involving a developer.
A Quick Hack
There is a workaround if you are determined to do client-side testing on a SPA application. Web developers can take advantage of features like Optimizely’s conditional activation mode to make sure that testing scripts are only executed when the application reaches a desired state.
However, this can be difficult as developers will have to take many variables into account, like location changes performed by the $routeProvider, or triggering interaction based goals.
To avoid flicker, you may need to hide content until the front-end application has initialized in the browser, voiding the performance benefits of using server-side rendering in the first place.
Here is an example where we are testing a pricing change:
“Ok, so, if I want to do server-side testing, do I have to involve my web development team?”
But, this means that testing gets folded into your development team’s work flow. And, it means that it will be easier to integrate winning variations into your code base in the end.
If yours is a SPA, server-side testing may be the better choice, despite the work involved. Not only does server-side testing embed testing into your development workflow, it also broadens the scope of what you can actually test.
Rather than being limited to testing page elements, you can begin testing core components of your application’s usability like search algorithms and pricing changes.
A server-side test example!
For web developers who want to do server-side testing on a SPA, Tom has put together a basic example using Optimizely SDK. This example is an illustration, and is not functional.
In it, we are running a simple experiment that changes the color of a button. The example is built using Angular Universal and express JS. A global service provider is being used to fetch the user variation from the Optimizely SDK.
Here, we have simply hard-coded the user ID. However, Optimizely requires that each user have a unique ID. Therefore, you may want to use the user ID that already exists in your database, or store a cookie through express’ Cookie middleware.
Are you currently doing server-side testing?
Or, are you client-side testing on a SPA application? What challenges (if any) have you faced? How have you handled them? Do you have any specific questions? Let us know in the comments!
Most of us are in our late 20’s, living in Downtown Vancouver, where there’s plenty of public transit, parking is difficult, and expenses are high. Owning a car doesn’t really make sense.
Until one of us needs help moving, of course.
My boyfriend, Andre, owns a 1997 GMC Sierra 1500; needless to say, he gets hit up constantly for truck-related favors.
We hear a lot of:
“Hey Dre, can you help me move on Saturday? I’ll buy you beer!” “Dre! Can you help me move on Saturday? I hate to ask, but you’re my only option.” “Andre, can you help me move on Saturday? No pressure, of course, if you can’t do it…”
The initial request (“Can you help me move?”) is almost always accompanied by something else: a bargain (“I’ll buy you beer”), a reason (“you’re my only option”), an out (“No pressure”).
For our friends, it seems instinctual to cushion the request somehow, to urge Andre to say “Yes” and dissuade him from saying “No”.
Think about all of the times you’ve asked a friend for a favor. Do you ever simply ask for the favor, or do you find yourself negotiating in some way? I, for one, try to frame my requests in ways that make them almost impossible to refuse.
As marketers, we do the same thing. After all, most of what we do revolves around trying to get our users to take an action. In the social science community, these ‘negotiations’ are referred to as compliance gaining techniques.
Four compliance gaining techniques you should test
Get this list of 4 of our favorite “Loss Aversion”-specific compliance gaining techniques. Learn how these techniques work and get ideas for how to test them on your website.
By entering your email, you’ll receive bi-weekly WiderFunnel Blog updates and other resources to help you become an optimization champion.
In this post, I’m going to examine the concept of compliance gaining through a marketing lens.The question is: How can you leverage compliance gaining techniques in your marketing to get your users to say “Yes” rather than saying “No”?
When your mom gently advises you to wear your helmet or when a friend asks you to set him up, the message source (mom, friend) are trying to get you to do something.
To clarify, compliance gaining is often confused with persuasion, but they are different. While persuasion is often concerned with changing a person’s attitudes or beliefs, compliance gaining seeks to change behavior.
There are numerous (read almost 900) strategies you could categorize as compliance gaining, from “bargaining”, to “complimenting”, to “persistence”, but here are some of the more pervasive compliance gaining techniques you may have heard of as a marketer:
Types of compliance gaining techniques
You ask your user for something small first that they will most likely say yes to, then ask for something larger (the actual action you want them to take) at a later time. Researchers have several theories as to why this is effective, one of them being your user’s desire to remain consistent with what they previously said.
Example: If your web page features a form, you can break the form into multiple steps. Start by asking for easy-to-give information; save bigger asks for later steps when there is more to abandon. Once your user starts saying “yes”, they are more likely to continue to do so.
You ask your user for something big that they will most likely say “No” to, followed by a smaller, more reasonable request (the actual action you want them to take). Guilt and self-presentation help explain why this is effective: Your user has already said “No” once, and won’t want to say “No” twice.
Example: On a non-profit website, you might start off by asking your user to sponsor a child for $20/month. This is a fairly large request. Your user may feel badly for saying “No” to this initial request, making them more receptive to your next request for a smaller, one-time $20 donation. This is your intended request.
You ask your user for something in a confusing or strange way the first time around. You immediately follow-up by re-framing your request or giving your user a reason to say “Yes”.
Example: Some brands use a catchy, clever headline that isn’t clear at first, that they reframe with informative copy just below the main headline.
In this example from Apple, the headline reads “Light. Years ahead.” The dots disrupt our thinking framework and the copy below helps reframe with adjectives such as “lighter”, “better”, “thinner”. We are less likely to resist the reframe because our brain is busy with the initial disruption and the adjectives help to convince us.
Note: Be careful about making your content too disruptive. You could lose visitors due to a reduced information scent.
Dump and Chase:
You ask for something and your user says “No”. You respond by asking “Why not?”, repeating your request in a slightly different way. Urgency and guilt are at play here: You’ve created a sense of obligation by asking “Why not” and the repetition of your request can make it seem more important, more urgent.
Example: Your user may decide they are not ready to buy from you. That’s where mailing lists come into play. If they sign up for your mailing list, you are able to repeat your offer (via email) in various ways until that user’s concerns have been met and they finally do buy.
There are many more compliance gaining techniques. But my favorite of the moment is referred to as But You Are Free or BYAF.
But You Are Free to refuse…
But You Are Free refers to a situation where I ask you for a favor followed by a gentle reminder that you are free to refuse my request.
Wording can vary, but the key to this technique is to acknowledge the target’s freedom to say “no”.
In 2000, French researchers Guéguen and Pascal published a study that demonstrated the BYAF technique for the first time. In the study, experimenters asked passersby if they could have some change for the bus, followed by the statement “But you are free to accept or to refuse”. The Control group of passersby was simply asked for change for the bus, sans compliance gaining technique.
Their findings showed that passersby who heard the follow-up phrase were more likely to comply with experimenters’ request and gave twice as much change as those in the Control.
This experiment was based on psychological reactance theory. Introduced by Jack Brehm in the 1950’s, the theory states that “individuals have certain freedoms with regard to their behavior. If these behavioral freedoms are reduced or threatened with reduction, the individual will be motivationally aroused to regain them.”
Freedoms once granted will not be relinquished without a fight.
– Robert Cialdini, Influence: The Psychology of Persuasion
Guéguen and Pascal proposed that the phrase, “but you are free to accept or refuse”, weakens the target’s perception that their freedom to say “no” is being threatened by the initial request. Instead of being motivated to refuse, in order to protect their own freedoms, the target is reminded that their freedoms are still in tact, allowing them to say “yes”.
Recently, I asked a coworker for a favor via Slack, followed by the phrase “No pressure, of course.” Even though I really needed this favor, I added the phrase “No pressure” to my request—it was automatic. It was the BYAF compliance gaining technique. (My coworker said yes.)
Now, before you go adding a “You are free to accept or refuse” sub-head to all of your calls-to-action, let’s go a little deeper…
BYAF in a marketing context
In 2013, Christopher Carpenter published a meta-analysis of the effectiveness of the BYAF compliance gaining technique in Communication Studies. He wanted to know, given the research that has been published on this technique, whether or not BYAF is effective in a sales situation (among other questions).
Carpenter cited past researchers who theorized that “people are more suspicious of self-interested requests and cognitively process such requests more thoughtfully,” which would render the BYAF technique less effective when a request is being made in a sales context.
However, when Carpenter completed his meta-analysis, he found that the effect of BYAF on a target was equal for both prosocial requests (compliance benefits some worthy cause rather than the requester) and self-interested requests (compliance benefits the requestor) e.g. a sales request.
The BYAF technique has the virtue of being adaptable to potentially any context. That the effect size was consistent for both prosocial and self-interested requests in a variety of contexts…is reflective of a technique that has widespread value. All that is required for the BYAF technique is that the key phrase is added to the request.
– Christopher Carpenter
So, is BYAF a compliance gaining technique you can use when you’re talking to your prospects? Quite possibly. You should test that!
In personality psychology, individuals with an internal locus of control believe that their behavior and actions are guided by their decisions and efforts, while individuals with an external locus of control believe their behaviors and actions are guided by external forces.
People with an internal locus of control are more proactive and self-motivated, while those with an external locus of control are often more passive.
One theory as to why BYAF works is that the requester is giving control back to the target by adding the phrase “but you are free to _____” to a request.
For one WiderFunnel client, DMV.org, our Strategy team wanted to test giving control back to the prospect, just like the BYAF technique does. Rather than emphasizing a prospect’s freedom to refuse, however, the team wanted to emphasize the prospect’s freedom to choose.
DMV.org is a privately owned publisher of helpful information about the DMV. The company earns revenue through performance-based advertising on their thousands of content pages. For example, on a license renewal information page, a banner within the content offers visitors an opportunity to check car insurance rates.
When we tested the BYAF spin-off, we were testing on the second step of DMV.org’s funnel, where visitors select a provider.
We tested a single sub-headline isolation on this page, adding the phrase “The one you choose is up to you!” This phrase was meant to remind visitors that they are in control, they are free to choose exactly what they want to choose. Our Strategists were targeting the same mental sweet spot that the BYAF technique targets.
The addition of this phrase led to a conversion rate lift of 28.9% for DMV.org.
Testing compliance gaining in your marketing
Persuasion principles and compliance gaining techniques are extremely helpful to consider when you’re planning your digital experiments. Of course, persuasion principles are just one source of information you should look to when planning a test.
Related: For more sources of information, check out Chris Goward’s post outlining WiderFunnel’s Infinity Optimization Process. Pay particular attention to the section on “The Explore Phase”.
It is always helpful to de-construct the persuasion principle or psychological trigger itself to try to get at the heart of what is actually motivating someone to act. In the case of BYAF and “the one you choose is up to you”, the motivating factor might be the simple fact of reminding a visitor that they are in control of their decision.
What might your users respond to?
What are your favorite compliance gaining techniques to test? Have you seen success with the BYAF technique in your testing? Tell us about it in the comments!
When technical performance optimizations reach certain limits, psychology and perception management might help us to push the limits further. Waiting can consist of active and passive phases; for the user to perceive a wait as a shorter one, we increase the active phase and reduce the passive phase of the wait. But what do we do when the event is a purely passive wait, with no active phase at all? Can we push the limits even further?
Waits without an active phase happen quite often in the offline world: waiting in a checkout line to the till, waiting for a bus, queuing in an amusement park, and so on. It is widely accepted that the longer the user has to wait, the more negative the reaction to the wait. User reaction to a wait online is no different from that in the offline world. Studies based on the analysis of more than a thousand cases identify 14 distinct types of waiting situations on the web. Being dependent on our users’ loyalty, we cannot leave them facing a passive wait.