Keywords

1 Introduction

Whether operating graphic users’ interfaces for computers or hand-held devices, users need to click visual icons to execute program instructions. (Nasanen and Ojanpaa 2003). It is important and common for users to search for an graphical icon in a complex users interface. The performance of search tasks mainly depend on the difference of the target and the distractors (Duncan and Humphreys 1989; Wolfe 1998). The search time will increases if the difference between the target and the distractors is small (Nasanen et al. 2001). To make it easy for users to find the target icon, designers should ensure that the target is very different from the distractors, coding them with different distinctive visual characteristics. Among many forms of information encoding, lightness coding in digital interfaces has a very important impact on interface design. How to reduce visual information confusion and improve cognitive performance through icon feature coding is a subject to be studied in the optimization of interface design. The dark mode in 2019 brings challenges to interface design, not only to adapt to the low power consumption mode of smart phones, but also to reduce the visual fatigue caused by light under different lighting environments, so explore the difference in brightness of icon color matching scope is a valuable subject. As early as 1997, Kingdom found that the brightness of the visual space area is not only related to the brightness of the area, but also depends on the luminances of adjacent regions (Kingdom 1997). simultaneous brightness contrast (SBC) is a well-known demonstration for this finding, which usually described as a homogeneous brightness change within an enclosed test patch such that a gray patch on a white background looks darker than an equi luminant gray patch on a black background.

Many domestic and foreign scholars have begun to pay attention to the effects of dark mode and lightness coding on the cognitive performance of digital interfaces. Shieh and Ko (2005) found that icons with a black background and a target color of red had the highest aesthetic preference. After researching the cognitive performance of different colors on a black background, it found that the cognitive performance of yellow is the highest (Zhang et al. 2011). There is still a lot of research on cognitive performance against black background, especially related to study of hue. In addition to the above-mentioned researches on dark mode, research on lightness coding is also common in the field of human-computer interface. WU and other experiments analyzed the cognitive performance of hue, lightness, and saturation in the combination of foreground and background colors. They considered that hue affects cognitive speed and visual preference, but the influence is less than lightness and saturation. Moreover, Ahlstrom and Arend (2005) others use hierarchical lightness coding to improve the design of aviation combat display interfaces.

In this paper, we used background color blocks of graphical icons as experimental materials and made a questionnaire to investigate threshold range of icons’ lightness levels by the analysis of questionnaire results. We provided a framework work to improve lightness coding design for icons.

2 Methodology

2.1 Materials

The experimental material are the background color blocks of the graphical icons. The color blocks in behavioral experiment consisted of 20 different background lightness, 10 levels in Dark mode and 10 levels in Light mode. All color blocks used were 32 £ 32 pixels in size and saved in bitmap format with a color depth of 24 bits. As is shown in Fig. 1, In Dark mode, the background lightness of the color blocks varies from 10 to 100 in 10 CIE LAB units with a total of 10 levels. The color of the color blocks is expressed in Lab color mode, which are a1(10,-0,-0), a2(20,-0,-0), a3(30,-0,-0), a4(40,-0,-0), a5(50,-0,-0), a6(60,-0,-0), a7(70,-0,-0), a8(80,-0,-0), a9(90,-0,-0), a10(100,-0,-0), and the background color is expressed as Lab (0, -0, -0). Table 1 shows the rankings of the lightness levels for the Dark mode. As is shown in Fig. 2, In Light mode, the background lightness of the color blocks varies from 0 to 90 in 10 CIE LAB units with a total of 10 levels. The background color of the color blocks is expressed in Lab color mode, which are b1(90,-0,-0), b2(80,-0,-0), b3(70,-0,-0), b4(60,-0,-0), b5(50,-0,-0), b6(40,-0,-0), b7(30,-0,-0), b8(20,-0,-0), b9(10,-0,-0), b10(0,-0,-0), and the background color is expressed as Lab (100,-0,-0).Table 2 shows the rankings of the lightness levels for the Light mode.

Fig. 1.
figure 1

The lightness of color blocks in Dark mode. The lightness levels of the color blocks from left to right are a1–a10, all color blocks were 32 £ 32 pixels in size and background is 96 £ 96.

Full size image
Table 1. The lightness levels for the Dark mode
Full size table
Fig. 2.
figure 2

