Gauge user preference given four options

Question

I am looking to design an effective yet slick user control that will allow a user to provide their input to a question where they can pick how much they like the provided answers as options.

The user doesn't have to pick one over the others. They can like one of the options very much and one of the other options not so much.

An example

How confident are you about the prospects of these companies' performance in the stock market?

One of the the ways I though about doing this is through circular sliders (courtesy of jQuery Knob).

However, I have the following concerns about this type of input:

1. It is reasonable the estimate that the user would need 4 taps or clicks (1 for each option) to indicate their confidence. The default for a given option is 50% so the user wouldn't need to tap is they are 50-50 about the prospects of an option.
2. It might be hard to tap or click to an exact number. This is not super important because the question is just trying to measure relative preferences but it might be confusing to the user nonetheless.

As a means to address the above, I am looking for a control that can minimize the number of taps or clicks needed to indicate their preference between four options.

Another thought:

The user can drag the circle in the area they prefer and then pinch/zoom to adjust the percentages.

Before changing:

After changing (move and pinch/zoom):

To summarize:

• What is the verdict on the above ideas? What are their flaws and strengths?
• What other UI controls would satisfy:

I am looking to design an effective yet slick user control that will allow a user to provide their input to a question where they can pick how much they like the provided answers as options.

Note: it may be assumed that the control/interface be desktop OR mobile oriented.

Answer 1

I'd advise against using the current concept. It's clever, but it should be obvious.

Additionally, if you're assuming that it'll be used on both desktop and mobile, the way that users interact with it will be inconsistent.

Finally, redefining a very common pattern (pinch & spread) for something other than zooming in & out is going to necessitate a lot of education.

I've included a potential solution below. The smiley faces are cheesy, but they're clear. If you need to use the thumb motif, you can have it rotate between thumbs up and down (thumbs towards the user in the lukewarm sentiments). Alternatively, you could just throw thumbs up on the right and thumbs down on the left.

What's the granularity of the sentiment? 1%? 10%? If it's not super granular, the slider should snap to the desired points.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

You can use jQuery roundSlider plugin which is similar to jQuery knob, but round slider was made with div elements. So we can customize the overall look and feel, appearance of the control easily.

For more details check the demos and documentation page.

Example of different shapes : jsFiddle

An sample UI like this: jsFiddle