introduction - download.microsoft.comdownload.microsoft.com/.../lightawareui_values.docx · web...

Visual Variable Guidelines for Light-Aware UI

Windows Sensor and Location Platform

August 23, 2010

Abstract

This paper explains how to modify values for visual variables to create a light-aware user interface (UI) in an application by using the Windows® Sensor and Location platform. It provides values for visual variables that can be used to modify the rendering of images, videos, and text to optimize viewing quality when switching from one lighting condition to another.

This information applies for the following operating systems:Windows 7

References and resources discussed here are listed at the end of this paper.

The current version of this paper is maintained on the web at: http://www.microsoft.com/whdc/device/sensors/LightAwareUI_values.mspx

http://www.microsoft.com/whdc/device/sensors/LightAwareUI_values.mspx

Visual Variable Guidelines for Light-Aware UI - 2

Disclaimer: This document is provided “as-is”. Information and views expressed in this document, including URL and other Internet Web site references, may change without notice. You bear the risk of using it.

This document does not provide you with any legal rights to any intellectual property in any Microsoft product. You may copy and use this document for your internal, reference purposes.

© 2010 Microsoft Corporation. All rights reserved.

Document HistoryDate Change

August 23, 2010 Minor revisions for calibration templates

November 13, 2009 First publication

ContentsIntroduction...................................................................................................................4

Applying Light-Aware UI to Your Solution......................................................................4

Lighting Conditions........................................................................................................5

Outdoor Direct Sunlight............................................................................................6

Outdoor Indirect Sunlight..........................................................................................6

Outdoor Variable Sunlight.........................................................................................7

Indoor Indirect Sunlight.............................................................................................8

Visual Variables..............................................................................................................8

Images and Videos....................................................................................................8

Text.........................................................................................................................10

Optimal Visual Variables and Values for a Content Type.............................................10

Images.........................................................................................................................12

Outdoor Direct Sunlight..........................................................................................12

Outdoor Indirect Sunlight........................................................................................12

Outdoor Variable Sunlight.......................................................................................13

Indoor Indirect Sunlight...........................................................................................13

Videos..........................................................................................................................13

August 23, 2010© 2010 Microsoft Corporation. All rights reserved.






Text..............................................................................................................................15





Summary.................................................................................................................16

Resources....................................................................................................................16

Appendix A: Description of the Research Study...........................................................16

Appendix B: Optimal Variable Values and Ranges.......................................................18

Images.....................................................................................................................18

Videos......................................................................................................................19

Text.........................................................................................................................20



IntroductionDifferent lighting conditions may make it difficult to see what is on a laptop display. If you take a computer from a location with dim lighting to a location with bright lighting, your ability to see the content on the display can decrease dramatically.

Figure 1 A laptop set for indoor lighting (left) and a laptop set for outdoor lighting (right)

In versions of Windows before Windows® 7, users must manually change the display and application settings on a computer to optimize viewing quality when switching between different lighting conditions.

Independent software vendors (ISVs) can now resolve this issue by using the Windows 7 Sensor Platform to create a light-aware user interface (UI). The sensor platform enables computers with ambient light sensors, which detect the level of light in a user’s surroundings, to support a light-aware UI in an application. An application can dynamically control attributes of its UI, which can enhance the user’s ability to view content that the application renders.

Note: Some computers with Windows 7 have Adaptive Brightness enabled. Adaptive Brightness automatically adjusts the display backlight settings based on changes in lighting condition. Applications should not directly or indirectly adjust the computer’s display backlight level on Windows 7. We recommend that you test your programs on a computer with Adaptive Brightness to confirm proper interoperability.

For background information about using the Sensor Platform to create light-aware UI, go to the whitepaper “Implementing Light-Aware UI by Using the Sensor and Location Platform” on the Windows Hardware Developer Center (WHDC) Web site: http://go.microsoft.com/ fwlink /?LinkID=164404 .

Applying Light-Aware UI to Your SolutionTo create light-aware UI, you can apply transforms that modify the values of different visual variables in the content before or during rendering in an application. Because the adjustments are made during the rendering process, the original content is not


http://go.microsoft.com/fwlink/?LinkID=164404


modified, and appears unmodified in other applications. The following examples demonstrate how light-aware technology can improve the UI of an application:

You could enable a movie player to automatically adjust the brightness and sharpness levels of a movie without manually adjusting the settings on the display. You could also adjust the character and line spacing of subtitles to optimize viewing quality for different lighting conditions.