The lightness of color blocks in Light mode. The lightness levels of the color blocks from left to right are b1–b10. All color blocks used were 32 £ 32 pixels in size and background is 96 £ 96.

Full size image
Table 2. The lightness levels for the Light mode
Full size table

2.2 Subjects

Of the 30 students who participated in this experiment, 15 were males and 15 were females. Both participants were university students aged between 22 and 26 years, with normal or corrected vision and without color blindness or color weakness. Before participating in the experiment, all participants were provided informed consent, and their personal details like name, gender, age, grade, major and vision were recorded in a database. During the behavioral experiment, Each student received a questionnaire with 20 questions. There was no time requirement for participants to complete the questionnaire.

2.3 Experimental Equipment and Experimental Procedures

Behavioral experiment were conducted in the form of questionnaires to record behavioral data. First, the study used the questionnaire star and the experimental materials to create a questionnaire, and then send the questionnaire to the mobile phones of the 30 participants. The questionnaire had 20 questions, of which 10 were about dark mode and 10 were about light mode and the pictures that showed in each question were made in Adobe illustrator.

The details of behavioral experimental procedure were as follows. First, the initial brightness value of the matching stimulus was set in Adobe illustrator, 10 levels in Dark mode and 10 levels in Light mode. All stimuli were presented as color blocks. Then these color blocks add a white and black background in Adobe illustrator. After that, a questionnaire was made by questionnaire star (app) and generated a URL link to be send to participants. The completed questionnaire is shown in the Fig. 3.

Fig. 3.
figure 3

The questionnaire

Full size image

To begin behavioral experiment, Participants had to open the link of questionnaire, shown on their mobile phones or computers, by pressing URL. Then the explanation given by the researchers about the questions was presented under title. Participants were asked to complete the 20 questions after reading the instructions carefully. When the question was displayed in the center of the screen, the participants need to judge the difference between the stimulus color blocks and the black or white background. After judging, they had to press the corresponding button. The left-most button indicates that the difference is not obvious and the score record 1. The right-most button indicates that the difference is very obvious and score record 4. The results and the completed questionnaires occurring during this process were recorded by computer. The experiment was conducted in a single session of approximately 5-min duration. Figure 4 depicts that experimental process.

Fig. 4.
figure 4

Experimental flowchart

Full size image

3 Analysis and Results

3.1 Behavioral Data Analysis

Behavioral data of this study is score of each question. As shown in Fig. 5, A score of 1 indicates that the difference between color blocks and the background is not obvious, a score of 2 indicates that the difference between color blocks and the background is generally obvious, a score of 3 indicates that the difference between color blocks and the background is obvious, and a score of 4 indicates that the difference between color blocks and the background is very obvious.

Fig. 5.
figure 5

Level 4 scale

Full size image

Figure 6 illustrates that when the lightness of the color blocks changes within the range of a1(10,-0,-0)–a5(50,-0,-0), the difference between the lightness of the color blocks and the background increases faster, and the difference increases slowly in the range of a6(60,-0,-0)–a10(100,-0,-0) in dark mode. Moreover, in Light mode, the behavioral experiment showed that when the lightness of the color blocks changes within the range of b1(90,-0,-0)–b3(70,-0,-0), the difference between the lightness of the color blocks and the background increases faster, and the difference increases slowly in the range of b4(60,-0,-0)–b10(0,-0,-0).

Fig. 6.
figure 6

Comparisons of scores in the two modes

Full size image

4 Conclusion

There were several findings in the experiment. First, the results showed that when the lightness difference between the color block and the background was the same, the participant thought that the color block was more different from the background in Light mode. Besides, in dark mode, when the lightness of the color blocks changes within the range of a1(10,-0,-0)–a5(50,-0,-0), the difference between the lightness of the color blocks and the background increases faster. That is, the difference in brightness from the background is in the range of 10–50. However, in Light mode, when the lightness of the color blocks changes within the range of b1(90,-0,-0)–b3(70,-0,-0), the difference between the lightness of the color blocks and the background increases faster. That is, the difference in brightness from the background is in the range of 10–30.

Our investigation is the innovation into the statistical study of the recognition and memorability of icons in human-interactive systems. The results would provide valuable guidance to further studies and future design of icons in digital interface.