Creating a UI for brightness/gamma calibration

Question

I'm working on a game where we, at start up, display a brightness calibration screen that users can use to adjust the brightness of their screen so that the game appears more or less consistent across monitors.

A few designs have been mocked up. There is generally a set of bars ranging from nearly black to white (with a note saying you should be able to see each one distinctly) and three blurbs of text reading "Clearly Visible", "Slightly Visible" and "Barely Visible" (and each one is of appropriate brightness). There are also three interactable elements on screen, a slider and text entry which control the brightness, and an OK button for confirmation. Over the course of discussions there has been disagreement on various issues, like

• How important is it for the screen to be monochromatic? e.g. should the controls be completely gray scale, or is it okay to use the normal in-game skin?

• Should there be a screenshot? Will that affect your perception of brightness on the screen?

  • If there is a screenshot, should players be adjusting according to the screenshot, or according to the text and boxes?

• Should the gray scale boxes have text on them with numbers (so you know how many you should be seeing) or should it just say how many you should be seeing?

• Expanding on that, how isolated should the gray boxes be from other elements (one mock up had them next to a screen shot, for example)

• There is a slider that adjusts the monitor's gamma, is it preferable to have players move that slider, or adjust the monitor settings manually?

Answer 1

• If you are using the text method you've suggested, I would recommend grayscale controls. The focus is brightness/gamma, so the controls should reflect that. Unnecessary skinning only complicates the issue.
• If your text method is calibrated in a way that you and your test users find satisfactory, text should be sufficient.
  • If, on the other hand, you wish for a more user-specific calibration method, a screenshot may be quite useful, as long as it is representative of the overall experience of the game. It's no use calibrating with a well-lit screenshot if most of the game happens in caves.
• I'm not sure what you mean with this point.
• Ideally, they should be isolated as much as possible. No need to confuse the user. If you like, you could provide the box and text method on one screen for gross manipulation, and then a screenshot on the next screen for fine tuning.
• This depends on your target audience. If you are targeting a technically inclined audience, manually adjusting the gamma is well within their skills. If you are targeting a general audience, it would probably be best to automate the process.

Answer 2

• In this application the gamma correction set-up is actually part of the game. It is done early in the game and this early experience affects the user's perception of the whole product.

You are not just designing a control screen that does the job of gamma correction with the least fuss and greatest accuracy. If it's dull and boring they'll think the game is too - and a bit cheap. Instead give the user a feeling of being in control, and that this step is enabling them to get the very best out of the game. This answers the 'should I have a screenshot' part of the question. Absolutely yes. And add a game element - dungeon bars seen from a distance - anti-forgery stamp in a passport - that particularly benefits visually from setting gamma correction, and then use that element in the screenshot. Setting the gamma is part of the game.

How important is it for the screen to be monochromatic? e.g. should the controls be completely gray scale, or is it okay to use the normal in-game skin?

Don't go full-screen gray. Use, say, 1/3 of the screen for the test area with a frame inside say 80px wide that is neutral. You will then be more than OK with having colorful elements like a screenshot and dials and skinned controls and other branding outside. Making the gray area through a window of some kind is good. It means you don't have to worry about mixing grayscale and normal game skin in the same area.

If there is a screenshot, should players be adjusting according to the screenshot, or according to the text and boxes?

They should adjust as per the text and boxes. Otherwise your players will ask why are you having those grayscale elements at all? Your microcopy on the page will need a lot of care. You must get across that they get the most accurate adjustment of gamma by working with the grayscale, and imply that the screenshot is just to indicate how that affects the game - meanwhile the reality is that the screenshot is really there to motivate tweaking the gamma.

Should the gray scale boxes have text on them with numbers (so you know how many you should be seeing) or should it just say how many you should be seeing?

Numbers. Players want to know what the right answer is. It is not good to have them worrying 'did I pass the test'?

But I am wondering is counting number of bars a good design for the gamma correction? Shouldn't it be more about making a dithered, or actually horizontally striped, area match a monochrome area when seen from a distance? Or pick the curved line that looks smoothest first black on white, then white on black? I'd like to see a screenshot of the bars to understand exactly what you intend.

There is a slider that adjusts the monitor's gamma, is it preferable to have players move that slider, or adjust the monitor settings manually?

If this is a PC game, surely the user needs to adjust both monitor settings and game settings? I cannot set contrast and brightness of my monitor programmatically. Those MUST be right before I start working on gamma. From a program I can only change the pixel values sent.

Perfection, for print-production, would dictate setting a lot of settings on both monitor and in-program, and a careful order to the setting to avoid setting hell - one adjustment throwing out another. This is not gamer territory however. In the end you do not even care if the user sets up the screen 'hot' - if that is what they prefer. It's totally different to setting up for a print-production application.

I would take a shortcut and assume the monitor settings are fixed, and that you are only changing pixel values. You do not want to include instructions for all possible monitor OSDs.

---

Take Home

Just because you appear to be in print-production territory, don't forget that you are actually writing a game. Apply everything you know about game psychology. Put the user in control.