I think a good way of working out a good interface would be to look at the components of it and have discussions and polls. With polls you can see if there is a lot of support for a particular change to the interface.
I want to eventually do a poll about this but first I'd need to see what other possible choices there could be about this.
Note that this is about the basic concepts behind the input controls - not the colour scheme or whatever.
This is blender's current control for numbers.
You can click on the left side to reduce the amount, click on the right side to increase the amount, (by 0.1 if its decimal or 1 if its an integer), click and drag to adjust its value, click and Ctrl-drag to adjust its value to the nearest 0.1, 1, or 10 (depending on the control) or press shift and click to type in a value.
This is my first idea about changing the control - it is just a change of the look - it would function exactly the same. It would just make it easier for beginners to understand what to do. (They still wouldn't know about drag, Ctrl-drag and shift-click unless they found out by accident or by a tutorial)
This control is from paintshop pro. I'll just refer to it as the paintshop control, unless I find a better name. This has virtually the same functionality as blender's control (except for the ctrl-drag function, but that could be added)
Basically it works like this:
- click once on the numbers to edit them (like a standard number field)
- click once on the up/down arrows (spinner?) to increment or decrement the number (e.g. +/- 0.1 or +/- 1)
- click and hold the up/down arrows (spinner?) to begin to rapidly increment or decrement the number (there is an initial delay - like when you hold a key down and it later repeats)
- click and hold the drop-down arrow on the right to reveal a slider. While holding the mouse button, slide it to the left and right to adjust the number. This could be expanded on - holding ctrl could make it jump e.g. in to the nearest 10 - and holding shift could make the mouse move slower or magnify the slider or something so you can have more control over the slider. It is more consistent to use shift in this way - rather than using shift-click to edit the number (like it is now).
- there is also a bar underneath the control which shows the position of the slider, even when the slider isn't visible. That way you can see if the current value is at the maximum or minimum, etc. It may be a waste of screen space though.
In paintshop, there are two types sliders... linear ones and logarithmic ones.
I'll just work out what the code might look like:
I'll assume that the slider position is a number between 0.0 and 1.0.
On the picture I said for the linear slider,
numberField = max * sliderPosition.
This assumes that the values range from 0 to max. But sometimes they go from 1 to max or -10 to 10....
So we could have the variables minValue and maxValue.
The new formula would be: (I think)
numberField = ((maxValue - minValue) * sliderPosition) + minValue.
To display the slider, the formula would be: (I think)
sliderPosition = (numberField - minValue)/(maxValue - minValue)
[maxValue can't equal minValue]
For the logarithmic slider - I originally wrote:
numberField = max ^ sliderPosition
numberField = ((maxValue - minValue) ^ sliderPosition) -1 + minValue
The -1 is because the first half ranges from 1 [x^0] and x [x^1] to make the minimum equal to minValue, 1 must be subtracted.
To display the slider: (?)
numberField - minValue + 1 = (maxValue - minValue) ^ sliderPosition
sliderPosition = log(numberField - minValue + 1) / log(maxValue - minValue)
I don't know why, but I never liked the PaintShop controls...
My favourite is the one found in 3DSMAX (yeah, no kidding): Click and hold on the adjustment button/arrow/thingy, then move your mouse up or down while keeping the mousebutton pressed - value increases or decreases according to the direction of the movement. Add some modifier keys (shift and/or ctrl) to make the stepping smaller or larger. And add to that the standard text field for numerical input using the keyboard.
Simple, non-cluttering and very intuitive in my opinion. Requires only two widgets: one text field and one button.
I never realized that about the 3ds max controls!
Here's a complete summary of the 3ds max controls (as far as I could work out):
- single click in textfield - highlights text so you can press delete or backspace or some numbers to clear it all
- double click in textfield (can be slow double click) - puts cursor/caret where you clicked the second time so you can modify the text
- single click on up/down arrow - increments number by +/- 1 or +/- 0.1, etc.
- click and hold on up/down arrow - increments number by +/- 1 or +/- 0.1, etc - initially pausing
- click and drag the up/down arrows up or down - adjusts the number - when the mouse pointer reaches the top or bottom of the screen it jumps to the opposite side, so you can continuously move it up or down. Moving it left and right seems to have no effect, except for the accidental changes in the mouses' vertical position. But it would probably be good to make the number increase when the mouse is moved left, and decrease when the mouse is moved right.
Like you said, using Ctrl and Shift modifiers would be good too. Maybe they could be used during clicking on the increment buttons, as well as during dragging. Ctrl could make it increment at units 10x the normal amount and Shift could make it increment at 1/10 of the normal units.
Here it is - blender style...
The arrows would be about as big as the layer buttons so it wouldn't be that hard to click on them. And to click and drag it, you can click either of the two arrows (making it even easier to click on). Clicking on the number would instantly let you type in the box - just like the text fields in blender.
A couple of things to consider:
The number/text entry controls shouldn't look like buttons. Blender is already overwhelmed with buttons and this dilutes the visual significance of and differentiation between controls. I'd rather not repeat myself so I'll just link an article I already wrote here: http://www.blender.org/modules.php?op=modload&name=phpBB2&file=viewtopic&t=799
If the controls look like buttons, the user will expect them to work like buttons. If they don't, then this is a cause for confusion.
states that the time taken to hit an on-screen target is inversely proportional to the size of the target. Having such small controls (like Paintshop Pro's) makes it much slower to hit them, and somewhat defeats the purpose of the 'drag back and forward to update quickly' nature of the control. If you have to hunt around with the mouse pointer for a while in order to find the small arrow controls (also keeping in mind most graphics authors use high resolution screens), then you might as well just directly enter in the value anyway.
To put another idea to the table, I tend to like the way Discreet handles this control. Number fields have a line underneath that scrolls sideways when it (the whole control area) is dragged, to give visual feedback. Sliders are handled in a similar manner, although you can see the position of the line when you're not dragging, since the sliders have defined upper and lower limits.
Here's a screenshot: http://www.discreet.com/images/events/siggraph2001/screenshots/CC-moon1.jpg
Sounds like this is going the right way!