Optimization Design of a Webpage Based on Kansei Engineering Fu Guo, Wei Lin Liu, Yaqin Cao, Fan Tao Liu, and Mei Lin Li School of Business Administration, Northeastern University, Shenyang, P.R. China
Abstract Webpage design has become an important component affecting user satisfaction when they surf the Internet. Interface designers are struggling to improve the quality of user experience by designing webpages that meet users’ emotional needs. An optimization design method of webpage interface is proposed in this study based on Kansei engineering theory, and a job-hunting website homepage is taken as the research example. After determining the materials, the semantic differential (SD) method is used to extract user-centered emotional dimensions, and the key design factors of homepages’ appearance are acquired. Next, based on the obtained semantic differential evaluation data, back propagation neural network (BPNN) is conducted to identify quantitative relations between key design factors and emotional dimensions. Finally, genetic algorithm (GA) is employed to search for a near-optimal design. The proposed method is helpful to design webpages that can satisfy participants’ emotions. It C 2015 Wiley Periodicals, Inc. can also be used in a variety of design cases. Keywords: Kansei engineering; Webpage optimization design; Eye tracking; Neural network; Genetic algorithm
1. INTRODUCTION The appearance of webpages has become a powerful factor influencing users’ first impressions and subjective experiences (Lindgaard, Fernandes, Dudek, & Brown, 2006). Furthermore, an appealing website is important in developing the trust of users (Karvonen, 2000). Once users feel frustrated or unsatisfied with the webpage, they will abandon it immediately and turn to others (Parush, Shwarts, Shtub, & Chandra, 2005). Therefore, website operators and designers are doing their utmost to improve the quality of user experience by designing webpages that meet users’ emotional needs. Correspondence to: Wei Lin Liu, School of Business Administration, Northeastern University, No. 11, Lane 3, Wenhua Road, Heping District, Shenyang 110819, P.R. China. E-mail:
[email protected] View this article online at wileyonlinelibrary.com/journal/hfm DOI: 10.1002/hfm.20617
110
As a platform for recruiters to release recruitment information and for applicants to query information, job-hunting websites play an important role in recruitment. The research of the webpage design of jobhunting websites, especially the appearance of the webpage, is worthy and even necessary, but no one has studied this issue. Thus, this study applies Kansei Engineering theory to job-hunting webpage design. The homepage, what you see once opening a website, has become more important than ever. In this article, the effectiveness of our proposed method is demonstrated using the example of homepages of job-hunting websites for illustration purposes. The following section provides a brief review of related works. Next, three consecutive parts of the proposed method, that is, Sections 3, 4, and 5, are presented. In the first part, we identify user-oriented emotional dimensions, that is, product images in the Kansei engineering system, which can constitute the entire possible emotions evoked by homepages of jobhunting websites. In the second part, eye-tracking
Human Factors and Ergonomics in Manufacturing & Service Industries 26 (1) 110–126 (2016)
c 2015 Wiley Periodicals, Inc.
Guo, Liu, Cao, et al.
Optimization Design of a Wepage
experiments and two rounds of discussion from focus groups are conducted to determine homepages’ key design factors, which is more objective compared with the traditional method. On the basis of types of different design factors, prototypes of typical homepage appearance are designed, which can be taken as the research objects used in part three. In the third part, the data from a semantic differential (SD) survey (Osgood, Suci, & Tannenbaum, 1957) is used to construct a neural network model for examining the complex relationship between participants’ perceptions of the product image selected in the first part and the key design factors identified in the second part, and the specific factor types that play pivotal roles in determining participants’ emotional responses are extracted by generic algorithm (GA). Finally, conclusions and suggestions for future research to extend this study are described in Section 6.
2. RELATED WORK 2.1.
Schools of Webpage Design
Usually, users make their preferences or decisions by consciously or subconsciously assigning different weights to various factors (Lee & Koubek, 2010). Among these factors, two of the most influential are usability and aesthetics, which have caught researchers’ attention. Consequently, two influential schools of webpage design emerged. One is the usability-oriented school emphasizing the pragmatic quality of webpages. The representative figure of usability research is Nielsen (1994), a cognitive psychologist, who emphasized five aspects of usability (i.e., easy to learn, efficient to use, easy to remember, few errors, and subjectively pleasing) and suggested 113 criteria for webpage design guidelines with Tahir (Nielsen & Tahir, 2002). The other is the aesthetics-oriented school emphasizing the interface aesthetic design, which could provide users with an emotional experience and has become increasingly important (Deng & Poole, 2012; Ngo & Byrne, 2001; Norman, 2007). It is worth mentioning that some South Korean researchers studied this issue and had several achievements. For example, Kim, Lee, and Choi (2003) conducted an empirical study to investigate the relationship between the emotional dimensions and design factors to provide guidelines for effectively designing emotionally evocative homepages from the perspective of an emotional response, which was caused by the aesthetic design.
According to the meaning of the two schools, we can find one design factor that designers frequently used to evoke target emotions in their product development and that participants universally paid a lot of attention to, which can have an impact on one homepage’s usability and aesthetics. Taking advertisement in e-commerce websites for an example, the chaos of the layout will not only give users a disorderly feeling affecting users’ aesthetics experience, but it is also not conducive to finding the target advertisement, leading to poor usability. There is an inherent relation between usability and aesthetics. So using one aspect to study webpage design is incomplete. In our study, we will focus on the overall perception of users on webpages and not strictly draw a distinction between usability and aesthetics of the design factors.
2.2. Main Issues in Webpage Research In the past, a great number of studies about the framework of the evaluation system of usability/aesthetics were conducted (Fernandez, Insfran, & Abrah˜ao, 2011; Ivory, Sinha, & Hearst, 2001; Lavie & Tractinsky, 2004; Rao, Zou, & Chen, 2012; Tarafdar & Zhang, 2005; Tractinsky, Cokhavi, Kirschenbaum, & Sharfi, 2006; Tuch, Presslaber, St¨ocklin, Opwis, & BargasAvila, 2012; Venkatesh, Morris, Davis, & Davis, 2003). The framework has been gradually refined. In addition, there are many studies on the relationship between design factors/features and usability/aesthetics. The design factors/features include webpage style (Djamasbi, Siegel, & Tullis, 2010; Hsu, 2011; Torrente, Prieto, Guti´errez, & Sagastegui, 2012), color (Bonnardel, Piolat, & Le Bigot, 2011; Cyr, Head, & Larios, 2010), graphics (Lin, Yeh, & Wei, 2013), hypertext system (Ignacio Madrid, Van Oostendorp, & Puerta Melguizo, 2009), and complexity and order (Deng & Poole, 2012). Most of the existing research is quantitative analysis about the cause and effect between design factors/features and usability/aesthetics. According to Gestalt psychology, people perceive objects as a whole rather than as a number of elementary parts (Arnheim, 1983). The future research should put all the design factors/features into consideration as much as possible based on the overall visual appearance of the webpage. Only a few researchers, such as Kim et al. (2003) and Lokman, Noor, and Nagamachi (2009), have researched this issue, and they established the quantitative relationships between several design factors and users’ emotional needs. However, in
Human Factors and Ergonomics in Manufacturing & Service Industries
DOI: 10.1002/hfm
111
Optimization Design of a Wepage
Guo, Liu, Cao, et al.
their research, the design factors were determined by participants’ or designers’ subjective experience, and there was no deeper research about webpage optimization. To sum up, there is still no coherent theoretical framework for webpage emotional design in the existing research. In our study, a systematic method will be proposed, in which the users’ evoked emotions are used to evaluate product design, and after establishing the relationship between key design factors and users’ emotions, GA is used to obtain the optimal scheme meeting users’ emotional needs.
sion, principal component analysis, and cluster analysis (Han et al., 2004; Kim & Han, 2000). However, the data used for statistical methods are from participants’ subjective evaluations so the selection often lacks objectivity. Eye-tracking analysis is an advanced method that can show exactly what participants pay attention to and allow researchers to see something through the eye movements of the participants. Therefore, in our article, modern eye-tracking technology was used to help identify design factors.
2.3.
3. PART 1: USER-ORIENTED EMOTIONAL DIMENSIONS IDENTIFICATION
Kansei Engineering
Kansei Engineering, incorporating the emotional appeal, is an ergonomic user-oriented technology for product development (Jindo, Hirasago, & Nagamachi, 1995; Matsubara & Nagamachi, 1997; Nagamachi, 1995), which can be used in the design field to explore the relationship between the design factors and psychological Kansei images of users with the application of a quantification method (Han & Hong, 2003; Yang, 2011; Yang & Shieh, 2010). It has recently been widely applied to the design of many physical products, such as color copy systems (Fukushima, Kawata, Fujiwara, & Genno, 1995), mobile phones (Hong, Han, & Kim, 2008), digital cameras (Chang, 2008), knives (Chen & Chang, 2009), and machine tools (Wang, 2011). Applying Kansei engineering to the product design ranging from physical products to IT artifacts is a trend, especially in webpages people are exposed to in their daily life and work. However, only a few fundamental studies applied it to webpage design (Kim et al., 2003; Lokman et al., 2009; Lin et al., 2013). In the Kansei engineering system, one important issue is how to extract product design factors according to users’ perceptions. In the past, the design factors were determined after products were deconstructed via morphological analysis (Hsiao, Chiu, & Lu, 2010; Zwicky, 1948) or human interface elements deconstruction methods (Han, Kim, Yun, Hong, & Kim, 2004), which are systematic approaches to analyze all the possible forms of a product. Once a large number of design factors are deconstructed, manual inspection of the relative importance of the design factors and determining the most critical features that please users becomes a difficult task. Several researchers have begun to select the critical design factors based on the opinions of experts or focus groups (Yang, 2011) or a variety of statistical methods, such as multiple linear regres112
3.1.
Materials
3.1.1. Homepages At the beginning of this part, 22 comprehensive jobhunting websites with different designs in Chinese were selected. To extract the typical research objects, two complementary processes were performed. First, multidimensional scaling (MDS) (Hair, Anderson, Tatham, & Black, 1995) was used to scale the homepages in a space of appropriate dimensionality. It is a technique that does not rely on attributes arbitrarily selected by researchers, but it can detect participants’ own cognitive dimensions underlying their perceptions of a stimuli’s similarity/dissimilarity. Thirty-six participants (16 graduate students and 20 undergraduates, ages from 22 to 28 years), 18 males and 18 females, all with experience of using job-hunting websites over the last 6 months, were instructed to divide the 22 homepages into groups by rating the degree of similarity of these homepages based on their implicit criteria. The number of groups was determined by themselves. We obtained a 22 × 22 matrix of similarity and then transformed the similarity matrix into a dissimilarity matrix for MDS analysis. The participants’ perceptual structure of webpages was then derived. The results, as shown in Table 1, include values of stress and RSQ under different dimensions. The stress value is an index to estimate the goodness of fit between the computed result and the observed data. The smaller the stress value, the better the result. Usually, a stress value less than 0.1 can be accepted. The RSQ value is used to analyze the computed result by the interpretation of the total variance of the observed data. The
Human Factors and Ergonomics in Manufacturing & Service Industries
DOI: 10.1002/hfm
Guo, Liu, Cao, et al.
Optimization Design of a Wepage
TABLE 1. Stress and RSQ Value under Different Dimensions Dimension No.
Stress
RSQ
1 2 3 4 5 6
0.509 0.305 0.186 0.142 0.106 0.083
0.350 0.512 0.686 0.761 0.833 0.876
higher the RSQ value, the better the result. An RSQ value more than 0.6 is appropriate. Thus, a solution space with six perceptual dimensions was selected as a result of the MDS analysis with stress = 0.083 and RSQ = 0.876, and the coordinate values of the twentytwo homepages in six-dimensional solution space, that is, positioning data of the homepages, could be obtained. Second, a two-stage cluster method was used. In hierarchical cluster analysis (HCA) with Ward’s method, each object is taken as one cluster initially. Some of the clusters with the biggest similarity will be merged preferentially. The method is effective when classify the objects by the similarity. So it was first used to analyze the obtained six-dimension coordinate values and determine the appropriate number of clusters (six in this article) of homepages. Next, the K-means clustering followed. During this process, on the basis of the number of clusters, every object can be separated and redistributed among the other clusters. By calculating the distance (the measurable index of similarity) between every object to the seed point existing in every cluster, the object with the shortest distance to the seed point is searched, which can be taken as the representative in one cluster (Shieh, Wang, & Yang, 2011). Finally, six homepages with great differences in color, layout, amount of content, and ratios of length to width, were extracted as the preliminary research objects to be used in the following SD evaluation in Section 3.2. They were renamed A, B, C, D, E, and F. 3.1.2. Preliminary Emotional Dimensions In the product design research, pairwise adjectives are often used to describe users’ emotional dimensions about the system or product in terms of ergonomic and psychological estimation (Nagamachi, 1995). To comprehensively describe users’ emotions about the jobhunting website homepages, 72 pairwise adjectives,
taken as the initial adjectives set, were selected by a self-report questionnaire, interviews with web designers and users, Internet, magazines, blogs, advertisements, and research papers. To select more suitable pairwise adjectives, 36 participants, the same as Section 3.1, were asked to select pairwise adjectives that could be used to evaluate homepages by their perception. The 29 pairwise adjectives with an apparently higher frequency were chosen at first. Then 17 pairwise adjectives were selected by the focus group with two rounds of discussion for the next step, and they were listed in Table 2. Six researchers with at least 2 years experiences in ergonomics research and four web designers with at least 1 year work experience participated in the focus group sessions. After the presenter introduced rules, they were required to check on the effectiveness of the 29 pairwise adjectives and allowed to make the appropriate modifications.
3.2. Survey Procedure and Participants To identify representative pairwise adjectives that can best capture the structure of adjectives obtained in Table 2, an SD questionnaire was designed. Seventeen pairwise adjectives were organized using a 7-point SD scale from −3 to 3. Questionnaires were issued on www.sojump.com, a network platform to conduct online surveys. Before the survey, each participant was given a standard instruction for this SD questionnaire and was especially cautioned to mark their “first impressions, the immediate feelings” (Osgood et al., 1957) about the six homepages obtained in Section 3.1.1. One hundred and fifty effective questionnaires were collected. The participants ranged in age from 23 to 31, with a ratio of male to female 12:13, and 52.7% had experience using job-hunting websites over the last 6 months.
3.3. Analysis and Results To identify representative emotional dimensions, the Procrustes analysis (PA) can be used to analyze the global structure of the SD data, and it has been proven to be the more appropriate method by Yang and Chang (2012). The idea behind PA is to match two data matrices as well as possible by translating, rotating, and stretching them. Using PA, the residual sum of squared differences (RSSD) between two data matrices can measure the loss caused by the deletion of some
Human Factors and Ergonomics in Manufacturing & Service Industries
DOI: 10.1002/hfm
113
Optimization Design of a Wepage
Guo, Liu, Cao, et al.
TABLE 2. Pairwise Adjectives with an Apparently Higher Frequency No. 1 2 3 4 5 6
Pairwise Adjectives
No.
Pairwise Adjectives
No.
Pairwise Adjectives
Practical-Useless Ordered-Disordered Professional-Amateur Uncoordinated-Coordinated Particular-Common Stiff-Vivid
7 8 9 10 11 12
Aesthetic-Inaesthetic Simple-Complicated Hard-Soft Boring-Interesting Confusing-Clear Concise-Sloppy
13 14 15 16 17
Reliable-Unreliable Compact-Loose Feminine-Masculine Fresh-Dim Coarse-Delicate
variables. The RSSD can be calculated by referring to Krzanowski’s study (1987). A backward elimination process is used for searching the subset of pairwise adjectives. This process begins with the complete data matrix and the subsets of this matrix can be compared according to the discrepancy value RSSD. In each step, the pairwise adjectives, which cause the least disturbance to the data matrix when they are omitted, are the ones that have the smallest RSSD. This pairwise adjectives need to be removed from the set. This procedure is repeated on the reduced set of pairwise adjectives to find other pairwise adjectives that can be eliminated with least disturbance until only several best remain. By calculating the RSSD values during the elimination process, the five most important pairwise adjectives, that is, “Ordered-Disordered” (V1 ), “Professional-Amateur” (V2 ), “Particular-Common” (V3 ), “Simple-Complicated” (V4 ), “Compact-Loose” (V5 ), were extracted.
4. PART 2: EXPERIMENTAL STUDY ON DESIGN FACTORS 4.1.
Experiment design
4.1.2. Eye-Tracking Device The experiment was conducted in the Human Factors and Ergonomics Lab. An SMI infrared eye-tracker system was used in this part. This system was composed of a laptop testing computer with three software, that is, Experiment Center 2.5, iView X RED and Behavioral and Gaze Analysis software (BeGaze 2.5), and an image showing computer, which provided a stimulus display with a remote infrared eye-tracker at the bottom. During the experiment, participants’ eye movements can be automatically recorded at 60 Hz sampling rate with a spatial resolution of approximate 0.03° and less than 0.4° for gaze position accuracy.
4.1.3. Procedure Each participant was invited one day in advance. Before the experiment, each participant was given a hypothetical role, a job seeker who wanted to obtain recruitment information from the job-hunting websites. In the formal experiment, each participant was measured separately, one participant at a time. The detailed experimental procedure can be described as follows: 1.
4.1.1. Participants Twenty-one college students (aged from 22 to 27), 11 males and 10 females, whose binocular corrected vision or naked eyesight were over 1.0, did not have astigmatism, or other eye diseases, participated in this experiment. Because we were interested in testing which parts of the homepages can really attract participants’ attention, we looked for students who were unfamiliar with these homepages, that is, they had low prior knowledge of these homepages. This could weaken the effect of participants’ prior knowledge on learning effect or cognition, and the obtained homepages’ perception of participants would be more real and effective. 114
2.
3.
Give a brief overview of the experiment guidelines and processes to the participants and make them familiar with the experiment environment. Let participants sit within the range of 60–80 cm in front of the remote infrared eye-tracker and appropriately adjust participants’ position and seat depth to make them maintain a comfortable posture according to the different participants’ body sizes. Perform 5-point calibration and validation. The participant needs to follow a black dot across the computer screen while the position of the participant’s gaze is registered by the iView X system. Next, the registered data
Human Factors and Ergonomics in Manufacturing & Service Industries
DOI: 10.1002/hfm
Guo, Liu, Cao, et al.
4.
5.
Optimization Design of a Wepage
are automatically validated. Repeat this process until the binocular accuracy is less than 0.6. Run the save experimental processes and record participants’ eye movement data. Each participant is instructed to browse each of the six representative homepages. And the multiple stimuli (i.e., six homepages) are combined in a so-called randomization group, which can make these stimuli presented in a random order in an experiment run, whereas the order changes for each experiment trial. How much time a participant spent browsing each homepage is determined by the participant, but no more than 3 min are allowed because if the participants have more time, they would make much more rational judgment, rather than a perceptual awareness. Give each participant a souvenir of appreciation after completing the task.
3.
4.
5.
6.
4.2.
Analysis and Results
SMI BeGaze 2.5 software build up a powerful platform to simplify monocular and binocular tracking data analysis by structuring the information on experiments and participants, as well as providing the full spectrum of visualizations—all in one advanced application. In addition, the powerful statistics module allows configuration and export of statistical data.
7.
8. 9. 10.
4.2.1. Areas of Interests First, the homepages were divided into different areas for the following analysis, according to the data visualization (such as heat map, scan path, gridded AOIs, bee swarm, and focus map) and the homepages’ basic structures. The areas are named areas of interests (AOIs), which could be defined by the integrated AOI editor and often used to examine the average reactions of participants to specific areas of a webpage (Djamasbi et al., 2007). Basically, the divided AOIs in the six homepages cover the main fourteen parts: 1. 2.
Logo. It is the identification of a website and one of the necessary contents of a homepage. Banner (Ban). It is mainly in the form of static images, dynamic video, or a short descriptive text, to illustrate the website and gain the site
11.
12. 13. 14.
publicity. Its design is usually personalized to reflect the site’s diversity. Login (Log). It is convenient for users to enter the system. Once users log in, they can have extended permissions to interact with the website later. In general, Login includes two main forms. One is module-style, and we call it “Logmo” for short. The other is link-style, and we call it “Log-li” for short. Navigation (Nav). It is set up for the convenience of users to help them find goals in the effective time by providing content guide. Search (Sea). It offers users an effective method to directly access goals. In this way, a user can input keywords into the search box or select the necessary attribute set, click on the search button, and then the users’ need will automatically display. It generally appears in two positions in a webpage. One is near the top, and we call it “Sea-t” for short. The other is near the bottom, and we call it “Sea-b” for short. Industry recruitment (Ind-re). It is a module displaying classification information by industry. Regional recruitment (Reg-re). It is a module displaying classification information by region. Hot position (Hot-po). It is a module listing popular positions. Hot enterprise (Hot-en). It is a module listing popular enterprises and their employments. Advertisement (Adv). In general, it displays enterprises’ recruitment information by flash, image, or text and accounts for most of the job-hunting homepage. Copyright (Cop). It stands for all the content at the bottom of each homepage, including license, copyright, and related links. Resume (Res). It is a module mainly used for editing and sending resumes. Blogroll (Blo). It is for exchanging links with other popular or related websites. Related information (Re-inf). It involves all of the other contents in the homepage. Contents in this AOI are different in different homepages.
The Res and Blo exist in fewer homepages, and along with Ban and Re-inf, the four form the personalized contents. In general, not all homepages have these
Human Factors and Ergonomics in Manufacturing & Service Industries
DOI: 10.1002/hfm
115
Optimization Design of a Wepage
Figure 1
Guo, Liu, Cao, et al.
Homepage deconstruction. Figure 2
AOIs. Taking homepage B, for example, the homepage can be divided into twelve AOIs, as shown in Figure 1.
4.2.2. Scan Path and Heat Map Several views can vividly show the positions participants care about. Here, we choose scan path and heat map, for example. The scan path can display the gaze positions and eye events of the selected trial data set as a two-dimensional plot over the stimulus image or video. In this view, fixation and saccade are two important indicators. Fixation, referred to as a gaze longer than 300 ms, has been linked to cognitive processing (Pan et al., 2004) and is viewed as a reliable indicator of attention (Vertegaal & Ding, 2002). Saccade refers to the eye’s fast moving between two fixation points, and its maximum speed can reach 400–600 °/s. Taking the representative homepage B, for example, Figure 2 shows one participant’s fixations and saccades plot with a dynamic fixation radius. The bigger the radius, the more time the participant spends on this point. With the heat map data view Figure 3 (superposition of 21 participants’ data), gaze patterns are visualized by altering the color of the stimulus display based on the amount of attention received. The color scale is between blue and red. Red spots indicate high levels of fixation and 116
Scan path.
attention, and yellow and green indicate decreasing amounts of fixation. Areas without red, green, or yellow spots are not fixated upon. The generation of the heat map is based on an algorithm that combines several neuroscience research theories, such as the theory of visual attention, feature-integration theory of attention, and human perception and cognition. The significant research is also included, thus the areas with different colors can be proved significant. By observing the hotspots in the heat map, we can intuitively identify the areas that are noticed the most. After making a comprehensive comparison of the scan path and heat map for the six homepages, the results show: first, the first screen of homepage, that is, what we can see on the display screen of a computer when opening a webpage under a maximized status, whose size is associated with the size and resolution of the display screen, gets the most fixation count and the biggest hot area, which confirms the importance of the first screen. Second, the areas in the form of text, including several AOIs, such as Ind-re, Reg-re, Hot-po, and Hot-en, are all collectively called “text area.” On the whole, the text area is less than the area filled with advertisements, but it obtains much greater fixation count and hotspots than the advertisement area, which shows that participants pay more attention to the text
Human Factors and Ergonomics in Manufacturing & Service Industries
DOI: 10.1002/hfm
Guo, Liu, Cao, et al.
Optimization Design of a Wepage TABLE 3. Hit Ratio (%) AOIs Re-inf Res Adv Ban Logo Nav Sea-t Sea-b Blo Log-mo Log-li Hot-po Hot-en Ind-re Reg-re Cop
Figure 3
Heat map.
content. Third, overall, the AOIs have greater fixation count, bigger fixation radius, and more hotspots, such as in Figures 2 and 3, and are significantly noticed by participants. Therefore, those AOIs, that is, Hot-en, Sea-t, Ind-re, Reg-re, and Hot-po, existing in most of these homepages, maybe important for participants and should be included in the scope of key design factors.
4.2.3. AOIs’ Hit Ratio According to the key performance indicators (KPI) for the defined AOIs, one important significant indicator, hit ratio, is analyzed. For one AOI, the hit ratio equals the total number of participants gazing at this AOI divided by the total number of all participants. It could be used to indirectly evaluate how easily the AOI is noticed. The higher the hit ratio, the more easily the AOI is noticed. Simple majority decision rule (Hwang & Lin, 1987) is used to determine whether one AOI is easily noticed or not. That is, if the hit ratio of one AOI is more than 0.5, we think this AOI can be noticed easily by most of the participants. Different AOIs’ hit ratios are shown in Table 3, where the blank grids mean the AOIs do not exist in some homepages.
A 81.0
B 100
100 57.1 81.0 90.5 100
100 85.7 71.4 81.0 85.7
57.1 52.4
100 100 47.6 100 100 100 100 4.8
100 100 100 28.6
C
D
81.0 85.7 100 76.2 76.2 47.6 100 38.1
100 100 61.9 100 100 100
85.7 61.9 100 100 100 19.0
100 85.7 100 81.0 42.9
E
F
100 71.4 100
90.5
57.1 57.1 100 90.5 100 33.3 100 100 100 9.5
100 85.7 76.2 100 100 0 81.0
100 71.4 100 14.3
The results show: first, the eight AOIs, that is, Re-inf, Adv, Logo, Nav, Sea, Log, Hot-en, and Cop, all exist in each homepage. They may be the necessary contents for a job-hunting website. Cop, with a hit ratio no more than 42.9%, is not easily noticed by participants. The other seven AOIs, except for the Nav in homepage C with a hit ratio 47.6%, are easily noticed. Second, the AOIs existing in more than three of these homepages, that is, Ban, Hot-po, Ind-re, and Reg-re, are also easily noticed by participants, as are Res and Blo. Third, in homepage C and F, Sea appears twice, whereas Seat is more easily noticed than Sea-b. In homepages B and E, Log also appears twice, and Log-mo is more easily noticed than Log-li. These areas that can be easily noticed are important for designers. By designing these AOIs, designers can evoke users’ emotions when a user first visits the homepage.
4.3. Key Design Factors Determination All of the obtained significantly noticed AOIs in Section 4.2.2 and easily noticed AOIs in Section 4.2.3 are taken as the key AOIs for participants. Although the personalized contents are important, as the basic research of a homepage, they are beyond the scope of our consideration. In addition, two rounds of discussion from the focus group were conducted to determine key design factors. Five researchers with at least two years experiences in ergonomics research, five web designers with at least one and a half years work experience,
Human Factors and Ergonomics in Manufacturing & Service Industries
DOI: 10.1002/hfm
117
Optimization Design of a Wepage
Guo, Liu, Cao, et al.
TABLE 4. Key Design Factors Factor
Subfactor
Body (A) Logo (B) Nav (C)
Sea-t (D) Ind/Reg-re (Text) (E)
Color (A1 ) Layout style (A2 ) Position (B1 ) Interaction feature (C1 ) Style (C2 ) Number of search items (D1 ) Font size (E1 ) Space (E2 ) Color (E3 )
Log (F) Adv (G)
Style (F1 ) Style (G1 )
Hot-po (H) Hot-en (I)
Style (H1 ) Text color (I1 )
Type Blue (A11 ) Type 1 (A21 ) Top left (B11 ) Underlined (C11 )
Purple (A12 ) Type 2 (A22 ) Top center (B12 ) Drop-down (C12 )
Icon (C21 ) Little (e.g., one) (D11 ) Big (e.g., 11pt) (E11 ) Small (e.g., single space) (E21 ) In accordance with body color (E31 ) Modular (F11 ) Picture & text (G11 )
Strip (C22 ) Much (e.g., four) (D12 ) Small (e.g., 10pt) (E12 ) Big (e.g., 1.5 space) (E22 ) Black (E32 )
Fixed suspending window (H11 ) Enterprise name and position name all in accordance with E3 (I11 )
Module (H12 )
and four expert job-hunting website users participated in the focus group sessions. After the presenter introduced rules and obtained results from the former eyetracking experiment analysis, they were asked to clarify what they thought were important for a job-hunting website homepage, except the personalized contents. According to the recorded information, nine key design factors and 13 subfactors were determined as shown in Columns 1 and of Table 4. Then participants were expected to continue to list the types for each subfactor, as many as possible. After summarizing, different types were determined as shown in Columns 3–6 of Table 4. For example, we take “Adv style” as the only subfactor of Adv, which has four types. The first type is “Picture & Text,” which means the presentation of Adv includes the enterprise’s brand in the form of a picture and name in the form of text. The second is “Picture,” which means the enterprise’s recruitment information is in the form of a picture. The third is “Flash,” which means the enterprise’s recruitment information is in the form of flash. The fourth is “Combination,” which means the presentation of the enterprise’s recruitment information is a combination of the former three types,
118
Linked (F12 ) Picture (G12 )
Orange (A13 ) Type 3 (A23 )
Light Blue (A14 ) Type 4 (A24 )
Color changed (C13 ) Text (C23 )
Cursor changed (C14 ) No existing (C24 )
Flash (G13 )
Combination (e.g., G11 and G13 ) (G14 )
Enterprise name in accordance with E3, and position name be black (I12 )
here taking “Picture & Text” and “Flash” with a ratio of 1:1, for example. The first factor “body” from the focus group refers to the overall visual effect of the whole design, and the other eight factors represent each important AOI. To better illustrate these design factors, several need to be explained in detail. The “Body” has two subfactors. One is “Color,” every type of which is made up of three colors with specific RGB values, as shown in Figure 4. And the other is “Layout style,” which has four types, as shown in Figure 5. Area B stands for Adv, and Area A stands for everything except the Adv. Each type only represents the relative position of A and B, not the relative size. “Ind/Reg-re” usually appears in the form of text, so the text attributions (e.g., “Font size,” “Space,” “Color”) are taken as the subfactors of “Ind/Reg-re.” In addition, the types of some design factors (e.g., “Color,” “Space,” “Number of search items,” “Font size”) are numerous. To simplify the process of optimization, only several discrete types are chosen and used to guide the orthogonal representative samples design in the next process.
Human Factors and Ergonomics in Manufacturing & Service Industries
DOI: 10.1002/hfm
Guo, Liu, Cao, et al.
Optimization Design of a Wepage
users care about should be put on the first screen. Third, the number of advertisements should be reduced, and the advertisements should be arranged orderly. Fourth, repetitive content should be simplified. After taking these suggestions, 16 prototypes were designed by Adobe Dreamweaver CS6, as shown in the appendix.
5. PART 3: COGNITIVE MODEL CONSTRUCTION AND OPTIMIZATION DESIGN Figure 4
Figure 5
Body colors.
Layout styles.
4.4. Orthogonal Representative Prototypes Design In Table 4, there are five factors with four levels (types) and eight with two levels. Using the comprehensive experiment, the number of comprehensive test is 262166 (calculated by the theory of combinatorial mathematics, i.e., C41 × C41 × C41 × C41 × C41 × C21 × C21 × C21 × C21 × C21 × C21 × C21 × C21 ). The number is too complex. Orthogonal experimental design is a method used to study different factors with different levels. In this method, representative experiments that would avoid missing important information and decrease the workload are selected from the comprehensive test on the basis of the orthogonal completeness principle. According to the mixed-level orthogonal array L16 (45 ×28 ), 16 representative experiments are needed, that is, 16 orthogonal representative prototypes can be used to collect the accurate and comprehensive SD data of all original 262166 experiments. At the end of each eye-tracking experiment, an individual interview with the participant was conducted to assist the interpretation of the eye-movement behavior and mine several suggestions from participants for homepage improvement design. The suggestions can be summarized as the following four points: First, homepage length should be shorter. Second, what
5.1. Evaluating Participants’ Emotions about Prototypes In this section, 16 orthogonal representative prototypes described in Section 4.4 were taken as research objects for another emotion assessment experiment to obtain SD evaluation data for these homepages. Thirty-six participants, with a 1:1 male to female ratio and 55.6% of whom had experience using job-hunting websites over the last 6 months, were instructed to use a 7point SD scale from 1 to 7 to rate each prototype on the five identified emotional dimensions. Participants were also informed that they were to rate the homepages by their sensory evaluation based on the pages’ appearance. For each prototype, a comparison of the SD evaluation data adopted by the participants with experience using job-hunting websites and participants without experience was conducted through the independent-sample t test. The result (p > .05) shows that the experience of using a webpage had no significant effect on the evaluation.
5.2. BPNN Model for Examining the Relationship between Design Factors and Participants’ Emotion With effective learning ability, the neural network model has proved valuable in examining the complex relationship between input variables (i.e., key design factors) and output variables (i.e., participants’ emotions about 16 prototypes) (Lin, Lai, & Yeh, 2004; Negnevitsky, 2002). In this article, BPNN was applied. To quantify the qualitative factors, the Quantification Type I code method was used. The number of digits in this code was equal to the number of types of design factors. There was only a digit for “1” in the code of each design subfactor, and the rest were
Human Factors and Ergonomics in Manufacturing & Service Industries
DOI: 10.1002/hfm
119
Optimization Design of a Wepage
Guo, Liu, Cao, et al.
TABLE 5. Assessed Users’ Emotions for 16 Prototypes No.
Input Variables Values
V1 Values
V2 Values
V3 Values
V4 Values
V5 Values
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
100010001010001000101010101010001010 100001001001000100100101010101000110 100000100100100010011010100100100101 100000010100010001010101011000011001 010010001001000010011001011000011010 010001001010000001010110100100100110 010000100100011000101001010101000101 010000010100100100100110101010001001 001010000100100001010110011001000110 001001000100010010011001100110001010 001000101010000100100110010100011001 001000011001001000101001101000100101 000110000100010100100101101000100110 000101000100101000101010010100011010 000100101001000001010101100110001001 000100011010000010011010011001000101
4.542 5.240 3.640 4.696 3.130 4.840 3.760 4.292 4.125 3.958 3.957 4.560 4.957 3.920 4.320 4.667
4.958 4.875 3.750 3.864 3.682 4.792 4.167 4.696 5.087 4.609 3.955 3.750 5.174 3.917 5.542 4.304
3.125 3.760 3.640 3.391 3.826 3.440 3.560 3.125 2.625 3.167 3.261 4.400 3.478 3.120 3.080 3.292
3.750 5.440 4.120 4.565 3.739 3.880 4.040 3.583 3.667 3.250 3.957 4.880 4.870 4.200 3.320 4.625
2.917 5.042 5.000 5.409 4.091 5.208 5.125 3.913 3.522 3.130 4.591 4.958 4.217 4.875 2.167 5.348
“0.” The positions of “1” corresponded to the types of product design subfactors. For example, if the type of one design factor is the first in one product and this factor has three possible types, the code of this design factor would be 100. By this method, the design factors of 16 orthogonal representative prototypes can be encoded in the form of a binary string with 36 (i.e., the total number of types of all the design factors) digits as shown in Column 2 of Table 5. All of the participants’ evaluation scores for each orthogonal representative prototype were averaged to obtain a final utility rating ranging from 1 to 7, as shown in Columns 3–7 of Table 5. Considering the range of the sigmoid activation function in the neural network model is (0, 1), the final utility rating data needed to be converted into an interval from 0 to 1 by adopting the range normalization method. The normalized data can be calculated by the difference between the original value and the minimum value divided by the range of the data. The structure of this network is built with an input layer, an output layer, and a single hidden layer. The 36 types of nine key design factors in Table 5 are used as the 36 input neurons. The average assessed values of the five emotional dimensions are used as the output neurons. The collected data of 16 research objects in the training set, given in Table 5, are used to train the BPNN model. When the cumulative training epochs are more than 10,000, or the training goal (i.e., mean squared error, MSE) is less than 1 × 10−6 , the training 120
process is completed. This process was performed in MATLAB. Meanwhile, the number of neurons in the single hidden layer is 21, as determined by the heuristic method, until the value of performance is 2.84 × 10−7 , less than the specified error threshold. This performance indicates the neural network has a better effectiveness. To evaluate the performance of the BPNN model in terms of its ability to predict participants’ emotions for a new webpage with given design factors, another two prototypes in the test set are used. The result (p = .324) of the paired-samples t test between the average assessed values on the two test samples given by 15 participants and the predicted values by using the BPNN model means that the predicted values and the average assessed values do not show a significant difference. This suggests that the BPNN model is an effective approach for modeling participants’ emotions about homepages.
5.3.
Optimization Design from GA
In the past, a design was based on a designer’s experience and knowledge. A better design was obtained by modifying the original prototype again and again on the basis of users’ needs. Currently, some artificial intelligence technologies can provide support for obtaining the optimal scheme of a product, and GA is comparatively more effective at searching the entire solution space. Because the network has been
Human Factors and Ergonomics in Manufacturing & Service Industries
DOI: 10.1002/hfm
Guo, Liu, Cao, et al.
Optimization Design of a Wepage
TABLE 6. The Optimum Chromosomes for Webpage Design Affection Ordered Professional Particular Simple Compact
Chromosomes
Decoded Results
100001000110000100011001100110000101 100000100101001000010101100110001001 100001001001001000101001010110000101 100000101010000100101010011001000110 100010000110001000101010011001000110
A11 A22 B12 C11 C22 D12 E11 E22 E31 F12 G11 H12 I12 A11 A23 B12 C12 C21 D12 E12 E22 E31 F12 G11 H11 I12 A11 A22 B11 C12 C21 D11 E11 E22 E32 F12 G11 H12 I12 A11 A23 B11 C11 C22 D11 E11 E21 E32 F11 G12 H12 I11 A11 A21 B12 C11 C21 D11 E11 E21 E32 F11 G12 H12 I11
trained to an acceptable degree of accuracy, it can be adopted as the fitness function when searching for an optimal scheme to meet a required emotional need using GA. The decision variables in this optimization method are 13 selected subfactors. The constraint is that the type of each subfactor is unique for one product. The detailed optimization procedures of GA are as follows (Gen & Cheng, 1997): Step 1: Construct 16 orthogonal representative prototypes as the initial population, which are more efficient than a randomly generated population, according to the origin of the evaluation. Step 2: Encode the factor types of the initial population into chromosomes. Binary coding is the most commonly used method. The results of the encoding are shown in Column 2 of Table 5. Step 3: Set parameters. The range of decision variables in this case study is “2” or “4,” and the other parameters are the default values. Step 4: Define the former trained BPNN model as a fitness function. A higher fitness value indicates better chromosomes. Step 5: Obtain the optimum chromosomes through four evaluation mechanisms: roulette selection, reproduction, single-point crossover, and basic bit mutation. Step 6: Decode the optimum chromosome by using the inverse process of encoding.
5.4.
Results
GA was performed in MATLAB. Here, we only take one Kansei image of each emotional dimension to illustrate. The optimum chromosomes corresponding to the five Kansei images (as shown in column 2 of Table 6) all have fitness values of approximately 1 (more
than 0.9999), which shows that the performance of the optimization method developed in this study in terms of its searching ability is good. The five optimum chromosomes are decoded, as shown in Column 3 of Table 6. The results show different combinations of types of each subfactor. For example, if one design is required to give users a core image “ordered,” its characteristics will include the color of body is blue; layout style is “Type 2”; position of logo is top center; interaction feature of navigation is underlined; navigation style is “strip”; the number of search items is a little more; login style is linked; advertisement is “Picture & Text”; “hot position” is module; color of enterprise and name of “hot enterprise” is in accordance with body color and the position name is black; for “industry recruitment and regional recruitment,” the text is with a little bigger font size and space; and the color of text is in accordance with the body color. Figure 6 shows a sample of an optimal homepage.
6. CONCLUSIONS AND FUTURE RESEARCH This study applies the proposed method to obtain nearoptimal designs, which can closely conform to customers’ emotional needs. In addition, this method can be applied to other webpages, not only the homepage of job-hunting websites. On the basis of appreciating the importance of users and collecting users’ true needs or perceptions, the identified emotional dimensions could be valuable. In this study, different experimental participants with different backgrounds were invited at different stages of the research. This can help to obtain reasonable data suitable for different stages of the research and to select the five most important emotional dimensions. In the stage of extracting the design factors, modern eye-tracking technology, which can accurately record
Human Factors and Ergonomics in Manufacturing & Service Industries
DOI: 10.1002/hfm
121
Optimization Design of a Wepage
Figure 6
The optimization design in terms of “ordered.”
participants’ eye movement, is used to more objectively identify the key factors. In addition, 16 prototypes were designed according to the orthogonal array and varied only in terms of the key design factors. This could minimize the difference among different research objects that are irrelevant to the interest of this research and isolate the effects of key design factors as influencing variables. All of these can guarantee the accuracy of the results. By comparing the obtained five optimal homepages, it is obvious that when the body color is all blue or belonging to cool tones, the color can alleviate participants’ anxiety and irritability by creating a relatively cool and quiet atmosphere. The five design schemes and emotion assessment data can be taken as a supporting database to guide job-hunting website homepage design in the future.
122
Guo, Liu, Cao, et al.
What cannot be ignored is that the experimental study presented in this article has four limitations. First, the participants are primarily youth. Future research should take different ages into account. Second, only a few discrete types of factors are used to guide the homepage prototypes design to simplify the process of optimization. In fact, each factor may have a large number of types, for example, the factor “RGB-based color” 1 1 1 × C256 × C256 schemes. Therehas 16777216 C256 fore, more efficient and complete description methods of the factors should be applied. Third, because of the ability of advertising production is limited, we chose all the existing advertisements to design the prototypes. This leads to the brands of advertisements not being well controlled. Fourth, the proposed method provides new opportunities for optimization design of webpages; however, the process is more complex. If possible, a Kansei decision support system (KDSS), that is, an advanced information system, including Kansei images, types of each factor, the modeling mechanisms between the first two and iterative searching mechanisms, should be considered and established to guide product design automatically. Users’ needs are changing, so the data in the KDSS, especially the emotion dimensions and design factors, need to be added, modified, or replaced as soon as possible.
ACKNOWLEDGMENTS This work is supported by the National Natural Science Foundation of China (Grant Nos. 71171041 and 71471033). We are grateful to all the studies that provided clues to guide our study and the participants for their participation and assistance in the experimental study. We also thank the editor and anonymous reviewers for their valuable comments and advice.
APPENDIX Sixteen orthogonal representative prototypes are given in Figure A1.
Human Factors and Ergonomics in Manufacturing & Service Industries
DOI: 10.1002/hfm
Guo, Liu, Cao, et al.
Optimization Design of a Wepage
Figure A1
Continue
Human Factors and Ergonomics in Manufacturing & Service Industries
DOI: 10.1002/hfm
123
Optimization Design of a Wepage
Guo, Liu, Cao, et al.
Figure A1
Sixteen prototypes.
References Arnheim, R. (1983). Art and visual perception: A psychology of the creative eye. Los Angeles: University of California Press. Bonnardel, N., Piolat, A., & Le Bigot, L. (2011). The impact of colour on website appeal and users’ cognitive processes. Displays, 32, 69–80. Chang, C. C. (2008). Factors influencing visual comfort appreciation of the product form of digital cameras. International Journal of Industrial Ergonomics, 38, 1007– 1016. Chen, H. Y., & Chang, Y. M. (2009). Extraction of product form features critical to determining consumers’ per-
124
ceptions of product image using a numerical definitionbased systematic approach. International Journal of Industrial Ergonomics, 39, 133–145. Cyr, D., Head, M., & Larios, H. (2010). Colour appeal in website design within and across cultures: A multimethod evaluation. International Journal of HumanComputer Studies, 68, 1–21. Deng, L., & Poole, M. S. (2012). Aesthetic design of ecommerce web pages—webpage complexity, order and preference. Electronic Commerce Research and Applications, 11, 420–440. Djamasbi, S., Siegel, M., & Tullis, T. (2010). Generation Y, web design, and eye tracking. International Journal of Human-Computer Studies, 68, 307–323.
Human Factors and Ergonomics in Manufacturing & Service Industries
DOI: 10.1002/hfm
Guo, Liu, Cao, et al.
Optimization Design of a Wepage
Djamasbi, S., Tullis, T., Hsu, J., Mazuera, E., Osberg, K., & Bosch, J. (2007). Gender preferences in web design: Usability testing through eye tracking. In Proceedings of the 13th Americas Conference on Information Systems (pp. 1–8), Keystone, Colorado. Retrieved from DigitalCommons@WPI: http://digitalcommons.wpi.edu/uxdmrl-pubs/23. Fernandez, A., Insfran, E., & Abrah˜ao, S. (2011). Usability evaluation methods for the web: A systematic mapping study. Information and Software Technology, 53, 789– 817. Fukushima, K., Kawata, H., Fujiwara, Y., & Genno, H. (1995). Human sensory perception oriented image processing in a color copy system. International Journal of Industrial Ergonomics, 15, 63–74. Gen, M., & Cheng, R. (1997). Genetic algorithms and engineering design. New York, NY: Wiley. Hair, J., Anderson, R., Tatham, R., & Black, W. (1995). Multi-variate data analysis. New York, NY: Macmillan. Han, S. H., & Hong, S. W. (2003). A systematic approach for coupling user satisfaction with product design. Ergonomics, 46, 1441–1461. Han, S. H., Kim, K. J., Yun, M. H., Hong, S. W., & Kim, J. (2004). Identifying mobile phone design features critical to user satisfaction. Human Factors and Ergonomics in Manufacturing & Service Industries, 14, 15–29. Hong, S. W., Han, S. H., & Kim, K. J. (2008). Optimal balancing of multiple affective satisfaction dimensions: A case study on mobile phones. International Journal of Industrial Ergonomics, 38, 272–279. Hsiao, S. W., Chiu, F. Y., & Lu, S. H. (2010). Productform design model based on genetic algorithms. International Journal of Industrial Ergonomics, 40, 237–246. Hsu, C. C. (2011). Factors affecting webpage’s visual interface design and style. Procedia Computer Science, 3, 1315–1320. Hwang, C. L., & Lin, M. J. (1987). Group decision making under multiple criteria. Berlin, Germany: Springer. Ignacio Madrid, R., Van Oostendorp, H., & Puerta Melguizo, M. C. (2009). The effects of the number of links and navigation support on cognitive load and learning with hypertext: The mediating role of reading order. Computers in Human Behavior, 25, 66–75. Ivory, M. Y., Sinha, R. R., & Hearst, M. A. (2001). Empirically validated web page design metrics. In CHI’01 Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 53–60). New York, NY: ACM. Jindo, T., Hirasago, K., & Nagamachi, M. (1995). Development of a design support system for office chairs using 3-D graphics. International Journal of Industrial Ergonomics, 15, 49–62.
Karvonen, K. (2000). The beauty of simplicity. In Proceedings of the Conference on Universal usability (pp. 85–90). New York, NY: ACM. Kim, J., & Han, S. H. (2000). A statistical approach to screening product design variables for modeling product usability. Journal of the Ergonomics Society of Korea, 19, 23–27. Kim, J., Lee, J., & Choi, D. (2003). Designing emotionally evocative homepages: An empirical study of the quantitative relations between design factors and emotional dimensions. International Journal of HumanComputer Studies, 59, 899–940. Krzanowski, W. J. (1987). Selection of variables to preserve multivariate data structure, using principal components. Applied Statistics, 36, 22–33. Lavie, T., & Tractinsky, N. (2004). Assessing dimensions of perceived visual aesthetics of web sites. International Journal of Human-Computer Studies, 60, 269–298. Lee, S., & Koubek, R. J. (2010). Understanding user preferences based on usability and aesthetics before and after actual use. Interacting with Computers, 22, 530–543. Lin, Y. C., Lai, H. H., & Yeh, C. H. (2004). Neural network models for product image design. In Knowledge-based intelligent information and engineering systems (pp. 618–624). Berlin, Germany: Springer Berlin Heidelberg. Lin, Y. C., Yeh, C. H., & Wei, C. C. (2013). How will the use of graphics affect visual aesthetics? A user-centered approach for web page design. International Journal of Human-Computer Studies, 71, 217–227. Lindgaard, G., Fernandes, G., Dudek, C., & Brown, J. (2006). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour and Information Technology, 25, 115–126. Lokman, A. M., Noor, N. L. M., & Nagamachi, M. (2009). ExpertKanseiWeb: A tool to design Kansei website. In Enterprise Information Systems (pp. 894–905). Berlin, Germany: Springer Berlin Heidelberg. Matsubara, Y., & Nagamachi, M. (1997). Hybrid Kansei engineering system and design support. International Journal of Industrial Ergonomics, 19, 81–92. Nagamachi, M. (1995). Kansei engineering: A new ergonomic consumer-oriented technology for product development. International Journal of Industrial Ergonomics, 15, 3–11. Negnevitsky, M. (2002). Artificial intelligence. New York, NY: Addison-Wesley. Ngo, D. C. L., & Byrne, J. G. (2001). Application of an aesthetic evaluation model to data entry screens. Computers in Human Behavior, 17, 149–185. Nielsen, J. (1994). Usability engineering. San Francisco, CA: Morgan Kaufmann. Nielsen, J., & Tahir, M. (2002). Homepage usability: 50 websites deconstructed. Fremont, CA: New Riders.
Human Factors and Ergonomics in Manufacturing & Service Industries
DOI: 10.1002/hfm
125
Optimization Design of a Wepage
Norman, D. A. (2007). Emotional design: Why we love (or hate) everyday things. New York, NYH: Basic Books. Osgood, C. E., Suci, G. J., & Tannenbaum, P. H. (1957). The measurement of meaning. Chicago: University of Illinois Press. Pan, B., Hembrooke, H., Gay, G., Granka, L., Feusner, M., & Newman, J. (2004). The determinants of web page viewing behavior: An eye tracking study. In ETRA’04 Proceedings of the 2004 symposium on eye tracking research & applications (pp. 147–154). New York, NY: ACM. Parush, A., Shwarts, Y., Shtub, A., & Chandra, M. J. (2005). The impact of visual layout factors on performance in web pages: A cross-language study. Human Factors, 47, 141–157. Rao, P. L., Zou, H. D., & Chen, C. L. (2012). The user experience design for auto purchasing decision support website. Chinese Journal of Ergonomics, 18, 54–58. Shieh, M. D., Wang, T. H., & Yang, C. C. (2011). A clustering approach to affective response dimension selection for product design. Journal of Convergence Information Technology, 6, 197–206. Tarafdar, M., & Zhang, J. (2005). Analyzing the influence of web site design parameters on web site usability. Information Resources Management Journal, 18, 62– 80. Torrente, M., Prieto, A., Guti´errez, D. A., & Sagastegui, M. (2012). Sirius: A heuristic-based framework for measuring web usability adapted to the type of website. Journal of Systems and Software, 86, 649–663. Tractinsky, N., Cokhavi, A., Kirschenbaum, M., & Sharfi, T. (2006). Evaluating the consistency of immediate aesthetic perceptions of web pages. International Journal of Human-Computer Studies, 64, 1071–1083.
126
Guo, Liu, Cao, et al.
Tuch, A. N., Presslaber, E. E., St¨ocklin, M., Opwis, K., & Bargas-Avila, J. A. (2012). The role of visual complexity and prototypicality regarding first impression of websites: Working towards understanding aesthetic judgments. International Journal of Human–Computer Studies, 70, 794–811. Venkatesh, V., Morris, M. G., Davis, G. B., & Davis, F. D. (2003). User acceptance of information technology: Toward a unified view. MIS Quarterly, 425– 478. Vertegaal, R., & Ding, Y. (2002). Explaining effects of eye gaze on mediated group conversations: Amount or synchronization? In CSCW’02 Proceedings of the 2002 ACM Conference on Computer Supported Cooperative Work (pp. 41–48). New York, NY: ACM. Wang, K. C. (2011). A hybrid Kansei engineering design expert system based on grey system theory and support vector regression. Expert Systems with Applications, 38, 8738–8750. Yang, C. C. (2011). A classification-based Kansei engineering system for modeling consumers’ affective responses and analyzing product form features. Expert Systems with Applications, 38, 11382– 11393. Yang, C. C., & Chang, H. C. (2012). Selecting representative affective dimensions using Procrustes analysis: An application to mobile phone design. Applied Ergonomics, 43, 1072–1080. Yang, C. C., & Shieh, M. D. (2010). A support vector regression based prediction model of affective responses for product form design. Computers and Industrial Engineering, 59, 682–689. Zwicky, F. (1948). Morphological astronomy. Observatory, 68, 121–143.
Human Factors and Ergonomics in Manufacturing & Service Industries
DOI: 10.1002/hfm
