Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have a nested dial control on Android. It looks like this:-

Screenshot

The labels are a bit small to read on the screenshot: they're days, hours, mins. Note in particular that the read-out point is at the bottom.

I'm trying to make this control more generally useful by allowing it to be controlled with a D-pad or arrow keys, instead of a touch interface. I think each of the nested dials should be focused in turn, starting from the innermost "days" dial (because it has the largest effect, it's the one you'd expect to set first). Then pressing should take you to hours, etc. and back to days.

The question is about rotating each dial. Because the user is looking at the bottom of the dial, moving it to the left here means clockwise and increases the value, whereas usually we associate right with clockwise, and with increasing (if you're a left-to-right reader).

So which way should it rotate? Should turn the dial clockwise, matching the right/clockwise/increase association, but making the numbers pass the readout point in the opposite direction; or should turn the dial clockwise, to match the leftward swipe gesture you'd do to turn the wheel? And whichever answer you prefer, how can I mitigate the confusion caused by the mismatched association?

P.S. I'm sure someone will ask why the readout point is at the bottom. It's for two reasons. First, it allows the days dial (the one with the fewest notches) to be on the inside, yet still the first in reading order. Second, users tend to be nearer the bottom of the screen than the top when using a hand-held. Putting the focus closer to the user supports the 3D illusion of the dial, whereas at the top the user feels like he's peering over the top of the dial to see it. I also experimented with having it at the right-hand side instead, to get around this problem, but having the numbers turned sideways looks incredibly confusing.

share|improve this question
2  
Righty Tighty, Lefty Loosy –  JonW Sep 3 '13 at 11:05
    
You are working on a problem known in human factors as a 'population stereotype'. There are several principles involved. See this slide deck for a summary. As with any population stereotype, the definition of 'population' affects the expected movement of the dial in response to the control affecting the dial. On UX Stack Exchange, you are likely to get people saying 'clockwise' and others saying 'counter/anti clockwise.' Ignore all of them. Implement both methods and test it with prospective users. –  user1757436 Sep 3 '13 at 12:47
    
Just use something other than a dial :). Dials just do not translate well to mouse & keyboard interaction. –  17 of 26 Sep 3 '13 at 16:15
    
Something else to consider: the up/down arrows often denote increase/decrease respectively on software dials. –  uxzapper Sep 4 '13 at 7:23
    
@user1757436 this isn't a population stereotype. This is about translating a direct manipulation based interface to indirect, keyboard manipulated interface. Clockwise = to the right. <key>right</key> should rotate the dial clockwise, regardless of the values on the dial and regardless of the read-out position. –  Koen Lageveen Sep 4 '13 at 14:02
show 3 more comments

2 Answers 2

Could you cut off the top of the dial? This would make 'left = higher' make more sense:

Chopped

Edit

In the same direction as 3D dials, have you considered moving them 90 degrees:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
1  
This is a good idea, and one I considered for space-saving reasons when I was first prototyping the control. A better alternative (IMO) is tilting the dial in 3D, so the read-out point is even closer to the user. This emphasizes the 'active' notches on the dial in the same way, but the whole dial is still visible. I hadn't considered using this technique to help the D-pad interaction. –  Dan Hulme Sep 3 '13 at 12:38
    
Your wireframe mockup would be so much easier to work with in every way. –  Koen Lageveen Sep 4 '13 at 14:05
add comment

The metaphor you are creating is that of a disc that can be rotated. So the controls should align with that. The < arrow should turn the disc left and right should turn in right.

So the question becomes, if it is turning based on the top or bottom of the disc. This is where you also need to display what is selected more clearly. By doing so, you emphasize the part of the disc being manipulated by the user.

This would be my assessment, but this would need more testing.

enter image description here

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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