Keywords

1 Introduction

As one of the important part of interactive digital interface, navigation bar takes on the roles of orientation, linking, transition and searching, helping users find their target area more accurately. In general, rationality of the navigation bar design is one significant index for measuring the usability of digital interface and the satisfaction of user experience. Navigation bar is the most popular interface navigation method, which makes the interface more recognizable for users, eliminating the communication gap and realizing natural, friendly and convenient communication between users and computers. In this paper, by investigating the user cognitive processing of visual selective attention to icon navigation bar, some general navigation bar design methods are proposed, which provide guidance for design of navigation bar and interface information architecture, enhancing the ability to convey information, reducing cognitive load of users, furthering improving the design quality of digital interface.

Since Sutton created event-related potential (ERP) technique in 1965, ERP has been widely used in many fields, such as psychology, physiology and cognitive neuroscience. Simply, ERP refers to potential differences of brains when granting or revoking a particular stimulus applied on the sensing system or brain regions [1]. With the characteristics of high time resolution, ERP can realize synchronization lock of brain signals and experimental operations, and its amplitude, latency and spatial frequency of potential and current can provide detailed response information of brains, which directly reflect nerve electric activity and establishing the corresponding relations between operations and brain areas or brain signals [2].

P200, one early component of ERP, is associated with the early recognition of visual information, which has been widely used in the cognitive process of visual search experiment [3], task related processing [4] and early stage semantic processing of visual information [5]. N200, one early component of attention, has different manifestation and significance in different tasks and channels [6], especially in experimental tasks, such as visual searching [7], facial memory [8], feature matching [9] and Stemberg working memory. N400 is proposed by Kutas [10] through studying end ambiguity words, mainly reflecting semantic cognitive process, which is induced by stimuli, such as syntax [11], picture [12] and voice [13].

At present, researchers at home and abroad have studied icon understanding [14] and icon memory [15], however ERP research for visual selective attention to icon navigation bar has not been barely studied. Selective attention refers to only noticing some stimuli or certain aspects of stimulus among outside stimuli. For the icon navigation bar of digital interface, icons are divided into activated and inactivated states, and only activated icons are available. Therefore, inactivated icons are all distractions when users want to realize corresponding functions or commands by clicking on activated icons. Visual selective attention to icon navigation bar is extremely important in practical applications. For instance, Fig. 1 displays a real time status of Word for Mac, and only “cut”, “copy” and “undo” typing are inactivated, hence users can only select and click the rest activated icons. In this paper, by adopting ERP technique and serial mismatch experimental paradigm, user cognitive processing of visual selective attention to icon navigation bar is investigated.

Fig. 1.
figure 1

Real-time status of Word for Mac icon navigation bar

Full size image

2 Experimental Method

2.1 Subjects

Twenty undergraduates, with ten males and ten females, whose ages are all between 20 ~ 30 years old, are chosen as subjects. They all satisfy the following conditions: physical and mental health, no mental illness history, right-handed, normal or rectified vision, and with many years’ experience in using graphics device. Subjects are trained to be familiar with task flow and operation requirements before the formal experiment. During the experiment, subject with electrode cap sits comfortably in front of the screen in ERP laboratory, with their eyes 550 ~ 600 mm away from the screen and both horizontal and vertical perspective controlled in 2.3 degrees.

2.2 Tasks and Procedures

To avoid the influence of personal preference and industry familiarity, military, communication and information related icons which subjects are all not familiar are chosen as stimulus materials, and all icons have been desaturated and undertaken the visual effect unified image processing. In addition, to avoid the influence of icon peripheral contour, rounded borders are added to icons and icon sizes are in 48 × 48 pixels. Navigation bar totally contains 5 icons, and these icons are divided into activated ones and inactivated ones, among which icons in high brightness are activated and darker icons are inactivated.

