Categories
AB Ideas Marketing Technology

Increase the size of UI elements

Increasing the size of important UI elements on your website can help draw attention to them. This is useful for call-to-actions and other important visual cues. Experimenting with visual hierarchy is a great idea for an A/B test. SplitWit makes it easy to quickly apply these kind of changes to your ecommerce website. Below explains a few of your options:

Font size

Increasing the font-size of your headlines is just a few clicks away with SplitWit. Select the text that you want to emphasize, scroll down to the font-size property, input a higher pixel value, and hit save.

Width and height

Adjusting the width and height of buttons or images can help them stand out. Click on the user interface element in visual editor to reveal a list of style properties. You can update the item’s size using pixels, percentages, or any other valid CSS measurement unit.

Edit the size of a button using the visual editor

Padding

Adding padding to an element generates space around its content within its border. This a good option for buttons, text widgets, and other self-contained UI items. You can find the padding property in the list of style properties displayed when using the visual editor

Categories
AB Ideas Marketing Technology

How to change the color of a button

A great idea for an A/B test is to experiment with the color of your call-to-action buttons. The right colors can generate positive emotions from your visitors and push them to take action.

SplitWit lets you change the color of buttons on your website and Shopify store. Start by clicking “Make changes” from your experiment dashboard

Shopify experiment dashboard

