3

I am developing a survey where my client wants to use a slider so that they can have 7 points scale but provide only 3 explicit options and 4 empty/in-between options on each question.

enter image description here

I came up with the below prototype but I am not sure whether it is intuitive enough for users to make sense of the in-between options. How would you improve this?

https://jsfiddle.net/miracc/eL7arpte/3/embedded/result/

-- Edit --

Credits goes to Bootstrap Slider for the slider implementation.

  • Why has the client given you specifications (i.e. specified how to do something)? Shouldn't they just give you requirements and then you determine the best specification for it? I would go back to the client and ask what the business requirement is that requires it be a slider with empty labels. Because the problem is with the requirement, not the solution (you've done exactly as they requested). – JonW Aug 20 '15 at 20:19
  • Can you give detail on the client's reasoning behind the 7 point scale if there's only 3 real options? – tonytrucco Aug 20 '15 at 20:19
  • From an implementation perspective it looks great and is the best you could do under those requirements, the requirements however seem unnecessary and confusing. – DasBeasto Aug 20 '15 at 20:23
  • The idea came out of a discussion. I suggested to expand the explicit options to 5 or 7 but they can't / don't want to describe those in-between options explicitly. At the same time they think 3 point scale will not be wide enough to distinguish everybody. – miracc Aug 20 '15 at 20:27
3

There a couple issues with both the approach and the implementation. Using a slider element is not a bad idea by itself, as a matter of fact it's just an implementation of the Semantic differential test.

Now, take a look to implementation issues:

enter image description here

here you can see that by simply resizing window, I lost focus of the options and have no idea what I'm selecting.

Let's move further: enter image description here

here, I selected one of your options, which colors the text (nice detail), but everything is overlapped and not only I lost focus, now I see there's even more space on top, even though I selected the best option.

What to do?

  • Well, first of all, you should have only 5 spots (or 7 with 2 in between selections), and the "in between" spots should be in positions 2 and 4. Having an "over the top" option makes no much sense, and not only adds a tremendous degree of subjectivity, but quite some friction. As an user, I have no idea if this is a developer mistake, if I'm supposed to choose blank choices or what.

  • the "connection" path: right now, you have a connecting path between choices, which adds a sense of connectivity to all options. So, right now it seems to me you're communicating that Mike the new hire is bad, so so and great at the same time. Maybe he was bad and now is great? Maybe he was great and now he is bad? Or even worse than bad since you have an option below that? If you ask me, I'd get rid of the connecting path and simply leave the options. Think radio input elements, you can only select one, not all of them!

  • the visuals: while you did a great job in implementing this request, I'd go with something closer to radio buttons. Something like this (not necessarily, just as an example):

enter image description here

Of course, if you want to keep on a more skeuomorphic path, you can do it, as long as the options are easily identifiable. Here you have some options you can use for ideas:

enter image description here

  • orientation: since you'll have a lot of issue with resizing as shown above, what about placing this on top and changing it to horizontal view that can easily be resized in responsive mode?

  • And finally, I'd add some instructions, whether you use just a simple block of text, coachmarks or any other kind of guidance, it will improve the usability of your implementation, leaving no room for doubts

  • Thanks for your input. The connection argument is interesting. I think I am going to integrate tooltips with numbers (1-7) to each choice to break that perception of connectivity. Also thanks for introducing me to the terms skeuomorphic and coachmark. I am aware of the resizing issue. For now I will enforce a fixed width to prevent that until I can make it responsive. – miracc Aug 21 '15 at 17:30
1

As someone who takes a lot of surveys, the following is a pattern I've seen frequently:

How interested are you in X?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I have usually seen text on either end called the "extreme descriptors", with the middle one being the neutral option. Though a label for each is another common option, I think both all labelled and only partially labelled would both be referred two as a Likert item, part of a Likert scale. From that article:

A Likert item is simply a statement that the respondent is asked to evaluate by giving it a quantitative value on any kind of subjective or objective dimension, with level of agreement/disagreement being the dimension most commonly used.

Following this common pattern, my suggestion is to put the statements at either end, with one in the middle.

enter image description here

  • Thanks for your input. I will still need to keep the empty end points but will provide some instructions to explain what they are. – miracc Aug 21 '15 at 17:33

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.