Keywords

1 Introduction

Culture affects online users’ perception and experience towards websites and contents [3, 11, 13]. Previous studies showed that Easterners and Westerners may differ in their approaches to information representation [12, 14]. It was demonstrated recently that such cultural differences are actually related to the division of geographic regions and the associated life styles [17]. As thinking style is critically underlying one’s representation of the visual environments, its effects on website information layout design are expected. Research efforts directed to the study of thinking style on information layout design in specific, user interface and webpage/website design in general are relatively limited, nevertheless.

This study examines whether the Zhong-Yong or Median thinking style – a prevalent Chinese Confucian rooted world view or life philosophy - contributes to the aesthetic preferences for web page information layout. Specifically, we created web store pages of woman’s clothing in either the waterfall flow or the fixed grid layout. Participants browsed through these pages to engage in either a leisure viewing or target search task and rated the classic and expressive aesthetic experiences for these web pages as well as webpage attractiveness and product likings. We found the Zhong-Yong thinking style affected viewers’ aesthetic experiences and preferences as the function of page layout the mode of use. These findings had various implications for webpage information design.

1.1 Zhong-Yong (Median) Thinking Style

Zhong-Yong or the Median thinking style is a historically rooted behavioral code in the Chinese culture [9, 25]. It dictates against impulsive or extreme reactions and encouraged individuals to actively maintain an emotional neutral point for emotional equilibrium. Individuals are prompted to take an encompassing view of the ongoing situations before taking actions in a situationally appropriate and optimal manner. Previous studies demonstrated that high Zhong-Yong thinking individuals exhibited higher processing capacity and controlled their attentional processing efficiently so that they were not easily affected by the emotionality of attentional cues in a cueing paradigm [2, 22].

High Zhong-Yong individuals also adopted a global processing scheme. [7] demonstrated that the Navon-type global precedence effect was exhibited for high than low Zhong-Yong individuals. [23] examined and compared the viewing behaviors of high vs. low Zhong-Yong individuals. High Zhong-Yong individuals were able to more efficiently shift from the global to the local mode of processing. They also exhibited larger scan paths as the information complexity was low. These findings suggested that the high Zhong-Yong thinker is characterized by an active visual attentional control tendency including actively integrating information across spatial extent when necessary. These visual strategies support high Zhong-Yong individuals to be able to observe/think before they take the appropriate actions.

Taking a global scheme in visual processing has implications for webpage design. [4] found visual patterns during webpage viewing depended on whether the participant was Chinese, Korean, or American. When the participant came from the culture that encourages holistic thinking (e.g., Chinese and Korean), [4] found that he was likely to view webpages using circular scan patterns (as recorded by an eye tracker), i.e., scan across the whole page. Analytically-minded participants (e.g., Americans) more readily read from the center to the periphery. [4] suggested design guidelines devised to cater the browsing behaviors of holistic thinkers. For example, as the holistic thinkers tend to scan the whole page to obtain the big picture, contents could be placed more freely on the page.

1.2 Web Store Design and Aesthetics

Web store design affected shoppers’ attitudes through emotion and tasks [16, 24]. Visual aesthetics constitutes an important emotional aspect that may impact subjective usability as evidenced by the over-cited quote “Attractive things work better” [15, 20]. Although aesthetics has always been an influential dimension of product design, we know very little on how beauty and use are associated. For example, will usable things also look pretty?

[10] distinguished between “classical aesthetics’’ and ‘‘expressive aesthetics’’. The classical aesthetics emphasizes orderly and clear design while the expressive aesthetics dimension pertains to the creativity and originality dimension of design. [10] evaluated classical aesthetics by measuring aesthetic, pleasant, clear, clean and symmetric features in design while the measures were creative, fascinating, special effect, original, sophisticated for the expressive aesthetics. While both aesthetic dimensions exhibited reasonable correlations with perceived usability, pleasure of interaction and service quality, classical aesthetics correlated with perceived usability and pleasure higher than the expressive aesthetics.