Next, click on the button that you want to edit in the visual editor panel. You’ll see a list of properties for the element you selected. Scroll down to “background”. Here you can type the name of a color or enter an HTML hexadecimal color code (eg. #f3f3f3).

Visual editor properties list for a selected element

If you click “view options” you’ll see a list of possible color values that you can choose from. Once you decide on a color, be sure to save and preview your changes.

How to choose the right color

When choosing a button color for your experiment, start with a hypothesis about why the change might increase conversions.

Often times a powerful red can evoke a response of urgency, and stimulate users to click by grabbing their attention.

Green or blue communicates feelings of security that may give visitors confidence in your call-to-action.

Generally, when experimenting with color, try to follow basic color theory principles. Colors on opposite sides of a spectrum tend to be visually pleasing. Following a color scheme can give you ideas about what options are best.

Categories
News Technology

Shopify App

SplitWit is now available as a Shopify app. It easily installs and integrates with any Shopify store. You’ll be able to make experimental changes to your shop right from the Shopify dashboard.

Shopify App Store

Running A/B tests on Shopify websites has never been easier. Get started with a free 30 day trial.

Shopify dashboard

This is the only Shopify app that allows you to make visual A/B test changes directly from the Shopify dashboard.

Shopify App Store Badge
Categories
News Statistics Technology

Stats Calculator

We’ve launched the SplitWit Statistical Significance Calculator.

Statistical Significance Calculator

It’s free to use, and calculates the results of your A/B experiments. Just enter the number of visitors and conversions for both versions of your test. The calculator will work out conversion rates, relative uptick in conversions between the two, and will tell you if the results are statistically significant.

This tool uses the same stats engine that powers the main SplitWit service.

Categories
Marketing News Technology

Getting onboard

Have an idea about how to make your website better? That’s great! You should use SplitWit to test it first. It’s important to make sure that your intuition matches reality. The numbers won’t lie.

Below are the steps you’ll need to take to get started.

1. Create your experiment

Name your experiment, and set which page(s) it should target. Good experiments are specific, and test discrete UI/UX elements – such as the color of call-to-action buttons.

Create your experiment

2. Select a variation

SplitWit allows you to edit to both the control and variation versions of your experiment. Start by choosing which you’d like to edit.

Choose a variation

3. Make changes

Use the visual editor to make changes to your website. SplitWit lets you easily adjust text, images, and colors. It even allows for more advanced functionality, such as adding animations and custom code.

4. Add a metric

Metrics determine what an experiment will measure. You can target specific clicks or page-views. Examples include clicking on a “buy now” button or landing on an order confirmation page. This is how you can tell if your experimental changes had a positive affect on your business.

5. Start the experiment

Your experiment is created, you’ve made variation changes, and set a metric. Now, you’re ready to make the experiment live by hitting the start button. A portion of users will begin seeing the changes, and metric data will be recorded.

SplitWit will let you know when the data has reached statistical significance and determine a winner between your variations.

Categories
Statistics Technology

Statistical Significance

Statistical significance means that your experiment results are likely not due to random chance.

Any experiment seeks to prove that the results from the sample also exist in the overall population. The more visitors you have, the easier it is to disprove randomness.

Before starting an experiment, you generally have a hypothesis about what will make your website better. It might be changing text, adjusting layouts, or updating colors. SplitWit evaluates your hypothesis based on the metrics you set for visitors. Our algorithm ensures that the experiment is not considered complete until the results are statistically significant.

Statistically significant results
Analyze the results of your hypothesis to improve your website.

How does SplitWit use statistical significance?

You can check the results of a SplitWit experiment at any time. The results page tells you which version is performing better based on the metrics you have set. It also shows wether these results are statistically significant, or not.

Your experiment is not considered finished until statistical significance has been achieved. But, what does that mean?

It means there is a 95% chance that these results are real, and not due to a false positive. SplitWit uses formulas to calculate this number based on probability. This calculation gives you confidence that the changes you make to your website will positively impact your business.

Significant Results

Categories
Technology

What is a CSS selector?

A CSS selector is a way of specifying a UI element on a website. It could be an HTML element, class, or ID.

Elements are specified simply by there HTML name: “button”, “h1”, “div”, “a”

Classes need to be prefaced by a dot: .my-class

IDs, similarly, are prefaced by a hastag: #unique-id

Combine these types of selectors for increased specificity: button.check-out

CSS selectors
Use CSS selectors to specify parts of your webpage.

Examples:

If your HTML element looks like this:

<a href=”/checkout” class=”checkout”>Check out</a>

A valid CSS selector would be: .checkout


If your HTML element look like this:

<button id=”buy-now”>Buy now</button>

A valid CSS selector could be: button#buy-now

SplitWit use of CSS selectors

SplitWit uses CSS selectors to indicate click events for your A/B tests. SplitWit will track clicks on these elements, and use them to calculate which version of your experiment is more successful.

Click event metrics
Measure clicks on your website.

The SplitWit visual editor can also use CSS selectors. Enter a CSS selector in the “Make a change” section to highlight it. Alternatively, simply click on the element, and SplitWit will generate a valid CSS selector for you. The “Insert element” sections works in the same fashion.

The visual editor uses CSS selectors
SplitWit uses CSS selectors to specify UI elements

Categories
Technology

What is SplitWit?

SplitWit helps you optimize your website for maximum convertability and eliminate the bottleneck that’s stopping your customers. Any body could have a theory about what’ll make their website better. But, the only way to know for sure is through experimentation. That’s the scientific approach.

A vs B experimentation
Test two versions of your website with SplitWit.

SplitWit offers suggestions about what to test on your website – like the call-to-action message that you use. The visual editor lets you make changes with just a few clicks – no code needed. Once you learn what makes your website better, you can launch new experiments to keep getting even more customers.

Sign up now for a two week free trial.

Categories
News Technology

Github repo and WordPress plugin

SplitWit has created a GitHub repo to share integration code, examples, and utilities.

https://github.com/SplitWit

The first project we’ve added is our WordPress plugin – which is also new. Once installed, you can add a SplitWit project ID to the settings page to automatically integrate. This injects the necessary code snippet into your WordPress site.

https://github.com/SplitWit/splitwit-wordpress-plugin

Enter your project ID into the plugin.
Settings page of the SplitWit Experiments plugin

You can also download it here directly:

Download splitwit-wp-plugin.zip

Here’s how to install it:

1) Download the compressed file, unzip it, and add the contents to your WordPress site’s plugin folder ( wp-content/plugins/ )

2) Create a free account at SplitWit.com.

3) Create a SplitWit project for your site.

4) Copy/paste that project’s ID code into the plugin’s settings page. This ID code can be found on the SplitWit projects page.

Find you project ID for SpltWit.
You can find your site’s project ID on the projects page

https://www.SplitWit.com/projects