Which way to turn a knob to increase?
I'm making an app with a skeumorph knob that you can turn clock- and counterclockwise to increase/decrease an amount.
But what direction is the correct one? I bet that there is a high degree of cultural difference between countries/regions, and a high degree of difference depending on use-context.
I live in Denmark, and "all" common radiators have a knob for turning up the heat - you have to turn it counterclockwise to increase the heat. This might just be a radiator-thing or just a Denmark thing.
Let's say the app I'm making is controlling a radiator via wifi, should I follow the local norm, or just decide on a "correct" global way...?
You could always consider giving the user a choice. Call them "Style 1" and "Style 2" (or something similarly nondescript) to avoid any cultural bias. Compare how, back in the day, IBM OS/2 referred to the left and right mouse buttons as "button 1" and "button 2". http://toastytech.com/guis/os2202.html
Others have already answered the meat of your question, but if the design isn't set in stone, you might want to seriously reconsider the skuemorphic knob. Unless your app will be exclusively used with a touch interface, knobs are horrible to interact with using a mouse. Likewise, the use of a knob in touch will likely require a two finger gesture, meaning one handed use will be impossible while interacting with the knob.
@moneyt I don't see why that's necessarily the case, just have it so any point outside of the knobs image, when held via touch interface, can just be wound around in a circle with one finger. So a clockwise motion for X, anticlockwise for Y.
If you Google-image search goes to 11, you'll see that knobs universally increase whatever they control when they turn *clockwise*.
Second the warning about the use of a knob. I've been annoyed by knobs in Logic Pro that actually operated as sliders, here I am spinning my cursor in circles and achieving nothing. It's as a annoying as toggle sliders on the desktop that don't slide and are actually checkboxes in disguise. Consider a stepper or a ramped slider instead. If you do use a knob, make it large enough and have an indent to show that it can be operated by a single finger.
If in the northern hemisphere, turn it clockwise... in the southern hemisphere counter-clockwise.
GarageBand for iOS has an interesting interaction pattern: the knobs work _both_ with circular and linear gestures, depending on which way you start moving your finger. You can also limit it to one or the other in the settings.
@Phase That could work if the knob is large enough to operate entirely in its visual bounds, otherwise I can see a few pitfalls. For example a knob near the edge of the screen not having room around it without going off screen. You may also have to be able to distinguish between a user positioning their finger outside after the touch and hold and actual adjustments on the knob. Not a huge deal, but it's annoying if a control changes values before you're ready because it interpreted your actions wrong. Not saying knobs can't work as a UI element, just that they need extra care.
You say "all common radiators" in Denmark, but are radiators all that common elsewhere? (I'm assuming from context that you mean the old-fashioned heationg sort, as pictured on this Wikipedia page: https://en.wikipedia.org/wiki/Radiator_(heating)) And even in Denmark, aren't radiators vastly outnumbered by other things (like volume knobs) that turn clockwise to increase?
@Malvolio Taps are generally the opposite. Turning it counterclockwise pulls the screw out of the valve, allowing water to flow. Try your garden tap...
@jamesqf: "but are radiators all that common elsewhere? (I'm assuming from context that you mean the old-fashioned heationg sort" - what's old-fashioned about that (other than the top image in the linked WP article indeed showing a somewhat outdated shape)?
@O.R.Mapper: In Germany I see that most new buildings have the heating in the floor. Decades ago the heat loss was largest at the windows, therefore the radiator compensated that. Now the windows are better, so the heat can be emitted from the whole floor.
Mathematically, an increase of the polar angle is associated with a counter-clockwise direction. But I doubt that you want to base your design on that, unless that is the target audience.
@MartinUeding: I'm from Germany, and that does not match my impression. Yes, some (by far not all) new buildings have a "Fußbodenheizung". But even for these, a "Fußbodenheizung" is typically only present in a few very large rooms (such as the living room), while all the other rooms feature the usual radiators at the wall. A cursory look at offers of rather new houses on some real estate websites matches that impression, in that houses with "Fußbodenheizung" often have some radiators visible on some photos.
@O. R. Mapper: "Old fashioned" in the US, perhaps. I've only seen that sort of radiator in older buildings with central hot water heating. Or maybe they are an urban apartment thing? I admit that my experience of urban housing is very limited, but that just points up the fact that radiators as a prototype may be culturally limited.
As far as I know, by far the most knobs increase their values (sound volume, temperature, power) when moving clockwise. I don't think manufacturers of control knobs make another variant of their product, simply to meet cultural expectations. Or do they?
@moneyt In support of your plea, there's also this. Should the virtual world look like the real one?
@MichaelKjörling Why not call them "clockwise" and "counterclockwise", so the user knows what the setting actually does? "Style 1" and "Style 2" tell the user nothing about what they're picking, and if I saw that I'd assume it was controlling what the knobs looked like.
As an example of that "extra care" I was talking about, take a look at the gif in this answer and watch the interaction on the "amount" knob. Dragging in one direction to move a knob is a common work around in both desktop and touch interfaces. But watching that should look a little weird to you because in the real world if you drag up on the right side of a knob you expect it to turn counter clockwise. In this interface though, it does the opposite. It's correct from a gesture standpoint, and wrong from a skeumorphic standpoint.
@jamesqf In England radiators are still common. I would assume that's true of other parts of Britain.
@Pharap: Don't recall having seen any on my various visits there, or other parts of Britain & Europe, but then I wasn't really paying attention. But I think my point holds: using a radiator control as a model when 1) it's culturally/geograhically limited, and 2) works in the opposite sense to a great many more commonly-used devices, is maybe not good design. (Though now that I think on it, my kitchen faucets also turn CCW to increase flow...)
Modern thermostats turn up the heat when the knob is turned clockwise. Because you don't open or close a valve any more, but you adjust the digital temperature displayed on the LCD screen. Now, a hardware knob is a viable way to efficiently adjust some setting. An on-screen knob is just a way to **torture** the user (see https://itunes.apple.com/de/app/calor-bt/id1021211348?mt=8 for an example of an app to control a thermostat via Bluetooth). There is enough real estate on the screen to provide separate buttons for every temperature setting between 5°C and 30°C, in 0.5°C increments.
I'm not sure there's a cultural difference, so much as a mechanical difference. Radiator thermostats are valve mechanisms, which are tightened by screwing clockwise and loosened by screwing counterclockwise. That is to say, you loosen the valve by turning it counterclockwise to allow more hot water into the radiator.
Knobs and dials on electrical devices (for changing audio volume, time, speed etc.) almost universally work in the opposite direction, turning clockwise to increase a value and counterclockwise to decrease a value. This increase/decrease is typically represented visually on a linear scale, from left to right, lowest value to highest value.
Electrical thermostat controls, including both the old style and the modern digital and app based thermostats, tend to follow the electrical (counterclockwise/left to decrease heat, clockwise/right to increase heat).
I agree that there are two models - things that work like taps, and things that work like amplifiers. Gas hobs tend to follow the "tap" model - anticlockwise is "opening" rather than "decreasing". Electric hobs vary - some follow the "amplifier" model - but sometimes they follow the "tap" model, for the benefit of users familiar with gas hobs. Generally, the numbers are clockwise-increasing and written on either the knob itself ("tap" model) or on the backing plate ("amplifier" model).
Car speedometers will also (mainly) increase over the clockwise arc. Clockwise for circular scales in general is pretty intuitive.
@TobySpeight there's only two models if you ignore the purpose. The purpose of a tap is to place a constriction on the flow - remove the tap and water/gas would just gush out the pipe. Turning clockwise increases the effect of the device. An amplifier makes an electrical signal greater - no amplifier, and the signal would be too small to make an audible sound. Turning clockwise increase the effect of the device. Same model.
You can easily make screws (and thus valves) which turn in the opposite direction.
Plenty of taps go the "wrong" way, especially quarter turn models -- but they're an oddity.
Most of the paired hot-and-cold water taps in my house (Canada) are mirror images...
@SocratesKolios what hand motion means "righty"? Can't infer that from just text. Is it the top of the knob moves to the right or the bottom? This might seem obvious to someone who has had no problems with it their entire life, so if you don't understand how someone can't know this innately, well, look around :p
It actually comes down to the thread ( the grooves on a shaft which the turned part run in ). Right hand threads tighten by turning clockwise ).
I don't have an answer myself, so maybe I'm not in a position to criticise, but none of these answers explain why. They all say there's a difference, and sure enough there is, but, why? Why do you need to turn a water tap turn anticlockwise to let more water through, and a volume knob clockwise to let more electricity through?
@TobySpeight to further muddy things, the knobs on my gas BBQ (and others I've used) turn anti-clockwise from OFF to IGNITE/FULL and then continue turning to decrease the gas flow... so it's anti-clockwise to open then close
Just looking at the heating in the room I'm currently in: There are two heaters (don't know if that's the right term, I mean this thing) and they are mirrored to each other. However, the knobs both increase heat clockwise. Does that mean there's a gear or does that mean they put left-turning and right-turning screws in?
@MrLister "Why do you need to turn a water tap turn anticlockwise to let more water through, and a volume knob clockwise to let more electricity through?" Because, mechanically, the water tap is a water restrictor. You turn it clockwise to increase its function, which is to prevent water from flowing. A volume nob is a volume provider, not a volume restrictor, so again, turn it clockwise to increase its function.
There are also systems that use reversed threads as a safety feature. The threads on propane and other flammable gas tanks are typically all reverse threaded precisely to prevent users from using water or air fasteners (which can safely leak their intended fluids) instead of proper propane fasteners. These systems specifically break convention by design to prevent misuse.
@Peter Kirkham, (alsoDarryl) technically an amplifier (like an audio amplifier) generally has a fixed gain and the volume control is a variable attenuator attached to the amplifier input, thus its function is similar to a tap. Fully "open" (clockwise) it has low attenuation and the volume is high, closing (anticlockwise) increases the attenuation (restriction).
@HorusKol Gas stove controls turn that way for safety reasons. By starting gas flow at full, you make sure the gas ignites when it's supposed to. If it started gas flow at the minimum, there'd be a higher risk that the gas builds up without igniting. See Why do stove dials rotate from “max to min” instead of “min to max”?
I think the direct answers to your question are covered by the others, but it might be beneficial to provide a visual hint to the user. For example in a car heater you have a visual indication of changes as the knob moves.
An alternate solution might be to use a vertical slider/buttons where up might more clearly mean increasing the temperature.
I second this. A visual indicator will remove any confusion whatsoever (and its good UX)!
You remind me of the electrical counter-example I was trying to find. In my van, the fan control is off at 12 o'clock. 1, 2, & 3 o'clock are increasing power. 11, 10, & 9 o'clock are also increasing power, but recirculating
Those pictograms on the right are something else! Do you want your knees cooled or your neck? Or perhaps both?
Yes, this may be one of the be UX designs of all time. You can easily reason about what is going to happen and NEVER look that the manual. Only a color blind male might have problems with the center dial.
Re. "where up might more clearly mean increasing the temperature" - what about refrigerators? :) I actually spent months cursing at my new fridge thinking it was broken - I was cranking it up "all way to 11" and it was barely working. After probably hundreds of dollars of spoiled food I realized that to make it work more I needed to *move the slider down* because the designers thought of it as a thermometer
@sergey this is an interesting point as well, blue to red avoids this to some extent since blue is commonly associated with cold. Alternatively you can make the numbers more literal (i.e. many refrigerators say 11° to disambiguate between target temperature and cooling power used)
A good thing to take advantage of here is the number line. The number line almost universally increases from left to right. You could use that analogy to unambiguously show your user which way to increase or decrease the amount of the “thing” your application deals with.
Another problem with the tap model is that it is very hard to use with a mouse.
An option that is both intuitive and easy to use with a mouse is the linear increase-decrease button (from now on the sound mixer model). Think of the windows sound volume controller.
Having a horizontal line knob gives you the chance to take direct advantage of the number line.
USe a vertical line knob, and you can take advantage of the fact that “up” can be associated with “more” and “down” with “less”. Nonetheless, you can always have a side bar showing (+) or (-); 0,1,2,…, 10; -5,-4,…,0,…,4,5; to objectively show your user which way to increase/decrease whatever you want to control (a rectangular triangle becoming thicker in the plus direction also works).
For a skeumorphic knob really it depends on what kind of “thing” is going to be controlled.
Most “material” fluids work using the tap model.
For electrical or similar things however both options have been used in the real world, therefore you can have a linear skeumorphic knob in this case.
Still an option to set things can always be put into the user's hands. The solution I’m giving should in principle be used as a default only.
PS: You may want to search for the number line in the countries that use right-to-left writing (like Arabic) or up-to-down writing (like Chinese) to see if there is a different way to interpret it. However, these things can be fixed up using the operating systems globalization classes and automatically set the default for the increasing/decreasing direction.
(*): In Visual Studio it is called a Track bar; in many other things it is a slider (from comment by wizzwizz4).
EDIT: For mechanical or in this case, thermal machinery, you can use a lever as your skeumorphic knob and take advantage of the second option.
On a mixing desk it's called a *fader*, but that doesn't make so much sense in other contexts.
Re: _Another problem with the tap model is that it is very hard to use with a mouse._ -- if you must use a dial, which you have to move the mouse in circles to use, at least allow the mouse wheel to turn the dial as well.
What does a larger number mean in the OP's case, more heat? Refrigerators use this 1-7 scale and you are always left wondering is 7 colder than 1 or warmer? There are far better ways that putting unitless numbers on every dial. One right above this answer.
Odd fact. BBC studio mixing desks universally used the opposite convention for faders to everybody else - right through the 1980s at least. Pull towards you to fade up. They standardised on this before linear faders came along (quadrant faders preceded them, though rotary faders were first) - for a very specific UX reason. If you knock a fader by accident you'll push it forward, and they reasoned, if you had half the country listening, a brief silence would be better than an unexpected loud noise.
@boatcoder. You are right. However, That’s why I clearly said, “use a side bar to objectively show your user which way to increase/ decrease”. If that means including a unit; please use it. For exemple, rather then put a + or a -, one could put “colder” and “hotter”.
I believe you can visually create the knob however you like, without confusing users, by creating a common pattern of movement. Most audio production software I've used (i.e. the kind of software where you've often got lots of knobs that do lots of things, and would simply get out of hand, in terms of screen space, if they were all long sliders) simply has "up" and "down" for knobs. You click or press on the knob, and then moving up is an increase and moving down is a decrease. At that point, the direction the visual knob turns is irrelevant. The users just knows, move up to increase and down to decrease:
The biggest advantages to this approach are that it's a more natural motion to make with a mouse or finger, and also that it's very common - every software synthesizer I've ever used uses this pattern, and it will likely be intuitive for your users regardless of what sort of knobs they're used to in real life.
To be safe, you might consider, as part of the app's trailer or initial tutorial, including a video demonstration of the knob controls (like the above gif), so users know up-front that they should be sliding linearly, rather than trying to actually rotate the knobs.
Another solution from pro software is having text that can be selected to act as a text box or clicked and dragged to act as a slider. Probably more natural than a knob as slider.
Clicking on a knob and then dragging it up. Yikes. Don’t do that. Anywhere. Ever. In any UI.
@CHBuckingham Pretty much all designers of professional audio software disagree with you, then. This is an extremely common pattern.
Especially when the knobs in such programs are so tiny that no human would be able to 'turn' it with a mouse...
I have love/hate relationship with virtual knobs operated up/down. On one hand, it's confusing as hell, on other once used to it it's actually easier than if they operated properly by rotating. Having said that, virtual knobs are evil. Somehow they are endemic to pro audio software, and they are not the only weirdness in that domain - notice *extreme* skeuomorphism. To sum up, unless you make audio software, avoid virtual knobs.
@Shadow - if a 'knob' is not fit for purpose, don't make a vertical slider that looks like a knob but behaves like a vertical slider, make a vertical slider that looks like a vertical slider and behaves like one.
@CHBuckingham: the best of both worlds comes when you are able to adjust the knob by hovering the pointer on it and then using mouse wheel.
The video editor I use has some sliders that make the mouse disappear when I click on it and then sideways motion increases/decreases the value. I can even move the mouse much farther than the screen is wide. It's sort of like this, but even weirder.
@wavemode Professional audio software is not known for its UX quality. I'd even say it's known for its *lack* of UX quality. Niche software is often plagued by poor design (among other problems) because there's little or no competitive or consumer pressure in these markets; niche software should be evaluated carefully before taking it as a model of how something should work.
I agree, such programs are hidious and should not be held as a good example. I’ve been subjected to the programs that come with early digital players and sound cards, and they lose normal features by not using the normal OS controls. Every such app I’ve seen has been horrible to actually use.
@wavemode No, designers of professional audio software recognize that going against an industry standard when you want your professional software to be bought is a stupid business decision. It's objectively bad UX; however, people have gotten used to it, so now it's the standard.
Understand the scope of this answer. OP specifically said he is trying to create skeuomorphic knobs. If that's the case, this is the best way to go about it, for the specific reasons I've detailed. Should he be trying to make skeuomorphic knobs in the first place? That's a separate question.
@SevenSidedDie I don't think it's so much about lack of competition as about strange user preferences. In Pro Audio, like many music-related branches, an attitude of "digital is fundamentally bad" is quite prevalent. Users tend to choose software based on how closely it emulates some expensive piece of analogue gear from the 60s-80s, and giving the UI such a look creates an illusion that the sound would also be more authentic. – FWIW, I actually consider such knobs pretty _good_ for usability, when they're not too “shiny”: they combine a compact overview with very precise manipulation option.
Personally, I had no issues using a slider knob when I encountered one for the first time, nor have I used any software that used them extensively that would benefit from having dozens of sliders instead. If knobs are really that evil, UX theory clearly has a very long way to go, given that the only alternatives offered in any of the answers or comments here, as of yet, are "turn it into a slider" and "add labels". It's easy to parrot the mantras of opinion leaders in your field but it's not very productive.
@wavemode, this discussion is a tangent, but Wikipedia has to say about "skeumorphic": `It fits with our natural interpretation of objects but in a digital world.` For a circular knob, a linear up-down motion is *not* a "natural interpretation". The natural interpretation for a physical round nob is to turn it. If I see a photorealistic knob in an UI, my natural instinct tells me to click on the knob and then swirl the mouse pointer in a circular motion around the knob. Nevermind that I seldom saw an UI that worked that way. But it would be pretty trivial to implement such a motion.
I prefer to have an input box where I can type in "-6" when I need to attenuate a signal by 6dB. Instead of trying to nudge around some virtualized old-fashioned control which is about impossible to accurately set to -6dB withing less than a minute. I just hope that this kind of GUI design dies quickly. Else the next iOS version will have an actual rotary dial to make phone calls. Like in the 1970s.
Some conventions are influenced by local custom, and others may be particular to a field or framework.
In the field of mathematics, for example, positive direction is assigned to counterclockwise rotation, and negative direction is clockwise direction. If your app controlled the angle of a telescope, you would be wise to follow this convention.
In three dimensions, the positive direction is indicated by the direction of the axis perpendicular to the plane of rotation.
You will also commonly encounter this convention if your application works with sensors such as the gyroscopes found in smartphones.
All values are in radians/second and measure the rate of rotation around the device's local X, Y and Z axis. The coordinate system is the same as is used for the acceleration sensor. Rotation is positive in the counter-clockwise direction. That is, an observer looking from some positive location on the x, y or z axis at a device positioned on the origin would report positive rotation if the device appeared to be rotating counter clockwise. Note that this is the standard mathematical definition of positive rotation and does not agree with the definition of roll given earlier.
This advice is intended primarily for scientific / technical applications. In all cases, you should consider whether there is already a dominant convention for similar applications. For example, the dominant convention for thermostats is clockwise = hotter. For temperature control, I would likely follow this convention even in scientific applications.
This is also an important consideration. In calculations of angles in meteorology, we usually start with zero on the positive y-axis and move clockwise (so if the positive y-axis is north, then east is 90°, south 180°, west 270°). Of course, this differs from almost every other scientific field I’ve worked with.
@JonathanThornton Meteorology seems to follow air-traffic control (or vice versa) for expressing headings. This also affects the numbers on runways, which are simply the heading divided by 10 and rounded to integral values, with "36" on the south end of a north/south runway indicating a heading of 360 degrees rather than 0 for due-north-bound traffic (and "18" on the north end for the due-south-bound traffic).
There are differences throughout the world - here in the UK we general perceive clockwise motion to be increasing whereas, as you have pointed out, in Denmark the opposite is true.
If you are building something for an international audience (or something that may be released to an international audience at some point) then you should be OK if you make sure there are clear verbal and non-verbal clues to show what will happen when the dial is turned. This could easily be done using a scale and icons.
EDIT After a note from @MattObee (see comments below) It may well be the case that the paradigm is still clockwise to increase but that the value being increased is not what you think it is. In this case it may be the tightness of the valve that is increasing rather than the temperature.
It sounds like UK radiator (and other valves) are the same as Denmark. Clockwise tightens and decreases heat, counterclockwise loosens and increases heat.
Speaking strictly from the perspective of the user experience: think only about how people use radios (or, if you're older like me, their TVs).
Clockwise increases volume and advances the station to higher numbers or frequencies.
Counterclockwise decreases volume or retreats the station to lower numbers or frequencies.
That's what people are most conditioned to expect.
Fluid and gas valves are, I suspect, contextually different. I've never known anyone to ask, "why does a water valve decrease flow when turned clockwise and a radio knob increase volume when turned clockwise?" In an electronic or digital world, we never think of mechanisms like valves.
You can probably thank old-school TV and radio for that. In the good old days, radio used a string to move a pointer along the frequency chart. Since English-speakers (and a great many others) read left-to-right, the pointer was designed to move right to find higher numbers. Turning a knob to the left to move a pointer to the right doesn't make sense... thus, clockwise for greater was probably born!
If the knob were positioned *above* the scale, wouldn’t “right” be counterclockwise?
@JDługosz! Long time no see! In my opinion, no. Generally speaking, those raised with a left-to-right language perceive the motion of left-to-right and down-to-up as "more of what I want." It wouldn't matter how the knob was positioned in relation to the scale... unless the scale itself "rose" from right-to-left. Perhaps it's more sensible to say the knob should turn in the direction of the scale/indicator (though, how often do you see things rising from the right?)
@JDługosz, anticipating a possible observation, it could be said the scale was being "pushed" by the bottom of the knob rather than the top. But we're straining at gnats as I suspect the behavior came from moving that string to adjust the old radio frequency indicators and that was always push-from-the-top of the knob.
Yiu misunderstood my pointb why do you claim that “right” is clockwise? Part of the knob's rim moves right, but an equal part moves left. If the scale (printed left to right) was **below** the knob, you would think of the bottom part of the knob as being relevant to the cursor’s movement.
@JDługosz, Ah! forgive me for missing that. It would still appear unatural to the user to twist a knob counterclockwise to get an increasing effect. It's a purely cultural behavior (such as using red to mean "stop" in the U.S.). Labling may overcome liability ("we clearly marked the knob"), but it won't overcome the fact that people who grow up turning knobs clockwise to get more of what they want will always expect to do that.
«though, how often do you see things rising from the right?» https://english.stackexchange.com/questions/333419/succinct-and-understandable-term-when-turn-up-turn-down-is-ambiguous refrigerator dial: 10 is lowest temperature, 1 highest; also an engine throttle: more throttling means slower speed;
@JDługosz, :-) There will always be exceptions. If the app is a refridgerator app then it should mimic the fridge. If it's an audio app it should mimic audio controls. Isn't the poing of good UX design to not get in the way of the user experience? Accomodating expectations is probably rule #1.
If you are making an App for a radiator, you should check that specific radiator and make sure you use the same direction. This shouldn't be a problem because the software needs to know in which direction to turn the physical knob it's controlling.
But I think you just meant this as an example. In general: Make sure to unambiguously tell the user.
I feel the other answers don't emphasize this enough if they explicitly mention it all: Don't assume the user to know!
The sheer amount of answers this question has so far makes it clear the direction is not obvious, and if something is not absolutely obvious to everyone, good UI helps the user.
At the end of the day, doesn't the answer lie in the word 'clockwise'? Time is experienced one way only -it advances, and values increase accordingly. This, to my way of thinking, is the most natural way of looking at it.
So, thinking naturally, should the clock & advancing time make things warmer or cooler? Things cool off over time, unless they're in an oven...
Yes... but who decided that clock hands should turn that way? Time advances on way, that's true... but it doesn't go around in circles. Clocks with dials go round and round for the sake of convenience but time can be measured in a variety of ways that are not circular in nature.