# Mobile Radiobutton Likert Scale design for comparing a variation

We want to know/measure if users prefer variation A over variation B. Therefor we run an paired comparison experiment that needs to be completed on a mobile phone.

They will see/experience two variations after which they have pick one, and then rate the concepts on two aspects.

The problem we have now is how to display a seven point radiobutton rating scale on mobile, in which there is not much space for labels. It should be suitable for iphone 5 and bigger.

Match with ....

A 0 | 0 | 0 | 0 | 0 | 0 |0 B

We need to communicate that this is scale that goes from A is better to B is better.

What we considered: Color coding, one label on both ends.

I could not find a standard solution for this.

I think you need two sets of labels:

1. the labels to describe the relative like/dislike scale
2. the items the user is expressing relative like/dislike for

If the item names are reasonably short you should be able to combine and put the labels above the control.

For example:

``````Prefer                        Prefer
A          No Preference           B
|    |    |    |    |    |    |    |
``````

If the item names are too long, perhaps move the item name to below the scale:

``````Strong                        Strong
Preference    Neutral     Preference
|    |    |    |    |    |    |    |
A                                  B
``````

Alternatively, keep the labels above but vary font size/colour/shading etc. to make the two labels visually distinct.

You often see a block of these questions with the "preference" label only once at the top of the block of questions - this may also be an option.

If I understand it correctly, this pattern seems to assume that the choice between A and B is a zero-sum comparison, where rating one option highly necessarily means rating the other low on the same point of comparison.

What if I want to rate A at 6 out of 7 and B at 7 out of 7? Your pattern forces a choice that may or may not be what the user thinks.

Why not use stars? Everyone understands a star rating system:

Option A

Consideration 1

☆☆☆☆☆☆☆

Consideration 2

☆☆☆☆☆☆☆

Option B

Consideration 1

☆☆☆☆☆☆☆

Consideration 2

☆☆☆☆☆☆☆

• We need to know which one is better, not how much better. We realised this way of comparing is too complex, even some colleagues had trouble. We started with the stars actually, but wanted to see if there were any other options. Also options that take less space. As we want to compare the variations, we are looking now at rating the aspects with just: which version is better? A | same| B And some other questions in star rating, that would otherwise become to confusing. Thanks for your input! Aug 8, 2016 at 17:25

Found a working solution for you:
https://www.behance.net/gallery/51297833/The-NPS

• Can you add more details about why you gave this example? Apr 21, 2017 at 9:52
• The problem mentioned is that he is unable to add Seven point radio button rating scale with labels on each side of scale. The project link added in my answer has a 10 point radio button scale with responsive design for iphone 5 as well. I think he can take some inspiration from this mailer, which I created. Apr 21, 2017 at 18:46
• Wotking example here: github.com/ShudhPandit/Mailers Apr 22, 2017 at 12:20

I would go for something like this:

User slightly prefers Version A

User either prefers Version A or Version B

User prefers Version B

It helps quantify how much the user prefers a version (or both, if in the middle). The scale depends on how much detail you want.