Firstly, a white cross appeared in the center of the screen with the background to be black, and continuously lasted for 500 ms then disappeared. Next, icon navigation bar appeared and presented for 2000 ms then disappeared. At this stage, subjects were required to remember the activated icons in the navigation bar. Afterwards, the screen turned to be black and continuously lasted for 500 ms. Subjects could relax and blink eyes to eliminate visual persistence. At last, target stimulus icon appeared and lasted indefinitely until subjects had identified weather this icon had appeared in the second stage. What they should do was to press key A if the target stimulus icon repeatedly appeared, otherwise press key L. In this experiment, activated icons in the navigation bar were set in random and time interval was 500 ms every two trials. Total experiment was divided into 4 blocks according to the quantity of activated icon in the navigation bar (1, 2, 3, 4). Each block consists of 60 trails and there was a short break between each block. The experimental process was demonstrated in Fig. 2.

Fig. 2.
figure 2

Flow diagram of experiment

Full size image

2.3 EEG Recording

ERP experimental equipment is placed in a closed ERP/behavior laboratory which is soundproof, with magnetic insulation and brightness adjustable. 19 inches CRT monitor works in visual presentation and the keyboard is used for reaction. Synamp2−64 channel signal amplifier, Scan 4.3.1 EEG recorder analysis system and Ag/AgCl electrode cap provided by American Neuroscan Company are used. Especially, electrode caps are placed according to the international 10−20 system. Reference electrode is placed in the bilateral mastoid connection. Grounding electrode is placed in the center point connection of FPZ and FZ, which records the horizontal and vertical EOG synchronously. Filter pass-band is 0.05−100 Hz, and sample frequency is 500 Hz/channel. Contact resistance between electrode and scalp is required to be less than 5 kΩ.

3 Data Analysis

3.1 Behavioral Data Analysis

Behavioral data includes the accuracy rate and reaction time of target stimulus icon recognition. As shown in Fig. 3, with the quantity of activated icon varying from one to four, average accuracy rate of target stimulus icon recognition is as follows: 2 (0.976) > 1 (0.968) > 3 (0.928) > 4 (0.856). This illustrates that accuracy rate generally shows a trend of decline with the increase of target stimulus icon number. The difference of accuracy rate between one or two icon number is not significant. As shown in Fig. 4, with the quantity of activated icon varying from one to four, average reaction time of target stimulus icon recognition is as follows: 4 (1174.233 ms) > 3 (1112.774 ms) > 2 (919.758 ms) > 1 (856.304 ms). This illustrates that reaction time presents increasing trend with the increase of target stimulus icon number.

Fig. 3.
figure 3

Line chart of target stimulus icon recognition accuracy rate

Full size image
Fig. 4.
figure 4

Line chart of target stimulus icon recognition reaction time

Full size image

3.2 EEG Data Analysis

3.2.1 ERP Analysis of Icon Navigation Bar

EEG epoch time is from icon navigation bar appearance to 700 ms. Eight electrodes including (P1,P3,PO3) on the left side, (PZ, POZ) in the middle and (P2, P4, PO4) on the right side are selected as the analysis electrodes for P200, and seven electrodes including (C6, CP6) on the right central region, (FC4, FC6) on the right frontal lobe and (FT8, TP8, T8) on the temporal lobe are set as the N400 analysis electrodes.

  1. (1)

    P200

For P200 component analysis, EEG average amplitude during 100 ms ~ 200 ms period after the appearance of icon navigation bar is selected for statistical analysis. 4 (quantity of stimulus icon variation: 1, 2, 3 and 4) × 3 (different region: left, middle and right) repetitive measure analysis of variance (ANOVA) is performed. The results show that, regions have a significant main effect (F = 23.298, p = 0<0.05), while there is no significant interaction effect between regions and icon quantities (F = 1.929, p = 0.079 > 0.05), and no significant difference exists between different icon quantities (F = 0.603, p = 0.615 > 0.05).

Paired-sample T tests of different icon number (1, 2, 3 and 4) respectively on the left, right and in the middle are performed. Result displays that absolute value of the average on the left side is larger than that on the right side and in the middle when icon number changes (one icon: 1.57uv > 1.01uv > 0.94uv, p < 0.05; two icons: 1.82uv > 1.30uv > 0.57uv, p < 0.05; three icons: 2.25uv > 1.69uv > 1.38uv, p < 0.05; four icons: 2.26uv > 1.50uv > 1.40uv, p < 0.05).