Findings by [10] suggested that the experience of classical aesthetics may be intrinsically related to the process of use while expressive aesthetics pertains to independent evaluation of visual and other properties. However, [17] created website designs that followed the principles of classical and expressive aesthetics respectively but found little difference in their respective usability. It is not clear which design element(s) and the associated usability of a website is affected by the classical and expressive aesthetics. As classical aesthetics may draw on information related to the processes of using or interacting, the nature of such process is also revealed by users’ viewing behavior recorded by eye trackers.

1.3 Hypothesis

High Zhong-Yong thinkers exhibit controls over their visual processing and adopt global processing schemes. The overall information layout on a webpage is either ignored or adopted when needed by them. Low Zhong-Yong thinking individuals, in contrast, are less actively controlling their browsing of webpages. Their visual attention is guided in a bottom up manner by the specific information layout on the webpage they are viewing. This subtle difference between the active ignore and/or use vs. passive guidance by the webpage layout could be exhibited by comparing viewers’ behavior for the fixed grid vs. waterfall flow webpage layout.

The waterfall flow layout, popularized by Pinterest.com and other websites, is characterized by flows of grids of uneven sizes across the page. The fixed grid layout, in contrast, is comprised by grids that are orderly aligned and of similar sizes (see Fig. 1 for examples). The neighboring contents on a webpage compete for visual attention with the currently processed information. In the fixed grid layout, neighboring grids are similarly sized and located with the currently attended grid and create stronger competition than the waterfall flow layout as the neighboring grids in the latter tend to differ in sizes and locations with the current grid. As such, the waterfall flow layout supports a leisure viewing mode of processing [6] in which the viewer may dwell on specific grids of contents with little competition from neighboring grids. In the fixed grid layout design, the competition for attentional processing from the neighboring grid, nevertheless, enhances the sequential and orderly search behavior that serves the attainment of the target search goal [6].

Fig. 1.
figure 1

Examples of waterfall layout (left) and grid layout (right) webpages used in this study

Full size image

High Zhong-Yong thinking individuals actively control their visual processing of the webpage and are less easily affected by either the layout or the mode of use. The visual attention of low Zhong-Yong individuals, on the other hand, is captured in a bottom up manner by information layout if the task goal is leisure viewing. Low Zhong-Yong individuals exert stronger control over their visual processing when the task is target search and, as such, the effect of webpage layout may diminish. The classical aesthetic rating and webpage attractiveness rating are related to the process of viewing and is affected by Zhong-Yong. In contrast, the expressive aesthetic rating is expected to be higher for the waterfall flow than the grid layout because the irregularity spaced and located grids in the former result in novelty. Expressive aesthetics is not affected by Zhong-Yong as it is associated with the visual properties and contents of the webpage, not viewing process.

H1.

The classical aesthetic rating and webpage attractiveness rating for the waterfall flow layout are higher than those for the fixed grid layout during leisure viewing. The reverse is true during target search. This pattern is expected for low but not high Zhong-Yong individuals.

H2.

The expressive aesthetic rating for the waterfall flow layout is higher than the fixed grid layout regardless of the tendency in Zhong-Yong thinking.

The fixed grid layout may prompt non-deliberate shifts of fixations due to competition from neighboring grids. Regressive viewing (i.e., regress towards earlier locations of fixation) is deployed by the user in order to gather more information from the previous grid. More regressive views are thus expected for the fixed grid than the waterfall flow layout. This difference occurs only for low Zhong-Yong thinking individuals as their visual processing is guided by the information layout in a bottom-up manner.

H3.

Recursive viewing is more prevalent in the fixed grid than the waterfall flow layout, for low but not high Zhong-Yong individuals.

2 Method

2.1 Participants

Fifty-five participants took part in the experiment. They were undergraduate students of various majors. All participants were females to ensure they would be engaged by the online store clothing merchandise used in the study. The background questionnaires they completed showed all had online shopping experiences and 86% had recent (within three months) online shopping experience for clothing. Half was randomly assigned to the leisure view and half to the target search condition.

2.2 Design and Materials