You could enable an image program to display photos in various lighting conditions.

You could help improve viewing quality of RSS feeds, e-mail, and presentations in various lighting conditions.

The guidelines in this paper can help you fine tune your application to improve the viewing quality of content before it is displayed. The following sections describe the visual variables and the corresponding values that can help optimize viewing quality in various lighting conditions for different types of content. You can use these visual variables and level values to help you determine how to adjust transforms that will help achieve optimal viewing quality of content during or before the rendering process.

Lighting ConditionsFour lighting scenarios were used to develop the recommendations for this paper:

Outdoor direct sunlight

Outdoor indirect sunlight

Outdoor variable sunlight

Indoor indirect sunlight

The definitions of these scenarios were derived in part from Table 1 below, which illustrates the range of lux values for common lighting conditions.

Note: The range values provide an approximation for varying lighting conditions. The range values may vary for different users and scenarios.

Table 1 Lux values for common lighting conditionsLighting condition From (lux) To (lux) Mean value (lux)

Pitch black 0 10 5

Very dark 10 50 30

Dark indoors 50 200 125

Dim indoors 200 400 300



Lighting condition From (lux) To (lux) Mean value (lux)

Normal indoors 400 1,000 700

Bright indoors 1,000 5,000 3,000

Dim outdoors 5,000 10,000 7,500

Cloudy outdoors 10,000 30,000 20,000

Direct sunlight 30,000 100,000 65,000

Outdoor Direct SunlightSometimes people work or play outside in direct sunlight. Unfortunately, when the sunlight directly shines on a display, it may be difficult to see content. The range of the average illuminance level is 100,000–120,000 lux for this lighting condition. Illuminance is the occurrence of light on a surface.

Figure 2 Laptops in outdoor direct sunlight

Outdoor Indirect SunlightOn warm sunny days, some people sit outdoors in the shade. When partially shaded sunlight shines on a display from the side, it may be difficult to see content. The range of the average illuminance level is 10,000–23,000 lux for this lighting condition.



Figure 3 A laptop in outdoor indirect sunlight

Outdoor Variable SunlightTo stay cool on hot days, people sometimes sit under the shade of a tree. When the sunlight shines through the moving leaves of a tree, the sunlight and shade move around on the display in an unpredictable pattern, which creates variable illuminance on the laptop display. The changes in the light and illuminance may make content on the display difficult to see. For the shaded areas, the range of the overall illuminance level is 13, 000–24,000 lux for this lighting condition. For the bright areas of sunlight on the display, the range of illuminance is 20,000–100,000 lux.



Figure 4 A laptop in outdoor variable sunlight

Indoor Indirect SunlightSunlight shining through a glass window on a display may make content on the display difficult to see. The range of the illuminance level is 2,000–8,000 lux for this lighting condition.

Figure 5 A laptop in indoor indirect sunlight

Visual VariablesThe following sections describe the visual variables that were used in determining the recommendations for this paper. For more information about how these results were determined, see Appendix A.

Images and VideosThe recommended values for each image and video were determined by using visual assets that were modified by using editing programs to change the values for each variable. An example of the image and video are shown below.



Figure 6 The original image that was used to test visual variables and values

Figure 7 A frame from the original video that was used to determine visual variables and values

The following are definitions for the visual variables that were used for images and videos, and how the levels were adjusted for each of the visual variables.

Brightness is the relative and perceived light intensity that emanates from the pixels in content. The brightness was varied in increments of 10, from 0 through 100.

Contrast is the difference in perceived light emanating from two or more items that appear on a display simultaneously. The contrast was varied in increments of 25, from -50 through 100.

Sharpness is how clearly details appear in content. The sharpness was varied in increments of 100, from 0 through 500.



Red is the red component of the RGB color model. Red was varied in increments of 50, from -100 through 100.

Green is the green component of the RGB color model. Green was varied in increments of 50, from -100 through 100.

Blue is the blue component of the RGB color model. Blue was varied in increments of 50, from -100 through 100.

TextThe recommended values were determined by displaying a paragraph of text in the standard Windows typeface and style in a word processing program. The following are definitions for the visual variables used for text, and descriptions for how the text was modified:

Style type is a modification to emphasize the base font or typeface. The style type chosen was bold.

