Research on EEG-based Graphic User Interface Kansei Design Evaluation

. Graphical user interface (GUI) is designed as the interaction medium between the user and the interface, and the perceptual experience of GUI design has been paid more and more attention by users. Based on the theory of perceptual engineering (KE), two groups of different visual style interfaces were taken as an example to record the EEG data when users watched two groups of visual interfaces, in order to explore the user's perceptual imagery and perceptual experience for the visual interface. It aims to meet the user's perceptual needs and provide an effective evaluation method and design basis for the graphical user interface design. Firstly, the EEG spectrogram and brain topographic maps were obtained by data analysis and processing. The results showed that the activity levels of the θ wave and α wave induced by the two groups of different visual style interfaces were significantly different. Secondly, this paper analyzed the user's perceptual imagery with GUI perceptual design elements, and concluded that the perceptual design elements of GUI would affect the user's cognitive interest and perceptual experience. GUI design should focus on the unity and coordination of perceptual design elements and perceptual imageries. Finally, it is concluded that the EEG-based perceptual design evaluation method can effectively evaluate the GUI visual interface.


Introduction
From the first application of GUI on a computer in 1973 to the era of digital image reading, users are paying more and more attention to the emotional experience brought by the GUI. The coincidence of GUI design and user's perceptual imagery preferences has become an important factor that attracts users and generates user stickiness [1]. As an interaction medium between the user and the product, the goal of the GUI design is to improve the user's cognitive efficiency of information and the user's perceptual experience of the interface. The cognitive efficiency and perceptual experience of reading information are often measured by users' subjective questionnaires and behavioral performance methods, while it has been less studied that the theory of KE and neurodesign methods are used to analyze the user's cognitive status and perceptual experience of interface information. Neurodesign studies the user's state by studying the user's brain activity, examining the effects of design features on user perception, memory, attention and other aspects, and it can reveal that different design features may trigger different cognitive and emotional experiences [2].

Theoretical background 2.1 Perceptual imagery and perceptual design
Perceptual imagery is a person's psychological expectation of things, and it is a kind of deep-seated emotional activity [3]. Most of its forms come from the user's inherent cognition of a certain form, which conveys the user's emotional needs. The GUI design stimulates the user's aesthetic imagery better through multi-sensory stimulation and awakens the user's emotions [4]. A visual interface that can inspire users to "unconsciously" also inevitably brings deep emotional experiences to users. Perceptual engineering is a technology that systematically mines people's sensibility for products and turns them into design elements [5]. Perceptual design uses materials, shapes, colors, textures and other design elements to guide users to inspire recognition and resonate in the process of knowing the product, so as to obtain pleasure of using product and emotional satisfaction [6]. Designers use design elements to stimulate the positive and correct emotions of users, so emotional design meets higher-level emotional consumption and gives users a good experience.
Perceptual design has been applied in the field of GUI design. The quantitative research on the perceptual imagery of GUI has become the focus of scholars. Yang Mingqing and others used the category hierarchy method and semantic difference method of perceptual engineering to construct the cognitive space of perceptual imagery, and further adopted the mathematical model equation method to construct a mapping model of interactive interface design variables and perceptual imagery (C-MKE), and based on this model designed the homepage interface of the Miao silver jewelry culture communication app [7]. Li Yongfeng and others used the rough set theory of perceptual engineering to construct a knowledge expression system, combined with the analysis of the perceptual design elements of the elderly webpage design, and provided a reference basis for the elderly webpage design [8]. By modeling and analyzing the user's perceptual imagery, the extraction and application of perceptual design elements are realized. The research on GUI perceptual design has theoretical significance and practical value to guide the visual design of digital interface.

Neurodesign
Neurodesign is a cutting-edge research area formed by the cross fusion of design, human factors and neuroscience. It reveals neurophysiological phenomena in the design field, and provides deep-level, multi-angle interpretation and guidance for design, and provides a neuroscience basis for design activities. Neurodesign applies neuroscience methods, focusing on the neural mechanisms of memory, feeling, perception, emotion, behavior, and consciousness [9]. Scholars have also carried out research on neurodesign and achieved some results. Ren Hong and others used ERP technology to study the impact of flat and quasi-physical icons on users' cognitive efficiency, and provided a scientific basis for icon design [10]. Cheng Siqi, Yu Guoming and others selected the "existing experience" among the factors affecting user experience as a research variable. Based on the EEG frequency domain analysis method in cognitive neuroscience, who proposed research protocol to measure the effect of "existing experience" on the functional experience of aggregate news apps [11].
Based on the theory of neurodesign, this study selected two sets of interfaces with different visual styles, and collected EEG data of subjects viewing two sets of interfaces with different visual styles. The EEG data was analyzed and processed, combined with the analysis of GUI sensibility design elements, the evaluation of GUI sensibility design in different visual styles, and the impact of sensibility design elements on the perceptual experience of GUI.

