Master Thesis
KANSEI ENGINEERING AND WEB SITE DESIGN
By Zheng Song s090400
Supervised by Thomas James Howard Ali Gürcan Özkil Sofiane Achiche
February 2012
Kansei Engineering and Web Site Design
ABSTRACT Capturing users’ needs is critical in web site design. However, a lot of attention has been paid to enhance the functionality and usability, whereas much less consideration has been given to satisfy the emotional needs of users, which is also important to a successful design. This thesis explores a methodology based on Kansei Engineering, which has done significant work in product and industrial design but not quite been adopted in the IT field, in order to discover implicit emotional needs of users toward web site and transform them into design details. Survey and interview techniques and statistical methods were performed in this thesis. A prototype web site was produced based on the Kansei results integrated with technical expertise and practical considerations. The results showed that the Kansei Engineering methodology in this thesis played a significant role in web site design in terms of satisfying the emotional needs of users. Key words: Kansei Engineering, web site design, emotional design.
I
Kansei Engineering and Web Site Design
ACKNOWLEDGEMENT I am immensely grateful to my great supervisors, Thomas James Howard, Ali Gürcan Özkil and Sofiane Achiche, for their brilliant guidance throughout the project work, being always patient, supportive and helpful during project meetings, as well as the valuable comments and advices on writing this thesis. I really appreciate the help from all the participants who took part in the surveys and interviews for the project. Their great contribution largely supported the thesis. Also I want to take this chance to thank my parents and friends, who have been supporting and helping me all the time.
II
Kansei Engineering and Web Site Design
CONTENTS
ABSTRACT ............................................................................................................................................ I ACKNOWLEDGEMENT .................................................................................................................... II CHAPTER 1 INTRODUCTION ........................................................................................................... 3 1.1 MOTIVATION AND BACKGROUND …………………………………………………………………………………. 3 1.2 OBJECTIVES OF THE THESIS ............................................................................................................. 4 CHAPTER 2 KANSEI ENGINEERING.............................................................................................. 5 2.1 WHAT IS KANSEI ENGINEERING? .................................................................................................... 5 2.2 KANSEI MEASUREMENT ................................................................................................................... 5 2.3 GENERAL MODEL OF KANSEI ENGINEERING .................................................................................... 6 2.4 KANSEI ENGINEERING AND WEB SITE DESIGN ................................................................................. 6 2.5 METHODOLOGY OF THE THESIS ....................................................................................................... 8 CHAPTER 3 SYNTHESISING SPECIMENS................................................................................... 10 3.1 COLLECTION OF SPECIMENS .......................................................................................................... 10 3.2 INVESTIGATION OF DESIGN ELEMENTS .......................................................................................... 11 CHAPTER 4 ESTABLISHMENT OF KANSEI CHECKLIST ....................................................... 13 4.1 SYNTHESISING KANSEI WORDS ..................................................................................................... 13 4.1.1 STEP 1: Initial collection of Kansei words ........................................................................... 14 4.1.2 STEP 2: Removing meaningless words (first filter) .............................................................. 14 4.1.3 STEP 3: Categorising words against a model of emotion (second filter) ............................. 15 4.1.3 STEP 3: Categorising words against a model of emotion (second filter) ............................. 15 4.1.3.1 Kappa test……………………………………………………………………………..16 4.1.3.2 Final Kansei words…..………………………………………………………………..17 4.2 DEVELOPMENT OF KANSEI CHECKLIST .......................................................................................... 18 CHAPTER 5 KANSEI MEASUREMENT ........................................................................................ 19 5.1 ONLINE SURVEY DESIGN................................................................................................................ 19 5.1.1 Pilot test ................................................................................................................................ 19 5.1.1.1 Pilot test 1……………………………………………………………………………..19 5.1.1.2 Pilot test 2……………………………………………………………………………..20 5.1.2 Final survey design ............................................................................................................... 20 5.2 WEB SITE EVALUATION ................................................................................................................. 21 5.3 DETECTING OUTLIERS ................................................................................................................... 21 CHAPTER 6 DESIGN SCHEME ANALYSIS .................................................................................. 22 6.1 GENERAL DESIGN OUTLINE ........................................................................................................... 23 6.1.1 Spanning Semantic Space...................................................................................................... 23
1
Kansei Engineering and Web Site Design
6.1.2 Proposing general design outline.......................................................................................... 25 6.2 DETAILED DESIGN GUIDELINE ....................................................................................................... 25 CHAPTER 7 PROTOTYPING AND TESTING ............................................................................... 28 7.1 PROTOTYPING ............................................................................................................................... 28 7.2 TESTING ........................................................................................................................................ 29 7.2.1 Obtaining evaluation data ..................................................................................................... 29 7.2.2 Comparative analysis ............................................................................................................ 30 CHAPTER 8 CONCLUSION AND FUTURE WORK ..................................................................... 31 8.1 LIMITATIONS.................................................................................................................................. 31 8.2 FUTURE WORK............................................................................................................................... 31 LIST OF REFERENCE ....................................................................................................................... 32 APPENDIX A ....................................................................................................................................... 35 APPENDIX B ........................................................................................................................................ 41 APPENDIX C ....................................................................................................................................... 42 APPENDIX D ....................................................................................................................................... 43 APPENDIX E ........................................................................................................................................ 44 APPENDIX F ........................................................................................................................................ 46
2
Kansei Engineering and Web Site Design
CHAPTER 1
Introduction 1.1 Motivation and background The Internet has become indispensable in modern life, with a proliferation of different web sites flooding our screens. Typically, web site design is a very complex process usually involving multiple technologies and knowledge disciplines such as graphic design and interaction design. Designing a web site that really attracts people is what web site designers always dream of. Theoretically, users’ satisfaction and technical factors are both important to a successful design. [1] Therefore, to understand and satisfy people’s needs is one of the fundamental aspects in design. According to Jordan [2], there exists a hierarchy of needs explaining what kinds of expectations products should meet. As shown in figure 1, three levels of needs are included in the model, and with the lower level fulfilled the request for higher level comes to users.
Figure 1 Jordan's hierarchy of needs [2]
As shown in figure 1, the most primary need from a product is to function, which is the core basics of a product, depending on the quality. With the need of functionality satisfied, people want the product to be easy to use (usability). The third level, pleasure, refers to emotions that products bring to people. As Jordan said, pleasure-based approaches are about understanding and respecting what people want from products and designing something that can "bring a real joy into people's lives." [2] In fact, researches have shown that emotions aroused from products influence the pleasure of buying, owning, and using them. [3] Applying Jordan's hierarchy to web site design, the three levels of needs (functionality, usability and pleasure) should be fulfilled. Web sites that arouse positive emotions must meet all three levels. With the evolution of technology, functionality of web sites can be largely improved and perfected; as more and more results of usability research become available, web site usability has developed rapidly. Classic works such as "Don't Make Me Think" [4] and researchers like Jakob Nielsen, known as "the king of usability" [5] have been creating principles/golden rules for usability enhancement.
3
Kansei Engineering and Web Site Design
However, compared to the first two levels, the level of pleasure is much harder to achieve. Although increasing attention is being paid to the emotional aspects of web site design, there is currently not a proven systematic method of determining design concepts and details. [6] Lokman [6] has made an attempt to engineer emotion in web site design using Kansei Engineering, which has done significant work in product and industrial design but not quite been adopted in the IT field. The research presented a structure of Kansei Engineering in the context of web site design and provided an example of designing online clothing web sites.
1.2 Objectives of the thesis Seeing the importance and potential of embedding emotions into web site design and the possibility of using Kansei Engineering as a requirement generation technique to improve user experience, this thesis is trying to explore a Kansei Engineering methodology that can transform implicit emotions and needs of users into design schemes to support web site design in terms of achieving the level of "pleasure". Inspired by Lokman's research paper Kansei/Affective Engineering and Web Design [6], this thesis employs its methodology as a blueprint but with a different angle and approaches to implement the steps and analyse data using statistical methods. In addition, Lokman's paper lacks an explanation of advantages and limitations of using certain kinds of methods and technologies, which will be supplied in this thesis. The model Lokman developed in her research paper [6] will be introduced in next chapter. This thesis chose to improve the appearance of the web site of Engineering Management department of Technical University of Denmark (DTU) as a sample project to experiment the implementation and effects of applying Kansei Engineering to web design. The project focus on the homepage of the web site because it gives first impression of the whole site and other pages can easily follow its style. Additionally, with further studies and experiments, the methodology used in the thesis can be applied in other domains to help designers better understand users’ desires and design the products users really like.
4
Kansei Engineering and Web Site Design
CHAPTER 2
Kansei Engineering An introduction of Kansei Engineering is given in this chapter in terms of its definition, measurement, a general model, and application in web site design. The model developed by Lokman [6], which the thesis builds on, is also introduced. Last, the methodology used in the thesis is illustrated.
2.1 What is Kansei Engineering? The expression "Kansei" has its origins in Japanese with no direct translation in English. In broad terms, it can be understood as immediate emotions or feelings when interacting with things, such as products and services. [7] More specifically, Nagamachi [8] explains Kansei as "an individual's subjective impression from a certain artefact, environment or situation using all the senses of sight, hearing, feeling, smell, taste as well as recognition". As the name suggests, Kansei Engineering regards technology that integrates Kansei with the engineering realms to penetrate people's Kansei into product design so that the products can trigger emotional responses and satisfy users. [9] The appeal of Kansei Engineering is that it presents a systematic way of collecting and understanding people's feelings and perspectives toward certain products through a series of physiological and psychological measurement and scientific methods. [10]
2.2 Kansei measurement Kansei, which is influenced by people's experience, knowledge, personality and sentiment and differs from person to person, is too implicit and complicated to be measured directly. Some standard measurement methods were developed in the following categories [8] based on externalisation, and have been successfully adopted in specified areas. 1. People's behaviours and actions 2. Words 3. Facial and body expressions 4. Physiological responses Methods that stand out among all the alternatives in terms of converting intangible Kansei into product development information are preferably based on semantic descriptions [11], where Semantic Differential Scale by Osgood [12] is one of the most widely used measurement methods partly due to its versatility [13]. Semantic Differential Scale is usually designed as a rating scale 5
Kansei Engineering and Web Site Design
between two bipolar adjectives with 5 or 7 rating points to measure the connotative meaning of concepts [14]. In Kansei Engineering, a set of words (usually adjectives) are selected from people describing their Kansei toward a certain product, which are so called "Kansei Words" [15]. Therefore, Semantic Differential Scales with Kansei Words have become a tool for measuring people's Kansei. Even though this method is not objective enough, it is more suitable than physiological measurements for the purpose of identifying a rough picture of Kansei. [16]
2.3 General model of Kansei Engineering Kansei Engineering has been well adapted in the domain of industrial design in Japan and Korea. [9]. Even though different types of procedure are applied in various contexts, a general model of Kansei Engineering methodology was developed by Schütte [11] based on the examinations of different Kansei Engineering applications. See figure 2. In this model, the chosen product domain is covered with both a semantic and physical perspective, in the form of ‘Semantic Space’ and ‘Space of Properties’. Semantic Space is a vector space defined by certain words, where products can be described. The certain words are selected by manual or mathematical methods. The Space of Properties is a collection of products representing the domain, and key features and properties of these products will be identified for further evaluation. By implementing different techniques into the steps, Kansei can be linked with product properties. After the test of validity a model will be built.
Figure 2 Schütte's Kansei design model [11]
2.4 Kansei Engineering and web site design In the research paper Kansei/Affective Engineering and Web Design [6] Lokman proposed a Kansei Engineering model that provided a systematic approach and a useful mechanism for designers to discover design concepts and details, and the model was validated by an example of designing online clothing web sites.
6
Kansei Engineering and Web Site Design
To help understand the model easily, explanation of key terms used in the model and this thesis is given next, which are
Kansei words: words (usually adjectives) selected from people describing their Kansei toward a certain product. Semantic Differential scale: a rating scale between two bipolar adjectives with 5 or 7 rating points. Kansei checklist: a Kansei measurement tool developed by organising Kansei words into semantic differential scales. Semantic Space: a vector space where products can be described, defined by certain words. The certain words are selected by manual or mathematical methods. Design element: the parts and units within the basic structure of a web site. Items: the properties of design elements. Categories: specific attributes of items in a web site.
The illustration in figure 3 is presented to help understanding the terms, which are underlined in the illustration.
Figure 3 Key terms used in the thesis
Having had a better understanding of the terms, let us explore Lokman’s model. Four levels of the model are illustrated in figure 4. Level 1, synthesising the specimens, includes two different procedures, both of which have four steps. Procedure 1 (the bottom one) is suitable for designing products that already exist in the market while Procedure 2 is specially used for designing new products. Procedure 1 starts with the task of collecting samples with visible differences from existing products in the market, following by investigation of design elements in all samples. After that, design elements are further classified into items and categories. At last, according to a set of rules,
7
Kansei Engineering and Web Site Design
valid specimens are selected from initial collections. On the contrary, procedure 2 is largely based on designers' inspiration and creation in relation to the target products. In level 2, work is done to establish the Kansei checklist. Level 3 briefly describes determination of Kansei concept and requirement, where users are recruited to evaluate product specimens on the Kansei checklist and results from the evaluation tests are used to find links between Kansei and product properties after being analysed using mathematical methods. The final level, level 4, aims at building and testing a prototype of the newly designed product based on the results from level 3. Designers' creativity and knowledge are also dispensable in the process to make a successful product.
Figure 4 Lokman's Kansei design model [6]
2.5 Methodology of the thesis The methodology of this thesis builds on Lokman’s model (figure 4), using the structure of the four levels to transform implicit emotions of users into design details. However, steps and methods in each level used by this thesis are very different from Lokman’s research paper [6]. In addition, this thesis provides detailed explanation of usage and limitation of the used methods which was not presented in Lokman’s paper. Figure 5 shows the construction of the methodology used in this thesis. Next chapters will start showing the implementation of Kansei Engineering in the context of web site design.
8
Kansei Engineering and Web Site Design
Figure 5 Methodology of this thesis
9
Kansei Engineering and Web Site Design
CHAPTER 3
Synthesising specimens In this chapter web site specimens were selected and synthesised for two purposes. First, properties and key features of web site were identified by investigation of design elements. Second, the specimens would be used for the evaluation session in later chapter. The procedure involved two parts, collection of specimens and investigation of design elements. Since this thesis was working on the web site of engineering management department of DTU, specimen selection should focus on the similar domain. Therefore, specimens were chosen from web sites of business school and department of engineering management.
3.1 Collection of specimens The specimen selecting procedure was based on random collection but careful considerations, hence, criteria were identified as follows: 1. There should be visible differences between selected web site specimens, in terms of colour, layout, typography, pictures, etc. 2. Specimens should be web sites of business schools or management departments of universities. 3. The language used by the specimens should be English. 4. Brand effect should be decreased as much as possible. People may have intention to like or dislike a web site not because of its good or bad interface design but its university's fame. Therefore, well-known universities like Harvard and Oxford should not be considered in the collection. 5. Due to limited time and labour and other resources, number of specimens can not be large. 6. The web site of engineering management department of DTU is included as a specimen, even though it may be known by most test subjects. The purpose is that evaluation will be given to each specimen from later procedures and it will be helpful to know what users think about the current design of the web site. On the basis of these criteria, nine American universities ranking from 300 to 500 were randomly chosen on the list of "Ranking Web of World Universities" [17]. Reasons behind the decision were that: first, universities ranking from 300 to 500 are not well-know enough but still count as good ones; second, it would be easier to find non-American test subjects around DTU, who probably had not heard of those less popular universities from USA before. Together with the web site of DTU management, ten specimens were selected, waiting for further investigation. A snapshot of specimens is shown in figure 6.
10
Kansei Engineering and Web Site Design
Figure 6 Snapshot of Specimens [18]-[27]
3.2 Investigation of design elements In the context of web site design, design elements mean the parts and units within the basic structure of a web site that are commonly used by web designers and understood by web site users, like header, menu or main body. To get a clear categorisation of the design of web sites, these elements are broken down into items and categories, summarised from all of the specimens. As the illustration in chapter 2 indicates (see figure 3), items regard the properties of each design element such as header size and header background colour, and categories mean the specific attributes of items in each specimen, for example, the header background colour of a specimen is red, yellow or blue. As shown in table 1, 30 items were identified according to the characteristics of the specimens. Each specimen was investigated based on the 30 items to form the matrix of category. Table 2 demonstrates the categories of the ‘header background colour’ item, in which the mark ‘X’ means the category fits the specimen. The full version can be seen in Appendix A. With identification of items and categories, key features and properties of the specimens were well organised and recorded, and the categories would be used as independent variables for statistical analysis in chapter 7, which could contribute to discovering the relations between Kansei and web sites and proposing a design scheme.
11
Kansei Engineering and Web Site Design
Design elements
Specification
Items
Page
Page of a web site
Page background colour / size
Header
Head section of a web site
Header background colour / background style/ size
Top menu
Menu on top of a web site
Top menu existence / background colour / font size / font colour / style
Left menu
Menu on the left part of a web site
Left menu existence / background colour / font size / colour / style
Main body Main section of a web site
Main body background colour / title font colour / title font size / text font colour / text font size
Footer
Bottom section of a web site
Footer size / background colour / font colour / font size
Picture
Pictures displaying Number of Picture / number of large picture / number of of campus life medium picture / number of active picture
Title
College title
college title font size / college title font colour Table 1 Items identified from specimens
Specimen
Header background colour Dark red
1 2 3
Dark blue
Blue
Black
Dark green
Green
White
x x x
4
x
5
x
6
x
7
x
8 9
Black & red
x x
10
x Table2 Example of categories
12
Kansei Engineering and Web Site Design
CHAPTER 4
Establishment of Kansei checklist The Kansei checklist is a very important tool in Kansei Engineering that can measure intangible Kansei by manageable scales with words. As introduced before, Semantic Differential (SD) scale is used to form the Kansei checklist with deliberately selected Kansei words. The focal point in this chapter is the mechanism of synthesising Kansei words.
4.1 Synthesising Kansei words The process of synthesising Kansei words is rather complicated since the words can not only describe product domain [11] but also imply users' emotional responses towards a certain product. Thus, more attention should be paid on gathering proper Kansei words. This section took a more rigorous and systematic approach for choosing the proper Kansei words than the previous research by Lokman [6] which the thesis builds on. In Lokman’s paper [6] a simple approach for the selection of words based on frequency of appearance in web design guidebooks, web sites, research papers and journals, and general words related to describing web sites. A common technique used in Kansei Engineering is to collect words from various sources until no new words come out and then span the structure of Kansei words by manual expert or statistical methods. [11] The model used in this thesis for synthesising Kansei words contained three steps and two filters. For the purpose of implementation of this model, a literature review on Kansei Engineering and web design was conducted and methods such as interviews and Kappa test were also used. From figure 7 the structure of this model can be seen clearly. Details of implementation will be described in next sections.
13
Kansei Engineering and Web Site Design
Figure 7 Model of synthesising Kansei words
4.1.1 STEP 1: Initial collection of Kansei words The process of synthesising Kansei words starts with a wide collection of related words. As indicated in figure 7, a set of Kansei words were pulled together through three different ways: l. Words collected from articles regarding principles of web design and research papers on emotional design. 2. Students from the department of management (who are the main users of the DTU management web site) and computer science (who have knowledge and experience of web design) were interviewed and asked to write down a few words to describe their feelings and expectations of web sites based on their experience of surfing the internet. 3. Five web sites of universities ranking after 500 on the list of "Ranking Web of World Universities" [17] were randomly chosen as testing samples. Participants were asked to view these samples for a few minutes and then describe their feelings about these web sites using adjectives. A total of 75 words were gathered together, including both positive words (like pretty, nice) and negative words (like boring, childish), some of which were mentioned many times by participants. The initial collection of word through three different ways is shown in Appendix B.
4.1.2 STEP 2: Removing meaningless words (first filter) This filter aims to remove two kinds of words: the ones that do not fit in the context of web design and words that have similar meaning. By doing this words passing through the filter will be more significant and suitable for describing the emotions evoked by a web site.
14
Kansei Engineering and Web Site Design
First, ten words which were not suitable for describing appearance of web sites were removed such as ‘fast’ and ‘visual. Second, by using the Oxford dictionary and "WordNet" [28], a database for English language that groups words into sets of synonyms, the rest of the words were sorted by similarity and dissimilarity of meaning, i.e. synonym and antonym, which ended up with 20 different groups. Figure 8 is an example of word grouping. Words in brackets are antonyms of other words in the same group. The whole word grouping can be seen in Appendix C. On the basis of aforementioned word categorisation, twenty words were picked out according to the following rules: 1. From each group the most frequently mentioned word by participants is selected. If two or more words have the same power, just pick one of them randomly. 2. Words that do not have synonyms and antonyms in the initial collection are all selected. 3. Only choose positive words.
Figure 8 Example of word grouping
Table 3 shows the selected words after the first filter. Beautiful
Well-structured
Exciting
Professional
Attractive
Refreshing
Bright
Dynamic
Modern
Creative
Simple
Enjoyable
Relaxing
Futuristic
Delicate
Elegant
Comfortable
Smart
Academic
Powerful
Table 3 Words selected after filter 1
4.1.3 STEP 3: Categorising words against a model of emotion (second filter) The idea of the second filter is to categorise the twenty selected words against a model of emotion, by which typical reactions of users to products are categorised based on theoretical thoughts. Thus, words taken from each of the categories will be more representative and comprehensive.
15
Kansei Engineering and Web Site Design
Emotions have been classified by different scientists at different times in a number of ways and theories, among which Desmet's [29] emotional levels of Objects, Agents, Events and Norman's [30] Visceral, Behavioural, Reflective are very famous. After careful consideration and the comparison of many models, Goldman's [31] eight categories of evaluative aesthetic terms were chosen because they are used for art criticism and evaluation, which is appropriate for the situation of web design since the appearance of a web site can be seen as artwork. Moreover, the categories are helpful for expressing the essence of what aesthetic terms convey. [32] The eight categories together with some examples are summarised in table 4.
Category
Example
Broadly evaluative
beautiful, ugly, sublime, dreary
Formal
balanced, graceful, concise
Emotional
sad, angry, joyful, serene
Evocative
powerful, stirring, amusing, hilarious, boring
Behavioural
sluggish, bouncy, jaunty
Representational
realistic, distorted, artificial
Perceptual
vivid, dull, flashy
Historical
derivative, original, conservative Table 4 Goldman's eight categories [31]
However, the categories of ‘Representational’ and ‘Historical’ did not fit the context of describing emotions evoked by web site and for that reason only the other six categories were used. 4.1.3.1 Kappa test The technique of organising words into the six categories was Cohen's kappa test [33], a statistical measure of agreement for categorical items between two raters. Detailed description and method of calculation can be seen in Appendix D. Two master students from DTU management were invited to join the experiment. At the beginning of the test, an introduction of the testing mechanism and basic knowledge about Goldman's categories were given to the participants. Their task was to put the twenty words into the six categories based on their comprehension and experience. Each word could only be seen in one category and participants were allowed to skip words that they did not know or could not decide where to put. The procedure was quite smooth largely due to sample words being provided for each category (see table 4), which made the categories more easily understood. The categorisation result is shown in table 5. The numbers in the table indicate the degree of agreement between two participants. For example, the number ‘3’ in the circle means there are three words placed under the category of ‘Broadly evaluative’ by both participants, and the number ‘2’ in the circle shows that two words were categorised into the ‘Formal’ category by one participant but the ‘Broadly evaluative’ category by another. 16
Kansei Engineering and Web Site Design
Table 5 Categorisation results between two participants
The kappa value was calculated at 0.43, which, according to Altman [34] (see table 6) means that the strength of agreement between the participants was moderate. Thus the categorisation result was valid and eleven words that were put in same categories by both participants were picked out and grouped into the six categories mentioned above. Value
Strength of agreement
<0.2
Poor
0.21~0.4
Fair
0.41~0.6
Moderate
0.61~0.8
Good
0.81~1
Very good
Table 6 kappa test value interpretation [34]
4.1.3.2 Final Kansei words The final Kansei words were selected by the following rules: 1. Choose the most frequently mentioned word from each category. 2. Two words are selected from the category "Broadly evaluative" because this category is very general and the two words have equally strong power. 3. Synonyms of the chosen ones can be used as backup words in the pilot test. 4. Make the words into bipolar pairs for the purpose of developing Kansei checklist later. The final Kansei words are presented in table 7. Kansei Words Beautiful Modern
Category Ugly
Broadly evaluative
Outdated
Broadly evaluative
Well-structured
Disordered
Formal
Enjoyable
Unpleasant
Emotional
Boring
Evocative
Exciting Dynamic Bright
Lifeless Dull
Behavioural Perceptual
Table 7 Final Kansei words 17
Kansei Engineering and Web Site Design
4.2 Development of Kansei checklist Seven pairs of Kansei words were organised into 5-point semantic differential (SD) scales in order to form the Kansei checklist, which would be used during the web site evaluation process in the next chapter to explore people's Kansei toward web sites. The scale values were 2, 1, 0, -1, and -2 so that evaluation responses would be conveyed to these values. But test subjects would not be informed about the scale values. The structure of the Kansei checklist can be seen from table 8. It has been proven that five SD scales yield reliable results in similar studies [12], thus findings from the checklist containing seven SD scales will be trustworthy.
Table 8 Kansei Checklist
18
Kansei Engineering and Web Site Design
CHAPTER 5
Kansei measurement In this chapter, Kansei measurement was performed to discover people's Kansei responses when interacting with different web sites. The process was conducted by an online survey consisting of the Kansei checklist as the measurement tool and the ten specimens with test subjects. Though face to face interview would be the best way to do the survey, after considering time and resource limitation an online survey was thought the better choice as a quicker and easier way to recruit more subjects in a short time. One problem with taking this approach was that the total number of test subjects could not be known until the survey was closed, which introduced a risk of not having sufficient responses to make the survey statistical valid. Moreover, the evaluation process could not be conducted in a controlled and systematic manner since it totally depended on test subjects.
5.1 Online survey design The idea of the survey was to show links to each of the specimens together with ten sets of Kansei checklist. Test subjects would be asked to click every link and view the web site carefully for several minutes and then rate their feelings toward the web site on the checklist (see table 8). The same activity continued until all specimens were viewed and evaluated. To minimise bias and inertial thinking during the process, the order of Kansei words on the checklist would be changed for every web site. [6] Since the examination was about the appearance of the homepage, there was no need to touch any of the menus or links on the web sites.
5.1.1 Pilot test Two sessions of pilot tests were carried out to validate and improve the survey and very useful feedback and suggestions were obtained from these tests. 5.1.1.1 Pilot test 1 The first session was carried out with a master student from the DTU. It took the participant about 20 minutes to finish the task. During the test he had no problem understanding and using the words for evaluating web sites and he claimed enjoying the test to some extent. Some useful opinions were gained as follows:
19
Kansei Engineering and Web Site Design
1. The participant had never heard of the universities before except for DTU, but he said it did not influence his judgement. 2. Large pictures especially active ones had big impact on his judgement during the process of evaluation. On the contrary, little attention had been paid to some tiny things like the menu on the very top of web sites. 3. With the evaluating process going on the participant started to compare the one he was viewing with the previous ones, which made him feel that the rating given to the first several ones may not be fair. 5.1.1.2 Pilot test 2 This session was conducted with two professors from DTU engineering management department. The testing process was similar to the first one. In addition to the issues mentioned above, two more suggestions were indicated: 1. It would be better to have a timer on the survey so that to give subjects a clue as how long they should spend on each web site. 2. Should avoid outliers. A method suggested was that: one of the first three evaluated web sites would be tested again at the end of the survey. This consideration was based on the hypothesis that the subject who gives very different answers to the same questions either does not treat the survey seriously or has inconsistent judgment during the evaluation process. The suggestion of avoiding outliers is very practical and the method above is an effective way to test outliers. However, in this case it will be very difficult to define the degree of difference that detects invalid answers. In addition, web site evaluation is largely based on subjective perception, so it is normal that someone feels good about a web site at first but does not like it after comparing with other web sites. Due to the reasons above, this method would not be used in the survey. But outliers would be detected in another way, which will be mentioned in later section.
5.1.2 Final survey design The survey was improved based on feedback from the pilot tests. Before answering questions, a picture show including snapshots of the ten tested web sites would be given to let test subjects have an overview of what the web sites look like. Figure 9 gives an example of the survey questions. Due to the function limitation of the survey template the Kansei checklist could not be set up exactly like the one table 8, but test subjects were informed about how to use if before doing the survey. The online survey can be found at the following link: http://www.surveymonkey.com/s/LWNHDFL.
20
Kansei Engineering and Web Site Design
Figure 9 Example of survey questions
5.2 Web site evaluation The survey was sent out through email, SMS, social networks like Facebook and placed on personal homepage [35]. 45 test subjects answered the survey within nearly one month, among which 36 subjects finished all the questions while the other 9 left part of the survey unanswered. General rules of how many subjects are needed for a statistically valid survey are based on four factors, size of population, segmentation analysis desired, degree of variance in response, and tolerance of error. [36] In Kansei Engineering methodology the population of subjects varies depending on objectives and measurement tools. [6] Nagamachi [37] suggested that the number of subjects for this kind of research was around 30 - 50. Therefore, the result of having 36 subjects was acceptable for this survey.
5.3 Detecting outliers Grubb’s test is a statistical method to detect outliers in a univariant data set assumed coming from a normally distributed population, which spots one outlier at one round. [38] A detailed description and method of calculation can be seen in Appendix E. To run this test, two issues had to be clarified. First, data gathered from the survey was assumed to obey normal distribution because Grubb's test is based on the assumption of normality. Second, the test would be processed seven times since the Kansei checklist contains seven pairs of words but Grubb's test can only deal with a univariant data set. Grubb's test was operated by an online outlier calculator - QuickCalcs [39]. This resulted in four responses being kicked out of the data set and the other 32 sets of data would be remained for design scheme analysis in the next chapter. These test subjects were 17 Chinese, four Danish, four Lithuanian, two Indian, two Bulgarian, one Spanish, one English and one Croatian aging between 18 and 30 years old with an equal distribution of gender.
21
Kansei Engineering and Web Site Design
CHAPTER 6
Design scheme analysis The aim of this chapter is to describe the integration of Kansei and web site design, and analyse the design scheme for improving the web site of engineering management department of DTU. Multivariate analysis was used to uncover the relations between Kansei and different web sites, whose outcomes provided guidelines for new design. Factor Analysis was used to propose a general outline while Partial Least Square analysis was performed to present detailed guidelines. These two methods were also used in Lokman’s research paper [6]. However, this thesis investigated the analysis results in a different way, and detailed explanation of advantages and limitations of doing the analysis was also provided. For the sake of convenience, we use positive words from each pair of Kansei words to represent the Kansei checklist. For example, "beautiful" means the scale of "beautiful ----- ugly". To do the multivariate analysis, the mean value of evaluation data obtained from the 32 survey responses was calculated for each Kansei word of each specimen. The decision of using mean value over median was based on thoughtful consideration, which will be discussed next. A Semantic Differential (SD) scale (the tool commonly used for Kansei measurement), was hoped to be treated as an ordinal scale from statistical angle. [14] However, the ordinal measurements only describe order, not degree of difference between measured items [40], so there are arguments about using mean or median value when operating on ordinal scales. On the one hand, median value, the middle-ranked item, are commonly used to describe the central tendency of a group of items when using ordinal scales, but precision and dispersion of the data will be affected since values of other items are not involved at all. Mean value, on the other hand, does not have a valid interpretation on ordinal scale, and it is often influenced by outliers that may be at the extremes of the data set. But mean value is also more informative than median value because it uses all the data to do the calculation. However, it is also argued that SD scale can be seen as interval scale because the neutral response serves as an arbitrary zero point and the intervals between scale values can be treated as equal. [14] Thus, it was acceptable to use the mean value, which was valid for interval data. Besides, outliers have already been screened by Grubb's test in the last chapter. Therefore, considering the analysis upwards, mean value is used to analyse data by statistical methods in this chapter.
22
Kansei Engineering and Web Site Design
6.1 General design outline This section was performed by Factor Analysis and was divided into two parts. First, the Semantic Space, a vector space defined by certain words where web sites can be described, was spanned. And then, within the Semantic Space the specimens were evaluated and ranked, and the highly rated specimens could arouse stronger positive Kansei responses than others. Thus, characteristics of these specimens were summarised to generate a general design outline.
6.1.1 Spanning Semantic Space Despite great endeavour to synthesise the Kansei words, they still could not be used for the Semantic Space directly because it is believed that redundancy of words, i.e. some of the words are correlated with one another, will happen due to the subjective perception. [10] Therefore, methods that can cut down redundant information by synthesising words was required, which would transfer Kansei words that may have relations to each other into much fewer unrelated factors that could make the Semantic Space easier to interpret. Factor Analysis (FA) is a statistical method widely used in social science, product management and other applied science. The basic idea of FA is to discover relations between observed, correlated variables and then simplify them with lower number of latent, uncorrelated variables, i.e. factors. [41] SPSS 20 (statistical analysis software) was used to undertake the FA and Principle Component Analysis was chosen as the extraction method. The variables were the seven Kansei words, and the data input was the mean value of the 32 survey responses for each Kansei word of each specimen. Two factors were retained according to the calculated results shown as a screen plot in figure 10, in which the eigenvalues of the factors are plotted from largest to smallest.
Figure 10 Screen Plot of FA
23
Kansei Engineering and Web Site Design
When working on a screen plot, people look for a "bend" in the eigenvalues to decide where to stop the retention of factors. [42] Thus, for the data above, it was clear that only the first two factors should be retained. The result of factor loadings shown in table 9 indicates the correlation coefficients between Kansei words and the two extracted factors, where a high score means a word is highly related to a factor. Therefore, seven Kansei words were classified into two groups - the group of factor 1 consisted of dynamic, exciting, bright and modern, and the group of factor 2 included beautiful, enjoyable and well-structured. Hence, the Semantic Space was spanned, using the two factors as axes. (see figure 11)
Table 9 Factor loadings
Figure 11 Scatter Plot
How the ten specimens spread in the Semantic Space is shown in the scatter plot (figure 11) according to their factor scores. In the plot it is clear that the specimens can be divided into four groups. Web sites at the right top corner (group 1) have higher scores on both of the criteria so they can be reckoned to evoke the strongest positive Kansei responses among the 10 web sites. On the country, web sites at the left bottom corner (group 3) are not so good at arousing positive
24
Kansei Engineering and Web Site Design
Kansei responses. The other two groups, group 2 and group 4 are only considered good with respect to one criterion, so their ranking is higher than group 3 but lower than group 1.
6.1.2 Proposing general design outline The result of FA offered an overview of relations between Kansei and web site designs and a basic structure of design scheme. We could identify characteristics from highly rated specimens, for instance, having more pictures especially large ones and distinct colour themes. Figure 12 is a general outline for the new design summarised from specimens with high marks. However, these were not enough to provide specific guidelines, so further analysis to uncover associations between Kansei words and detailed design in terms of items and categories would be performed by Partial Least Squares analysis.
Figure 12 General outline for new design
6.2 Detailed design guideline Partial Least Squares (PLS) analysis is a statistical method used to find relations between two matrices by creating a liner regression model. [43] Comparing to other regression methods, PLS analysis can provide more rational and informative results, especially when the input data set is not big and the variables are related (as shown in FA some Kansei words are related to each other).
25
Kansei Engineering and Web Site Design
Therefore, in this case PLS was applied to link the Kansei words with design items and categories so that we could find out guidelines for the new design. PLS analysis was also conducted by SPSS 20. The dependent variables were the seven Kansei words, whose values were the same as used in FA analysis. One of the dependent variables (Bright) and part of its values are shown in table 10. The independent variables were the categories concluded from chapter 3. For the purpose of using PLS, the values of categories were dummy variable, i.e. 1 or 0. For instance, specimen 2 had gray page background colour so its value of this category was 1; while specimen 3, which did not fit this category, had the value 0. (See table 10). Calculation of PLS analysis was also conducted by SPSS 20. Table 11 (excluding the columns of ‘mean value’ and ‘variance’) demonstrates an example of the analysis result regarding ‘header background colour’, indicating how the categories influence people's responses on each of the seven Kansei words: higher score means bigger influence and minus numbers show negative impact. The full version of PLS analysis result is in Appendix F.
Table 10 Sample variables of PLS
Categories
Kansei words (dependent variables) Mean Variance
(independent
value
variables) Head background
modern
colour
well-
enjoyable
exciting
dynamic
-4
(10 )
bright beautiful
structured
Dark red
0.041
0.073
0.04
0.017
0.014 0.029
0.064 0.04
5.0
Dark blue
0.029
-0.002
0.008
0.023
0.042 0.018
0.008 0.018
2.2
Blue
0.029
0.023
0.044
0.051
0.022 0.025
0.05 0.035
1.7
Black
0.013
-0.033
-0.022
0.019
0.02 0.011
-0.041 -0.005
6.9
Dark green
-0.029
-0.024
-0.003
-0.026
-0.027 -0.02
-0.011 -0.02
0.92
Green
-0.066
-0.076
-0.062
-0.051
-0.042 -0.063
-0.07 -0.06
1.3
White
0.013
0.021
0.017
0.012
0.017 0.014
0.28
Black &Red
-0.072
-0.056
-0.066
-0.067
-0.08 -0.06
1.9
0.005
0.01
-0.049 -0.04
Table 11 Example of PLS analysis result
To form a detailed guideline one category was chosen for each item. The way to choose categories was that: for each category calculate the mean value and variance of the parameters regarding the seven Kansei words, and then choose the categories with bigger mean values. If more than two categories had very similar mean values, the one with smaller variance would be chosen. The 26
Kansei Engineering and Web Site Design
reason behind was that the category with bigger mean value had stronger positive impact on people’s Kansei toward web sites, and smaller variance showed the impact on the seven Kansei words were more balanced. In this way we intended to design a web site that could present combination and balance of all the seven Kansei words. As seen in table 11, the category ‘dark red’ was selected for the header colour. Detailed guidelines can be seen in table 12, where a specific category of each item is indicated. However, the result was obtained only from calculating regression of a set of evaluation scores and dummy variables by machine, so it is inevitable to have irrational combination of elements and categories in the guideline, for example, it is almost impossible to see the texts with the colour of blue in a blue background. Besides, a web site with higher scores does not mean that all of its elements are properly designed. Furthermore, how to merge the university's culture like its title and logo into the design should also be taken into account. For all these reasons, the final design scheme would be an integration of both guidelines from FA and PLS and other considerations, and of course designers’ creativity and inspiration also matter.
Page background colour
Gray
Page size
Medium
Header size
Medium
Header background colour
Dark red
Header background style
Mixed with picture
College title font size
Medium
College title font colour
White
Top menu existence
No
Left menu existence
Yes
Left menu background colour
White
Left menu font size
Large
Left menu font colour
Black
Left menu font style
Bold
Main body background colour
Blue
Main body title font colour
Blue
Main body title font size
Medium
Main body text font colour
Black
Main body text font size
Normal
Footer size
Large
Footer background colour
White
Footer font size
Mixture of large and small font
Footer font colour
Blue & gray
Number of picture
4~6
Number of large picture
1
Number of medium picture
5
Dynamic picture
Yes Table 12 Detailed guideline 27
Kansei Engineering and Web Site Design
CHAPTER 7
Prototyping and testing This chapter developed a web site prototype using the results from last chapter together with basics of Graphic Design and tips of web site design as well as practical considerations. Then a test was played to validate the success of the implementation of Kansei Engineering in web site design.
7.1 Prototyping As discussed in chapter 6, it is not rational to follow exactly what the guidelines state, so that the results from statistical analysis should only be used as suggestion and inspiration to designers. The new design also relies on technical expertise and practical considerations. It should be noted that the text on the homepage of DTU management web site was retained in the prototype. Pictures were selected from the whole DTU management web site to reflect campus life at DTU management, including teachers, students, environment and industrial collaboration. Figure 13 illustrates the prototype, whose basic structure was based on the general outline obtained from the FA result (see figure 12). Examples of how to combine and harmonize the guidelines with design expertise and practical issues are given below, and also highlighted in figure 13. 1. In the detailed guidelines the colour of header was dark red, but it was not a proper choice in this case because part of the DTU logo (on the left side of the header) was also red. Therefore, blue, the second best choice (see table 11), was used as the header colour. Additionally, the application of colour gradient created a sense of depth, making the header seem not dull. 2. The search box and mini picture at the right end of header played the role of keeping the header balanced. 3. Dynamic pictures (four large size pictures displaying in turn) were the focal point of the whole page, making the web site seem lively. 4. Five pictures of medium and small sizes were included to give a vivid impression to users. 5. The two units were given the same style to show their relations, and at the same time separate them from the left menu.
28
Kansei Engineering and Web Site Design
Figure 13 Prototype
7.2 Testing This section was performed to test the success of the prototype, to see if there was any difference in users' Kansei responses after applying Kansei Engineering to web site design.
7.2.1 Obtaining evaluation data As can be seen from the scatter plot (figure 11) ten specimens are divided into four groups, which represent their different grades in terms of achieving the "level of pleasure" to satisfy users. Hence, from each of the four groups one web site was chosen to complete the test together with the prototype. It should be mentioned that the web site of DTU management was chosen from group 3, so the test could not only indicate the ranking of the prototype among web sites with different grades but also check if the prototype has improved the original one and aroused stronger positive Kansei responses in users. 29
Kansei Engineering and Web Site Design
The five new specimens were then evaluated following the same procedure described in chapter 5. In total 15 valid responses were selected from all of the answered surveys, and the data was analysed by FA again, whose result (a new scatter plot in figure 14) was used to make the comparative analysis. At this time the two factors describing the Semantic Space were beautiful, bright, modern, enjoyable (factor 1) and dynamic, exciting, well-structured (factor 2).
7.2.2 Comparative analysis From the new scatter plot (see figure 14), the prototype sits at the very top right corner among all the five specimens, which means it aroused the strongest positive Kansei in users when doing the test. Comparing to the web site of engineering management department of DTU (No. 10) which is at the bottom part of the plot, the prototype has made a significant improvement in terms of approaching the level of ‘pleasure’ to meet the users’ needs. The result has provided evidence that the Kansei Engineering methodology used in this thesis has successfully supported the appearance design of web site, not only giving designers a better understanding of what users need but also guidelines and inspirations of designing web sites that evoke positive emotions in users.
Figure 14 New scatter plot
30
Kansei Engineering and Web Site Design
CHAPTER 8
Conclusion The thesis has explored the methodology built on Lokman’s model [6] and applied Kansei Engineering into web site design, by which users' needs and emotions were connected with the design details and the newly designed web site did evoke stronger positive emotions in users. With the help of the Kansei checklist, a web site evaluation session was conducted to uncover the relations between emotional responses and web sites. Factor Analysis and Partial Least Square analysis were performed to generate guidelines for the design scheme. The result has proved that the Kansei Engineering methodology in this thesis played a significant role in web site design in order to approach the "pleasure" level of users' needs.
8.1 Limitations Due to multiple restrictions, the evaluation process of web sites was conducted by an online survey, which may suffer the following problems. First, the target groups visiting the web site of DTU management are students, teachers and potential applicants of this department, but the online survey could not guarantee sources of test subjects. Second, the evaluation process was not able to be acted in a controlled and systematic manner since it was largely depending on subjects' activities. If conditions permit, it will be beneficial to have more specimens with different characteristics, which will offer more choices for the new design. Moreover, this project was working on an existing web site and trying to make improvements, so it had more restrictions than creating a totally new web site. For example, texts on the original web site could not be removed or changed without agreement with the department.
8.2 Future work Further research and experiments will be performed in order to broaden the scope of application of the methodology used in the thesis. Since web sites are also designed products, applying the methodology to other product design domain is very promising, only with changes of some details and methods to comply with the chosen product domain. Therefore, designers will have a better understanding of users’ desires and can design the products users really like in a systematic and easier way.
31
Kansei Engineering and Web Site Design
List of references [1] Nagamachi, M. (1992) Kansei Engineering and its method. Management System, 2(2), 97-105. [2] Jordan, Patrick W. Designing Pleasurable Products. London and New York: Taylor & Francis, 2000. ISBN 0-748-40844-4. [3] Hirschman, E.C., & Holbrook, M.b. (1982). Hedonic consumption: Emerging concepts, methods and propositions. Journal of Marketing, 46, 92-101. [4] Steve Krug (2005) Don’t Make Me Think: A Common Sense Approach to Web Usability [5] About Jakob Nielson. http://www.useit.com/jakob/ [6] Lokman A.M. (2011) Kansei/Affective Engineering and Web design. Taylor and Francis Group, LLC. [7] Drucker, P (2001) What is Kansei Engineering? http://instinctivechoice.co.uk/Article/23/What_is_Kansei_Engineering [8] Nagamachi, M. (2001). Workshop 2 on Kansei Engineering. Proceedings of International Conference on Affective Human Factors Design, Singapore, 2001, p. [9] Lokman, A.M., Md. Noor N.L. & Nagamachi, M. (2009). ExpertKanseiWeb: A Tool to Design Kansei Website. J. Filipe and J. Cordeiro (Eds.): ICEIS 2009, LNBIP 24, pp. 894-905, 2009. [10] Lokman, A.M. (2010) Design & Emotion: The Kansei Engineering Methodology. Faculty of Computer and Mathematical Science, University Teknolgi MARA, (UiTM), Malaysia. ISSN 2231-7473. [11] Schütte, S. (2005). Engineering emotional values in product design- Kansei Engineering in development. Institution of Technology. Linköping, Linköping University. [12] Osgood, C.E., Suci, G., & Tannenbaum, P. (1957) The measurement of meaning. Urbana, IL: University of Illinois Press [13] Himmelfarb, S. (1993). The measurement of attitudes. In A.H. Eagly & S. Chaiken (Eds.), Psychology of Attitudes, 23-88. Thomson/Wadsworth. [14] Semantic Differential, Wikipedia. http://en.wikipedia.org/wiki/Semantic_differential [15] Nagamachi, M. (2003). The story of Kansei Engineering. (Vol.6). Tokyo: Japanese Standards Association.
32
Kansei Engineering and Web Site Design
[16] Nagasawa, S. y. (2002a). Kansei and Business. Kansei Engineering InternationalInternational Journal of Kansei Engineering, vol. 3, p. 2-12. [17] Ranking Web of World Universities. http://www.webometrics.info/ [18] Specimen 1. http://www.bc.edu/schools/csom/graduate.html [19] Specimen 2. http://www.kent.edu/business/mis/ [20] Specimen 3. http://www.montana.edu/cob/index.php [21] Specimen 4. http://cob.sfsu.edu/cob/index.cfm [22] Specimen 5.
http://www.cob.calpoly.edu/
[23] Specimen 6. http://belkcollege.uncc.edu/ [24] Specimen 7. http://www.freeman.tulane.edu/desktop.php [25] Specimen 8. http://kelley.iu.edu/management/ [26] Specimen 9. http://business.utsa.edu/ [27] Specimen 10. http://www.man.dtu.dk/English.aspx [28] The WordNet Home Page. http://wordnet.princeton.edu/ [29] Desmet, P. R. (2002). Designing Emotions. ISBN 90-9015877-4. [30] Norman, D. A. (2004). Emotional Design: Why We Love (or Hate) Everyday Things. New York: Basic Books. [31] Goldman, A.H. (1995). Aesthetic Value. Denver, CO: Wesview Press. [32] Pham, B. (1999). Design for aesthetics: interactions of design variables and aesthetic properties. Proc. SPIE IS&T/SPIE 11th Annual Symp., Electronic Imaging 99, pp. 364-371. [33] Cohen's Kappa. Wikipedia. http://en.wikipedia.org/wiki/Cohen's_kappa [34] Altman, D.G. Practical statistics for medical research. London: Chapman and Hall., 1991. [35] Thomas Howard's homepage. https://sites.google.com/site/thomasjameshowardhomepage/
33
Kansei Engineering and Web Site Design
[36] Statistical Confidence in a Survey: How Many is Enough? http://www.greatbrook.com/survey_statistical_confidence.htm [37] Nagamachi, M., Lokman, A.M. (2010) Innovations in Kansei/affective engineering. Industrial Innovation Series, A.B. Badiru (Ed.). Boca Raton, FL: CRC Press. [38] Grubb's test for outliers. Wikipedia. http://en.wikipedia.org/wiki/Grubbs'_test_for_outliers [39] QuickCalcs, outlier calculator. http://www.graphpad.com/quickcalcs/Grubbs1.cfm [40] Level of measurement. Wikipedia. http://en.wikipedia.org/wiki/Ordinal_scale#Ordinal_scale [41] Factor Analysis. Wikipedia. http://en.wikipedia.org/wiki/Factor_analysis [42] Daniel J. Denis, Ph.D., (2009) Factor Analysis II. University of Montana [43]. Partial least squares regression. Wikipedia. http://en.wikipedia.org/wiki/Partial_least_squares_regression
34
Kansei Engineering and Web Site Design
APPENDIX A – Investigation of categories Note: Items with * (for example Page size*) have specifications in the last form. Specimen
Page background colour White
Yellowish pink
1
Dark green
Gray& brown
Page size*
Dark Blue
Gray
Light green
L
x x
x
3
x
x
4
x
x
5
x
6
x x
x
8
x
x
9
x
x
10
x
Specimen Dark blue
Blue
Black
Dark green
Green
Header size* White
L
M
S
x x
x x
x x
5
x x
6
x x
7
x x
8 10
Black& red
x
4
9
x
Header background color Dark red
3
x x
7
2
S
x
2
1
M
x x
x
x
x x
x
35
Kansei Engineering and Web Site Design
Specimen
Header Background style Plain
1
Picture
Mix
College title font size* L
M S
x x
x
3
x
x
4
x
5
x
Blue
Gray
x
x
x
x
x x
7
x
x
8
x
x x
x
9
x
x
x
x
x x
Top menu existence Yes
No
1
x x
Black &grey
x
x
2
Black
x
6
Specimen
White
x
2
10
College title font colour
x Top menu background colour
Dark blue
Yellow
White
Blue &white
Purple
Black
-
-
-
-
-
-
x
3
x
-
-
-
-
-
-
4
x
-
-
-
-
-
-
-
-
5
x
6
x
7
x
8
x x x x
9
x
10
x
-
-
-
-
x x
36
Kansei Engineering and Web Site Design
Specimen
Top menu font size*
Top menu font colour
Top menu font style
L
M
S
Orange
Black
White &red
1
-
-
-
-
-
-
2
x
3
-
-
-
-
-
-
-
-
-
4
-
-
-
-
-
-
-
-
-
Bold
-
-
-
x
x
6
x
7
x -
x
x
x
x x
-
9
-
-
-
x
Left menu exist Yes
No
x
-
x
10
Specimen
Plain
x
5
8
White
-
-
-
x
x
x
x
Left menu background colour White &brown
Gray
White
1
x
2
x
3
x
x
4
x
x
5
x
Light blue
Left menu font size*
Yellow
L
M
x
S x
x
x x x x
x
6
x
-
-
-
-
-
-
-
-
7
x
-
-
-
-
-
-
-
-
8
x
9
x
10
x
x x
x
-
-
-
-
-
x -
-
-
37
Kansei Engineering and Web Site Design
Specimen
Left menu font colour Black
Dark blue
Left menu font style Plain
Bold
Main body Background colour White
Main body title font colour
Blue
R e d
Gra y
Blu e
1
x
x
x
2
x
x
x
x
3
x
x
x
x
4
x
x
Gre en
Bla ck
x
x
x
5
x
6
-
-
-
-
7
-
-
-
-
8
x
x
x
x
9
x
x
x
x
10
-
Specimen
x
Dark Blue
-
Main body title font size* L
M
1 2
-
x
x
x x
x
x
x
Main body text font colour
S
Black
x
x
x
3
Blue& black
Yellow &black
Green& black
Main body text font size* Blue
x x
x x
x
x
6
x
7
x
x x
x x
x
8
x
x
x
9
x
x
x
10
x
x
Small
x x
x
Normal
x
x
4 5
-
x
x
38
Kansei Engineering and Web Site Design
Specimen
Footer size* L
M
1 2
Footer background colour S
Yellowish pink
x
x
x
3 x
5
x
6
x
Yellow &white
Green &white
x
x
8
x
x x
x
x
10
x
Specimen
x
Footer font size* L
1
S
Mix
x
2
Footer font colour Red& gray
Blue& gray
Black
Gray
White+Gre en+Black
White
White& gray
x x
x
x x
4
x
5
x
x x
x
x
7
x
x
8
x
x
9 10
Blue
x x
6
Black
x
7
3
White
x x
4
9
Gray
x x
x x
39
Kansei Engineering and Web Site Design
Specimen
Number of picture 1~3
4~6
7~10
Y
x
x
1 2
Large picture*
x
0
x
2
3
Y
N
x
x x
x x
5
x
x
x
5
1
Active picture
x
x
3 4
N
Number of medium picture*
x
x
x
x
x
x
6
x
x
x
x
7
x
x
x
x
8
x
x
9
x
10
x
x
x
x
x
x
x
x
x
Specifications Page Size
Header Size
College title font size
L
M
S
L
M
S
L
M
S
Width> =1000 pix
850
Width< =850pix
Height> =115pix
80
Height< =80pix
Size >=24 pix
20
Size< =20pi x
Top menu font size
Left menu font size
L
M
S
L
Size= 13pix
Size=12pix
Size<12 pix
Size= 13pix
Main body text font size Normal
Size=10pix
M
S
L
M
S
Size=12pix
Size<12 pix
Size >=16 pix
Size=15 pix
Size< =14pi x
Footer size
Small
Size=12pix
Main body title font size
Footer font size
L
M
S
L
S
Height> =120pix
80
Height< =80pix
Size=12pix
Size<12pix
Picture size Large
Medium 5
Resolution>10 pix
4
Small 5
10
Resolution<104 pix
40
Kansei Engineering and Web Site Design
APPENDIX B – Initial collection of words Three ways to collect words: 1. Words collected from articles regarding principles of web design and research papers on emotional design. Beautiful
Classic
Creative
Familiar
Old-fashioned
Formal
Professional
Boring
Childish
Serious
Attractive
Powerful
Cool
Neat
Futuristic
Enjoyable
Orderly
Refreshing
Gorgeous
Relaxing
Comfortable
Exciting
Original
Grand
Impressive
Simple
Fun
Dynamic
Consistent
Messy
Elegant
Interesting
Lively
Modern
Clear
Outdated
2. Words collected from students writing down words to describe their feelings and expectations of web sites based on their experience of surfing the internet. The number in brackets mean how many times the word was mentioned. Academic(2)
Cosy
Fancy
Modern(4)
Rough
Alluring
Clear(4)
Fast(2)
Minimalist
Serious
Attractive(2)
Comfortable
Formal
Neat(4)
Simple(2)
Beautiful(3)
Disordered
Grand (3)
Orderly(2)
Smart(2)
Bright(2)
Delicate
Give confidence
Old-fashioned
Suggestive
Creative(2)
Dull(2)
Intuitive
Pretty
Thematic
Concise(3)
Dynamic
Impressive
Professional(3)
Visual
Characteristic(2 )
Elegant(3)
International
Quick
Well-structured( 2)
Complicated
Easy(2)
Informative(3)
Regular
3. Words collected from participants describing their feelings about five given web sites using adjectives. Attractive
Concise(2)
Disordered
Formal
Orderly(2)
Regular(2)
Beautiful(2)
Clear(3)
Dynamic(2)
Gloom
Old-fashioned
Shiny
Bright
Chaotic
Dull(3)
Impressive
Professional(2)
Stylish(2)
Bragging
Comfortable
Elegant(2)
Modern(3)
Pretentious
Short
Creative
Clean
Fashionable
Nice
Pretty
Wellorganized
41
Kansei Engineering and Web Site Design
APPENDIX C – Word grouping Words were grouped by similarity and dissimilarity of meaning, i.e. synonym and antonym, which ended up with 20 different groups. Words in brackets are antonyms of other words in the same group.
42
Kansei Engineering and Web Site Design
APPENDIX D – Cohen’s Kappa test Excerpted from Wikipedia. [http://en.wikipedia.org/wiki/Cohen%27s_kappa] Cohen's kappa measures the agreement between two raters who each classify N items into C mutually exclusive categories. The equation for the kappa test result κ is:
k
Pr(a) Pr(e) , 1 Pr(e)
where Pr(a) is the relative observed agreement among raters, and Pr(e) is the hypothetical probability of chance agreement, using the observed data to calculate the probabilities of each observer randomly saying each category. The equation for Pr(a) is:
Pr(a)
a , N
where a is the number of total agreement items and N is the number of all the items. The equation for Pr(e) is:
Pr(e) i 1 Pr(ec) i , C
where Pr(ec) is the probability of random agreement of each category, and its equation is:
Pr(ec) ( r1 ci ) * ( r 2 ci ) , N N where
r c means the number of items set in category 1
i
i by rater 1, and r 2 ci means the number
of items set in category i by rater 2. If the raters are in complete agreement then κ = 1. If there is no agreement among the raters other than what would be expected by chance (as defined by Pr(e)), κ = 0.
43
Kansei Engineering and Web Site Design
APPENDIX E – Grubb’s test Excerpted from ‘How Grubbs' test works’. [http://www.graphpad.com/library/BiostatsSpecial/article_39.htm] Statisticians have devised several ways to detect outliers. Grubbs' test is particularly easy to follow. This method is also called the ESD method (extreme studentized deviate). The first step is to quantify how far the outlier is from the others. Calculate the ratio Z as the difference between the outlier and the mean divided by the SD. If Z is large, the value is far from the others. Note that you calculate the mean and SD from all values, including the outlier.
Z
mean value SD
Since 5% of the values in a Gaussian population are more than 1.96 standard deviations from the mean, your first thought might be to conclude that the outlier comes from a different population if Z is greater than 1.96. This approach only works if you know the population mean and SD from other data. Although this is rarely the case in experimental science, it is often the case in quality control. You know the overall mean and SD from historical data, and want to know whether the latest value matches the others. This is the basis for quality control charts. When analyzing experimental data, you don't know the SD of the population. Instead, you calculate the SD from the data. The presence of an outlier increases the calculated SD. Since the presence of an outlier increases both the numerator (difference between the value and the mean) and denominator (SD of all values), Z does not get very large. In fact, no matter how the data are distributed, Z can not get larger than ( N 1) / N , where N is the number of values. For example, if N=3, Z cannot be larger than 1.555 for any set of values. Grubbs and others have tabulated critical values for Z, which is tabulated below. The critical value increases with sample size, as expected. If your calculated value of Z is greater than the critical value in the table, then the P value is less than 0.05. This means that there is less than a 5% chance that you'd encounter an outlier so far from the others (in either direction) by chance alone, if all the data were really sampled from a single Gaussian distribution. Note that the method only works for testing the most extreme value in the sample (if in doubt, calculate Z for all values, but only calculate a P value for Grubbs' test from the largest value of Z. Once you've identified an outlier, you may choose to exclude that value from your analyses. Or you may choose to keep the outlier, but use robust analysis techniques that do not assume that data are sampled from Gaussian populations.
44
Kansei Engineering and Web Site Design
If you decide to remove the outlier, you then may be tempted to run Grubbs' test again to see if there is a second outlier in your data. If you do this, you cannot use the same table. Rosner has extended the method to detecting several outliers in one sample. Critical values for Z. Calculate Z as shown above. Look up the critical value of Z in the table below, where N is the number of values in the group. If your value of Z is higher than the tabulated value, the P value is less than 0.05.
45
Kansei Engineering and Web Site Design
APPENDIX F – PLS analysis result Category
modern
well
enjoyable
exciting
dynamic
bright
beautiful
structured
Mean
Variance
value
(10 )
-4
Page background colour 0.009
0.54
-0.005
6
0.027
9
-0.061
2
0.0087
4
0.024
5.5
-0.02
0.92
0.014
0.52
0.016
0.36
-0.046
0.66
White
.006
.009
.009
.011
.008
-.004
.021
Yellowish pink
.013
-.033
-.022
.019
.020
.011
-.041
Dark green
.029
.055
.029
.006
-.030
.047
.050
Gray& brown
-.072
-.056
-.066
-.067
-.049
-.040
-.080
Dark Blue
.013
-.011
.005
.021
.046
-.006
-.007
Gray
.020
.056
.032
.006
-.014
.022
.045
Light green
-.029
-.024
-.003
-.026
-.027
-.020
-.011
L
.017
.007
.011
.018
.023
.004
.021
M
.021
.023
.015
.017
.005
.019
.013
S
-.057
-.045
-.039
-.053
-.043
-.034
-.051
Dark red
0.041
0.073
0.04
0.017
0.014
0.029
0.064
0.04
5.0
Dark blue
0.029
-0.002
0.008
0.023
0.042
0.018
0.008
0.018
2.2
Blue
0.029
0.023
0.044
0.051
0.022
0.025
0.05
0.035
1.7
Black
0.013
-0.033
-0.022
0.019
0.02
0.011
-0.041
-0.005
6.9
Dark green
-0.029
-0.024
-0.003
-0.026
-0.027
-0.02
-0.011
-0.02
0.92
Green
-0.066
-0.076
-0.062
-0.051
-0.042
-0.063
-0.07
-0.06
1.3
White
0.013
0.021
0.017
0.012
0.005
0.01
0.017
0.014
0.28
Black &Red
-0.072
-0.056
-0.066
-0.067
-0.049
-0.04
-0.08
-0.06
1.9
L
-.022
-.002
-.023
-.038
-.044
-.006
-.008
M
.013
.028
.021
.000
.007
.005
.034
S
-.027
-.019
-.032
-.032
-.041
-.008
-.016
Plain
-.037
-.046
-.043
-.028
-.022
-.027
-.032
Picture
.029
.023
.044
.051
.022
.025
-.041
Mix
.027
.039
.029
.010
.015
.019
.058
L
.011
.027
.005
-.005
.007
.011
-.050
M
.000
-.001
.023
.014
-.003
.003
-.016
S
-.011
-.027
-.020
-.004
-.005
-.013
-.022
White
.053
.074
.040
.025
.040
.029
-.033
Black
.033
.030
.021
.016
.007
.037
.010
Page size
Header background colour
Header size -0.020
2.6
0.015
1.6
-0.025
1.3
-0.034
0.785
0.0219
8.9
0.0281
2.7
0.0009
5.9
0.0029
1.6
-0.015
0.76
0.0326
11
0.022
1.4
Header background style
College title font size
College title font colour
46
Kansei Engineering and Web Site Design
Blue
-.012
-.020
-.004
-.001
-.015
-.009
.030
Gray
-.072
-.056
-.066
-.067
-.049
-.040
-.068
-.006
-.017
.001
.015
.039
-.030
.080
Y
-.008
-.003
.002
-.010
-.012
-.010
.020
N
.008
.003
-.002
.010
.012
.010
-.001
Dark blue
.029
-.002
.008
.023
.042
.018
.001
Yellow
-.029
-.024
-.003
-.026
-.027
-.020
-.008
White
-.066
-.076
-.062
-.051
-.042
-.063
.011
Blue &white
.029
.055
.029
.006
-.030
.047
.070
Purple
-.006
-.017
.001
.015
.039
-.030
-.050
Black
.020
.056
.032
.006
-.014
.022
.020
L
.029
-.002
.008
.023
.042
.018
-.045
M
-.007
.015
-.001
-.017
-.037
.003
-.008
S
-.020
-.023
-.001
-.006
.006
-.028
-.011
Orange
.029
-.002
.008
.023
.042
.018
.017
Black
-.054
-.056
-.037
-.043
-.039
-.047
-.008
White& red
.029
.055
.029
.006
-.030
.047
.045
White
.008
.022
.018
.011
.014
-.004
-.050
Plain
-.028
-.043
-.024
-.023
-.012
-.028
-.014
Bold
.019
.040
.026
.011
-.002
.017
.031
Y
.018
.016
.014
.013
.014
.020
-.032
N
-.018
-.016
-.014
-.013
-.014
-.020
-.017
White& brown
.013
-.033
-.022
.019
.020
.011
.017
Gray
-.024
-.032
-.033
-.025
-.004
-.012
.041
White
.046
.054
.047
.043
.035
.031
.040
-.029
-.024
-.003
-.026
-.027
-.020
-.067
.020
.056
.032
.006
-.014
.022
.011
L
.037
.041
.021
.021
.019
.027
-.022
M
.000
-.001
.023
.014
-.003
.003
.040
S
-.024
-.032
-.033
-.025
-.004
-.012
-.045
.029
.023
.044
.051
.022
.025
.004
Black& grey
-0.004
2.7
-0.060
1.4
0.0117
14
-0.003
1.3
0.0057
0.32
0.017
2.5
-0.020
1.0
-0.050
8.4
0.029
11
-0.007
8.6
0.0203
4.7
0.0104
8.0
-0.007
2.7
-0.0119
1.5
0.0193
2.0
-0.041
2.6
0.0259
8.7
0.0027
6.1
-0.025
1.1
0.0203
1.9
0.009
3.3
-0.016
0.06
0.0036
4.7
-0.013
6.7
0.0423
0.6
-0.028
3.7
0.019
4.8
0.0206
4.2
0.0109
2.5
-0.025
1.9
0.0283
2.4
Top menu existence
Top menu background colour
Top menu font size
Top menu font colour
Top menu font style
Left menu exist
Left menu background colour
Light blue Yellow Left menu font size
Left menu font colour Black
47
Kansei Engineering and Web Site Design
Dark blue
.005
.006
-.004
-.008
.004
.008
-.031
Plain
.005
.006
-.004
-.008
.004
.008
-.050
Bold
.029
.023
.044
.051
.022
.025
.004
White
-.029
-.055
-.029
-.006
.030
-.047
-.050
Blue
.029
.055
.029
.006
-.030
.047
.050
Red
.013
-.033
-.022
.019
.020
.011
-.050
Gray
-.006
-.017
.001
.015
.039
-.030
.041
Blue
.047
.055
.033
.023
.022
.041
.020
Dark blue
.029
.023
.044
.051
.022
.025
-.054
Green
-.029
-.024
-.003
-.026
-.027
-.020
-.050
Black
-.050
-.032
-.042
-.048
-.045
-.035
.011
L
-.019
-.009
-.011
-.025
-.018
-.007
.045
M
.026
.032
.023
.023
.044
.000
.014
S
.002
-.012
-.004
.009
-.011
.008
-.027
Blue
-.017
-.028
-.019
-.012
.004
-.014
.004
Blue& black
.053
.074
.040
.025
.040
.029
.037
Yellow& black
.029
.023
.044
.051
.022
.025
-.068
Green& black
-.066
-.076
-.062
-.051
-.042
-.063
-.050
Black
.029
.055
.029
.006
-.030
.047
.070
Small
-.016
-.002
-.003
-.017
-.012
-.012
-.050
Normal
.016
.002
.003
.017
.012
.012
-.005
L
.020
.056
.032
.006
-.014
.022
.005
M
-.014
-.030
-.005
-.001
-.002
-.015
-.045
S
.006
.008
-.006
-.001
.007
.006
.009
Yellowish pink
.013
-.033
-.022
.019
.020
.011
.008
Gray
.013
-.011
.005
.021
.046
-.006
.041
White
.053
.074
.040
.025
.040
.029
.007
Black
-.024
-.019
-.013
-.009
-.015
-.009
-.068
-.029
-.024
-.003
-.026
-.027
-.020
.016
-.066
-.076
-.062
-.051
-.042
-.063
.011
.028
.063
.034
.007
-.025
.039
.070
-0.003
1.9
-0.006
4.2
0.0283
2.4
-0.027
9.0
0.0266
9.0
-0.006
8.1
0.0061
7.3
0.0344
1.9
0.02
11.9
-0.026
1.9
-0.034
4.4
-0.006
5.5
0.0231
1.9
-0.005
1.6
-0.0117
1.4
0.0426
2.7
0.018
15
-0.059
1.3
0.0294
11
-0.016
2.6
0.0081
0.68
0.0181
5
-0.016
2.6
0.0041
0.3
0.0023
4.4
0.0156
4.8
0.0383
4.6
-0.022
4.3
-0.016
2.8
-0.050
8.4
0.0309
10
Left menu font style
Main body background colour
Main body title font colour
Main body title font size
Main body text font colour
Main body text font size
Footer size
Footer background colour
Yellow& white Green& white Blue
48
Kansei Engineering and Web Site Design
Footer font size L
-.008
-.001
-.012
-.014
-.001
-.019
-.054
S
-.013
-.020
-.007
-.001
-.010
-.003
.001
Mix
.028
.031
.022
.016
.016
.023
.019
Red& gray
.013
-.033
-.022
.019
.020
.011
-.030
Blue& gray
.029
-.002
.008
.023
.042
.018
.041
Black
.013
.028
.021
.000
.007
.005
-.008
-0.0156
3.3
-0.0076
0.55
0.0221
0.33
-0.0031
5.8
Footer font colour
Gray
.013
.003
.025
.037
.034
-.003
-.032
White+green+black
-.066
-.076
-.062
-.051
-.042
-.063
-.017
White
-.024
.000
-.021
-.034
-.044
.004
.070
White& gray
.020
.056
.032
.006
-.014
.022
.016
1~3
-.043
-.035
-.037
-.037
-.031
-.032
-.045
4~6
.034
.033
.036
.034
.021
.028
.045
7~10
.016
.007
.007
.008
.014
.009
-.044
Y
.006
.017
-.001
-.015
-.039
.030
-.007
N
-.006
-.017
.001
.015
.039
-.030
-.020
0
.015
.020
.018
.013
-.008
.018
.020
1
-.033
-.050
-.050
-.027
-.016
-.016
-.030
2
-.029
-.024
-.003
-.026
-.027
-.020
.068
3
-.006
-.017
.001
.015
.039
-.030
.011
5
.053
.074
.040
.025
.040
.029
.020
Y
.006
-.004
-.001
.015
.026
-.002
-.068
N
-.006
.004
.001
-.015
-.026
.002
.008
0.0227
2.7
0.0094
1.5
0.011
5.9
-0.054
3.8
-0.007
14
0.0197
4.7
-0.03717
0.27
Number of picture
0.033
0.54
0.00243
4.3
-0.00129
5.0
-0.00257
5.5
0.01371
0.98
-0.0317
2.0
-0.0087
12
0.0019
5.1
0.0401
3.5
-0.0057
8.9
0.0089
0.79
Large picture
Number of medium picture
Active picture
49