Character spacing or tracking is the width that is occupied by one character, which is equal to one point (1/72 inch). The character spacing was set as one or two character spaces.

Line spacing or leading is the distance between lines of text. One line space is equal to the same number of points as the previous line.

Optimal Visual Variables and Values for a Content TypeThe following shows a summary of the visual variables and values that showed the greatest overall improvement in viewing quality for a content type under the specified lighting condition.

Table 2 Overall optimal variables and values for media types under the lighting conditionsSCENARIO IMAGE VIDEO TEXT

Variable Value Variable Value Variable Value

Outdoor direct sunlight Brightness 70 Brightness 100 Style Bold

Outdoor indirect sunlight Sharpness 500 Brightness 50 Char space 1

Outdoor variable sunlight Sharpness 200 Brightness 60 Style Bold

Indoor indirect sunlight Sharpness 200 Sharpness 100 Line space 2



To test these level values, contact [email protected] to acquire the appropriate calibration templates for a video or image in your light-aware UI.

The calibration templates are a collection of images and videos that have been calibrated to the visual variable and value that provide the optimal viewing quality for each content type in the various lighting conditions. Each image or video set includes a baseline and four additional images or videos that correspond to each lighting condition.

Figure 8 A calibration template for images

Figure 9 A frame from a calibration template for videos


mailto:[email protected]


The following sections describe:

General trends in viewing quality when level values were adjusted.

Additional visual variables and their overall optimal values.

Optimal values for reflective and matte displays.

In the following sections, each table shows the optimal level value for each variable that increased the viewing quality of images or videos. The variable and value that had the greatest effect on viewing quality is highlighted in green. To see the acceptable range for each variable that improved viewing quality, see Appendix B.

ImagesIncreasing the brightness levels in images had the greatest effect on improved viewing quality in direct sunlight. Adjusting the level of color also improved viewing quality in all lighting conditions except in indirect sunlight. In indirect sunlight, increasing the sharpness level optimized viewing quality.

Outdoor Direct SunlightIncreasing the brightness level in an image consistently improved the viewing quality when viewed in outdoor direct sunlight. Increasing the brightness level showed greater improvement in viewing quality on a reflective display than on a matte display. Changing the contrast and sharpness levels showed moderate improvement to viewing quality. Changing the blue level may also improve viewing quality more than changing the other color levels.

Table 3 Optimal values for images in outdoor direct sunlightVariable Overall Reflective Matte

Brightness 70 70 70

Contrast 50 75 100

Sharpness 400 400 400

Blue -100 -100 -100

Red -50 -50 -50

Outdoor Indirect SunlightOverall, increasing the sharpness level in an image helped improve viewing quality the most in outdoor indirect sunlight. Increasing the brightness level also helped improve viewing quality. For reflective displays, increasing the brightness level in the image optimized the viewing quality. Changing levels of blue, green, and red didn’t



improve viewing quality. Unlike the other lighting conditions, there was an optimal value for reflective displays in outdoor indirect sunlight.

Table 4 Optimal values for images in outdoor indirect sunlightVariable Overall Reflective Matte

Brightness 30 30 30

Contrast -50 -50 -50


Outdoor Variable SunlightIncreasing the sharpness level in an image had the greatest effect on viewing quality. Changing the level of blue, green, red, and contrast did not improve viewing quality.

Table 5 Optimal values for images in outdoor variable sunlightVariable Overall Reflective Matte

Brightness 20 50 20

Sharpness 200 200, 300 200

Indoor Indirect SunlightIncreasing the brightness level in the image improved viewing quality for matte displays; to optimize for reflective displays, the brightness level shouldn’t be changed. Changing the sharpness level helped improve viewing quality for matte displays, but didn’t improve it for reflective displays. Changing the contrast and blue level did not affect viewing quality. Changing the level of red and green decreased the viewing quality of images.

Table 6 Optimal values for images in indoor indirect sunlightVariable Overal

lReflectiv

eMatte

Brightness 30 --- 20

VideosIncreasing the brightness level in the video helped improve the viewing quality of video in all lighting conditions except in indoor indirect sunlight. In outdoor direct sunlight, changing the level of color improved viewing quality; but in indoor and outdoor indirect sunlight, changing the level of color decreased viewing quality.



Outdoor Direct SunlightIncreasing the brightness level in the video showed the greatest improvement in viewing quality. Changing the sharpness level in the video on both display types may improve the viewing quality. On a matte display, a slight increase in the contrast level may improve viewing quality. However, changing the contrast level on a reflective display can degrade the viewing quality. Changing the level of red, green, and blue did not consistently affect viewing quality.

