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

  • 5
    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". toastytech.com/guis/os2202.html – a CVn Nov 22 '17 at 12:20
  • 64
    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 Nov 22 '17 at 14:47
  • 30
    If you Google-image search goes to 11, you'll see that knobs universally increase whatever they control when they turn clockwise. – Malvolio Nov 22 '17 at 15:51
  • 31
    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. – Wes Toleman Nov 22 '17 at 15:57
  • 7
    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: 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? – jamesqf Nov 23 '17 at 4:24

10 Answers 10

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

  • 106
    This. Righty tighty lefty loosy. – Socrates Kolios Nov 22 '17 at 9:52
  • 6
    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). – Toby Speight Nov 22 '17 at 11:17
  • 19
    Car speedometers will also (mainly) increase over the clockwise arc. Clockwise for circular scales in general is pretty intuitive. – Snow Nov 22 '17 at 13:26
  • 12
    @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. – Pete Kirkham Nov 22 '17 at 15:12
  • 6
    You can easily make screws (and thus valves) which turn in the opposite direction. – Michael Nov 22 '17 at 15:54

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.

Car Temp Knob

An alternate solution might be to use a vertical slider/buttons where up might more clearly mean increasing the temperature.

  • 46
    I second this. A visual indicator will remove any confusion whatsoever (and its good UX)! – EpicKip Nov 22 '17 at 12:28
  • 1
    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 – Chris H Nov 22 '17 at 22:00
  • 1
    Those pictograms on the right are something else! Do you want your knees cooled or your neck? Or perhaps both? – user1118321 Nov 28 '17 at 5:17
  • 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. – boatcoder Nov 29 '17 at 18:10
  • 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 Dec 2 '17 at 11:05

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.

Rotating knob

The problem with a rotating knob (from now on the tap model) is that you could bend the number line with its center up or down leading to the ambiguity that your question is trying to solve. knobs with center up and down turn opposite directions for "plus"

Another problem with the tap model is that it is very hard to use with a mouse.

Linear knob(*)

photo of sliders on audio mixer

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.

Windows volume control vertical track bar

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

Vertical and horizontal track bars

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.

  • 4
    In many other things it's a "slider". – wizzwizz4 Nov 23 '17 at 20:15
  • 3
    On a mixing desk it's called a fader, but that doesn't make so much sense in other contexts. – Peter Taylor Nov 24 '17 at 12:21
  • 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. – user117529 Nov 28 '17 at 18:45
  • 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. – boatcoder Nov 29 '17 at 18:08
  • 1
    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. – Brian Drummond Nov 30 '17 at 11:16

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:

Softtube Tape Effect Plugin

Image source

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.

  • 43
    Clicking on a knob and then dragging it up. Yikes. Don’t do that. Anywhere. Ever. In any UI. – Cooper Buckingham Nov 23 '17 at 3:01
  • 23
    @CHBuckingham Pretty much all designers of professional audio software disagree with you, then. This is an extremely common pattern. – wavemode Nov 23 '17 at 3:04
  • 41
    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. – el.pescado Nov 23 '17 at 7:39
  • 14
    @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. – Scott Nov 24 '17 at 1:46
  • 7
    @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. – SevenSidedDie Nov 27 '17 at 20:45

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 the field of mathematics and physics, counterclockwise rotation is positive and clockwise rotation is negative

In three dimensions, the positive direction is indicated by the direction of the axis perpendicular to the plane of rotation.

enter image description here

You will also commonly encounter this convention if your application works with sensors such as the gyroscopes found in smartphones.

Sensor.TYPE_GYROSCOPE:

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.

  • 1
    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. – Jonathan Thornton Nov 25 '17 at 20:11
  • 1
    @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). – Monty Harder Nov 27 '17 at 23:04

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.

  • 5
    It sounds like UK radiator (and other valves) are the same as Denmark. Clockwise tightens and decreases heat, counterclockwise loosens and increases heat. – Matt Obee Nov 22 '17 at 9:58
  • 2
    You could be right @MattObee - I guess it depends exactly what is being increased; the temperature or the tightness of the valve. - I'll add a note to my answer – Andrew Martin Nov 22 '17 at 10:04

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 Nov 27 '17 at 23:10
  • @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?) – JBH Nov 27 '17 at 23:28
  • @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. – JBH Nov 27 '17 at 23:30
  • 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 Nov 27 '17 at 23:30
  • @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. – JBH Nov 27 '17 at 23:33

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.

  • I am shocked by the amount of attention my little question has gotten. I thought clockwise for up was all there was, but when I stumbled upon those radiator-dials I was shocked... – astalabandi Nov 29 '17 at 11:28

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.

  • 1
    So, thinking naturally, should the clock & advancing time make things warmer or cooler? Things cool off over time, unless they're in an oven... – Xen2050 Nov 30 '17 at 10:03
  • 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. – Armstrongest Nov 30 '17 at 17:48
  • Clocks with dials followed existing practice - sundials. From which, we can probably conclude they were invented in the Northern Hemisphere. – Brian Drummond Dec 1 '17 at 13:43

UI/UX designer with a past degree and career in audio recording adding to the turn right votes... :) Turning right = increase and definitely indicate the increase to the user :)

enter image description here
enter image description here
enter image description here
enter image description here

  • You must, like me, find gas stoves very confusing! – Brian Drummond Nov 30 '17 at 11:18

protected by Community Dec 1 '17 at 10:15

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

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