The experiment is a layout (2) x mode of use (2) x Zhong-Yong (2) mixed design, with layout (grid vs. waterfall layout) as a within-subject factor and the mode of use (viewing leisurely vs. looking for a product that one likes) and Zhong-Yong as a between subject factor. Four different types of women’s clothing (shirts, blouses, jackets, and sweaters) were used to formulate the webpages with each webpage constituting 48 clothing of the similar type (e.g., shirts). These 48 clothing were placed in 4 × 12 webpages with four clothing in each row and 12 clothing in each column in the grid layout and approximately so in the waterfall layout condition (see Fig. 1). All webpages were of similar sizes, i.e., 1024 × 5000 pixels. There are four different webpages for each layout. Cares were taken to counterbalance the clothing so that the set of clothing used were similar for the grid and waterfall layout across participants. Each participant viewed eight webpages (4 in waterfall layout and 4 in grid layout) presented in random orders.

Seven rating questions measured the classical aesthetic (clean, pleasant and aesthetic) and expressive aesthetic (sophisticated, creative and fascinating) responses as well as webpage attractiveness [19] using seven-point scales. Participants of the target search condition answered two additional questions for the clothes they picked – “This clothing is nice” and “I like this clothing”. The Zhong-Yong Belief Value Scale [8] was used to measure the propensity towards Zhong-Yong thinking.

2.3 Procedure

The stimuli were presented on a 23 inch color monitor at the resolution of 1024 × 768 in a quiet room. Participants viewed the webpage by scrolling up and down using the arrow keys and they pressed the “esc” key to end the viewing of the current webpage. They were allowed to view as long as they like but no longer than one minute for each webpage. The rating questions appeared on the center of the screen to replace the webpage and the participants responded to the rating questions using mouse. Eye movements were also recorded using the remote mode of Eyelink 1000 system, sampling pupil locations at 500 Hz.

Participants were asked to imagine they browsed the web store for new looks and styles as a pastime (leisure viewing). They simply viewed the webpages and signal when they were done viewing. Others were asked to imagine they were taking the time to search for good winter clothing (target search) and were asked to pick one clothes in the current webpage that they liked the most.

3 Results

A median split at 40 on the Zhong-Yong Questionnaire score was used to divide participants into high and low Zhong-Yong groups. ANOVAs were performed on dependent measures.

3.1 Classical and Expressive Aesthetic Ratings

The first analysis treat the classical vs. expressive aesthetics as a variable and performed the layout (2) x mode of use (2) x aesthetic dimension (2) ANOVA separately for high and low Zhong-Yong individuals. For high Zhong-Yong individuals, layout interacted with the aesthetic dimension (F(1,30) = 23.78, p < .0001). The fixed grid layout was rated higher on the classical aesthetic dimension than the waterfall flow layout while the reverse was true when rating on the expressive aesthetic dimension. These effects interacted with the mode of use only marginally (F(1,30) = 3.01, p = .09). During leisure viewing, the fixed grid layout was rated higher than the waterfall flow layout on the classical aesthetic dimension. Differences between these two types of layouts were not significant in the rest of the conditions (see Fig. 2).

Fig. 2.
figure 2

The effect of layout and mode of use on classical and expressive aesthetics ratings for high (top) and low (bottom) Zhong-Yong individuals

Full size image

For low Zhong-Yong thinking individuals, layout interacted with the mode of use (F(1,24) = 5.24, p < .05). The waterfall flow layout was rated prettier than the grid layout when the mode of use was leisure view but the two layouts did not differ when the mode of use was target search. Layout also interacted with the aesthetic dimension (F(1,31) = 9.8, p < .005). Similar to the responses of high Zhong-Yong individuals, the waterfall flow layout was rated higher on the expressive aesthetic dimension than the fixed grid layout. Different from high Zhong-Yong individuals, the two types of layouts did not differ on the classical aesthetic dimension (see Fig. 2). The mode of use interacted with the aesthetic dimension (F(1, 24) = 6.51, p < .05). The classical aesthetic dimension was rated higher than the expressive aesthetic dimension when the mode of use was leisure view while the ratings on the two dimensions did not differ for target search.

