We are trying to define what would be the best user experience for a tool assisting the manual focusing of a camera.

The user needs to focus a camera that has a calibration panel in front of it, with some black and white patterns, by turning the focus ring clockwise and counter-clockwise. Both the camera and the panel are static. We are live capturing the camera image, and extracting a numeric value from it, that quantifies the quality of the focus.

However, this value has no known bound beforehand, because it depends on external factors like lighting conditions, panel distance, etc. All we have is that if the value goes up, the focus is better. We also do not know which direction the user is turning the ring at any given time, or if it is turning at all.

If the user keeps turning the ring and the focus is increasing, at some point it will reach a maximum and then start decreasing again, which means they need to turn the ring in the opposite direction, reaching the previous maximum again, or close enough. Let's assume that "close enough" is already defined for us.

This graph shows roughly how the angle-focus_value relationship behaves:

angle-focus_value relationship graph

With all this information, what would be the best way to aid the user in focusing the camera?

Our current idea is to first find the maximum, and then direct the user to it. The problem is that if the user turns the ring and the focus is increasing, and then starts turning it the other way before reaching maximum, from our point of view it will look like the turning point was the maximum, since we can't know how they are manipulating the ring. The main issue is dealing with this lack of information.

1 Answer 1


Since the tool doesn't know the ideal value, it can only tell the user if they are doing better or worse. They can use this information to find the best value (like "hot or cold" in Huckle Buckle Beanstalk).

Option #1 - Simple UI

This UI simply shows the current value. (No mock-up provided ;)

As the user turns the ring, they see the value changing, and infer if they are headed in the right direction. In short, they "play" with the ring until they find the "sweet spot" with the highest value.

Option #2 - Animated UI

An alternative UI is shown in the mock-ups below. It is more visual and more difficult to build. (Ideally, the movements of the indicator are animated, to draw attention to the changing value.)

Example of focus indicator control

Option #2 - Details...

Explanation of the control and a note on the scale of the x-axis

  • Thanks for the thorough answer! You mentioned some things that we also brainstormed. I especially like the box that shows the values the user went through. It's a good way to see the what's the current maximum; I think I'd mark the current maximum in a special way, to indicate that it's the goal. Also, a big indicator that tells you whether you need to go the opposite way or you're going the right way. We'll test some simple prototypes and see how it goes from there.
    – slazaro
    Commented Sep 2, 2014 at 9:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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