How can I lead users to and use an unusual navigation

Question

So, I'm making someone a high concept website. Basically, there's one of those old fashioned television sets with circular nobs, like those on a stove, to change the channel. You turn the nob, it changes what appears on the television screen. Two issues that have occurred to me:

1. How can I lead the user to the nobs?
   • Bad ways: highlighting the nob with a bright transparent overlay (weird and not very effective) or with some mild animation like marching ants (also not effective, and also disgusting)
   • Less bad, but still atrocious way: A arrow pointing to the nob with a floating box that reads "turn the nob to change the channel". Needless to say, this is horrible.
2. How should the turning mechanism work?
   • I've seen turnable things before, and they always feel a bit awkward with a mouse. Do you have to drag the mouse as if you were actually turning it, or do you click?

Any ideas would be nice.

Answer 1

1. Id say implement a hot/cool mouse proximity scenario: for example change the color or the brightness of the knob in relation to the closeness of the cursor. The user will immediately notice it and will be naturally attracted to it (dynamic interaction is enticing).
2. You will have to add positions with labels (e.g. "-off / -1 / -2 etc") relative to the knob (radial disposition). Clicking is obvious but the real problem arise when they will want to go backward (if it's not a binary choice). I would recommend using a left/right area solution on the knob itself: if you mouseover on the right of the knob it will show a curved arrow indicating the positive order and vice versa for the left side (of course the first and last position will have only one direction indicated).

Answer 2

Here's a tip - make the numbers on the knob's dial clickable. That way, at least users who don't understand the turning mechanism (which, actually, I'm not sure how you'd implement) can still use the existing convention of see thing -> want thing -> point at thing -> click thing.

Oh, and very important: make the dial's selector clearly visible.

Still, generally speaking, I'd probably look for a vintage TV design with buttons rather than knobs. If your users felt design > usability, they'd still be visiting those godawful Flash splash sites from yesteryear.

Answer 3

As the website comes up, turn the knob twice, maybe back and forth, changing the channel. Then "let go" and hand control over to the user.

I think using a slightly different visual style for the knob can be done very gracefully, and it needn't be atrocious.

As for the turning mechanism - provide mouseover indications on the ticks around the knob. When you click them, the knob turns to the relevant tick. Beyond that, the "left/right area solution" suggested by Knu is a good option, but I'd do it with up-down or maybe with a diagonal division, which is more suitable for the clock-wise motion concept, imho.

Answer 4

Hows about having the default channel on the tv tell the user how to change the channel?

Answer 5

It sounds like you don't want to introduce any styling or elements which would be out if keeping with your theme. So, how about: a) a hand-shaped shadow that comes in from the screen-edge on mouse-over (or proximity). The shadow need-not interact with the dials/buttons as it's a suggestion of the user's own hand.

b) Another option is to introduce a set of quick instructions (perhaps in the form of a TV Guide) - they could be styled to look in keeping with the rest of the theme and wouldn't feel glaringly out of place.

Answer 6

1. Leading the user

Instead of a knob you could use a remote control, that would let the user know that they should control the TV and try clicking on the buttons.

If you really want the knobs then you can just let them "shine" once in a while. This is very common in video games.

Here's a video from Enslaved: Watch the small "bricks" on the wall shine up in this video, they almost blink.

2. Turning the knob

Either let it "turn up one step" per click, so you can just click away and it'll wrap around from last to first setting. Or make it click-draggable (left to right) but this might be harder to communicate without a hover-tip, some arrows or something. I'd go with clicks.

Answer 7

I would simply reconsider the whole idea. Think some other, more usable way, to communicate this old time tv theme to users. However this does seem one of those ideas that is someones brainchild, ie. tough to make them reconsider it even, if some other implementation would server the users better.