Table 7 Optimal values for video in outdoor direct sunlightVariable Overal

lReflectiv

eMatte

Brightness 100 100 100

Contrast 25 0 25


Outdoor Indirect SunlightIncreasing brightness levels in the video showed the greatest improvement in viewing quality. For reflective displays, increasing the brightness and sharpness levels in the video showed the greatest improvement in viewing quality. For matte displays, increasing sharpness levels in the video also helped improve viewing quality. Changing the level of red, green, blue, and contrast decreased viewing quality.

Table 8 Optimal values for video in outdoor indirect sunlightVariable Overal

lReflectiv

eMatte

Brightness 50 30 90


Outdoor Variable SunlightIncreasing the brightness value in the video had the greatest effect on viewing quality. Increasing brightness levels on matte displays can improve viewing quality, whereas decreasing brightness levels on reflective displays can improve viewing quality. Changing the level of red, green, blue, and sharpness in the video did not consistently improve viewing quality. Changing the contrast level decreased the viewing quality.



Table 9 Optimal values for video in outdoor variable sunlightVariable Overall Reflective Matte

Brightness 60 20 100

Indoor Indirect SunlightFor reflective displays, modifying the brightness level did not improve viewing quality in indoor indirect sunlight. However for matte displays, increasing the brightness level in the video improved the viewing quality. Changing the sharpness level may slightly improve viewing quality. Changing the red, green, blue, and contrast levels in the video decreased the viewing quality.

Table 10 Optimal values for video in indoor indirect sunlightVariable Overal

lReflectiv

eMatte

Brightness --- --- 70


TextIn all lighting conditions, black text on a white background was optimal for viewing quality compared to white text on a black background.

Outdoor Direct SunlightFor black text on a white background, bold text helped improve viewing quality in outdoor direct sunlight. For reflective displays, one additional character space between letters helped to optimize viewing quality.

For white text on a black background, bold text helped improve overall viewing quality. For reflective displays, one additional character space between letters helped improve viewing quality.

Outdoor Indirect SunlightFor black text on a white background, one additional character space between letters helped optimize viewing quality. Bold also may help improve viewing quality.

For white text on a black background, bold helped improve overall viewing quality. One additional character space between letters helped optimize viewing quality for reflective displays.



Outdoor Variable SunlightFor black text on a white background, bold helped optimize viewing quality, whereas on a matte display, one additional character space between letters helped optimize viewing quality.

For white text on a black background, one additional character space helped optimize viewing quality. Bold also may help improve viewing quality. For a reflective display, one additional character space helped optimize viewing quality. For a matte display, bold helped optimize viewing quality.

Indoor Indirect SunlightOverall, black text on a white background with double line spacing helped improve viewing quality. For matte displays, white text on a black background with double line spacing helped improve viewing quality.

For white text on a black background, bold text helped improve the viewing quality overall. One additional character space helped optimize viewing quality for reflective displays.

SummaryThis paper provides guidelines for optimizing the viewing quality of content types in different lighting conditions. By using these guidelines as a starting point, you can fine tune the values for the optimal rendering of content in your application.

ResourcesImplementing Light-Aware UI by Using the Sensor and Location Platform

http://go.microsoft.com/ fwlink /?LinkID=164404

Appendix A: Description of the Research StudyThe research study, which was conducted in July 2009, helped determine whether changes to the values of a specific set of visual variables on images, video, and text would help improve the viewing quality under different lighting conditions. The study also helped determine a range of acceptable values that would help improve the viewing quality. The study focused on changing the values of the following visual variables by using editing applications on images, videos, and text.

For images and video:

Brightness

Contrast

Sharpness


http://go.microsoft.com/fwlink/?LinkID=164404


Red

Green

Blue

For text:

Style type

Character spacing

Line spacing

The study focused on five lighting conditions, but only the following four lighting conditions are discussed:

Outdoor direct sunlight

Outdoor indirect sunlight

Outdoor variable sunlight

Indoor indirect sunlight

The fifth lighting condition, walking in outdoor direct sunlight, is excluded from the discussion because this part of the study could not be replicated.