Perceptual Design Elements of GUI
According to the requirements of GUI perceptual design, combined with traditional perceptual engineering theory, the elements of perceptual design of GUI are divided into visual, tactile and auditory elements. The construction model is shown in Table 1. Among the visual elements that affect perceptual design of the GUI, color is the most direct perceptual design element, which is a more powerful way of expressing information and emotional arousal [12]. Due to social, cultural, environmental and other factors, users' perception of color is different. Colors are associative and symbolic. Using colors that matches the user's mental model, which can efficiently convey information and can improve user experience and satisfaction. Shapes are decorative and emotional symbolic elements that are abstractly expressed, and can reflect the attributes of the interface, enabling the emotional interaction between the user and the interface. In information processing, shape has a direct relationship with cognitive efficiency and user experience. In the icon design and evaluation of the cockpit display interface, the target icon of the enemy aircraft is preferably a triangle, while the icon of a friendly aircraft is a circle [13]. The triangular shape is a symbol of attack, which the round and soft shape gives the pilot a more intimate and emotional experience. In the design of industrial products, emphasis is placed on the feeling of the material texture to the users, and the GUI design also emphasizes that the texture (texture material) awakens and guides the user's emotions. Fonts and icons are the key to information expression in GUI design. The form and attributes of fonts and icons have a greater effect on user's perception interface than detail information content. The thickness of the font, the shape of the strokes, and the style of the icons all have different perceptual imageries. The layout in GUI design is the permutation and combination of the various visual elements, so that the interface has the aesthetic qualities of rhythm and rhythm, symmetry and balance, contrast and coordination, change and unity. Haptic elements are mainly reflected in the way of interaction in the GUI design, depending on the quality of the device. Good tactile feedback can give users a more realistic emotional experience. The auditory element is the influence of the emotional design of the GUI from another dimension. Voice interaction in the vehicle interface can effectively improve the peripheral interaction efficiency of driving tasks, reduce driving risks, and create a more natural emotional experience for the driver [14].

Experimental object
The subjects in this experiment were 13 college students selected who all passed driving tests with an average age of 22 years. Among them, 7 were boys and 6 were girls. 8 of whom had driving experience. Participants were right-handed, healthy, and had no history of mental illness or brain trauma. And eyesight or corrected vision is normal. All participants were willing to participate in the experiment and received corresponding compensation after experiment.

Experimental materials
Reading information on a dark background is more efficient. Flat information of design is transmitted faster, cognitive efficiency is higher, and information extraction is accurate [15]. Shape, color, texture and font are the most important design elements that affect visual judgment and the acquisition of perceptual imagery. Based on this, the experimental materials had been selected from the visual style interface of the two groups a and b, which are flat and have a large gap in shape, color, texture and font, as shown in Figure 1 and Figure 2. Both interface sizes are 1024 × 600 pixels and the viewing time is 80s. Participants watched group a visual style interface and group b visual style interface respectively, watched each interface once, and didn't repeat playback. In the experiment, the influence of the tactile and auditory elements of the two groups of interfaces on the user's perceptual cognition was excluded. Controlling the basic consistency of icons, layout, and effects on visual elements, the experiment mainly explored the effects of colors, shapes, textures, and fonts on visual design of GUI.

Experimental procedure
Let the participants be familiar with the experimental environment, understand the content of the experiment, with introducing the experimental equipment and explaining the experimental related processes. Let the subjects sit in a comfortable seat with their eyes about 80 cm away from the screen, and look at the screen to avoid limb movement. During the experiment, two groups of interfaces with different visual styles were watched separately, and participants were required to pay attention during watching. After the experiment was completed, subjects were tested with relevant questionnaires.

EEG recording and data processing
The experiment used a NeuroScan EEG acquisition and analysis system, and a 32-lead Nuamps amplifier and a 32-lead electrode cap are used to record the EEG data of the subjects. In the experiment, bilateral mastoids were used as reference electrodes, the central forehead was grounded, the electrode impedance was reduced to less than 5 kΩ, and the sampling frequency of the EEG recording was 1000 Hz. The experimental data was processed by Matlab software. After previewing the data, the generated waveform drift data was eliminated, and filtering and ophthalmology were removed, and then the data was analyzed in the frequency domain.

