84

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

Improve this question
27
  • 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
    – user
    Nov 22, 2017 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, 2017 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.
    – Michael Lorton
    Nov 22, 2017 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, 2017 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, 2017 at 4:24

10 Answers 10

Reset to default
197

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

Improve this answer
17
  • 106
    This. Righty tighty lefty loosy.
    – Socrates Kolios
    Nov 22, 2017 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, 2017 at 11:17
  • 19
    Car speedometers will also (mainly) increase over the clockwise arc. Clockwise for circular scales in general is pretty intuitive.
    – user93670
    Nov 22, 2017 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, 2017 at 15:12
  • 7
    You can easily make screws (and thus valves) which turn in the opposite direction.
    – Michael
    Nov 22, 2017 at 15:54
153

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.

Improve this answer
6
  • 46
    I second this. A visual indicator will remove any confusion whatsoever (and its good UX)!
    – EpicKip
    Nov 22, 2017 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, 2017 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, 2017 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, 2017 at 18:10
  • 1
    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, 2017 at 11:05
22

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.

Improve this answer
7
  • 4
    In many other things it's a "slider".
    – wizzwizz4
    Nov 23, 2017 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, 2017 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, 2017 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, 2017 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.
    – user_1818839
    Nov 30, 2017 at 11:16
14

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.

Improve this answer
16
  • 43
    Clicking on a knob and then dragging it up. Yikes. Don’t do that. Anywhere. Ever. In any UI.
    – Cooper Buckingham
    Nov 23, 2017 at 3:01
  • 24
    @CHBuckingham Pretty much all designers of professional audio software disagree with you, then. This is an extremely common pattern.
    – wavemode
    Nov 23, 2017 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, 2017 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, 2017 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, 2017 at 20:45
8

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.

Improve this answer
2
  • 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, 2017 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, 2017 at 23:04
3

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.

Improve this answer
2
  • 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, 2017 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
    – Roux Martin
    Nov 22, 2017 at 10:04
3

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!

Improve this answer
8
  • If the knob were positioned above the scale, wouldn’t “right” be counterclockwise?
    – JDługosz
    Nov 27, 2017 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, 2017 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, 2017 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, 2017 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, 2017 at 23:33
2

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.

Improve this answer
1
  • 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, 2017 at 11:28
2

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.

Improve this answer
3
  • 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, 2017 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, 2017 at 17:48
  • Clocks with dials followed existing practice - sundials. From which, we can probably conclude they were invented in the Northern Hemisphere.
    – user_1818839
    Dec 1, 2017 at 13:43
1

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

Improve this answer
1
  • You must, like me, find gas stoves very confusing!
    – user_1818839
    Nov 30, 2017 at 11:18

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