Paired-sample T tests of P1, P3 and PO3 electrodes on the left are performed under different icon numbers (1, 2, 3 and 4). When the icon number is one or two, there is no significant difference of these three electrodes (p > 0.05), while the icon number is three or four, absolute value of the average for PO3 is significantly larger that of P1 and P3 (three icons: 2.92uv > 1.95uv > 1.87uv, p < 0.05; four icons: 2.83uv > 1.98uv > 1.96uv, p < 0.05). As shown in Figs. 5 and 6, when the icon number is three or four, P200 has a significant effect on the left region and the maximal amplitude is around PO3.

Fig. 5.
figure 5

All EEG components oscillogram of navigation bar and target stimulus icon under different conditions (a) navigation bar PO3 electrode P200 component; (b) navigation bar FT8 electrode N400 component; (c) target stimulus icon P4 electrode N200 component; (d) unit of measure

Full size image
Fig. 6.
figure 6

All EEG components oscillogram brain topographic mapping in maximal potential period under different conditions (a1) P200: 3 icons (165 ms, 5.719uv); (a2) P200: 4 icons (165 ms, 5.180uv); (b1) N400: 1 icon (368 ms, -3.287uV); (b2) N400: 2 icons (361 ms, -3.964uv); (b3) N400: 3 icons (342 ms, -3.927uv); (b4) N400: 4 icons (330 ms, -3.000uv); (c1) N200: 3 icons (161 ms, -2.809uv); (c2) N200: 4 icons (177 ms, -3.462uv)

Full size image
  1. (2)

    N400

For N400 component analysis, EEG average amplitude during 300 ms ~ 500 ms period after the appearance of icon navigation bar is selected for statistical analysis. 4 (number of stimulus icon variation: 1, 2, 3 and 4) × 3 (different region: left, middle and right) ANOVA is performed. The results show that, regions have a significant main effect (F = 104.332, p = 0<0.05), while there is no significant interaction effect between regions and icon quantities (F = 0.997, p = 0.429 > 0.05), and significant difference exists between different icon quantities (F = 2.855, p = 0.042 < 0.05).

Paired-sample T tests of different icon number (1, 2, 3, and 4) respectively on the right central region, right frontal lobe and temporal lobe are performed. Results displayed that absolute value of the average on the temporal lobe is larger than that on the right central region and right frontal lobe when icon number changes (one icon: 1.75uv > 1.45uv > 1.02uv, p < 0.05; two icons: 2.83uv > 2.19uv > 1.87uv, p < 0.05; three icons: 2.56uv > 2.04uv > 1.74uv, p < 0.05; four icons: 1.96uv > 1.44uv > 1.22uv, p < 0.05).

Paired-sample T tests of FT8, TP8 and T8 electrodes on the temporal lobe are performed under different icon numbers (1, 2, 3, and 4). Result shows that, absolute value of the average for FT8 is larger than that of TP8 and T8 (one icon: 2.02uv > 1.83uv > 1.40uv, p < 0.05; two icons: 3.51uv > 2.86uv > 2.12uv, p < 0.05; three icons: 3.12uv > 2.54uv > 2.03uv, p < 0.05; four icons: 2.39uv > 2.01uv > 1.49uv, p < 0.05). As shown in Figs. 5 and 6, when the icon number changes, N400 has a significant effect on the temporal lobe and the maximal amplitude is around FT8.

3.2.2 ERP Analysis of Target Stimulus Icon

EEG epoch time is −100 ms before target stimulus icon appearance to 700 ms. Eight electrodes including (P1, P3, PO3) on the left side, (PZ, POZ) in the middle and (P2, P4, PO4) on the right side are selected as the analysis electrodes for N200, and seven electrodes including (C6, CP6) on the right central region, (FC4, FC6) on the right frontal lobe and (FT8, TP8, T8) on the temporal lobe are set as the N400 analysis electrodes.