Brain Topographic Map
After pre-processing the EEG data generated by viewing the two sets of interfaces, frequency domain analysis was performed on the EEG data to obtain the brain topographic maps of θ wave, α wave, and β wave of the EEG data, as shown in Figure 3 and Figure 4. Comparing the brain topographic maps of the visual interfaces of the two groups, it can be seen that the interface of group a produces more obvious β waves in the forehead area, and the interface of group b produces more obvious θ waves.  Compared to the interface of group a, watching the interface of group b induces more θ waves. Performing paired sample T test on the data to obtain: in the right frontal, parietal, and occipital lobe (electrodes: Fc4, FT8, Cz, C4, T4, CP3, CPz, CP4, TP8, P3, Pz, P4, T6, O1 , Oz, O2) were significantly different (P<0.05). Compared with the interface of group a, the interface of group b induced more alpha waves. Paired sample T test was performed on the data, and it was found that there were significant differences in the left anterior temporal and right parietal lobe (electrodes: F7, FT7, CP4) (P<0.05). The overall average brain topographic map showed that the interface of group a induced more β waves in the forehead area than the interface of group b, and there was no significant difference.

Discussion and Analysis
Theta wave (4-7Hz) is a low frequency brain wave. When people are drowsy, load increases, or sit closed with their eyes closed, theta wave tends to increase. Alpha wave (8-13Hz) is an intermediate frequency brain wave, which mainly occurs when the person is in a state of quiet relaxation or closed eyes. Alpha waves disappear or are replaced by beta waves during eye opening, stimulation or mental activity [16]. Beta waves (14-30Hz) belong to high-frequency brain waves, which are the result of excitement of the cerebral cortex and are related to emotional instability. The frontal lobe is closely related to cognitive functions such as memory, calculation, and attention. The parietal lobe is the superior center of somatosensory, and the occipital lobe is the superior center of vision. The parietal occipital cortex is related to visual spatial perception and is a division of graphics and spatial processing functions in thinking and memory. The temporal lobe is related to hearing, but also to reading and memory. The temporal occipital lobe has important functions for object identification [17].
The interface of group b induced more active θ and α waves in the right frontal lobe, parietal lobe, occipital lobe, and left anterior temporal region. It is speculated that the interface of group b inhibited brain nerve activity, and arousal and emotional arousal were low. Compared with the group b interface, the group a interface made the subjects' brains more excited. The interface of group a attracted the attention of the participants. It can be inferred that the interface of group a has a higher degree of arousal and emotional experience than the interface of group b.
Analyze the impact of emotional elements on emotional imagery. The two groups of interfaces differ in visual elements such as color, shape, texture, and font. The specific differences are shown in Table 2. In color, the interface of group a is mainly blue, and the interface of group b is mainly dark gray. Blue belongs to cold colors, and the blue interface presents a steady and rational emotional image, conveying a sense of trust and tranquility. Gray has no hue, and the gray interface has a low degree of arousal, which conveys the feeling of seriousness and quietness. The large area of gray makes the interface emotionally weak. In the shape, the visual elements of group a interface use irregular right angles to represent vividness and movement, and the visual elements of group b interface use regular rounded rectangles to convey order and stability. The irregular shape with a sense of movement can highlight the style characteristics of the interface and has a good degree of arousal. The fonts of the group a interface are unified and create a comfortable texture, which achieves good coordination and unification with the emotional theme, so that the interface presents a deeper texture. Group b interface fonts are not uniform, the interface texture is weak, and the elements are inadequate.

Conclusion
Analyzing the user's perceptual imagery is of great significance to the perceptual design of the GUI, and can provide a reference for designers when selecting design elements, which will contribute to improving the user experience of the GUI. In this paper, by studying the neural mechanism of the user when using the interface, analyzing the frequency domain of the EEG data, and combining the analysis of the perceptual imagery of the interface and the perceptual design elements of the interface, it can be obtained that the use of high saturation color value, the shape that conforms to the image, the texture with a deep layer of space and the unified font that is easy to recognize can better improve the emotional arousal of the user in the vehicle central control GUI design. Therefore, the coordinated and rational use of various perceptual elements and the selection of design elements that are consistent with the user's mental model can make the interface flexible and continual, thereby improving the visual friendliness of the GUI. The research method of EEG-based GUI perceptual design can effectively transform the user's perception and imagery of the product into the design elements, and provide a scientific design basis for the user's graphical interface design.