After joining ByteDance, I helped found the GIP UED Creative Design Lab and led the first design study to reduce the visual damage while people were using our products. This handbook is now widely used, such as Douyin, Xigua Video, Jinri Toutiao, and other applications to help product designers explain the principles of vision impairment and design recommendations for eye protection.
“Why is it designed this way?
”
Creative Design Lab was initially established to answer this question, and we have done a great job of accomplishing that mission in this one.
For some reason, the details of the original document cannot be shown.
Visual Fatigue
The most significant damage to the eyes from using screens is visual fatigue. Visual fatigue can lead to dry eyes, astringent eyes, sore eyes, blurred vision, and even vision loss, affecting a person's work and life.
Causes of Visual Fatigue
Near Response
When people view a screen at close range, their eyes perform a series of actions called the near response. The most acute effects on visual fatigue are vergence movements and accommodation of the lens. In brief, the closer people watch the object, the more pressure is placed on the eye muscles. The eye muscles cannot relax for a long time, thus causing visual fatigue.
- Accommodation is when viewing objects at close distances, the ciliary muscles contract, and the lens thickens, focusing on objects at close distances.
- Vergence is the contraction of the internal rectus muscles of both eyes inward, resulting in seeing a clear image rather than a double image.
Light Intensity
When the difference between the screen brightness and the people's ambient light intensity is significant, the pupil needs to remain contracted or dilated for a long time to make the light enter the eye appropriately. At this time, the muscles in the eye are under tension, which will increase people's visual fatigue. Such a difference in brightness will also be more likely to distract people's attention.
Highly Saturated Colors
Each color has a different wavelength and is imaged at a different depth behind the lens. In order to focus the different wavelengths on the retina, the lens needs to change shape constantly. Viewing saturated colors can cause more eye muscle focusing movements, resulting in visual fatigue.
Vibration
When the screen and the people are in vibration or motion, the eyes need to constantly adjust and focus, resulting in increased eye muscle movement, which causes eyestrain and triggers blurred vision and a feeling of soreness.
Ways to Relieve Visual Fatigue
Viewing from a Distance
The farther the people are from the screen, the better the protection for vision. However, there are more complex factors to consider in real design scenarios. Therefore, designers should have a comprehensive expectation of the distance between the people's eyes and the screen, called the "design viewing distance." The design viewing distance is determined by eye hygiene, a people operating range, viewing comfort, and other conditions.
According to the Human Factors and Ergonomics Society (2007), the minimum viewing distance for eye protection is 40cm, and the typical close eye distance is 40cm. This distance needs to be considered first and is called the "standard eye protection distance".
People should be able to see every logical pixel when viewing the screen. Otherwise, they will not be able to recognize some details. Similar to the Snellen chart, the limit of visual angle that the eye can recognize is 1/60th of a degree. However, when designing an interface, it is more important to make it comfortable for the user. Therefore, the more widely accepted 1.5/60 degrees are used as each logical pixel's visual angle size. The distance at which people can see precisely 1.5/60 degrees is the "eye comfort distance".
Through some research, we have obtained the formula for calculating the eye comfort distance:
- L is the diagonal size of the device screen.
- H is the number of logical pixels on the device's screen height.
- W is the number of logical pixels on the device screen width.
- d is the viewing angle that meets the eye's comfort. It is usually 1.5/60 degrees.
In summary: the larger the size of the device and the smaller the logical resolution, the greater the eye comfort distance between the human eye and the screen.
Nevertheless, keep in mind that when using devices such as cell phones and tablets, they all belong to the eyes working at close range, and the relief of visual fatigue is minimal. If people can use the screen casting function to display the content on the TV and projection, the comfort level for the eyes is ideal. The effect is even better when the mobile device becomes a controller-like device that can be linked to the content on the TV.
Different devices require different interaction methods. Cell phones and tablets are touch-operated, laptops and desktop computers are mouse and keyboard, and TVs and projections are remote-controlled. Therefore, the range of operation is different when people use different devices. It is called the "operable distance".
At the center of the eye, about 10 degrees is the most sensitive area, 10 to 20 degrees can correctly identify information, and 20 to 30 degrees is more sensitive to dynamics. When the vertical viewing angle of an image is 20 degrees, and the horizontal viewing angle is 36 degrees, there is a perfect sense of visual presence and no fatigue caused by the frequent turning of the eyes. The viewing distance calculated from the size of the people's screen is called the "presence distance".
An appropriate design viewing distance can be derived according to the scenario when these three distances are calculated. When we want to remind users not to watch too close to the screen in the product, this distance can be used as a threshold value. In addition, the design viewing distance can help us examine the interface's usability and visual effect from the user's point of view for some devices that are not used daily, such as large screens. Of course, it is also better to use this distance when doing usability testing.
Take iPhone X as an example, an adult watching a video in landscape. The three distances are as follows:
- Eye comfort distance: 38.07 cm, should be less is better.
- Operable distance: 49.50 cm, must be less than this.
- Presence distance: 20.77 cm, should be more is better.
Combined with the standard eye protection distance, we chose to use 40 cm as the design viewing distance in this case.
Real Cases:
After we released the handbook at ByteDance, we communicated with many of the company's teams, especially for online educational products, to facilitate their consideration of human vision protection in product design.
We helped China's leading English learning apps for children, GuaGualong, upgrade their eye protection systems and helped Dali desk lamps verify that their design does protect people's vision.
There is a prompt in the Guagualong app if a child is too close to the screen.Comfortable Font Size
We also need to reconsider the font size when calculating the design viewing distance. Although in everyday devices, designers have summarized the appropriate font size through best practices. However, on the one hand, the readability of the interface can be checked by scientific theory, and on the other hand, such a calculation can be directly applied to product types with less design experience summarized, such as interfaces for large screens or TVs.
Comfortable font size for body text should have a stroke thickness equal to or greater than one logical pixel in height. Take PingFang Regular as an example. When its stroke thickness equals 1 pt, its font size is 14.5 pt. When people sit at eye comfort distance, the 14.5 pt appendix looks comfortable and eye-friendly. Keep in mind that this size also varies for different font weights of the same font family or different font families.
However, the "design viewing distance" and "eye comfort distance" are different. In order to ensure the people's comfort at the "design viewing distance," the font size of the text selected for our design needs to be scaled accordingly. This ratio follows the following formula:
- Ddv is the design viewing distance.
- Dec is the eye comfort distance.
- Sec is font size at eye comfort distance.
Continuing with the iPhone X example, for a person with normal vision, with a comfortable eye distance of 38.07 cm and a design viewing distance of 40 cm, we can calculate that the font size of the text should be 15.12 pt. However, we usually set the font size to an integer and round it up to 16 pt to make the display more comfortable.
For different people, we also need to consider their general vision. Children and the elderly will have a weaker vision, which needs to be enlarged accordingly in equal proportion to the situation or provide various options. For example, a 5-year-old child has a general vision of 0.71, the font size of the text should be at least 22pt.
Of course, the color and contrast of the text also need to be taken into account, and it is recommended to refer to WCAG 2.1 and reach at least Level AA: the visual presentation of text and images of text has a contrast ratio of at least 4.5:1.
Real Cases:
Once we worked this out, we tested it in the vast majority of ByteDance's products, pushing the company to use a more scientific font size for its products and popularizing the importance of contrast.
I helped Xigua Video create a new font system.Even better, we helped ByteDance's pre-K product line create rules for body font sizes of 19 pt on iPhone, 22 pt on iPad, and 22 pt on Android devices, based on the age distribution of people using our products and the device model distribution.
We helped to check the font size of the text in the pre-K app.Physical Relaxation
Follow the "20-20-20" principle, that is, "after 20 minutes of looking at the screen, gaze at a distant place 20 feet (6 meters) away for more than 20 seconds", so that the muscles in the eyes can relax and relieve eye fatigue. The product's eye care system can add a function to prompt resting eyes at regular intervals, and users can turn it on or off by themselves.
In China, students are required to do eye exercises, but it is now generally believed that eye exercises do not provide relief from visual fatigue, and because they require the use of fingers to massage around the eyes, they can easily cause eye infections and other hygiene problems, and it is better to rest with eyes closed.
Appropriate Light Contrast
The international lighting code requires 500 lumens for office, school, and library reading environments. Different age groups need different ambient light intensities by detecting the user's usage environment and combining it with the user's age.
In addition to suggesting users turn on the function of automatic screen brightness adjustment of the device, designers also need to consider the user's environment when using the product for a design. For example, sleep-aid products are usually used in dark environments, and designers can choose a darker color as the background color.
Ambient light not only comes from outside the screen, but the brightness of other interfaces within the screen will also become ambient light. Sometimes, users need to switch back and forth between multiple screens or multiple software to work. Moreover, sometimes, users switch between different interfaces within the same software. If the user frequently switches between the interface with a black background and the interface with a white background, this change in brightness difference can easily cause visual fatigue. Therefore, when designing the interface, it is necessary to consider the brightness of other interfaces that the user uses at the same time and keep consistent with it.
Many OLED screen PWM dimming flicker frequency is about 215Hz-250Hz, that is, a second screen in the light and dark between the switch more than 200 times. Although viewing less than such a change, the pupil size is constantly fine-tuned, leading to visual fatigue. When using a phone with an OLED screen, try to turn up the brightness slightly because the lower the screen brightness, the strobe about serious.
Real Cases:
We initially thought that apps designers would not have the opportunity to care about the change of light contrast. However, in our research, we realized that many people use dark backgrounds when using reading software, so if people switch pages, the background may turn white, resulting in a short period of light solid contrast, so we suggested that we could add a background color change animation when switching pages.
Low-saturation Colors
Use highly saturated colors only on elements that need to be emphasized or attract the user's attention. Large areas in the background or other scenes need to be avoided as much as possible. Specifically, it can open the HSL color mode in the design software and check the Saturation value. If it is higher than 90, it is already very high saturation.
When using Dark Mode at night, the screen brightness matches the ambient light intensity, relieving visual fatigue to a certain extent. However, if people use Dark Mode in a very bright environment, the screen brightness decreases, the amount of light into the eyes decreases, the pupils dilate, and the number of blinks decreases, which will increase visual fatigue. So the dark mode must be designed to follow the system's options, or better yet, the way to switch through the ambient brightness.
Design dark color mode, need to pay attention to the contrast, screen brightness change consistency. The dark color mode still needs to ensure that the text and background color align with the contrast standard. For details, please check. At the same time, the page should avoid jumping back and forth between dark and light backgrounds. This situation is more stimulating to the eyes. The amount of incoming light becomes more and less, which will lead to frequent dilatation and reduction of the pupil, which harms the eyes and user experience.
Real Cases:
Designers often prefer to use bright colors, but this is actually bad for the user's eyesight, especially in the design of products for children, and after we realized this, we actively advised the designers concerned to change the color mode from RGB to HSL and use colors that are better for eyesight.
After:
Keep the Screen Still
However, when the screen vibrates at a frequency higher than 5Hz relative to the person, the phase difference between the screen and the eye may be higher than 90 degrees, resulting in a greater degree of vision level loss. If the vibration frequency of the user's device is detected, such as walking, weak alerts can be used to alert the user. When designing a product that has to consider the screen for use while in motion, such as a fitness application, it is recommended to increase the font size in the interface accordingly.
Blue Light
Short-wave blue light with wavelengths between 400-450 nm is harmful to the eyes. The lens's excessive absorption of blue light can cause irreversible lesions in the retinal cells. Blue light is also a significant cause of biological clock disruption by affecting melatonin production.
Ways to Prevent Blue Light
Hardware Filtering
Anti-blue light stick for screen or people wearing anti-blue light glasses can effectively filter the blue light emitted from the screen. However, one must consider the impact of filtering blue light simultaneously-the screen displays contrast, saturation, brightness, and other indicators.
Screen Reduction
Lower color temperature colors should be used in eye protection designs to reduce the amount of blue light emitted from the screen. The lower the color temperature, the more yellow (red) the color is, the less amount of blue light on the screen. Designers can choose such colors with low color temperature as the background color of the interface.
For image content, one can choose to overlay a color temperature layer on top of the image using "positive overlay" to reduce the amount of blue light. It is not recommended to use layers with color temperatures below 3400 K as a best practice.
I created a SwiftUI prototype of screen reduction of blue light to help understand how it works.Of course, it is technically possible to change the color temperature of an application directly through the GPU.
Uniform Contrast
The color temperature of the content changes, the contrast between elements will also change. People need to maintain enough contrast between different elements to distinguish the content clearly.
In the standard eye-care mode design for black-on-white (background color is brighter than foreground color) scenes, as the background color temperature decreases, the relative brightness of the background also decreases. In order to keep the contrast stable, it is necessary to reduce the brightness of the foreground color accordingly after reducing the color temperature (i.e. use HSL color mode to reduce the L value of the foreground color appropriately) to keep the contrast stable.
Real Cases:
We have also minded many apps attempting to reduce the blue light emitted from the screen by simply overlaying an orange layer, which can lead to lower contrast in the text, which is not suitable for either people's experience or eye protection.
After:
Circadian Rhythm Compliance
Humans have an inherent natural rhythm based on light changes, following the rule of "sunrise and sunset." The main reason is that light, incredibly blue light, affects melatonin production, and the reduction of melatonin makes it more mental, thus delaying the sleep impulse and disrupting the normal functioning of the circadian rhythm.
It is necessary to consider the impact of natural rhythm on the user and avoid the sudden change of color temperature on the user's perception of stimulation. So the color temperature change should occur in the public twilight time of the user's location, that is, 24 minutes after sunset and before sunrise, and to increase or decrease the screen's color temperature at regular intervals per unit of time. During the day, it is recommended to use a color temperature of 6500K or ignore the effect of color temperature on the design.