ArticlePDF Available

Form design in interface of display and control system based on visual search

Authors:

Abstract and Figures

To explore the design pattern and guidelines for the forms displayed on the interfaces, we studied the factors of form design from the perspective of ergonomics. These factors include orientation (horizontal, vertical), color grouping and color combination. In combination with the analysis and conclusion of the experimental data, we proposed some design guidelines for human-computer interface that has many forms, such as weapon command and control system. A visual searching program was designed to simulate the display interface. Reaction time and accuracy are recorded by orthogonal experiment. Analyses such as double factor variance analysis, simple main effect are conducted on the experimental data. The following conclusions are obtained: two-color form has a faster reaction time than single color form; reaction time of the horizontal form is shorter than the vertical form. Color combination has significant influence on accuracy, and the blue-green is suiTable for form design; color grouping has significant influence on reaction time and accuracy; the interaction of color grouping and color combination shows significant differences. When designing forms in display interface, we should choose the horizontal layout with sparse coloring density as much as possible, and the effect of color combination on the recognition efficiency should be considered.
Content may be subject to copyright.
Form design in interface of display and control
system based on visual search
Dayan Wang2, Jue Qu1, 2, Wei Wang1, *, Shuai Zhu1, and Kang Li1
1 School of Aeronautics, Northwestern Polytechnical University, Xi’an China
2 Air and Missile Defense College, Air Force Engineering University, Xi’an China
Abstract. To explore the design pattern and guidelines for the forms
displayed on the interfaces, we studied the factors of form design from the
perspective of ergonomics. These factors include orientation (horizontal,
vertical), color grouping and color combination. In combination with the
analysis and conclusion of the experimental data, we proposed some
design guidelines for human-computer interface that has many forms, such
as weapon command and control system. A visual searching program was
designed to simulate the display interface. Reaction time and accuracy are
recorded by orthogonal experiment. Analyses such as double factor
variance analysis, simple main effect are conducted on the experimental
data. The following conclusions are obtained: two-color form has a faster
reaction time than single color form; reaction time of the horizontal form is
shorter than the vertical form. Color combination has significant influence
on accuracy, and the blue-green is suiTable for form design; color
grouping has significant influence on reaction time and accuracy; the
interaction of color grouping and color combination shows significant
differences. When designing forms in display interface, we should choose
the horizontal layout with sparse coloring density as much as possible, and
the effect of color combination on the recognition efficiency should be
considered.
1 Introduction
The form of war and the characteristics of war under informatization conditions require that
combatants must have rapid response and decision-making capabilities [1]. The display and
control modes of human-machine interface of aircraft, submarine, ship, anti-aircraft missile
and other weapons and equipment display control system feature multi-tasking, multi-
information and multi-mode [2]. If the designs of display quantity, display mode, display
timing, size, color, and layout are unreasonable, operators will bear the excessive
physiological and psychological endurance, and have more difficulty in information
identification, judgment and operation control, which will cause human error during
operations [3]. Reference [4] shows that the improvement of human-machine interface can
effectively reduce the occurrence of human error, and the effect of human error reduction is
significant, especially for unskilled operators. Reference [5] shows that even if the
* Corresponding author: 1729581429@qq.com
© The Authors, published by EDP Sciences. This is an open access article distributed under the terms of the Creative Commons
Attribution License 4.0 (http://creativecommons.org/licenses/by/4.0/).
MATEC Web of Conferences 336, 05003 (2021) https://doi.org/10.1051/matecconf/202133605003
CSCNS2020
appropriate personnel are selected and trained for combat missions through various testing
methods, and the training procedures for combatants are improved, the operator cannot
safely operate some complicated weapons and equipment. Frequent accidents make people
realize that only when weapons and equipment meet the physiological, psychological
characteristics and ability limits of users, can the effectiveness of weapons be exploited to
avoid accidents. Regarding the ergonomic design of the human-machine interface of
weapons and equipment, many research institutions have carried out a lot of research work.
Mosier [6] and Sullivan [7] studied the display interface of the aircraft cockpit, analyzed the
influence of character, symbol, color, and other information coding methods on the
identification performance, and studied the usability level of the interface design and its
evaluation method. Yuan Xiuqian, Zhou Qianxiang, Zhuang Damin and others from
Beijing university of Aeronautics and Astronautics have focused on the human-machine
interface of the aircraft cockpit [8-11]. They analyzed the problems and deficiencies in the
ergonomic design of the aircraftcockpit, combined with the mental workload of the pilot,
optimized the design and comprehensive evaluation of the display interface of the cockpit.
A series of experimental studies have been carried out on the pilots situational awareness
and situational cognition, which provided a scientific basis for the design of information
display interface from the perspective of cognition. In the field of Graphical User Interface,
a large amount of research has focused on the information display coding of text, icons,
meters, etc. [12-17], and few design guidelines have been proposed on the way how forms
should be designed, especially in terms of human visual search characteristics.
2 The characteristics of human visual search
Human vision search has many characteristics, which are used in interface design. The
horizontal movement ability of human eyes is stronger than that of the vertical direction,
and the judgment of position, size, color and other attributes is more accurate than that of
the vertical direction [18]. Feature integration theory [19] considers that there are two
information processing processes in visual search. The first is the pre-attention stage, in
which the visual system processes all the stimuli in the field of vision simultaneously. In
this stage, attention is not required and only independent features are detected while the
relations between the features are not detected. The second is the sequence processing stage
with memory capacity limitation. This process connects the independent features of the pre-
attention stage to form a holistic cognition of an object. Bichot et al. [20] proved the
existence of the pre-attention phase from the perspective of neurophysiology. Wolfe et al.
[21] analyzed the influencing factors and characteristics of the pre-attention phase in detail,
and the color was considered to be the most important factor that affects the pre-attention
information processing. In the visual search, the subjects will group the forms according to
color grouping in the pre-attention stage. Wang Haiyan [22] and others analyzed the visual
search behavior of the icons through eye movement experiments and also proved the
existence of this grouping strategy.
When designing the forms, the design factors of great significance are orientation
(horizontal layout, vertical layout) and color. To this end, this paper takes the orientation,
color combination and color grouping of forms as the research objects, and uses Chinese
characters and numbers as information display content in forms. The study analyzes the
results from the perspective of visual search and provides an ergonomic basis for the
designs of forms in display interface.
2
MATEC Web of Conferences 336, 05003 (2021) https://doi.org/10.1051/matecconf/202133605003
CSCNS2020
appropriate personnel are selected and trained for combat missions through various testing
methods, and the training procedures for combatants are improved, the operator cannot
safely operate some complicated weapons and equipment. Frequent accidents make people
realize that only when weapons and equipment meet the physiological, psychological
characteristics and ability limits of users, can the effectiveness of weapons be exploited to
avoid accidents. Regarding the ergonomic design of the human-machine interface of
weapons and equipment, many research institutions have carried out a lot of research work.
Mosier [6] and Sullivan [7] studied the display interface of the aircraft cockpit, analyzed the
influence of character, symbol, color, and other information coding methods on the
identification performance, and studied the usability level of the interface design and its
evaluation method. Yuan Xiuqian, Zhou Qianxiang, Zhuang Damin and others from
Beijing university of Aeronautics and Astronautics have focused on the human-machine
interface of the aircraft cockpit [8-11]. They analyzed the problems and deficiencies in the
ergonomic design of the aircraftcockpit, combined with the mental workload of the pilot,
optimized the design and comprehensive evaluation of the display interface of the cockpit.
A series of experimental studies have been carried out on the pilots situational awareness
and situational cognition, which provided a scientific basis for the design of information
display interface from the perspective of cognition. In the field of Graphical User Interface,
a large amount of research has focused on the information display coding of text, icons,
meters, etc. [12-17], and few design guidelines have been proposed on the way how forms
should be designed, especially in terms of human visual search characteristics.
2 The characteristics of human visual search
Human vision search has many characteristics, which are used in interface design. The
horizontal movement ability of human eyes is stronger than that of the vertical direction,
and the judgment of position, size, color and other attributes is more accurate than that of
the vertical direction [18]. Feature integration theory [19] considers that there are two
information processing processes in visual search. The first is the pre-attention stage, in
which the visual system processes all the stimuli in the field of vision simultaneously. In
this stage, attention is not required and only independent features are detected while the
relations between the features are not detected. The second is the sequence processing stage
with memory capacity limitation. This process connects the independent features of the pre-
attention stage to form a holistic cognition of an object. Bichot et al. [20] proved the
existence of the pre-attention phase from the perspective of neurophysiology. Wolfe et al.
[21] analyzed the influencing factors and characteristics of the pre-attention phase in detail,
and the color was considered to be the most important factor that affects the pre-attention
information processing. In the visual search, the subjects will group the forms according to
color grouping in the pre-attention stage. Wang Haiyan [22] and others analyzed the visual
search behavior of the icons through eye movement experiments and also proved the
existence of this grouping strategy.
When designing the forms, the design factors of great significance are orientation
(horizontal layout, vertical layout) and color. To this end, this paper takes the orientation,
color combination and color grouping of forms as the research objects, and uses Chinese
characters and numbers as information display content in forms. The study analyzes the
results from the perspective of visual search and provides an ergonomic basis for the
designs of forms in display interface.
3 Experimental design
3.1 Participant
Overall 34 participants (19 male, 15 female), aged 18~25, participated in this experiment.
All the participants are right-handed, healthy, correct vision, no color blindness, weak color
and so on. None of the participants tested have been exposed to similar experiments.
3.2 Experimental equipment
The experimental equipment includes a HP xw9400 workstation. The experiment is
presented on a 22-inch display screen with a resolution of 1280×1024 pixels, a screen
brightness of 300 cd·m-2, a bright spot diameter of 0.33 mm, and a refresh rate of 200 Hz.
The subjects are about 600mm from the screen. The line of sight is at an angle of 90°, and
the center of the screen is substantially horizontal to the eye of the test subject.
3.3 Experimental tasks and interface design
1) Experiment variables
Currently, the layout methods commonly used in forms in the weapon equipment
display interface are horizontal layout and vertical layout. The commonly used colors are
mainly red, green, blue, etc. [23] only studied the effect of orientation on the Easy Search
Rate of the forms. [24] selected color and distance as the factors that influence the design of
forms. No relevant paper has been reported that takes all the factors into consideration.
Based on this, in order to explore the design method of forms in the weapon equipment
display interface that is more in line with the human visual search characteristics, a total of
three experimental variables are designed for this experiment: two form orientations
(horizontal, vertical), six color combinations (red, green, blue, combination of red and
green, green and blue, blue and red). In the form filled with combined colors, there are
three ways of color groupings (1×12, 3×4, 6×2) representing different densities. This test,
which uses within-subjects design, covered a total of 24 sets of experimental materials.
2) Experimental interface
According to the color attribute of the commonly used forms in the display interface of
the weapon equipment display control system, the background of the display panel is set to
be black, the characters are white, and the lines are white. Select the commonly used colors:
red (RGB; 255, 0, 0), green (RGB; 0, 176, 80), blue (RGB; 0, 112, 192), two of which are
combined to get three combined color modes: red green, green blue, blue red. The three
monochromatic and three combined colors form a total of six color attributes, and every
form contains 24 rectangular areas of the same size, each of which is 1.2 cm long and 0.6
cm wide. This format of form is also often used in computer operating systems. Fully
simulate the display format of forms in the weapon equipment display interface, divide the
experimental forms into two layers: one is composed of Chinese characters, and the other is
composed of numbers. In order to reflect the influence of Chinese characters on the display
of the Table, the Chinese character layer experiment is composed of four Chinese
characters, namely “You”, “Shen”, “Tian” and “Jia”. There are 12 combinations. Taking
into account of the symmetry of the numbers on the keyboard, the numbers are combined
with “1”, “2”, “4”, and “5”, which correspond one-to-one with Chinese characters, as
shown in Fig. 1.
3
MATEC Web of Conferences 336, 05003 (2021) https://doi.org/10.1051/matecconf/202133605003
CSCNS2020
(a) Horizontal layout
(b) Vertical layout
Fig. 1. Table design for different layout methods and coloring patterns.
3) Experimental tasks
The experimental interface is shown in Fig.2. The participant first searches for the
specified Chinese character combination according to the prompt, then searches for the
number corresponding to the Chinese character combination, and inputs the number from
the keyboard. The experimental procedure is mainly compiled by the standardized
psychological experiment system E-Prime software to present the experimental target. The
software automatically records the reaction time and accuracy of the participants.
Fig. 2. Experimental interface.
3.4 Formal experiment
Step 1: Before the test, the participants are required to take a good rest and maintain a good
mental state. The participants are informed of the instructions and allowed to practice 10
times to ensure that the they are fully familiar with the experimental process.
Step 2: Before the formal test, let the participants look at the “+” icon in the center of
the screen, make sure that the visual center of the participant is at the center of the screen,
and then randomly present a set of test pictures so that the they can be familiar with the test
process and ready to start the experiment.
Step 3: The experiment is officially started. Each subject is required to complete 24
different types of form experiments. Each group of experiments has a total of 12 pictures,
and each combination of Chinese characters and numbers are randomly distributed. The
target area and the target are uniformly presented in the search range, and the participants
4
MATEC Web of Conferences 336, 05003 (2021) https://doi.org/10.1051/matecconf/202133605003
CSCNS2020
(a) Horizontal layout
(b) Vertical layout
Fig. 1. Table design for different layout methods and coloring patterns.
3) Experimental tasks
The experimental interface is shown in Fig.2. The participant first searches for the
specified Chinese character combination according to the prompt, then searches for the
number corresponding to the Chinese character combination, and inputs the number from
the keyboard. The experimental procedure is mainly compiled by the standardized
psychological experiment system E-Prime software to present the experimental target. The
software automatically records the reaction time and accuracy of the participants.
Fig. 2. Experimental interface.
3.4 Formal experiment
Step 1: Before the test, the participants are required to take a good rest and maintain a good
mental state. The participants are informed of the instructions and allowed to practice 10
times to ensure that the they are fully familiar with the experimental process.
Step 2: Before the formal test, let the participants look at the “+” icon in the center of
the screen, make sure that the visual center of the participant is at the center of the screen,
and then randomly present a set of test pictures so that the they can be familiar with the test
process and ready to start the experiment.
Step 3: The experiment is officially started. Each subject is required to complete 24
different types of form experiments. Each group of experiments has a total of 12 pictures,
and each combination of Chinese characters and numbers are randomly distributed. The
target area and the target are uniformly presented in the search range, and the participants
are required to select the prompt target along side the form from the 12 randomly arranged
and non-repeated Chinese character combinations of each set of search interfaces under the
condition of ensuring the accuracy as much as possible. Enter its corresponding number
through the keyboard. After the entering the number, the experiment automatically enters
the next interface. In order to ensure that the participants have a good mental state, they can
rest according to their subjective wishes in each experimental interval.
Step 4: The tests mentioned above are performed on 34 experimenters until the end of
the experiment.
4 Analysis of the experimental results
In the experiment, 34 participants participate in 24 different experiments to search for 12
different targets. A total of 9792 data are obtained, of which 384 are incorrectly selected
and the error rate is 3.92%. The invalid data are excluded and the analysis of variance is
performed on the remaining experimental data.
4.1 Influence of layout mode, color and colouring mode on reaction time
The experiment records the results of 34 subjects. As shown in Table 1, the layout method,
color combination and color grouping are used as the three factors affecting the reaction
time, and the differences between groups are analyzed.
Through the analysis of variance, the orientation (f=10.506, p≤0.01) and color grouping
(f=21.376, p≤0.01) have significant influence on the reaction time, and the interaction
between them (f=0.480, p=0.846) is not that obvious. The color is not significant for the
reaction time regardless of the monochrome (f=0.037, p=0.776) or the two colors (f=0. 925,
p=0.342). Orientation and color combination (monochrome: f=0.003, p=0.863; two colors:
f=0.591, p=0.743), color combination and color grouping (f=2.304, p=0.763) are not
significant for the reaction time.
The average response time of the horizontal layout is 4653ms, while the average
response time of the vertical layout is 5233ms, and the horizontal layout is 11.08% faster
than the vertical one. In addition, as shown in Fig.3, the thinner the color grouping
distribution, the longer the reaction time. The average reaction time of the monochrome is
5436ms, the average reaction time of the 1×12 color grouping is 5208ms, the average
reaction time of the 3×4 is 4771ms, and the reaction time of the 6×2 is 4495ms. There is a
significant difference in reaction time between the coloring groupings. The specific values
are shown in Table 2.
Table 1. Significant analysis of reaction time by various factors.
Factor F P
Orientation 10.506 0.002
Color
combination
Monochrome
0.037
0.776
Two-tone
0. 925
0.342
Color grouping
21.376
0.004
Orientation &
Color
combination
Monochrome
0.003
0.863
Two-tone 0.591 0.743
Orientation & Color grouping 0.480 0.846
Color combination (two colors
only) & Color grouping
2.304 0.763
5
MATEC Web of Conferences 336, 05003 (2021) https://doi.org/10.1051/matecconf/202133605003
CSCNS2020
Table 2. Difference analysis between groups for each coloring mode.
Variance analysis
combination
Variance analysis
F P
Monochrome & (1×12) 5.632 0.048
Monochrome & (3×4) 32.057 0.003
Monochrome & (6×2) 55.226 0.001
(1×12) & (3×4) 15.473 0.000
(1×12) & (6×2) 28.562 0.002
(3×4) & (6×2) 11.319 0.004
Fig 3. shows the reaction time of different color groupings. For a two-color form, the
thinner the color grouping distribution, the longer the reaction time, and the linear
relationship. In general, the two-color form has a faster reaction time than the monochrome.
The average reaction time of the two-color is 4753ms, which is 9.34% faster than the
monochrome, and the effect is significant (F=31.226, P≤0.001).
Fig. 3. The reaction time of different color groupings.
According to the previous analysis, the monochrome form has a longer reaction time
than the two-color, and the difference in reaction time is remarkable. Therefore, color
analysis is divided into two categories, one is monochrome color analysis, and the other is
two-color analysis. For the color of the monochrome form, the difference in reaction time is
not significant (f=0.037, p=0.776), the reaction time of green is the shortest, the reaction
time blue is the longest, and the difference between the groups is not significant. For the
two-color form, the color combination has no significant effect on the reaction time
(f=2.340, p=0.615), and the difference between the color combinations is not significant.
Draw a line chart based on the specific reaction time of the color, as shown in Fig. 4.
Fig. 4. Average reaction time under each color attribute.
4.2 Influence of layout mode, colour and colouring mode on the accuracy
Because there is an intrinsic relationship between reaction speed and accuracy, there is a
trade-off between the two. If the reaction time is studied separately and the accuracy is not
6
MATEC Web of Conferences 336, 05003 (2021) https://doi.org/10.1051/matecconf/202133605003
CSCNS2020
Table 2. Difference analysis between groups for each coloring mode.
combination
Variance analysis
F
P
5.632
0.048
32.057
0.003
55.226
0.001
15.473
0.000
28.562
0.002
11.319
0.004
Fig 3. shows the reaction time of different color groupings. For a two-color form, the
thinner the color grouping distribution, the longer the reaction time, and the linear
relationship. In general, the two-color form has a faster reaction time than the monochrome.
The average reaction time of the two-color is 4753ms, which is 9.34% faster than the
monochrome, and the effect is significant (F=31.226, P≤0.001).
Fig. 3. The reaction time of different color groupings.
According to the previous analysis, the monochrome form has a longer reaction time
than the two-color, and the difference in reaction time is remarkable. Therefore, color
analysis is divided into two categories, one is monochrome color analysis, and the other is
two-color analysis. For the color of the monochrome form, the difference in reaction time is
not significant (f=0.037, p=0.776), the reaction time of green is the shortest, the reaction
time blue is the longest, and the difference between the groups is not significant. For the
two-color form, the color combination has no significant effect on the reaction time
(f=2.340, p=0.615), and the difference between the color combinations is not significant.
Draw a line chart based on the specific reaction time of the color, as shown in Fig. 4.
Fig. 4. Average reaction time under each color attribute.
4.2 Influence of layout mode, colour and colouring mode on the accuracy
Because there is an intrinsic relationship between reaction speed and accuracy, there is a
trade-off between the two. If the reaction time is studied separately and the accuracy is not
studied, it is difficult to reflect the influence of each factor on the identification
performance. However, the error option in the experimental data only accounts for 3.92%
of the total data, which is relatively low. If two-way ANOVA is further grouped, it will be
difficult to draw credible conclusions due to insufficient data volume. Therefore, only one-
way ANOVA is performed on the accuracy, as shown in Table 3.
Table 3. Analysis of the significance of each factor for the accuracy.
Factor
F
P
Orientation
0. 527
0. 746
Color
combination
Monochrome
0.411
0.305
Two-tone
33.257
0.004
Color grouping
16.349
0.001
The accuracy of the horizontal layout is 97.12%, while the accuracy of the vertical
layout is 96.57%, which is 0.55% higher than the horizontal layout, which is in line with
the speed accuracy principle. However, the impact of the orientation on the accuracy is not
significant. In addition, the color combination has significant effect on accuracy (f=16.349,
p≤0.001), in which the accuracy of monochrome form (98.34%) is higher than the average
accuracy of the two-color (95.01%), which is 3.33% higher. The speed accuracy criteria is
met, and the difference (f=8.326, p=0.025) is significant.
Inter-group difference analysis is performed for each color groupings. As shown in Fig.
5, the accuracy of the monochrome form is up to 98.34%. For the two-color form, the
accuracy of the 3×4 color grouping is 93.55%, and the accuracy of the 6×2 is 98.05%, 1×12
has the second highest accuracy, which is up to 95.41%. The differences between the
groups are significant. As shown in Table 4, only the 6×2 color grouping and the
monochrome forms are not significantly different, and the monochrome and the 6×2 color
grouping could be classified into one category. The styles of these two kinds of forms don’t
have much change in color and are highly similar, with a small error rate.
Fig. 5. Accuracy in different color groupings.
Table 4. Analysis of the difference between the accuracy in different color groupings.
Variance analysis combination
variance analysis
F P
Monochrome & (1×12)
6.846
0.042
Monochrome & (3×4) 25.225 0.001
Monochrome & (6×2)
0.065
0.746
(1×12) & (3×4) 8.334 0.021
(1×12) & (6×2)
8.536
0.032
(3×4) & (6×2)
27.201
0.002
For monochrome forms, the color attribute is not significantly different from the
accuracy (f=0.912, 0.254). As shown in Fig. 6, the accuracy of blue is 98.34%, the green is
7
MATEC Web of Conferences 336, 05003 (2021) https://doi.org/10.1051/matecconf/202133605003
CSCNS2020
97.86%, and the red is 96.50%. For the two-color form, unlike the monochrome, the color
combination has a significant effect on the accuracy (f=25.332, p≤0.01).
Fig. 6. Accuracy under each color attribute.
As shown in Table 5, the average accuracy of green-blue combination is up to 98.72%,
while the red-green combination is lower at 97.08%, the blue-red combination is the least at
92.35% and significant difference exists between the other two color combinations. This
means that the color combination has a stronger impact on the visual pre-attention process
than a single color.
Table 5. Inter group difference analysis of accuracy at the different color combination.
Color
Average correct
rate
Variance analysis
combination
variance analysis
F
P
RG 97.08% RG&GB 5.644 0. 305
GB 98. 72% GB&BR 46.871 0.002
BR 92.35% BR&RG 42.226 0.001
Table 6. A summary of the conclusions drawn from the experimental data.
Orientation Color combination Color grouping
Reaction
time
Orientation has a
significant impact on
the reaction time
The horizontal
layout is faster than
the vertical layout
Color combination has
no significant impact on
the reaction time
The average response
time of the two-color
form is less than the
monochrome Table
Color grouping has
a significant impact
on the reaction time
Color grouping of
6×2 has the best
performance on
reaction time
Accuracy
The impact of the
orientation on the
accuracy is not
significant
Color combination has
significant effect on
accuracy
The accuracy of
monochrome form is
higher than that of the
two-color form
Color grouping has
a significant impact
on the accuracy
Color grouping of
6×2 has the highest
accuracy
5 Discussion
The three factors (orientation, color grouping and color combination are used as the
independent variables for analyzing the performance of interface. From the experimental
results, the orientation has a significant impact on the reaction time, and the horizontal
8
MATEC Web of Conferences 336, 05003 (2021) https://doi.org/10.1051/matecconf/202133605003
CSCNS2020
97.86%, and the red is 96.50%. For the two-color form, unlike the monochrome, the color
combination has a significant effect on the accuracy (f=25.332, p≤0.01).
Fig. 6. Accuracy under each color attribute.
As shown in Table 5, the average accuracy of green-blue combination is up to 98.72%,
while the red-green combination is lower at 97.08%, the blue-red combination is the least at
92.35% and significant difference exists between the other two color combinations. This
means that the color combination has a stronger impact on the visual pre-attention process
than a single color.
Table 5. Inter group difference analysis of accuracy at the different color combination.
Color
Average correct
rate
Variance analysis
combination
variance analysis
F
P
RG 97.08% RG&GB 5.644 0. 305
GB
98. 72%
GB&BR
46.871
0.002
BR 92.35% BR&RG 42.226 0.001
Table 6. A summary of the conclusions drawn from the experimental data.
Orientation Color combination Color grouping
Reaction
time
Orientation has a
significant impact on
the reaction time
The horizontal
layout is faster than
the vertical layout
Color combination has
no significant impact on
the reaction time
The average response
time of the two-color
form is less than the
monochrome Table
Color grouping has
a significant impact
on the reaction time
Color grouping of
6×2 has the best
performance on
reaction time
Accuracy
The impact of the
orientation on the
accuracy is not
significant
Color combination has
significant effect on
accuracy
The accuracy of
monochrome form is
higher than that of the
two-color form
Color grouping has
a significant impact
on the accuracy
Color grouping of
6×2 has the highest
accuracy
5 Discussion
The three factors (orientation, color grouping and color combination are used as the
independent variables for analyzing the performance of interface. From the experimental
results, the orientation has a significant impact on the reaction time, and the horizontal
layout is 11.08% faster than the vertical layout, but the effect on the accuracy is not
significant. The main reasons for the results are:
1) The visual system has a greater visual perception breadth than the vertical scan when
performing the horizontal scan, and the lateral visual acuity declines more slowly.
Therefore, the horizontal visual search has a faster information processing speed [25]
than the vertical.
2) People are more accustomed to horizontal scanning during visual scanning, and this
increase in biological and habitual lateral scanning speed does not affect the accuracy of
scanning. This is consistent with Gong Yong's result on the influence of the layout direction
of the graphic panel on the recognition performance [26].
The color grouping has a significant impact on the recognition performance in reaction
time and accuracy. The results show that the average reaction time of the monochrome
form is 12.69% slower than the two-color form, and the accuracy is 3.33% higher. In the
two-color form, the smaller the coloring density, the faster the reaction time and the
difference between groups. The accuracy for 6×2 color grouping is the highest, while that
of the 3×4 was the lowest, and the difference between the groups is significant. The main
reasons for the results are:
1) For the information search of forms, the combination of the three colors of red, green
and blue obviously has a stronger influence on people’s pre-attention process than the use
of one single color. Because the color difference brought by color combination is an
independent feature that can be detected in the pre-attention stage, it helps to narrow the
scope of visual search, and lay a foundation for the second processing process with memory
limitations. While the monochrome form is too monotonous, the difference between the
blocks in forms is not strong, and the recognition efficiency is not high, so the reaction time
is long.
2) Grouping strategy for information processing. As mentioned in the Section 2, color is
the most important factor affecting the pre-attention phase. The subjects prioritized the
processing stage to group the information in forms according to the color, and then
systematically searched the information in the subsequent sequence processing stage, and
the memory capacity of the person was limited during the sequence processing stage. The
span of human short-term memory can only cover 7±2 blocks of information [27]. This
principle is applied to interaction design, and document filling to improve navigation and
search efficiency. In this experiment, the form of 6×2 color grouping is divided into two
groups, each of which has 6 blocks that are made up of numbers and Chinese characters.
These 6 blocks are just well matched with the span of human short-term memory, so they
are processed together in parallel. The line of sight does not oscillate back and forth
because of the color classification, so the reaction time is the shortest and the accuracy is
highest in the two-color form. The 3×4 color grouping is divided into 4 blocks, each of
which contains 3 components. The subjects also perform visual search based on the color
grouping strategy, and then there are three other color components between the color blocks.
Working memory causes interference. The visual search method has a back-and-forth
swing phenomenon, so the reaction time is longer than the 6×2 color grouping, and the
accuracy is low. For the 1×12, since its color conversion is too frequent, its grouping
property is not obvious, and there are two kinds of visual search methods. One is a
grouping-based search method, and the other is a full-sequence search method that ignores
grouping policies. The search method based on the grouping strategy will have a short
response time, and due to the existence of the grouping interval, the accuracy will also be
reduced. The full sequence search method has a long reaction time but the highest accuracy.
Therefore, in general, the reaction time of 1×12 is only faster than the monochrome, and the
accuracy is higher than the 3×4 color grouping.
9
MATEC Web of Conferences 336, 05003 (2021) https://doi.org/10.1051/matecconf/202133605003
CSCNS2020
In general, whether it is a single color or a combined color has no significant effect on
the reaction time, and the combined color has a significant influence on the accuracy.
Among them, the accuracy of green and blue combination is 98.72%, and the accuracy of
blue-red combination color is only 92.35%. Christ [28] summarized 42 literatures on color
impact display interface search performance between 1952 and 1973 and found that color
usage has a positive impact on search performance in certain circumstances and negative
effects in some environments. This indicates that the environment is an important factor
influencing the visual impact of color.
To summarize the experimental procedure of this paper, on the one hand, the
combination of the two of four Chinese characters "You", "Shen", "Jia" and "Tian" is
difficult to identify and it is not an objective of this study to compare the results based on
the level of difficulty, but it has created a bottom line effect for the influence of color in the
visual search. So the color has little effect on the reaction time [29]. On the other hand, due
to the combined use of colors, the degree of discrimination between chunks is improved,
and the influence on the visual search process is more intense. When searching for a two-
color form, the subject may abandon the accuracy in order to ensure the reaction time, so
the significant effect of the combined color is reflected in the accuracy. In addition, the
color grouping, color combination, and orientation are not significant for the interaction of
the reaction time, so no further discussion is made.
6 Conclusion
Through the analysis above, the following conclusions can be drawn:
1) When designing the interfaces of different systems that have a lot of forms, such as
weapon command and control system, nuclear power plant monitoring system, you can use
the horizontal layout as much as possible, and you can color the forms with multiple colors.
The coloring should take into account of the short-term memory characteristics of humans.
A coloring block can contain 7±2 components, which can speed up the reaction while
ensuring a higher accuracy.
2) The design should be combined with the use of the environment to fully consider the
effects of color and color combination. It is known in the text that in the design of forms,
for the color combination, the green-blue combination is superior to the red-green
combination and the red-blue combination.
In this study we only use three colors of red, green and blue which are applied in the
display interface. Combining them in two, only three combinations of colors, the analysis
of the combined colors in the form is not enough, and the combination of colors is one of
the most important factors affecting visual search performance [30]. Furthermore, in the
display interface, various types of charts are displayed intricately, and the display of the
Table and other display elements should be considered to ensure the coordination of the
entire display interface. In addition, this study is mainly based on the analysis of behavioral
performance, and does not have subjective and objective evaluation of the form design. In
the later research, on the one hand, it is necessary to fully consider the influence of more
color combinations and display elements. On the other hand, it is necessary to combine the
subjective evaluation, eye movement measurement and other research methods to further
explore the design guidelines for visual search charts to accord with cognitive
characteristics, reduce cognitive load, and improve interaction efficiency. Furthermore, it
provides guidelines for the ergonomic design of the display interface of submarine, ship,
anti-aircraft missile and other types of display control systems.
10
MATEC Web of Conferences 336, 05003 (2021) https://doi.org/10.1051/matecconf/202133605003
CSCNS2020
In general, whether it is a single color or a combined color has no significant effect on
the reaction time, and the combined color has a significant influence on the accuracy.
Among them, the accuracy of green and blue combination is 98.72%, and the accuracy of
blue-red combination color is only 92.35%. Christ [28] summarized 42 literatures on color
impact display interface search performance between 1952 and 1973 and found that color
usage has a positive impact on search performance in certain circumstances and negative
effects in some environments. This indicates that the environment is an important factor
influencing the visual impact of color.
To summarize the experimental procedure of this paper, on the one hand, the
combination of the two of four Chinese characters "You", "Shen", "Jia" and "Tian" is
difficult to identify and it is not an objective of this study to compare the results based on
the level of difficulty, but it has created a bottom line effect for the influence of color in the
visual search. So the color has little effect on the reaction time [29]. On the other hand, due
to the combined use of colors, the degree of discrimination between chunks is improved,
and the influence on the visual search process is more intense. When searching for a two-
color form, the subject may abandon the accuracy in order to ensure the reaction time, so
the significant effect of the combined color is reflected in the accuracy. In addition, the
color grouping, color combination, and orientation are not significant for the interaction of
the reaction time, so no further discussion is made.
6 Conclusion
Through the analysis above, the following conclusions can be drawn:
1) When designing the interfaces of different systems that have a lot of forms, such as
weapon command and control system, nuclear power plant monitoring system, you can use
the horizontal layout as much as possible, and you can color the forms with multiple colors.
The coloring should take into account of the short-term memory characteristics of humans.
A coloring block can contain 7±2 components, which can speed up the reaction while
ensuring a higher accuracy.
2) The design should be combined with the use of the environment to fully consider the
effects of color and color combination. It is known in the text that in the design of forms,
for the color combination, the green-blue combination is superior to the red-green
combination and the red-blue combination.
In this study we only use three colors of red, green and blue which are applied in the
display interface. Combining them in two, only three combinations of colors, the analysis
of the combined colors in the form is not enough, and the combination of colors is one of
the most important factors affecting visual search performance [30]. Furthermore, in the
display interface, various types of charts are displayed intricately, and the display of the
Table and other display elements should be considered to ensure the coordination of the
entire display interface. In addition, this study is mainly based on the analysis of behavioral
performance, and does not have subjective and objective evaluation of the form design. In
the later research, on the one hand, it is necessary to fully consider the influence of more
color combinations and display elements. On the other hand, it is necessary to combine the
subjective evaluation, eye movement measurement and other research methods to further
explore the design guidelines for visual search charts to accord with cognitive
characteristics, reduce cognitive load, and improve interaction efficiency. Furthermore, it
provides guidelines for the ergonomic design of the display interface of submarine, ship,
anti-aircraft missile and other types of display control systems.
Reference
1. L. Gutterman, “Next Generation Armament Test Solutions for the Flightline,” 2018
IEEE AUTOTESTCON, National Harbor, MD, 2018, pp. 1-4.
2. L. Leilei, W. Hongxin, X. Yubing, Y. Zhenshan, Y. Chenyi and Y. Fan, “Research and
development for landing gear test interface unit for one type aircraft,” CSAA/IET
International Conference on Aircraft Utility Systems (AUS 2018), Guiyang, 2018, pp.
216-219.
3. Q. Zeng, B. Jiang and Q. Duan, “Integrated evaluation of hardware and software
interfaces for automotive humanmachine interaction,” in IET Cyber-Physical Systems:
Theory & Applications, vol. 4, no. 3, pp. 214-220, Sep. 2019.
4. Y.X. Zhang, K. Z. Yang, M.C. Song, and M. Yang, Human error analysis of starting
CVCS in soft controls in nuclear power plants,” J. Harbin. Eng. Univ., vol. 37, no. 12,
pp. 1653-1657, Nov. 2016.
5. S.Y. Yan, Human factors in weapons and equipment. Harbin, China: Harbin
Inst.Techno Press, 2009, pp. 16-20.
6. K. L. Mosier, “Automation, task, and context features: Impacts on pilots' judgments of
human-automation interaction,” J. Cogn. Eng. Decis. Mak., vol. 7, no. 4, pp. 377-399,
2013.
7. K. B. Sulliven, “Using neural networks to assess flight deck human-automation
interaction,” Reliab. Eng. Syst. Safe, vol. 114, no. 1, pp. 26-35, Jun. 2013.
8. W. Y. Kang et al, “Optimization design of vision display interface in plane cockpit
based on mental workload,” J. B. Univ. Aeronaut. Astronaut., vol. 34, no. 7, pp.782-
785, Jul. 2008.
9. X. L. Fan, Q. X. Zhou, Z. Q. Liu, “Principle of plane display interface design based on
visual search,” J. B. Univ. Aeronaut. Astronaut., vol. 41, no. 2, pp. 216-221, Jul. 2014.
10. Z. M. Wei, X. R. Wanyan, D. M. Zhuang, “Measurement and evaluation of mental
workload for aircraft cockpit display interface,” J. B. Univ. Aeronaut. Astronaut., vol.
40, no. 1, pp. 86-91, May. 2015.
11. H. S. Zhang, D. M. Zhuang, “The Study on pleasure and ergonomics of cockpit
interface design,” in Proc. CAID&CD2009, Wenzhou, China, 2009, pp. 1400-1402.
12. A. Murata, N. Furukawa, “Relationships among display features, eye movement
characteristics, and reaction time in visual search,” Hum. Factors, vol. 47, no. 3, pp.
598-612, Sept. 2005.
13. T. Lindberg, R. Nasanen, “The effect of icon spacing and size on the speed of icon
processing in the human visual system,” Displays, vol. 24, no. 3, pp. 111-120, Oct.
2003.
14. P. V. Schaik, J. Ling, “Design parameters in web pages: frame location and differential
background contrast in visual search performance,” Int. J. Ind. Ergonom., vol. 5, no. 3,
pp. 459-471, 2001.
15. A. Chalbi et al., “Common Fate for Animated Transitions in Visualization,” in IEEE T.
VIS. COMPUT. GR., vol. 26, no. 1, pp. 386-396, Jan. 2020.
16. R. Nasanen, R. Ojanpaa, I. Kojo, “Effect of stimulus contrast on performance and eye
movements in visual search,” Vision Res., vol. 41, no. 14, pp. 1817-1824, Jun. 2001.
17. M. Niemela, J. Saarinen. “Visual search for grouped versus ungrouped icons in a
computer interface,” Hum. Factors, vol. 42, no. 4, pp. 630-635, Dec. 2000.
11
MATEC Web of Conferences 336, 05003 (2021) https://doi.org/10.1051/matecconf/202133605003
CSCNS2020
18. Y. Q. Liang, P. L. Li, W. Wang, “Design Method of Matching Icon Utilization and
Easy Search Rate in GUI,” J. Comput.-Aided Design & Comput. Graphics, vol. 30, no.
1, pp. 155-162, Feb. 2018.
19. J. M. Wolfe, “Forty years after feature integration theory: An introduction to the
special issue in honor of the contributions of Anne Treisman,” Attention. Percept.
Psycho., vol. 82, no. 1, pp. 1-6, 2020.
20. N. P. Bichot, S. C. Rao, J. D. Schall, “Continuous processing in macaque frontal cortex
during visual search,” Neuropsychologia, vol. 39, no. 9, 2001.
21. J. M. Wolfe, T. S. Horowitz, “What attributes guide the deployment of visual attention
and how do they do it? ,” Nat. Rev. Neurosci., vol. 5, no. 6, pp. 495-501, Jun. 2004.
22. H. Y. Wang et al, “Analysis of Cognitive Model in Icon Search Behavior Based on
ACT-R Model,” J. Comput.-Aided Design & Comput. Graphics, vol. 28, no. 10, pp.
1740-1749, Oct. 2016.
23. Y. Q. Liang, P. L. Li, W. Wang, “Design Method of Matching Icon Utilization and
Easy Search Rate in GUI,” J. Comput.-Aided Design & Comput. Graphics, vol. 30, no.
1, pp. 155-162, Feb. 2018.
24. Y. T. Jin, J Lv, W, J. Pan, “Layout optimization of virtual interactive interface based
on visual attention mechanism,” Comput. Eng. Desig., vol. 41, no. 03, pp. 763-769,
Mar. 2020.
25. M. H. Pillips, J. A. Edelman, “The dependence of visual scanning performance on
search direction and difficulty,” Vision Res., vol. 48, no. 21, pp. 2184-2192, Sep. 2008.
26. Y. Gong et al., “Effects of graphical panel layout characteristics on human-computer
interactive efficiency,” J. Comput.-Aided Design & Comput. Graphics, vol. 24, no. 9,
pp. 1145-1150, Sep. 2012.
27. Y. Zhang, N. J. Liang, “A study on the short-term memory of numerals in the different
background noise,” Psychol. Sci., no. 4, pp. 789-794, 2006.
28. R. E. Christ. “Review and analysis of color coding research for visual displays,” Hum.
Factors, vol. 17, no. 6, pp. 542-570, Dec. 1975.
29. D. Zheng, H. Wang, J. Wang, X. Zhang and W. Chen, “Toward Visibility Guaranteed
Visual Servoing Control of Quadrotor UAVs,” in IEEE/ASME Transactions on
Mechatronics, vol. 24, no. 3, pp. 1087-1095, June 2019.
30. Y. Gong et al. “Effect of Color Combination on Graphical Symbol Visual Search
Efficiency,” J. Comput.-Aided Design & Comput. Graphics, vol. 28, no. 7, pp. 1115-
1120, Jul. 2016.
12
MATEC Web of Conferences 336, 05003 (2021) https://doi.org/10.1051/matecconf/202133605003
CSCNS2020
... Na et al. took the visual design of the e-business website as the research object, analyzed the visual design elements of the e-business website, and explored the visual communication design strategy of the e-business web interface with the theme of visual information communication [17]. Wang et al. proposed a big data information processing and interface interaction design method based on semantic feature analysis, using cloud resource scheduling technology to develop and design the interface interactivity system to improve the comprehensive fusion ability of big data [18]. is method is prone to the problems of correlation offset and low fusion degree of information output in the management of interactive information. ...
... Iterative index e algorithm in literature [16] e algorithm in literature [18] Algorithm in this paper Accuracy rate ...
... The algorithm in literature [11] The algorithm in literature [16] The algorithm in literature [18] Algorithm in this paper Computational Intelligence and Neuroscience elements without affecting the function, so as to improve the signal-to-noise ratio. Image quality evaluation results are shown in Figure 7. e design strategy of this paper mainly analyses the visual elements such as color, text, and graphics of the web page from the perspective of visual information transmission, according to the theme of website design, and better applies these visual elements to the e-business web interface design, leaving a good first impression on users. ...
Article
Full-text available
The interface design of commercial websites is used in this paper to demonstrate the application of big data clustering and visual communication technologies. This paper presents the new requirements of user integration, emotion, and personalization by analyzing the broad influence of big data clustering technology and visual communication on the design concept and design method of commercial website interface design. Then, focusing on the information of visual graphic elements in web interface design and discussing how structures, images, words, emotions, and other elements can convey information more effectively through graphic means, the information in the web interface is creatively divided into two types: implicit and explicit. The database for the interface interaction system is built as part of this paper, which also uses fuzzy clustering to organize the data from the interface retrieval database and the hierarchical structure design method of process constraints to carry out interface information interaction and big data fusion processing. According to experiments, this algorithm’s accuracy can reach 95.75%, which is about 11% higher than that of other approaches. This study can offer a workable design strategy for a business website’s user interface.
Article
Full-text available
The Law of Common Fate from Gestalt psychology states that visual objects moving with the same velocity along parallel trajectories will be perceived by a human observer as grouped. However, the concept of common fate is much broader than mere velocity; in this paper we explore how common fate results from coordinated changes in luminance and size. We present results from a crowdsourced graphical perception study where we asked workers to make perceptual judgments on a series of trials involving four graphical objects under the influence of conflicting static and dynamic visual factors (position, size and luminance) used in conjunction. Our results yield the following rankings for visual grouping: motion > (dynamic luminance, size, luminance); dynamic size > (dynamic luminance, position); and dynamic luminance > size. We also conducted a follow-up experiment to evaluate the three dynamic visual factors in a more ecologically valid setting, using both a Gapminder-like animated scatterplot and a thematic map of election data. The results indicate that in practice the relative grouping strengths of these factors may depend on various parameters including the visualization characteristics and the underlying data. We discuss design implications for animated transitions in data visualization.
Article
Full-text available
In this work, the authors have developed an integrated evaluation hierarchy for automotive human–machine interaction (HMI) software/hardware interfaces and a corresponding set of integrated evaluation carriers and decision modes, to improve the interactive experience and usability of HMI interfaces, evaluation node management in R&D processes, and the integral quality of hardware and software components. In addition, a case study where the integrated evaluation was performed on rapidly prototyped electric automotive user interfaces was utilised to demonstrate the evaluation of integral conceptual themes and system frameworks based on rapid prototypes. It was shown that the evaluation of integrated software/hardware electric automotive interfaces via rapid prototyping aids the communication and organisation of design concepts, thus enhancing the design quality.
Article
In order to further improve the interaction efficiency between users and GUI, considering the difference of search rate in different positions of icon panel, a design method of matching icon utilization and easy search rate is proposed. By designing icon search and click experiments, the relationship between easy search rate of 8 common style panels and location of icons is investigated. Firstly, the variance analysis of experimental results shows a significant difference in the easy search rate between different positions of GUI icon panel and different style panels. Then the grey-scale map of easy search rate is drawn, indicating that panel layout for the horizontal from left to right and vertical from top to bottom the easy search rate shows a downward trend, easy search rate of the maximum position in the horizontal is almost in the left side of the panel and the vertical position at the top. However, when the panel style is horizontal above, the minimum position is in the middle of the right side, and for horizontal down, on the far right; when the panel style is vertical, the minimum position is near the bottom of the panel. Verification results show that the use of design method of matching utilization and easy search rate can significantly improve the efficiency of GUI interaction. © 2018, Beijing China Science Journal Publishing Co. Ltd. All right reserved.
Article
Computer-based soft control has been applied in advanced main control rooms (MCRs) for supervision and control of nuclear power plants. Compared with traditional MCRs based on analog technologies, man-machine interfaces and interactions in advanced MCRs have been significantly changed. In this study, taking the chemical and volume control system (CVCS) in a pressurized water reactor as an example, the tasks of operating procedures involving 19 subtasks and 70 steps for starting the CVCS under a normal shutdown operation condition are firstly analyzed. Furthermore, eight potential failure modes are identified when the operators executed each step of the operating procedures. The correlations between subtasks are also analyzed. Case studies are conducted for quantitatively estimating the human error probability of each subtask and the task as a whole. Finally, the effects of supervising soft control and improving man-machine interface on the reduction of human errors are discussed.The research results show that the human error probability could be reduced significantly by the means of improving the operator's skill, introducing the substitution operating procedures, conducting supervision on each complex task and continuously improving the human machine interface. © 2016, Editorial Department of Journal of HEU. All right reserved.
Article
This study aims to optimize the cognitive model in icon search behavior. The psychology behavioral experiment was carried out to investigate the relationship between search performance and visual elements. The response surface methodology was adopted to explore the correlation between icon arrays, line width and reaction time of search tasks. A linear fitting equation has proposed to depict the relationship between search time and icon arrays. The eye scan paths and heat maps uncover the color and shape effect on visual guiding. Therefore, it is inferred that the "Grouping Strategy" be employed in search tasks. And during the search process, the visual module of cognitive model includes two stages. One is pre-attentive stage driven by bottom-up processing, and the other is target orientation stage driven by top-down processing. The conclusion has been added to the Adaptive Control of Thought-Rational (ACT-R) model to describe the cognitive model in icon search behavior. © 2016, Beijing China Science Journal Publishing Co. Ltd. All right reserved.
Article
Color coding is a very efficient method for presenting information in the design of human-computer interaction interface. In order to further enhance the search efficiency of graphical symbols, a visual search experiment had been arranged to mainly investigate how the color quantity and the consistency of the distracters' colors will affect the reaction time. The results show that the increase of color quantity in graphical symbols will reduce the visual search efficiency on some level. However, use color to enlarge the difference between graphical symbols will increase the visual search efficiency to a greater extent. © 2016, Beijing China Science Journal Publishing Co. Ltd. All right reserved.