3

This question follows on from my previous question. In one of my comments there I had mentioned that I was going to use a round slider instead of the linear one I had been using. Whilst this worked a treat on my touch screen notebook the performance on my test mobile devices was at best patchy.

Having gone back to the drawing board one of the ideas I am now considering is using a jog dial style control - such as this one. One of the principal benefits of Jog Dials is that they free you from the tyranny of 360° max imposed by a circular slider - effectively giving you a potential track length that is infinite.

This works - for instance, to allow users to select their age in the 0 - 99 range I use two turns of the dial. I have modified the control slightly to enable direct numeric input.enter image description here.

Whilst this works I have never run into anything like it in an Android app. I'd like to have a few views on how well this is likely to go down with people used to "typical" Android app UIs.

Even if it is acceptable one niggling concern remains this - in order to do a direct numeric edit the user has to click on the label displayed at the center of the control. Unless they happen to know this it isn't at all obvious that this can be done - though I could of course show a hint to that effect

  • 1
    This functionality looks similar to the Android clock app, where you can set an alarm. Have you tested it? – Alvaro Mar 23 '17 at 12:53
  • Yes, I have tested it - this time round I did all my tests on a mobile device to avoid the unexpected surprise I ran into when I tested the roundslider I refer to in my other question on a mobile device. The one difference between this JogDial and the Android clock setting UI is that the user might have to go round the dial more than once. – DroidOS Mar 23 '17 at 13:00
  • Not sure this counts as an exact duplicate, but this question contains some discussion on the UX of dials / rotary controls: ux.stackexchange.com/questions/101764/… – Daniel Beck Mar 23 '17 at 13:57
  • @DanielBeck thank you for the link to that thread - very useful. The consensus there appears to be heading in the direction of "use linear sliders". However, as I have found out linear sliders with a fine granularity turn out to have serious usability issues when they run into fat fingers on a touch screen - more so on mobile devices than on large lap/desktop screens. Someone also pointed me to this, very informative, article on GUI slider controls in response to one of my other questions here. – DroidOS Mar 23 '17 at 14:09
  • A more pertinent question, Why dials or sliders? – Harshal Mar 23 '17 at 14:22
3

I'd like to have a few views on how well this is likely to go down with people used to "typical" Android app UIs.

The best way to find that out is to conduct user testing with a good variety of people fitting your target audience.

My personal take: I didn't know what a jog dial was and how it differed from a circular dial. When I looked at your wireframe, I assumed the behavior of a fixed 360-degree dial. It was only when I reread your description that I understood that turning the dial would only increase/decrease the value.

Also, I'm concerned that the motion could be finicky and tiring, might not work well at some screen sizes, and, if you're designing for mouse input as well as touch input, wouldn't work well at all with a mouse. These are all assumptions, you'll need to conduct user testing to see if they're right.

in order to do a direct numeric edit the user has to click on the label displayed at the center of the control

For me, an inset text control in the middle of a knob, such as in this mockup, evokes editing. Might not work for everyone, though -- it's something to test out too.


Update Jan. 1, 2018:

In May 2015, Nielsen&Norman wrote an article on sliders and knobs, stating:

Virtual knobs or other controls which the user must 'rotate' can naturally represent parameters such as panning [...] However, virtual knobs are physically challenging to manipulate with common input devices such as mice and trackpads, which don’t have a natural affordance for rotation. Because linear-input devices like mice have difficulty executing rotation, some designs add a hidden linear-dragging functionality to the knob, allowing users to click and drag up or down, vertically, in order to increase or decrease the parameter value. However, this behavior is not expected, and usually has no signifier, so users may never discover it. (Plus, if implemented poorly, it can wrest control away from those attempting to move their mouse in a circle to mimic the rotation of the knob.)

  • Yes. When in doubt test. My hunch would be that it would work as long as its big enough to get a fingertip on. – PhillipW Mar 24 '17 at 22:29
  • Thank you for all the answers. In the end I decided to keep the jog dial for now and get some user feedback. The fact of the matter is that it works rather well - being able to choose a large angular separation between "ticks" by setting the number of full rotations is SOOO useful. I have noted @dr01's view - in the end I relied on my personal experience that I either spin past the target or get annoyed at having to click/tap multiple times. However, if the user verdict comes down against the jog dial a spinner will be the next choice. – DroidOS Mar 29 '17 at 3:13
  • I used "nudge buttons" at the center of the dial in place of an in-place editor since most of the time the only thing a user needs to do is nudge the knob up or down by one "tick" to correct an over/undershoot whilst spinning. – DroidOS Mar 29 '17 at 3:16
