2

What would be an intuitive way for users to interact with a dial button of 2" of diameter on a touch device taking discrete values from 1.0 to 8.0? The dial is a representation of a real one featured on an industrial turbine. The basic interaction should allow to increment and decrement the value by 0.1.

The dial cannot be made larger and will be used on a web application, hence ruling out finger rotation as a candidate.

Tapping would be easy enough to be intuitive but how would distinguish between a tap to increment and one to decrement?

We're by no means UX masters but we'd like to offer a smooth experience.

Dial button

  • Is that really a good facsimile of the actual dial on the physical device? It's very unusual to see dials like this with the numbers facing outwards (so the selected item is upside down) and it's also weird to have to turn something anticlockwise to increase it (at least in my culture). Normally you'd expect the numbers to be outside the dial with an indicator on the dial itself. – Kit Grose Aug 23 '16 at 0:13
  • Interesting, this never occurred to me. As a matter of fact, you made double check and I confirm that this is 1-1 replica of the actual dials found on steam turbines of an American manufacturer from Midwest. – VH-NZZ Aug 23 '16 at 7:11
  • Do you actually need to replicate that it turns the "wrong" way ? – PhillipW Sep 26 '16 at 6:23
  • 1
    Can you reconsider 1:1 replica? Knobs with a touch device are a pain. As user I'd prefer to have a different interaction model but an easier usage. Maybe a slider but if you stick to a round control replace knob with plain buttons (in circular layout) without flipped text – Adriano Repetti Nov 25 '16 at 13:23
  • Sorry, can you clarify, you say "discrete values 1.0 to 8.0" then say it should have the ability to increment and decrement by 0.1, thanks. – DarrylGodden Nov 25 '16 at 20:27
1

If you are open to using jQuery, the project jQuery Knob looks pretty fantastic. Here is a demo.

This does support discrete steps as you are looking for, see the data-step attribute. Additionally, the data-min and data-max properties can help you achieve the limits you need.

data-step=".1"
data-min="1"
data-max="8"

You may override the draw method to achieve the specific design you are going for.

  • Unfortunately, jQuery is no option but thanks for the heads-up, I like the interaction with the knob. I didn't think of rotating the dial using a single finger touch + move actually. – VH-NZZ Aug 22 '16 at 14:38
  • Ah okay, sorry this solution does not meet your requirements. I'm glad I did bring up this option for interaction, though. Using a single finger to drag around the dial is quite intuitive, though it is important to make sure the user can still see the value as they are sliding. A two inch dial is a good size and should avoid this problem, but it is good to keep in mind if you pursue this approach. – seth10 Aug 22 '16 at 14:43
  • Indeed, thank you. As you'd scroll around, the value in the center would be automatically updated with the current position of the yellow ticker. The dial might need to be a little larger than 2" across, perhaps 2.5". – VH-NZZ Aug 22 '16 at 14:56
1

A user's first intuition will be to interact with the knob virtually the same way they would physically- which would probably be rotation.

If that's definitely out of the question though, would finger sliding be possible? Sliding right to move the yellow ticker clockwise and increase the value, or sliding left to move it anti-clockwise.

Also, since the value is incremented by 0.1, a 2-inch diameter dial could have some precision problems if the user is, for example, trying to get 5 but keeps sliding onto 5.1 or 4.9. A way around this could be that holding your finger down for a longer period (around 2 seconds) would trigger a precision mode that moves the ticker slower than the normal mode.

1

I'd be tempted to add a very obvious up down vertical slider to the right of the "knob" (If need be making the numbers around the edge of the knob smaller)

The "knob" then becomes just a display - not a control

Swiping up on the slider increases the number on the display, swiping down decreases the number on the display.

1

If the dial metaphor is visually necessary (I could imagine this on for example an digital audio workstation, or a software synth or the like), I would make clicking on the dial bring up a small modal with either an input box or a select box. Then you have the benefits of the keeping the dial intact, but giving an easier input interaction.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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