The study was conducted in Salt Lake City, Utah, at the Microsoft campus. The study included four unique groups of participants, one group for each of the four lighting conditions. Participants were 18 to 60 years old, and each participant used his or her laptop two or more times a week. There were an equal number of men and women in the study. All the participants wore either dark blue or black shirts to minimize light reflecting off of the shirt on to the display.

Two laptops—one with a reflective display and another with a matte display—were used for the study. Participants of the study used both laptops to evaluate each of the image, video, and text assets. Each participant completed two activities for each asset type: comparative evaluation, single item rating, and then winner across the assets.

In the comparative evaluation, participants determined which asset was better between two assets with two different modifications. Similar to an optometrist test, they would choose the asset that they thought had higher viewing quality, and then that asset was compared to the next asset.

Participants gave each asset a single item rating (from 0 through 5) for each variable value. The score for each asset was determined by finding the average of the ratings. Finally, the participants were asked to choose a winner across the assets, which added three points for each win that the asset received to the asset’s score. The assets with the highest scores were compared across the variables to determine the preferred levels.



Appendix B: Optimal Variable Values and Ranges

Images

Table 11 Images in outdoor direct sunlightVariable Overall Reflective Matte

Optimal

Min Max Optimal Min Max Optimal Min Max

Brightness 70 50 80 70 50 100 70 10 70

Contrast 50 50 100 75 50 100 100 --- ---

Sharpness 400 400 500 400 400 500 400 100 500

Color blue -100 -50 -100 -100 -50 -100 -100 -50 -100

Color red -50 -50 -100 -50 -50 -100 -50 --- ---

Table 12 Images in outdoor indirect sunlightVariable Overall Reflective Matte

Optimal Min Max Optimal Min Max Optimal Min Max

Brightness 30 30 50 30 30 50 30 10 50

Contrast -50 -25 -50 -50 0 -50 -50 -25 -50

Sharpness 500 100 500 500 100 500 500 100 500

Color blue -50 0 -50 -50 0 -100 -50 0 -50

Color green

50 0 50 50 0 50 50, 100 0 100

Color red -50 -50 -100 50, -50 --- --- -100 0 -100

Table 13 Images in outdoor variable sunlightVariable Overall Reflective Matte


Brightness 20 0 30 50 0 50 20 0 30

Contrast -25 75 -25

Sharpness 200 200 300 200, 300 200 300 200 100 500



Table 14 Images in indoor indirect sunlightVariable Overall Reflective Matte


Brightness 30 10 60 --- --- ---- 20 10 60

Contrast -25 --- --- 25 --- --- -50 --- ---

Sharpness 200 --- --- 200 --- --- 100 100 500

Videos

Table 15 Video in outdoor direct sunlightVariable Overall Reflective Matte


Brightness 100 40 100 100 20 100 100 40 100

Contrast 25 0 25 --- --- --- 25 0 25

Sharpness 500 400 500 400 400 500 500 300 500

Table 16 Video in outdoor indirect sunlightVariable Overall Reflective Matte


Brightness 50 30 90 30 20 90 90 30 90

Sharpness 100 100 300 100 100 500 100 100 300

Table 17 Video in outdoor variable sunlightVariable Overall Reflective Matte


Brightness 60 30 60 20 10 40 100 30 100

Sharpness 100 --- --- 100 --- --- 100 100 300

Table 18 Video in indoor indirect sunlightVariable Overall Reflective Matte


Brightness --- --- --- --- --- --- 70 10 90August 23, 2010© 2010 Microsoft Corporation. All rights reserved.


Variable Overall Reflective Matte

Sharpness 100 0 100 100 0 100 100 0 200

Text

Table 19 Text in outdoor direct sunlightText and background color Overall Reflective Matte

Black text on white background Style Bold Char space 1 ---

White text on black background Style Bold Char space 1 ---

Table 20 Text in outdoor indirect sunlightText and background color Overall Reflective Matte

Black text on white background Char space 1 --- ---Style Bold

White text on black background Char space 1 --- Style BoldStyle Bold

Table 21 Text in outdoor variable sunlightText and background color Overall Reflective Matte

Black text on white background Line space 2 --- Char space 1

White text on black background Char space 1 Char space 1 Style Bold

Table 22 Text in indoor indirect sunlightText and background color Overall Reflective Matte

Black text on white background Line space 2 --- ---

White text on black background Bold Char space 1 Line space 2


introduction - download.microsoft.comdownload.microsoft.com/.../lightawareui_values.docx · web...

Documents