A/B Testing

How It Works

AB testing is quantitative research method used to compare two versions of a web page or app interface to determine which one performs better.

Stage

3.2

Method

Prototyping & Testing

Objective

Observing real users interacting with prototypes to gather feedback

A\B testing

AB testing is quantitative research method used to compare two versions of a web page or app interface to determine which one performs better.

For AB testing, we create another version of one of the screens and ask specific questions about them.

A few key elements can be tested in AB testing:

Headlines and copy: Compare different wording to see which resonates more with users.
Call-to-action buttons: Test variations in size, color, text, and placement.
Layout and design: Experiment with different layouts, colors, images, and fonts.
Navigation elements: Test menu structures, labels, and placement for improved usability.

A\B testing

AB testing is quantitative research method used to compare two versions of a web page or app interface to determine which one performs better.

For AB testing, we create another version of one of the screens and ask specific questions about them.

A few key elements can be tested in AB testing:

Headlines and copy: Compare different wording to see which resonates more with users.
Call-to-action buttons: Test variations in size, color, text, and placement.
Layout and design: Experiment with different layouts, colors, images, and fonts.
Navigation elements: Test menu structures, labels, and placement for improved usability.

Exercise: A/B Testing Using Google Forms

STEP 1 – Define the test hypothesis

Before running an A/B test, define a clear hypothesis.

Example hypothesis:

“Version B of the homepage will generate a higher click intention than Version A.”

Explain to participants that without a hypothesis, there is no test — only opinions.

STEP 2 – Create the two design versions (A and B)

Provide:

Mockup images (from Figma, screenshots, or simple visuals)
Or short visual descriptions of each version

Each version should differ in only one element (e.g. button text).

STEP 3 – Create a Google Form

Go to forms.google.com
Click “+” (Blank form)
Form title:
A/B Test – App Homepage
Description:

“This questionnaire aims to evaluate two homepage versions. There are no right or wrong answers.”

STEP 4 – User profile question (optional but recommended)

Question 1 – Type:

Multiple choice

Question:

How often do you use mobile applications?

Options:

Daily
A few times per week
Rarely

This helps contextualize the results.

STEP 5 – Present Version A

Insert the image of Version A
Add the following question below it:

Question:

How likely would you be to click the button on this page?

Question type:
Linear scale (1–5)

1 – Very unlikely
5 – Very likely

STEP 6 – Present Version B

Repeat exactly the same structure used for Version A:

Insert the image of Version B
Use the same question and scale

⚠️ Important to explain:

Questions must be identical to ensure a fair comparison.

STEP 7 – Final comparison question

Question:

Which version do you prefer?

Question type:
Multiple choice

Version A
Version B

STEP 8 – Share the test

Share the Google Form link
Participants can:
- Answer the form themselves
- Or share it with others (simulating real users)

Recommended minimum: 10–15 responses

STEP 9 – Analyze the results

Go to the “Responses” tab
Analyze:
- Average click intention score (1–5)
- Preference percentage between Version A and B

Discussion questions:

Which version performed better?
Was the hypothesis validated or rejected?
What UX decision would you make next?

STEP 10 – UX conclusion and decision

Each participant or group should complete the sentence:

“Based on the collected data, we chose Version ___ because…”

Reinforce that UX is not about personal taste, but about evidence-based decisions.

STEP 5 – Present Version A

Insert the image of Version A
Add the following question below it:

Question:

How likely would you be to click the button on this page?

Question type:
Linear scale (1–5)

1 – Very unlikely
5 – Very likely

STEP 6 – Present Version B

Repeat exactly the same structure used for Version A:

Insert the image of Version B
Use the same question and scale

⚠️ Important to explain:

Questions must be identical to ensure a fair comparison.

STEP 7 – Final comparison question

Question:

Which version do you prefer?

Question type:
Multiple choice

Version A
Version B

STEP 8 – Share the test

Share the Google Form link
Participants can:
- Answer the form themselves
- Or share it with others (simulating real users)

Recommended minimum: 10–15 responses

STEP 9 – Analyze the results

Go to the “Responses” tab
Analyze:
- Average click intention score (1–5)
- Preference percentage between Version A and B

Discussion questions:

Which version performed better?
Was the hypothesis validated or rejected?
What UX decision would you make next?

STEP 10 – UX conclusion and decision

Each participant or group should complete the sentence:

“Based on the collected data, we chose Version ___ because…”

Reinforce that UX is not about personal taste, but about evidence-based decisions.

Other projects

Figma

Figma is a cloud-based design tool for digital interfaces.

Computing Basics

Computing Basics: HTML and CSS Fundamentals

Wireframes

A black & white sketch of a page’s interface

Research Methods

Research Methods in UX Design: Understanding and Applying User Research

Visual Culture

Visual Culture in UX Design: Understanding and Applying Key Concepts

Prototyping

A sample version of the product which is released to a small number of end-users in order to test and approve the design. After a few versions of the prototype, we can come up with a product for sale.