(1) When target stimulus icon exists in the activated icons of navigation bar.

For N200 component analysis, EEG average amplitude during 100 ms ~ 200 ms period after the appearance of target stimulus icon is selected for statistical analysis. 4 (icon number variation: 1, 2, 3 and 4) × 3 (different region: left, middle and right) ANOVA is performed. The results show that, regions have a significant main effect (F = 11.065, p = 0<0.05), while there is no significant interaction effect between regions and icon quantities (F = 0.333, p = 0.919 > 0.05), and no significant difference exists between different icon quantities (F = 0.843, p = 0.474 > 0.05). Paired-sample T tests of different icon number (1, 2, 3 and 4) respectively on the left, right and in the middle are performed. When the icon number is one or two, there is no significant difference of these three positions (p > 0.05), while the icon number is three or four, absolute value of the average on the right side is significantly larger than that in the middle (three icons: 1.33uv > 0.67uv, p = 0.023 < 0.05; four icons: 2.07uv > 1.43uv, p = 0.023 < 0.05). Paired-sample T tests of P2, P4 and PO4 electrodes on the right side are performed. When the icon number is three or four, absolute value of the average for P4 is significantly larger than that for P2 (three icons: 1.81uv > 0.96uv, p = 0.002 < 0.05; four icons: 2.49uv > 1.74uv, p = 0.029 < 0.05). As shown in Figs. 5 and 6, electrodes on the right side have a significant effect and the maximal amplitude is around P4.

For N400 component analysis, EEG average amplitude during 300 ms ~ 500 ms period after the appearance of target stimulus bar is selected for statistical analysis. 4 (icon number variation: 1, 2, 3 and 4) × 3 (different region: right central region, right frontal lobe and temporal lobe) ANOVA is performed. The results show that, regions have a significant main effect (F = 50.103, p = 0<0.05), while there is no significant interaction effect between regions and icon quantities (F = 1.766, p = 0.109 > 0.05), and no significant difference exists between different icon quantities (F = 1.799, p = 0.154 > 0.05). Paired-sample T tests of regions and electrodes for these three positions under different icon quantities are performed. The results show that there are no significant difference between different regions and electrodes under different icon quantities (p > 0.05).

(2) When target stimulus icon do not appear in the activated icons of navigation bar.

Both analysis method of N200 and N400 are the same as above. The results demonstrate that, both N200 and N400 show no significant difference between different regions and electrodes under different icon quantities (p > 0.05).

4 Discussions

4.1 Behavioral Data Discussion

The research results indicated that target stimulus icon recognition accuracy rate displayed a trend of decline with the increase of activated icon number, which was as the following rule, 2 > 1>3 > 4. When there was only one stimulus icon appears in the navigation bar, recognition accuracy was not in the first place, which could be explained according to the vulnerability of short-term memory storage. That was to say, any outside distraction could lead to oblivion. The quantity of distractors reached four when one stimulus icon turned up, therefore subjects were more easily distracted and to forget. Reaction time increased as the stimulus icon number varying from one to four, which was as follows, 4 > 3>2 > 1. Resource limited theory proposes that cognitive resources of people were limited, mainly manifested in the limited capacity of working memory [16]. Task difficulty increase would lead to attention resources shortage, resulting in a higher cognitive load, which reflected in this experiment was the prolonged reaction time. Miller [17] found that for numbers, letters or words, short-memory span of subjects are all 7 ± 2. In this study, graphic symbols with more information were adopted, leading to narrowed memory span. Meanwhile, combining with the specifications and standards of interface design, five navigation icons were set for study, with activated icon number varying from one to four. Murch [18] proposed that choosing six distinguishable icon colors was scientific and rational. Black, white, and gray were used in the navigation bar, which met the standard for color selection, while it was more complicated in practical applications, which needed to be further studied.

4.2 P200 Data Analysis