1

I believe jog dials are terrible for UX because of the unnatural circular motion the user has to perform. The only proper use case for them is for timers, if the user does not need to set up the unit (e.g. a 1-60 secs timer, or a 1-60 mins kitchen timer).

You should use a wheel instead, which the user can flick to select the desired value. It's interesting to note that a wheel - like a jog dial - is still a disk, only that in this case the side of it is used instead of the front.

Another good option for entering a numeric value are + and - buttons, where the user can tap to increase/decrease of an unit, or tap and hold to increase/decrease fast.

  • The original iPod serves as a good counter-example to "jog dials are terrible for UX." It all depends on the user task being performed. – Daniel Beck Mar 24 '17 at 18:03
  • 2
    Agreed, but in the original iPod there was a physical affordance, whereas the onscreen jog dial doesn't give you any feedback on where are the edges of the dial, for example – Luciano Mar 29 '17 at 16:15
0

I'd like to suggest using tick marks around the circumference of the circle. This means that users have a clock-like UI (something one is very comfortable with). I believe you could fit them around the circle for each hour, however, half hours would likely become difficult to navigate.

I'm personally not a huge fan of the continuous dial (wherein one can continue dialing) as it doesn't indicate a finite number of ticks (an earliest of latest half hour, etc.).

One last suggestion could be to have a line or circle with just 24 points/ticks, and allow users to switch between am or pm.

I hope this helps.

Thanks!

-1

On screens?

It's a skeuomorphic design. Skeuomorphic design is dead. There are other (better) ways to gather similar information from users.

You can ignore all these points in favour of a case where this design fits really well with the solution you're making.

But, if it requires users to turn the dial more than once, I'd say avoid it, fancy interfaced do make some catchy eye-candy. however, usability, simplicity, friction and adaptability are some major concerns. It's always better to use tried and tested UI/UX patterns.

But still, I'd repeat, if it really makes something really easy/delightful interface, there is no reason you can't use it.

  • Agreed this is skeumorphic. But then again the default Android alarm time setter which goes out of its way to mimic an analog clock face is skeumorphic too. I haven't yet committed to JogDials. One of the other options I am considering is MobiScroll. However, that too is skeuomorphic. The least skeumorphic would in fact probably be the humble linear slider but there are serious usability issues there. Bare HTML5 numeric input types look butt ugly. – DroidOS Mar 23 '17 at 13:43
  • 3
    Re "Skeuomorphic design is dead": "Flat" design has replaced heavy-handed decorative skeuomorphism as the current fashionable trend, but there are still plenty of functionally skeuomorphic elements in modern design -- e.g. every button, slider, and toggle switch -- and real-world object familiarity remains as useful a tool in our design arsenal as it ever was. – Daniel Beck Mar 23 '17 at 13:51
  • 1
    (That said, I'm really not understanding what position this answer is even advocating: 'skeuomorphism is dead, I can think of better ways that I won't tell you about, but if it's pretty go ahead and do it...?') – Daniel Beck Mar 23 '17 at 13:54
  • My idea was simply to state that avoid skeuomorphic design (not because other elements are not using it, because other elements are already evolved a lot.) In addition, you stated that users might need to spin the dial more that once (It just sounded like a usability issue). The reason I don't have a direction opinion about whether it should be used or not is simply because it's contextual to your requirements. ultimately, all great UX comes from knowing best practices and then breaking the rules. Snapchat, you hear me??? – Himanshu Vaishnav Mar 24 '17 at 7:18

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.