5

I'm used to scrolling being thrice as effective as arrowkeys in Firefox.

I want to give the ability to quickly and roughly adjust values by hovering over the slider and using the scrollwheel. Finest adjustments can be made with arrowkeys, but I don't want users to have to switch from mouse to keyboard.

Mockup of horizontal slider

Other options? I'm not entirely comfortable with forcing them to hold e.g. Ctrl-key while scrolling.

Clicking the mousewheel doesn't seem to do the job well either.

Edit: It seems a lot of people are under the misapprehension that dragging the slider as one normally does won't work here. Don't worry; it will. Oh, and numerical input with keyboard is also possible.

Mainly: I wanted to focus this thread on fine adjustment in relation to scrolling and horizontal slider.

Mockup explaining that yes; there are other ways of doing it, so please: rough and fine tuning in relation to slider & scrollwheel :)

Mockup – Possible layout

Improve this question
3
  • 2
    It's not unusual for shift/ctrl to multiply the effect of the scrollwheel over sliders, but it's also not easily discoverable if you're not used to it. Can't you use scrollwheel for finer local adjustment and drag the slider for rough adjustment. (leaving arrow keys for ultra-fine adjustment)?
    – Roger Attrill
    Aug 3, 2011 at 16:38
  • Hey, that might be an idea. Not the last part about ultrafine, but yes; of course dragging the slider also adjusts.
    – Jonta
    Aug 3, 2011 at 16:43
  • Paper prototyped the mockup, and got the feedback that it might be an idea to make "3.2 MB" a textbox instead of a label, exactly for the purpose of "need to upload picture to website that allows up to X bytes in size"
    – Jonta
    Aug 7, 2011 at 17:06

6 Answers 6

Reset to default
8

First of all, I don't think using the scroll wheel for a slider is very practical:

  • Depending on the scroll wheel speed, it can be uncontrollable (i.e. sliding too fast)
  • Scrolling is usually vertical, sliders are horizontal (exception: multi touch input)
  • It's not common, people won't expect it (I'm not aware of any application doing this)
  • If you scroll, you're using the mouse anyway, so clicking and dragging comes natural (no need to switch from keyboard to mouse)

So my suggestion would be to not use scrolling for the slider at all. I'd go for something like Photoshop:

  • Click/drag to adjust with mouse or
  • Number input with keyboard or
  • Up/down arrows for fine adjustment

That's how it looks in Photoshop:

Photoshop slider

Ideas to improve this slider:

  • Bigger arrows for dragging
  • Add up/down arrows for fine adjustment with mouse

And finally: If you still want to use scrolling, I'd use it for fine adjustment (because clicking/dragging works well for rough adjustment).

Improve this answer
3
  • Edits reflect issues
    – Jonta
    Aug 3, 2011 at 17:22
  • @Jonta: Thanks for the update. My answer stands though: I think it's best to use the slider for fine adjustment. But I'd prefer dragging corners for fast resizing and numerical input for precise resizing. I don't think the slider is necessary or very useful - just a feeling though, please let us know if you get any test results.
    – Phil
    Aug 4, 2011 at 8:15
  • I paper prototyped the mockup I added to the question, and users generally got the idea that the slider could be moved (paper one looks different; volume-control-like it's a right triangle with hypotenuse climbing upwards to the right, also; thing to be moved is a rectangle with three vertical stripes inside to afford grabbing). They didn't quite grasp the relationship between the five (height, width, %, slider & est. size) though, but I'm pretty sure they'll learn it within seconds when they see changing one changes the others. Thanks for your input :)
    – Jonta
    Aug 7, 2011 at 17:13
3

The mousewheel has a very specific functionality that users know well - it scrolls the page. You're suggesting that one widget hijack it, probably without a good visual clue that would explain what's going on, and use it to a completely different end. So on my whole page it behaves as usual, and then there's one area that changes this behavior, and you can't really be sure where it begins or ends.

Some websites do this (this website, for one - in the response/comment box) - but then it usually happens in a large, well-defined element with distinct borders - usually text areas, or other controls with a scrollbar. With a slider, I think that the visual affordance is not good enough to lead the user to expect this behavior or to understand it if quickly when triggered accidentally.

Improve this answer
3
  • There's no talk of this being on a webpage. Notice the desktop-application tag :)
    – Jonta
    Aug 3, 2011 at 17:52
  • 1
    OK, sorry, it scrolls the window :). And substitute "websites" for "apps" :)
    – Vitaly Mijiritsky
    Aug 3, 2011 at 18:07
  • Mockup added. No window to scroll up and down in :)
    – Jonta
    Aug 3, 2011 at 19:13
2

Could you have a draggable horizontal 'volume control' that appears when you hover over the arrow. You could still have macro adjustment with the arrow and this would give you a +/- 5 adjustment of the current value. e.g. (mocked up from the youtube controls):

enter image description here

Improve this answer
1

Do you need to provide such a wide range of values? Would it be possible to avoid the situation?

Potential solution: You could add another control? maybe up and down arrows that the user could click to move the slider one unit? This would also still support arrow keys. Or allow the user to type in the value?

Improve this answer
1
  • Wanted to keep description short. Yes, users can type in values. Yes, range of values is wide: Scaling down images (scaling up not possible).
    – Jonta
    Aug 3, 2011 at 16:33
1

Idea off the top of my head: keep the scroller as is, but for fine adjustment add in a checkbox nearby that will toggle the slider from Fine to Loose adjustment (or whatever terminology is used for non-fine adjustment, my mind is blank on what that term is. Sensitivity?). That way the user doesn't have to revert to keyboard at all.

Improve this answer
3
  • Sensitivity is the right term here. You might want a radio type button Coarse/Medium/Fine.
    – ChrisF
    Aug 4, 2011 at 9:42
  • Yes, sensitivity sounds right. I like the idea of radio buttons to adjust the sensitivity of the slider. (Or you could have a slider that is used to set the sensitivity of the main slider..... no, we won't go there!)
    – JonW ♦
    Aug 4, 2011 at 9:45
  • Hm, don't like the idea of checkbox/radiobutton though. Requires first moving (finding), then clicking, and then moving again (well, or hover if that activates it, but still)
    – Jonta
    Aug 7, 2011 at 17:02
1

Coming in a bit late on this and not sure if this suits your needs but accepting that you want to use sliders to control the values, how about taking a little step back and letting the user control the size via one of three interlinked sliders like in the image below:

They choose which is the driving factor for them (actual dimension, scale, or size on disc). Changing each slider affects the others, but each slider has it's own level of granularity.

The finest level of control is via the dimension, the medium control is the scale and the coarsest control is the file size.

enter image description here

Improve this answer
1
  • You seem to get the idea, but I don't really see the point of 3 sliders. The slider I have in mind would have the finest granularity possible as its finest granularity :) And sadly; your answer doesn't really answer my question.
    – Jonta
    Aug 7, 2011 at 17:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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