The maximal wave peak for selective attention component P200 of icon navigation bar located on the left side of parietal-occipital lobe and the maximal amplitude was around PO3 electrode. Driver’s study [19] on visual attention indicated that attention disorders would present when there was damage on the rear end of left and right parietal lobe or the connection point of left and right parietal-occipital lobe. In this paper, nerve function area of navigation bar selected attention was around PO3, which was consistent with Drive’s study. Selective attention of activated icons in the navigation bar was the process of activated icons selection and short-time storage. Yiwen Wang’s study [20] demonstrated that parietal-occipital lobe had distinct effect for short-time storage and P230 had the maximal amplitude, which provided strong evidence for the appearance and distribution of P200 component. Working memory brain model showed that semantic storage could activate the rear of left-parietal lobe, which verified the brain region distribution of P200 component. Moreover, it could be speculated that memory of the activated icon might be a series of process through the semantic element translation, management and storage.

4.3 N400 Data Analysis

The results indicated that the maximal wave peak for selective attention component N400 of icon navigation bar located on the right frontal-temporal lobe and the maximal amplitude was around FT8 electrode. Sakai’s research on fMRI [21] showed activation of prefrontal lobe was attributed to selecting task related information would not be distracted by irrelevant distractors, while activation of temporal lobe inboard was because the repeated response to information which had been stored but already offline. Activation of frontal-temporal lobe in this paper was consistent with Sakai’s study. N400 component was the semantic ambiguity wave, while there was no direct relationship between N400 and semantic ambiguity wave in this study, which indicated that emergency of N400 was due to the semantic association or interference of inactivated icons to activated icons during navigation bar selected attention and memory process. As displayed in Figs. 5 and 6, N400 existed with no relation to activated icon quantities, which further verified that N400 would be evoked if distraction existed in visual stimulation. Latency of N400 under different activated icon number was as follows, 4 (330 ms), 3 (342 ms), 2 (361 ms) and 1 (368 ms), which indicated that N400 appeared later with fewer activated icon quantity, and N400 was evoked later when more semantic distractors generated by inactivated icons existed. This study was consistent with Nobre’s research on the latency timing and semantic difference [22].

4.4 N200 Data Analysis

The results indicated that the maximal wave peak for target stimulus icon recognition component N200 located on the right parietal region and the maximal amplitude was around P4 electrode. N200 appeared in the visual working memory task conducted by Vogel [23], and the distraction was more concentrated on the right parietal region, which reflected that the information maintenance of working memory, in accordance with the result reached in this paper that concentrated distribution located on the right parietal region when target stimulation appeared. N200 component included N2a and N2b, and N2a referred to visual mismatch negative wave, while N2b was relative to target stimulation recognition [1]. In this study, N200 mainly referred to N2b component. When target stimulus icons had appeared in the activated icons of navigation bar, N200 (N2b) had a significant difference on the parietal region, whereas there was no significant difference. Simson proposed that task related visual stimulation would evoke N2b component and the most obvious response located on the back of brains [24], which was consistent with the appearance and distribution of N200 studied in this paper. The average amplitude of N200 for right hemisphere was significantly larger than that of the left hemisphere, reflecting the asymmetry of visual information processing and hemisphere functional difference on the right and left hemisphere.

5 Conclusions

ERP technique was adopted in this paper, and cognitive process of icon navigation bar was investigated from the perspective of visual selective attention. The results showed that that P200 and N400 components of navigation bar selective attention existed obvious differences in amplitude and latency under different activated icon quantities. In the recognition process of target stimulus icon, accuracy rate and reaction time both existed regular changes with the activated icon quantities, and target stimulus recognition N200 component distributing in different brain areas exists significant differences. This study exhibited important reference and application value in revealing cognitive rules for icon navigation bar, enhancing the ability to convey information for navigation bar and exploring more effective navigation bar and digital interface design method. In the next work, novel EEG techniques and experimental paradigms will be explored, further focusing on the user cognitive research about properties of navigation bar, such as icon distribution, visual effect, color, contrast ratio and border.