Your favourite number input controls....

The interface, modeling, 3d editing tools, import/export, feature requests, etc

Moderators: jesterKing, stiv

LukeW
Posts: 64
Joined: Mon Mar 03, 2003 1:14 pm

Your favourite number input controls....

Postby LukeW » Tue Mar 04, 2003 10:45 am

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

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

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

Jamesk
Posts: 239
Joined: Mon Oct 14, 2002 8:15 am
Location: Sweden

Postby Jamesk » Tue Mar 04, 2003 11:12 am

I don't know why, but I never liked the PaintShop controls... :D

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.

LukeW
Posts: 64
Joined: Mon Mar 03, 2003 1:14 pm

Postby LukeW » Tue Mar 04, 2003 11:48 am

Jamesk:
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.

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

matt_e
Posts: 898
Joined: Mon Oct 14, 2002 4:32 am
Location: Sydney, Australia
Contact:

Postby matt_e » Tue Mar 04, 2003 3:56 pm

A couple of things to consider:

Visual Communication
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=m ... opic&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.

Fitt's law
Fitt's law 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/s ... -moon1.jpg

LukeW
Posts: 64
Joined: Mon Mar 03, 2003 1:14 pm

Postby LukeW » Tue Mar 04, 2003 4:52 pm

broken wrote:...The number/text entry controls shouldn't look like buttons....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...

I agree... but it was easy for me to make that blender-style 3ds max control so I thought I might as well do it.

That link you gave has an interesting thread - I added a bit to it.
I can't get the link to that stuff you wrote to work at the moment
http://members.optushome.com.au/geoffeb ... /controls/

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.

That sounds good... and you could use Ctrl-drag to make it go in regular increments.
I think the text label for the number field should be distinguished from the number though - e.g. by using a different font or colour or background, etc. In that discreet screenshot the label and the number look identical.

So now I think discreet style ones are best, except that I think it should use Ctrl and probably Shift dragging modifiers and make the number be distinct from the text - e.g. a bit lighter or something.

BTW, what happens when you click on the number control in discreet programs? Does the caret/cursor appear straight away? Does the whole box get lighter?

Jamesk
Posts: 239
Joined: Mon Oct 14, 2002 8:15 am
Location: Sweden

Postby Jamesk » Tue Mar 04, 2003 5:22 pm

Sounds like this is going the right way! :D

matt_e
Posts: 898
Joined: Mon Oct 14, 2002 4:32 am
Location: Sydney, Australia
Contact:

Postby matt_e » Tue Mar 04, 2003 10:38 pm

LukeW wrote:So now I think discreet style ones are best, except that I think it should use Ctrl and probably Shift dragging modifiers and make the number be distinct from the text - e.g. a bit lighter or something.

Yes, that's good - it would help to make it a lot less incongruous as to whether it's a text entry field (that just happens to have a number in it) or a number field. It would only need to be subtle too, enough to make the visual distinction, but not enough to make things too messy and cluttered.

BTW, what happens when you click on the number control in discreet programs? Does the caret/cursor appear straight away? Does the whole box get lighter?
Yes it does appear straight away. I can't remember if it gets lighter or not (it's been a while since I used combustion). Perhaps even darker? I remember it does change to indicate that it's in an 'editable' mode though.


Return to “Interface & Tools”

Who is online

Users browsing this forum: No registered users and 0 guests