3

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).

enter image description here

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:

enter image description here

After changing (move and pinch/zoom):

enter image description here

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.

3

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

0

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

circle slider with 4 quarter sliders

  • Welcome to the site, @Soundar! Can you explain why this control is superior from a usability perspective? How does it address the OP's two concerns (about requiring many clicks and being inexact)? – Graham Herrli Sep 1 '15 at 19:53
  • @GrahamHerrli, the control having the slide handle which is use full to select any value.. and also the inner tooltip is an editable one, so the user can select the exact value by enter it.. Otherwise it supports the step value, so if i add the step 5 then the selection allows like 5, 10, 15 .. so it made easy to select the rounded values – Soundar R Sep 1 '15 at 19:59
  • I'd advise against this. A circle in this context is typically meant to indicate 100% (not 400%). Labelling is also confusing here. – Danny F. Sep 1 '15 at 22:08
  • Here it means 4 quarter sliders, so we can select 4 options and each points 100%... here i just shown a possible UI to select multiple options, and also in the previous fiddle i shown different shapes.. so you can use any single shape based on the requirement.. – Soundar R Sep 2 '15 at 5:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.