To summarize, the Zhong-Yong disposition affected the viewer’s classical but not the expressive aesthetic experience. Layout affected the expressive aesthetic experiences regardless of Zhong-Yong individual differences. On the classical aesthetic dimension, the high Zhong-Yong individual preferred the fixed grid layouts during leisure viewing. These findings support H1 and H2.

3.2 Webpage Attractiveness

The analysis of webpage attractiveness found a three-way interaction between layout, mode of use and Zhong-Yong (F(1,54) = 7.33, p < .01) (Fig. 3). For low Zhong-Yong thinking individuals, planned comparisons showed that the waterfall flow layout was rated more attractive than the fixed grid layout if the mode of use was leisure view. The two types of layouts did not differ in rated attractiveness when the goal was target search or if the individual was high Zhong-Yong thinking. These findings support H1.

Fig. 3.
figure 3

The effect of layout and mode of use on webpage attractiveness rating for high (left) and low (right) Zhong-Yong individuals

Full size image

The analysis of product attitude did not find any significant effect.

3.3 Viewing Time and Eye Tracking Measures

The analysis of the viewing time found a significant effect of layout (F(1,53) = 6.08, p < .05). The fixed grid layout was viewed longer than the waterfall flow layout. Regressive viewing was analyzed using object-based recurrence measure [1]. The analyses using the first 15 s of viewing data found no interaction between Zhong-Yong and layout. There was significant main effects of layout (F(1,54) = 4.98, p < .05) and task (F(1,54) = 13.41, p < .001). Greater regressive viewing occurred for the fixed grid than the waterfall flow layout and leisure view than target search. As there was an effect of layout on regressive viewing but the effect did not interact with Zhong-Yong, these findings partially support H3.

4 Discussion

Current findings call attention to the potentials of adapting webpage design to user’s thinking style as a means to enhance users’ positive experience toward the website. Previous studies have demonstrated that users perform information seeking task better using websites designed by designers from their own culture. Uncovering information design elements related to thinking style may thus serves as a useful approach to the design of culturally congruent websites [5, 21]. As mentioned earlier in this article, [4] suggested to scatter information on a webpage as a way to match with the visual processing style of holistic thinkers such as Chinese and Japanese. The holistic thinking style has also been shown to associate with the geographical regions of southern China that farm rice, in contrast to the northern China regions that farm wheat [18]. As such, the optimal webpage design could be more accurately delivered according to the linked geographic regions, not just countries.

The Zhong-Yong thinking style studied in the current study is related, though not equivalent, to the much studied holistic thinking style. The individual differences in Zhong-Yong thinking influences whether the user is actively using visual attentional control or is largely guided by information layout of and current task goal when he browses through a webpage. When low Zhong-Yong thinking individuals browsed webpages as a leisure pastime, they rated the aesthetics and attractiveness of webpages higher if the information was presented in a waterfall flow layout rather than the fixed grid layout. Low Zhong-Yong thinkers did not exhibit preferences for a specific type of information layout when they were engaged in target search. Although both high and low Zhong-Yong individuals rated the waterfall flow layout higher along the expressive aesthetic dimension regardless of the mode of use, high Zhong-Yong individuals rated the regularly ordered fixed grid layout more classically aesthetic than the waterfall flow layout after performing the leisure viewing task but not after the target search task. These findings suggested that an information layout driven by a clear rule (such as the fixed grid) may serve high Zhong-Yong individual well while the innovative, novel layout (such as the waterfall flow) is better received by low Zhong-Yong individuals when they browses for enjoyment or pastime.

It should be noted that the current study is a laboratory study, though demonstrating detailed processing differences, the findings and interpretations of which are limited by the small sample sizes. The current study also did not measure the usability dimension to associate the aesthetic and subjective experience with actual webpage use. Larger scale online studies will be needed to help verify if the fit between webpage layout and Zhong-Yong thinking style may actually predict the online performance such as navigation, purchase decision, ad click-through.