櫥窗網站的視覺介面設計特色與使用者滿意度：使用者體驗的中介影響 - 政大學術集成

全文

(1)國立政治大學資訊管理學系. 碩士論文學位指導教授：蔡瑞煌博士、韓志翔博士. 學. ‧ 國. 立. 政治大. 櫥窗網站的視覺介面設計特色與使用者滿意度：. ‧. 使用者體驗的中介影響. y. Nat. er. io. sit. Promotion Website Visual Interface Design Features. n. a l User Satisfaction: v i and n Ch engchi U Mediating Effect of User Experiences. 研究生：陳冠伶中華民國：104 年 7 月.

(2) Content 摘要 ..................................................................................................................................................................... I Abstract ...........................................................................................................................................................II Introduction ............................................................................................................................ 1. Chapter 1 1.1. Background and motivation ............................................................................................. 1. 1.2. Research Purpose ................................................................................................................. 6 Literature Review ................................................................................................................. 7. Chapter 2 2.1.. Stimulus-Organism-Response framework .................................................................. 7. 2.2.. Web design .............................................................................................................................. 8. 2.3.. Aesthetic preference ......................................................................................................... 10. 2.4.. Storytelling .......................................................................................................................... 12. 2.5.. User experience .................................................................................................................. 12. 立. 政治大. ‧ 國. 學. Research Methods ............................................................................................................. 18. Chapter 3. ‧. Research object .................................................................................................................. 18. 3.1. National Palace Museum (NPM) ........................................................................... 18. 3.1.2.. iPalace Channel............................................................................................................. 19. sit. y. Nat. 3.1.1.. Research hypothesis and framework ......................................................................... 23. 3.2. io. Research hypothesis .................................................................................................... 23. 3.2.2.. Research framework.................................................................................................... 25. n. al. er. 3.2.1.. Ch. engchi. i n U. v. Research Variable and Definition................................................................................ 26. 3.3. 3.2.1.. Visual Aesthetic of Website Inventory (VisAWI) .................................. 26. 3.2.2.. Storytelling ........................................................................................................... 27. 3.2.3.. User experience ................................................................................................... 28. 3.2.4.. User satisfaction.................................................................................................. 30. 3.4. Experiment design and analysis way ......................................................................... 30. 3.5. New design interface of iPalace Channel (VI_ANIMATION) ........................ 33 Data Analysis ...................................................................................................................... 38. Chapter 4 4.1. Descriptive Statistics........................................................................................................ 38. 4.2. Reliability analysis............................................................................................................ 39. 4.3. Research Framework Analysis ..................................................................................... 41. 4.3.1. Degree to Aesthetic and Storytelling of Visual Interface .................... 41.

(3) 4.3.2. One-way Anova of User experience ........................................................... 41. 4.3.3. Regression analysis of Research Architecture component ................. 49. Chapter 5. Finding and conclusion ................................................................................................... 54. 5.1. Finding and conclusion ................................................................................................... 54. 5.2. Research limitations ......................................................................................................... 56. 5.3. Future research ................................................................................................................... 56. Reference ....................................................................................................................................................... 58 Appendix A: The Original and Revised Questionnaire Items ................................................... 71 I.. Visual Aesthetics of Website Inventory (VisAWI) .................................................... 71. II.. Storytelling ............................................................................................................................... 72. III.. User Experience ................................................................................................................. 73. IV.. User Satisfaction................................................................................................................ 75. 政治大 Appendix B: Complete questionnaire 立 (Chinese version) ............................................................ 76. ‧ 國. 學. Questionnaire-網頁介面設計美感的使用者體驗(A) ...................................................... 76 Questionnaire-網頁介面設計美感的使用者體驗(B) ....................................................... 82 Questionnaire-網頁介面設計美感的使用者體驗(C)....................................................... 88. ‧. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v.

(4) 致謝終於寫到這一篇了，要畢業的感覺現在才慢慢的真實起來！碩士班兩年，總想著要快把論文結束就沒煩惱，回首才發現論文的結束原來是學生生涯的告一段落。每每看金曲獎之類的受獎人都會說出列出滿滿感謝，以前不懂為什麼花那麼多時間在唱名道謝，現在才真切感受到一項作品的完成需要多少人的幫助。雖然我寫的只是一篇小小的論文，但它也是一份代表我碩班兩年的作品，這一路走來，真的受到許多人的幫助，以下論文全勤獎開始唱名道謝！這篇論文的誕生，我最最要感謝的就是我的指導老師蔡瑞煌老師，老師給我. 政治大注全力的幫助，到現在我常覺得來到政大我做的很好的決定就是跟了老師，謝立許多支持與幫助，從碩一就陪我勾勒我的夢想論文，老師不僅給予我空間也傾. ‧ 國. 學. 謝老師好幸運能成為你的指導學生！還有共同指導韓志翔老師，在論文上也給予我許多的意見、分享許多美學上的想法，在統計上，讓我在很無助的時候也. ‧. 有安定的依靠，真的很感謝兩位老師在論文上的指導與幫助！謝謝老師！. sit. y. Nat. 還有同 LAB 的小黑，你總是很熱心的幫我許多事，很多事我都搞不太清楚，. al. er. io. 常常都覺得好謝謝你！陪我六年的親親室友小潔，論文的路上一定是還好有. v. n. 你，謝謝你，有你這樣的心靈依靠，我才能每天又能充滿活力的迎接挑戰！還. Ch. engchi. i n U. 有親愛的向上讀書會夥伴：冏斯、久安，一起在 LAB 打拼或只是修照片(笑)、一起吃零食，覺得和大家一起努力，就很有動力繼續向前，就算口試完也陪著我，謝謝你們！佳宏和瑞祥是開心果，常常來 LAB 給我們解悶，很謝謝你們！研究所同學的每個你們，奇奇、亨亨、冠汝、家棋、eating、志騰、小巫等等謝謝你們陪我度過美好的研究所生活。另外 Ivy 還有志昇謝謝你們在統計上的大幫忙！小兒、黑佳麗、瓜瓜阿婷、林郁、阿老謝謝你們在論文上的一切幫忙！當然還有最重要的家人們，沒有你們怎麼會有現在的我，爸媽總是全力支持我、相信我的決定，哥哥雖然嘴上不說但我知道你也是關心我的很多事，謝謝你們的支持，可以讓我放心的往前，你們是我最堅強的後盾。謝謝你們！.

(5) 摘要在這個資訊大爆炸的時代，想要讓人們認識你就需要推廣你自己或你的商品。櫥窗展示便是一種常見的推廣方式。而在這樣大量的推廣需求及網路發達時代，櫥窗網站也應運而生。在這篇文研究中，櫥窗網站指的是以推廣自己為目標的網站。時代的潮流下，每種應用都愈來愈注重它的體驗。而使用者體驗應用在網站領域上，越來越多研究與將其與使用者介面的美感做連結。基於以上，此篇研究將範圍縮小，希望以臺北故宮的櫥窗網站 iPalace Channel. 政治大. 為例子，目標是探討櫥窗網站視覺介面設計特色（美感與故事性）的使用者體驗. 立. 及使用者滿意度。透過三種不同的 iPalace Channel 視覺介面設計，分為高、中、. ‧ 國. 學. 低程度的故事性與美感，比較三者不同的使用者體驗與使用者滿意度。最後在以. ‧. 問卷的方式做調查，而問卷統計結果是在櫥窗網站這個範疇下，高度美感與故事. sit. y. Nat. 性的視覺介面相較於中度及低度的美感與故事性會得到最好的使用者體驗（美感、. io. n. al. er. 教育及娛樂的體驗）與滿意度。. Ch. engchi. i n U. v. 關鍵字：VisAWI、櫥窗網站、iPalace Channel、美感設計、故事性、使用者體驗、使用者滿意度. I.

(6) Abstract In the age of information explosion, promotion is one way to let people know you. And window displays is a way to promotion. Under the huge demand of promotion and Internet generalization, promotion website gradually emerge as the times require. Promotion website is just like window display. Hereby, the promotion website is a kind of website aimed to promote something. As the trend of our times, experience is more and more important in every application. And apply in the website domain,. 政治大. many researches connect user experience and aesthetic user interface.. 立. Base on previous mention, this study narrow down the scope, taking iPalace. ‧ 國. 學. Channel, a promotion website of National Palace Museum (NPM), for example. This. ‧. study aims to explore different aesthetic and storytelling levels of visual interfaces. sit. y. Nat. affect user experiences and user satisfaction on promotion website. Through. io. al. er. questionnaire survey and compare three different visual interface designs to get the. v. n. result. The result of this study find that for promotion website, High aesthetic and. Ch. engchi. i n U. storytelling truly get best user experiences and user satisfaction.. Keywords: VisAWI, promotion website, iPalace Channel, aesthetic design, storytelling, user experience, user satisfaction. II.

(7) Chapter 1 1.1. Introduction. Background and motivation. In today’s world, there are lots of stores, brands and organizations. From the profit-oriented movie to non-profit-oriented museum, to make people know you or something about you, anything may need to promote. “Promotion has been defined as the coordination of all seller initiated efforts to set up channel of information and persuasion in order to sell goods and service or promote an idea.” (Belch & Belch,. 政治大. 2009). Promotion is one side of the communication process with customers. 立. (Rowley, 1998) And window displays is a way to promotion, too. Like feature of. ‧ 國. 學. promotion, window display is also a communication way to customer (Kernsom &. ‧. Sahachaisaeree, 2010). Moreover, Somoon and Sahachaisaree (2012) defined that. sit. y. Nat. window display not only convey the type and positioning of mechanize, but also. io. al. er. the promotional strategies and corporate images. Besides, the design of window. v. n. display aims to draw and attract display viewers’ attention. (Morgan, 2008;. Ch. engchi. i n U. Kernsom & Sahachaisaeree, 2011) As previous mentioned, under the huge demand of promotion and Internet generalization, promotion website gradually emerge as the times require. Hereby, the promotion website is a kind of website aimed to promote something. For example, movie promotion usually belong to this kind of website. In order to promote the movie to people and let people know more about it in a short time, it needs more eye-catching and contains some information inside the whole presentation. Briefly speaking, the promotion website is like window display but presentation in web environment. 1.

(8) In the information age, museum needs to make good use of technologies to get closer to the people. Over the past decade, the number of online museum visitors has increased significantly. (Marty, 2008) Research has revealed that over 70% of people visiting a museum website would subsequently be more likely to go and visit the “real” museum. (RLoomis, Elias & Wells, 2003). To response of that, museums are gradually interested in the digitizing of their collections not only for the sake of preserving the cultural heritage, but to also make the information. 政治大. content accessible to the wider public in a manner that is attractive (Styliani, Fotis,. 立. Kostas & Petros 2009). Also, National Palace Museum in Taipei (NPM) in Taipei. ‧ 國. 學. started the Digital Archives in 2002. (National Palace Museum, 2015) The main. ‧. purpose is digitizing the artworks of its collection. With these digital resources,. sit. y. Nat. NPM can use them broadly on further digital applications. Besides, in recent years,. io. al. er. “museums have changed from being predominantly custodial institutions to. v. n. becoming increasingly focused on audience attraction.” (Gilmore & Rentschler,. Ch. engchi. i n U. 2002). The role of museum has changed. In order to get people’s attentions, museums promote themselves even by organizing innovative programs to create ‘new ways for audiences to participate in museum learning’ (Spitz & Thom, 2003). Besides, website is also the most common way to touch people. The origins of websites began in early 1990s. From then on, there are lots of researches discussing about the website design, and one of them is the relationship between functionality and aesthetics. (Thorlacius, 2007) However, with the recent shift from a functional vision to an experience vision, the aesthetic of the website is 2.

(9) considered to be more influent on users’ preference. (Tractinsky, Shoval-Katz & AndIkar, 2000; De Angeli, Lynch & Johnson, 2002; Overbeeke, Djajadiningrat, Hummels & Wensveen, 2002; De Angeli, Sutcliffee & Hartmann, 2006) Usability may no longer be the only, or even the main, determinant of user satisfaction. Instead, visual aesthetics of website interfaces is a strong determinant of users’ satisfaction and pleasure (Laviea & Tractinsky, 2004; De Angeli et al., 2006; Robins & Holmes, 2008) Norman (2004) also claims that the aesthetic design can. 政治大. have more influence on user preference than traditional functional usability. Why. 立. researchers pay more attention on visual aesthetic of website recently? One of the. ‧ 國. 學. reasons must be relative to the user behavior. Nielsen (2008) showed that 17%. ‧. webpage visiting is over in 4 seconds. Lindgaard et al. (2006) indicated that users’. sit. y. Nat. first impressions are constructed in about 50 milliseconds. Therefore, users’ initial. io. al. er. feelings are crucial and will decide whether or not “visitors” become a “users” of. v. n. the website during the few seconds. (Tractinsky et al., 2006; Bonnardel, Piolat &. Ch. engchi. i n U. Bigot, 2011) And visual aesthetics of the website is the directly reason which can affect users’ initial feelings. Shenkman and Jönsson (2000) also found that the best predictor of overall judgments by general website users was the impression of beauty. In general, Visual aesthetics plays an important role in users’ evaluations of website. (Schenkman & Jönsson, 2000; Lavie & Tractinsky, 2004; Tractinsky et al., 2006; Bonnardel et al., 2011) Experience is another hot topic in recent years. Norman, Miller and Henderson (1995) firstly mentioned the term “UX” as an Apple Fellow as a User Experience 3.

(10) Architect. Since 1998, Pine II and Gilmore indicated that experience economy is coming. (Pine II & Gilmore, 1998; Pine II & Gilmore, 1999) The concept of experience is broadly applied in all kinds of domain. In 2000, Garrett (2002) show a model that is about the element of user experience on web design, and it got lots of responses that make Garrett (2002) even publish a book to reply to these responses. Then the user experience on web design is gradually become a popular topic.. 政治大. Experience can divide into three types: experiencing, a user experience, and. 立. co-experience. (Roto, Law, Vermeeren & Hoonhout, 2011) The first type is. ‧ 國. 學. described as individual’s stream of perceptions. Its interpretations and resulting are. ‧. emotions. The second type emphasizes the outcome and memories of an experience.. sit. y. Nat. The finally type also call ‘group experience’. Just like its name, it focuses on. io. al. er. experience of together with other people. There are lots of research discuss about. v. n. “experiencing” on aesthetic design of web. Most aesthetic design of web researches. Ch. engchi. i n U. are related to perceiving usability, (Tractinsky, Shoval-Katz & AndIkar, 2000; Overbeeke, et al., 2002; De Algeli, Sutcliffee & Hartmann, 2006) or aesthetic appeal is positively related to trustworthiness. (Shneiderman, 2000; Robins & Holmes, 2008; Alsudani & Casey, 2009; Li & Yeh, 2010) Other aesthetic design of web is about users’ preference. (Jennings, 2000; Lavie & Tractinsky, 2004; Alexandre, Javier, Klaus & Frank, 2009; Bonnardel et al., 2011; Markovic , 2012) Many researches discuss “a user experience” on whole web design, especially applying on business domain and customer loyalty. (Constantinides, 2004; 4.

(11) Tractinsky & Lowengart, 2007) In addition, researches about museum website usually emphasize on the whole web design reflection on usability, learning and other experience. (Hertzum, 1998; Cunliffe, Kritou & Tudhope, 2001; Lin & Gregor, 2006) But it seldom takes aesthetic design to discuss “a user experience” in promotion website. Therefore, this study wants to address this gap.. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 5. i n U. v.

(12) 1.2. Research Purpose As previous section mention, researches pay more and more attention on aesthetic. design. But they usually focus on ease of use and apply in shopping website, such as e-commerce website, seldom apply in other kinds of website and focus on aesthetic design. To address the gap, this study aims to discuss the user experience through different aesthetic design in a museum video website. Besides, pay more attention on aesthetic visual interface design. Palen and Salzman (2002) referred that storytelling is an effective way to get better user. 政治大 experience. Therefore, in this study, take “storytelling” as a factor into the aesthetic 立. ‧ 國. 學. design to compare different user experiences. Without losing the generalization, this study makes an experiment on the iPalace Channel, a museum video channel. The. ‧. iPalace Channel is also one example of promotion websites. With the promotion. y. Nat. er. io. sit. website of NPM, this study will explore the following issues: In the promotion website, whether the aesthetic and storytelling designs affect user experience and user. n. al. satisfaction?. Ch. engchi. 6. i n U. v.

(13) Chapter 2. Literature Review. 2.1. Stimulus-Organism-Response framework Mehrabian and Russell (1974) developed that the Stimulus-Organism-Response (S-O-R) framework in environment psychology. The S-O-R framework assumes that the environment contains stimuli (S) that cause changes to people's internal, or organismic, states (O). Then finally it turns to cause some responses (R) (Mehrabian & Russell, 1974). Donovan and Rossiter (1982) introduce S-O-R framework into. 政治大. marketing. In their research, S-O-R is that stimuli (S) influence an individual‘s. 立. internal state (O), which mediates their behavioral responses (R).. ‧ 國. 學. Besides, the S-O-R framework has applied in lots of researches. It has used. ‧. extensively in studies of the effect of store environment, including on online store. sit. y. Nat. feature and consumer responses (Eroglu, Machleit & Davis, 2001; Jeong et al., 2009;. io. al. er. Chang, Eckman & Yan, 2011). Eroglu et al. (2001) used as the basis of the model. v. n. which posits that atmospheric cues of the online store. Then the cognitive states affect. Ch. engchi. i n U. the outcomes of online retail shopping in terms of approach or avoidance behaviors. Parboteeah, Valacich, and Wells (2009) showed that task-related and mood-related cues (stimuli) have significant effects on perceiving usefulness and enjoyment (organism). Then they affect urge to buy impulsively (response). Jeong et al. (2009) also applied this framework to the online shopping website and its user experiences.. 7.

(14) 2.2. Web design The term “web design” actually group with lots of elements. Daniel (2000) thinks that web design includes content, usability and visual appearance. Powell (2002) defines that a very user-centered web design includes influences from visual arts, technology, content and business. Newman and Landay (2000) indicate that web design contains three dimensions: information design, navigation design and graphic design. To be more precisely,. 政治大. Newman et al. inform the term “user interface design”, in web domain, refers. 立. primarily to the navigation design and with part of information design and graphic. ‧ 國. 學. design. Figure 2-1 represents the relationships among three areas of the web design.. ‧. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. Figure 2-1 Different Dimensions of Web Design (Newman & Landay, 2000). According to these researches, we can find that whatever the researcher classify the elements of web design, it’s always have one important element- graphic design (also called visual design). In this study we just concern to graphic design. Graphic 8.

(15) design refers to the visual communication of information using elements such as a color chosen, images, typography displayed on screen, layout and any visual expression. Whether it is intentional or not, these visual elements communicate something to the visitor of the site. (Newman, 2000; Thorlacius, 2007) Besides, comparing to the content design (information design and navigation design) which focus on the whole website logics, graphic design focus primarily on the presentation of individual elements. (Newman, 2000) The following table list. 政治大. factors of visual aesthetic of websites:. 立. Table 2-1 Factors of Visual Aesthetic of Websites. Animation, visual effects, movement, dynamics. Sutcliffe & De Angeli (2005), Tarasewich, Daniel & Griffin (2001). y. Nat. sit. Bauerly & Liu (2008), Brady & Phillips (2003), Lai, Chen, Shih, Liu & Hong (2010), Lavie & Tractinsky. er. io. Balance, equilibrium,. a l (2004), Ngo, Teo & iByne. v (2000), n Ch Chakraborty, Lin & Rauschenberger (2009) U engchi. n. symmetry. Lavie & Tractinsky (2004), Rau, Gao & Liu (2007),. Coherence,. craftsmanship, harmony, modernity,. ‧. ‧ 國. Authors. 學. Factor. Zheng,. De Angeli, Sutcliffe & Hartmann (2006), Kim, Lee & Choi (2003), Hassenzahl (2004), Lavie & Tractinsky (2004). professionalism, style Brady & Phillips (2003), Coursaris, Sweirenga & Watrall (2008), Cyr, Head & Larios (2010), Sutcliffe & De Angeli (2005), Hall & Hanna (2004), Kim et al. Color. (2003), Ling & van Schaik (2002), Papachristos, Tselios & Avouris (2006), Schrepp, Held & Laugwitz (2006), Simon (2000), Sutcliffe & De Angeli (2005), Tarasewich et al. (2001) 9.

(16) De Angeli et al. (2006), Ngo, Teo & Byne (2003),. Complexity, diversity,. Pandir & Knight (2006), Tuch, Bargas-Avila, Opwis,. variety. & Wilhelm. (2009) Bauerly & Liu (2006), De Angeli et al. (2006), Lavie &. Grouping, structure, order. Tractinsky (2004), Ling & van Schaik (2002), Schmidt, Liu & Sridharan. (2009), Schrepp et al. (2006), Schenkman & Jonsson (2000). Homogeneity, unity,. Kim et al. (2003), Ngo et al. (2003), Tarasewich et al.. regularity, uniformity. (2001) De Angeli et al. (2006), Lai et al. (2010), Schenkman &. Images, icons, graphics. jonsson (2000), Schmidt et al. (2009), Simon (2001),. 政治大. Tarasewich et al. (2001) Novelty, creativity,. 立Haig & Whitfield (2001), Lavie & Tractinsky (2004),. ‧ 國. Pandir & Knight (2006). interestingness. y. Ngo et al. (2003), Rau et al. (2007), Schmidt et al.. io. sit. Nat. parsimony, density. De Angeli et al. (2006), Lavie & Tractinsky (2004), (2009). Ling & van Schaik (2002), Schenkman & Jonsson. er. Simplicity, clarity,. Bauerly & Liu (2006), Ngo et al. (2000). ‧. Proportion, cohesion. 學. inventiveness,. n. a l (2000), Schmidt et al. (2009),i vTarasewich et al. (2001) n Ch U engchi (Source: Pourabedin & Nourizadeh, 2013) Text, fonts, links. 2.3. Aesthetic preference “Aesthetics is about understanding the beauty and the ways of sensing beauty.“ (Pajusalu, 2012, 24) Aesthetic is a very subjective. Everyone has his or her own aesthetic preferences. Although aesthetic preference seems to be difficult to analyses, there are lots of researchers wanting to find how to measure people’s aesthetic preferences. As we can think many factors can affects the user’s aesthetic 10.

(17) preference on visual design of website. Kim et al. (2003) identified the design factors related to web-page objects, backgrounds and the relationship between object and background. And other research refer that complexity plays a crucial role in perception of visual stimuli. (Alexandre et al., 2009) However, these researches are related to the single design factor. In reality, aesthetic design is not only related in one or two factors. Therefore, some researches tried to generalize lots of factors into integrate concept.. 政治大. Studying on visual design of web, Lavie and Tractinsky (2004) find that users’. 立. perceptions consist of two main dimensions: ‘‘classical aesthetics’’ and ‘‘expressive. ‧ 國. 學. aesthetics’’. The classical aesthetics dimension belongs to traditional aesthetic concept. ‧. that emphasize on orderly, clear, and symmetric design. The expressive aesthetic. sit. y. Nat. dimension focuses on the designers’ creativity, originality, sophisticated, the ability to. io. al. er. break the common design convention and uses special effects.. v. n. Moshagen and Thielsch (2010) developed a measure of perceived visual aesthetics. Ch. engchi. i n U. of websites, which called Visual Aesthetics of Website Inventory (VisAWI). “Construction of the VisAWI was based on a comprehensive and broad definition of visual aesthetics so that the resulting instrument would completely describe the domain of interest.” (Moshagen & Thielsch, 2010) VisAWI can organize from four facets of visual aesthetic: simplicity (relate to clarity and balance), diversity (creativity, novelty, and dynamics), colorfulness (relate to combination, selection and placement of colors), and craftsmanship (skillful and coherent integration). Simplicity is closely related to the classical aesthetic dimension and diversity is closely related to 11.

(18) the expressive aesthetics dimension. (Altaboli & Lin, 2011) All these four facets can be surveyed by questionnaire.. 2.4. Storytelling Storytelling is a modality for communicating: it means conveying information to people. (Larkey & Gonzalez, 2007) When storytelling apply in website domain, it can be organized by background pictures, objects, characters, sound effects and even. 政治大. music to be integrated into storytelling. (Tsou, Wang & Tzeng, 2006). 立. Therefore,. with lots of way can presentation, people can easily put what they want to talk. ‧ 國. 學. together by storytelling website.. ‧. Storytelling is a technique both for entertaining and educating. (Riedl, Stern, Dini. sit. y. Nat. & Alderman, 2008) Besides, in the education aspect of the learning medium,. io. al. er. storytelling is considered one of the most effective ways of teaching people. (Ayad &. v. n. Rigas, 2009) For example, Magerko (2008) apply storytelling to tailored train.. Ch. engchi. i n U. Another example is using storytelling in language learning. (Tsou, Wang & Tzeng, 2006) Storytelling can be more entertaining such as gamification design on storytelling website. (Hsu, Chang & Lee, 2013). 2.5. User experience Norman (2002) shows the “mental model” which is the interaction with designer, user and system in his book. User can’t understand the real principle in this system directly. Though the user interface, user build a reasonable mental model to explain 12.

(19) how to interact to the system. Norman indicates, “The design model is the designer’s conceptual model. The user's model is the mental model developed through interaction with the system. The system image results from the physical structure that has been built.” (Figure 2-2). 立. 政治大. er. io. sit. y. ‧. ‧ 國. 學. Nat. Figure 2-2 Mental Models (Norman, 2002). al. n. v i n There are many definitions C of h user experience. Nielsen e n g c h i U and Norman (2014) think that user experience encompasses all aspects of the end-user's interaction with the company, its services, and its products. ISO 9241-210, the international standard on ergonomics of human system interaction, defines user experience as "a person's perceptions and responses that result from the use or anticipated use of a product, system or service". Because of its property, user experience can be defined differently. As Law, Roto, and Hassenzah (2009) say “User experience is associated with a broad range of fuzzy and dynamic concepts, including emotional, affective, experiential, 13.

(20) hedonic, and aesthetic variable.” There is even a research to survey the definition of user experience. But basically, user experience means to the users’ feeling when interact with something. User experience is a compound of three elements in system's properties (Thüring & Mahlke, 2007): the perception of instrumental qualities, the perception of non-instrumental qualities, and user's emotional responses to system behavior. The compound concept of user experience show as a framework called CUE-Model,. 政治大. where CUE stand for components of user experience. (Figure 2-3). 立. The CUE-Model distinguishes two types of qualities. Instrumental qualities. ‧ 國. 學. emphasize on function, like ease of use or experience support the system provides,. ‧. and its feature such as controllability of the system. On the other hand,. sit. y. Nat. non-instrumental qualities concern the look and feel of the system, and its features. io. al. er. such as visual aesthetic. Therefore, Thüring and Mahlke (2007) concluded, “While. v. n. instrumental qualities are closely related to the usability and usefulness of a system,. Ch. engchi. i n U. non-instrumental qualities result from its appeal and attractiveness.” (253) However, whatever the different qualities, both of them will influence the third component of user experience, emotional reactions such as subjective feeling, motor expressions and so on. Finally, three components of user experience can impact on the overall appraisal of the system, such as users’ behavior.. 14.

(21) 立. 政治大. ‧. ‧ 國. 學 y. Nat. n. al. er. io. sit. Figure 2-3 the CUE-Mode (Component of User Experience, Resource: Thüring & Mahlke, 2007). Ch. engchi. i n U. v. Pine and Gilmore (1998) set out the vision for a new economic era: the ‘experience economy’ in which consumers need special and memorable experiences. In the same time, Pine and Gilmore (1998) identify four ‘realms’ of consumer experiences (Figure 2-4) that are differentiated at two dimensions: firstly, the degree of customer involvement (passive vs. active participation); and secondly, the desire with which the customer connects or engages with the event/performance (absorption vs. immersion). The four types of experiences are educational (active/absorption); entertainment. (passive/absorption);. escapist 15. (active/immersion);. and. esthetic.

(22) (passive/immersion), and the cross point of the four realms is sweet point. It contains four kinds of experiences. Pine and Gilmore (1999) defined educational experience is that consumers absorb the events unfolding before them, but are engaged through active participation. Jeong, Fiore,. Niehm,. and. Lorenz. (2009). explained. Entertainment. experiences,. “Entertainment experiences occur when consumers passively “absorb” events through their senses, such as passively observing a performance.” Escapist experiences place. 政治大. customers in the middle of a real or virtual environment, where makes individual. 立. becomes an actor or participant who affects the event in. “Esthetic experiences just. ‧ 國. 學. want to “be” in an attractive environment.” (Jeong et al., 2009). ‧. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. Figure 2-4 Economy Experience Model. Hosany and Witham (2010) demonstrated that esthetics and entertainment experiences significantly contribute to user satisfaction. Researches showed that the 4Es lead to satisfaction. (Pine & Gilmore, 1999, 2011; Quadri-Felitti & Fiore, 2013). 16.

(23) In web design domain, user experience can separate several elements. Garrett (2000) considers the user experience, in web design domain, can be cut in sequence, from the abstract user needs and site objectives to the concrete visual design. It can also say from the top conception to practicing and completion of visual design (Figure 2-5). Therefore, we can find that the visual design is the most direct presentation to the viewer. What the viewers see is the first way the website touch them. This proves that viewers’ initial feelings are crucial. As Shenkman and Jönsson (2000) examined. 政治大. visitors’ first impressions of beauty will become the judgments whether they will be. 立. the website users.. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. Figure 2-5 The Elements of User Experiences (Garrett, 2000). 17.

(24) Chapter 3. Research Methods. This chapter contains five sections. In first section, it introduces the research object, the iPalace Channel. The second section is research architecture based on previous literature review and research purpose. The third section is variable and operation definition including questionnaire design, and scale way. Fourth section is experiment and data analysis way in this research. Final section is about new design interface of iPalace Channel, which is one of sample interface in the experiment.. 立. Research object. 學. ‧ 國. 3.1. 政治大. The object of this study is iPalace Channel, the promotion website of National Palace Museum (NPM). Therefore, this section will introduce NPM and iPalace. ‧. Channel as following:. Nat. y. National Palace Museum (NPM). sit. 3.1.1.. n. al. er. io. National Palace Museum (NPM) is the representative museum in Taiwan. The. Ch. i n U. v. NPM is to Taiwan as the Louvre Museum as to French. According to official website,. engchi. there are many collections of cultural artifacts holding inside the NPM and it consists enormous treasure trove of objects from each Chinese past dynasty. “NPM has been lauded as one of the top five museums in the world and is famous for its most extensive and intricate collection of artifacts derived from the Chinese civilization.” (Tsaih, Lin & Chang, 2014) Museums are considered to the web content provider because they generally have lots of high quality content and own the Intellectual Property Rights of these 18.

(25) contents. (Cunliffe, Krituo & Tudhope, 2001) After participating in National Digital Archives Program in 2002, strengthening of its existing digital infrastructure, NPM has more high quality digital artifact can apply to the digital service, including all kinds of theme sites. iPalace Channel is built under this situation.. 3.1.2.. iPalace Channel. iPalace Channel is a promotion website of NPM, which promotes its artifacts and. 政治大. itself through videos. Huang, Chao and Tsaih (2013) said that the idea of iPalace. 立. Channel came from the television channel and its purpose was museum service. The. ‧ 國. 學. content of video on the iPalace Channel is all about Chinese cultural beauty and. ‧. thematic cultural relic. “Note that, from the perspective of a TV program, the iPalace. sit. y. Nat. Channel service differs from ICT-enabled services like the British Museum Channel. io. al. er. since they respond with the viewer’s clicks on video clips. In other words, the iPalace. v. n. Channel service initiative is customer-oriented, interactive, and innovative.” (Huang. Ch. engchi. i n U. et al., 2013) So one of the iPalace Channel features is the continuous broadcasting video, like a “web TV channel”. With iPalace Channel, NPM can introduce lots of Chinese cultural relic to the Internet world and young generations easily, and moreover, make the world know NPM. Finally, it can even promote people’s cultural literacy. The other iPalace Channel feature is its user interface design. First, it uses the “video-based presentation” instead of “text-based presentation” we see in the most website because of more attractive and tele-presenting (Hoffman & Novak, 1996). 19.

(26) Another is its metaphor graphical user interface. The icons in the iPalace Channel use image to replace the text for giving more cultural experiences. With vide-based presentation and metaphor graphical user interface, the designers of iPalace Channel hope that iPalace Channel can give viewers a graceful online cultural trip. When viewers visit iPalace Channel, they can feel themselves bath in the user experiences of aesthetic pleasure, culture, creativeness.. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. v. Figure 3-1 The Metaphor Graphical User Interface of iPalace. Ch. engchi. i n U. In service part, iPalace Channel is a platform, which provide video-streaming multicasting, video-on-demand, information retrieval services. In experience part, iPalace Channel is hoped to give viewers wonderful viewing experience of NPM artifacts. All the iPalace Channel Video Channel Service need to correspond with the NPM branding, including the quality of service, the type of user interface and so on. To understand the full strategic service vision of iPalace Channel, it is shown in Table 3-1. Table 3-1 Strategic Service Vision of iPalace. 20.

(27) Service Delivery. Operating. System. Strategy. 1. Fresh and. Service Concept. Target Market Segments. 1. Continual. 1. A video. Young people. attractive video. provision of new. service that. content. video. smoothly. Use Web. exhibitions. displays NPM. browsers. relics. Are interested. 2. Well-defined NPM experiences. 2. Periodically. who. NPM images. changing. Well-arranged. in Chinese. Easy to use. interface. exhibition. heritage. Profound sense of. appearance. Available any. Enjoy. time and. watching. Chinese culture. 3. Effective load. 政治anywhere 大 Task-oriented Uninterrupted 立 balancing. Elastic Web. multicasting. 2. A user. io. interface that is. infrastructure. easy to use and. Peer-to-peer. offers a. networking. profound sense. Multitasking and. of Chinese. architecture. pleasure. y. Nat. service. ‧. ‧ 國. delivery. process design. 學. 3. Smooth video. sit. pleasure. er. and aesthetic. n. a ldistributed v culture and i n Ch system i U e n g c haesthetic. (Source: Huang, et al., 2013). 21. videos.

(28) 政治大. Figure 3-2 Graphic User Interface of Official iPalace Channel. 立. The concept of iPalace Channel (Huang, et al., 2013) is as mentioned above. Then. ‧ 國. 學. the present director, Fung, Ming-Chu, in NPM, accepted the concept about iPalace. ‧. Channel. The NPM started to practice that, and cooperate with National Center for. sit. y. Nat. High-Performance Computing for tech skill support. Mostly, the iPalace Channel is. n. al. er. io. officially online in December 31, 2014. But some concept of iPalace Channel online. i n U. v. is not the same with the Huang, et al. (2013), for examples, user interface, and the. Ch. engchi. continuous broadcasting channel concept. The interface of official iPalace Channel (Figure 3-2) is different design concept from the Huang, et al. (2013)’s version. Huang, et al. (2013)’s iPalace Channel is the original concept, including the user interface. (Figure 3-1) The other is official iPalace Channel we seeing on the Internet now. (Figure 3-2). 22.

(29) 3.2. Research hypothesis and framework. 3.2.1.. Research hypothesis. Moshagen and Thielsch (2010) developed a measure of perceived visual aesthetics of websites, which called Visual Aesthetics of Website Inventory (VisAWI). All these four facets can be surveyed by questionnaire. The result of VisAWI is about aesthetic, so it can hypothesize as Ha1: Ha1.visAWI will positively affect esthetic experiences.. 立. 政治大. Storytelling is a technique both for entertaining and educating. (Riedl, Stern, Dini. ‧ 國. 學. & Alderman, 2008) In the education aspect of the learning medium, storytelling is. ‧. considered one of the most effective ways of teaching people. (Ayad & Rigas, 2009). sit. y. Nat. Storytelling can be more entertaining such as gamification design on storytelling. io. al. er. website. (Hsu, Chang & Lee, 2013) To sum up, we can find storytelling can affect. v. n. both entertainment and education. Therefore, this study proposed the following:. Ch. engchi. i n U. Ha2: storytelling will positively affect entertainment experiences. Ha3: storytelling will positively affect education experiences.. Hosany and Witham (2010) demonstrated that esthetics and entertainment experiences significantly contribute to user satisfaction. Researches showed that the 4Es (esthetic, education, entertainment and escapism experiences) lead to satisfaction. (Pine & Gilmore, 1999, 2011; Quadri-Felitti & Fiore, 2013) Therefore, this study proposed the following: 23.

(30) Hb1. Esthetic experience will positively affect user satisfaction. Hb2. Entertainment experience will positively affect user satisfaction. Hb3. Education experience will positively affect user satisfaction.. According previous literature, result of VisAWI will affect esthetic experience and storytelling will affect entertainment experiences and education experience. Then whole user experiences will affect user satisfaction. The whole hypotheses are as the following table (Table 3-2):. 立. 政治大. Table 3-2 Research Hypotheses. Ha1. VisAWI will positively affect esthetic experiences.. Ha2. Storytelling will positively affect entertainment. al. positively. affect. education. n. Hb1. y. will. io. experiences.. n U engchi. Esthetic experience will positively affect satisfaction.. Riedl, Stern, Dini &. Ch. Alderman, 2008. sit. Storytelling. Altaboli & Lin, 2011. er. Ha3. Nat. experiences.. Reference. ‧. ‧ 國. 學. Research hypotheses. v iuser. Riedl, Stern, Dini & Alderman, 2008 Pine & Gilmore, 1999, 2011; Quadri-Felitti & Fiore, 2013. Hb2. Entertainment experience will positively affect user satisfaction.. Pine & Gilmore, 1999, 2011; Quadri-Felitti & Fiore, 2013. Hb3. Education experience will positively affect user satisfaction.. Pine & Gilmore, 1999, 2011; Quadri-Felitti & Fiore, 2013. 24.

(31) 3.2.2.. Research framework. This study will explore whether website interface with different aesthetic degree and storytelling affect user experience and user satisfaction under the promotion website. Take iPalace Channel, a promotion website of NPM, for example. Though three different iPalace Channel interface designs, this study compares their aesthetic degree (high/middle/low) and storytelling degree (high/middle/low) firstly. Then according the result of first step, three iPalace Channel visual interfaces will classify. 政治大. three groups and compare their user experience and user satisfaction.. 立. Based on previous literature and purpose. The research framework of present study. ‧ 國. 學. adopted this S-O-R framework (Mehrabian & Russell, 1974; Jeong et al., 2009) with. ‧. different types of interface (different aesthetic and storytelling degree), belonging to. sit. y. Nat. promotion website, representing environmental being S variable. Between the S. io. al. er. inputs and R outputs, user experience reflects the O variable. Then, the O variable is. v. n. user satisfaction which is affected by the different types website interface. With these. Ch. engchi. i n U. literatures, this study develop a research framework as following (Figure 3-3):. Figure 3-3 Research Framework 25.

(32) 3.3. Research Variable and Definition 7-points Likert scales evaluate all variables. That is, the respondents are required. to indicate their levels of agreement of the statements, with a scale that range from 1 (do not agree at all) to 7 (definitely agree). 3.2.1.. Visual Aesthetic of Website Inventory (VisAWI). Moshagen and Thielsch (2010) developed a measure of perceived visual aesthetics of websites, called Visual Aesthetics of Website Inventory (VisAWI). There are four. 政治大. components in VisAWI: simplicity, diversity, colorfulness and craftsmanship. This. 立. study summarizes the operational definitions of four components as following:. ‧ 國. 學. Simplicity means the whole interface structure will give users’ feelings like unity,. ‧. homogeneity, clarity, orderliness; Diversity defines as website visual richness, such as. sit. y. Nat. dynamics, novelty, and creativity presentation; Colorfulness is the colors applications. io. al. er. of website which users feel good and like these colors. Color application includes. v. n. selection, placement, and combination of colors; Craftsmanship refer to the website. Ch. engchi. i n U. design make users feel surprised or think that the design is with care. These components and their correspond question content is as following table (Table 3-2):. 26.

(33) Table 3-2 Measure of VisAWI. Component. Simplicity. Diversity. Item. Measure of VisAWI. Reference. SPL1. The interface appears too dense. r. SPL2. Everything goes together on this interface.. SPL3. The interface is easy to grasp.. SPL3. The interface appears well structured.. SPL5. The interface appears patchy. r. DIV1. The interface is designed with care.. DIV2. The design of the webpage lacks a concept. r. DIV3. The interface is pleasantly varied.. 治政 The interface is inventive. 大立 The design is uninteresting.. DIV4. (Moshagen &. r. 2010). 學. ‧ 國. DIV5. Thielsh,. COR1 The color composition is attractive. COR3 The colors are appealing.. ‧. Colorfulness. COR2 The colors do not match. r. The design of the site lacks a concept. r. CRF2. The layout appears professionally designed.. CRF4. i n U. The site is designed with care.. Ch. engchi. er. al. n. CRF3. sit. CRF1. io. Craftsmanship. y. Nat. COR4 The choice of colors is botched. r. v. The layout is not up-to-date. r. (“r” means revised question). 3.2.2.. Storytelling. Storytelling means conveying information to people. The way of storytelling can be organized by background picture, character or some effect (Tsou et al., 2006). This study take that concept integrate storytelling into website interface. Then this study takes Lundqvist, Liljander, Gummerus and Riel’s (2013) interview contents that talk about the branding storytelling on their research as reference to be the storytelling 27.

(34) questions. (Table 3-3) Table 3-3 Measure of Storytelling. Component. Item. Measure of Storytelling I think the story behind to the interface of this. STR1 Storytelling. website is really charming!. (Lundqvist,. The interface of this website is surly to a large Liljander,. STR2. Gummerus &. extent the story that raised my interest.. The story of the interface of this website Riel, 2013). STR3. 3.2.3.. Reference. clearly affects you.. User experience. 立. 政治大. ‧ 國. 學. Pine and Gilmore (1998) referred that experience can be classified into four components: esthetic experience, entertainment experience, education experience and. ‧. escapism experience. Esthetic experience means that user feel aesthetically attractive. y. Nat. al. er. io. sit. in this environment (in present study event is website interface). Entertainment. n. experience is defined that user passively absorb through event (in present study event. Ch. engchi. i n U. v. is website interface). Education experience is let users be absorbed the events unfolding before them and even want to understand them. In present study, I choose these three experiences mentioned before to describe user experience. Escapism experience is no considered because it is a higher level of user experience, which let user feel in the middle of a real or virtual environment. Mathwick et al. (2002) say that consumer shopping tasks and retail information display properties effect user experience. Jeong et al. (2009) think product presentation effect experience value. Then this study take Mathwick et al. (2002) and 28.

(35) Jeong et al. (2009) experience questionnaire as reference. (Table 3-4). Table 3-4 Measure of User Experience. Component. Item. Measure of User experience. Reference (Mathwick,. This interface presentation is aesthetically. ETH1. appealing.. Rigdonc, 2002). Esthetic. Nat. ETA3. io. attractive.. Experience. EDU2. Niehm & Lorenz, 2009). I think the design way of this interface is very entertaining.. I really enjoyed looking at interface presentation on the web site.. boring to me. r. (Jeong, Fiore, Niehm & 2009). The web site’s interface presentation was. Lorenz,. using this website, itsv interface aAfter i l C n stimulated my curiosity to learn h e n g c h i U the image of interface.. (Jeong, Fiore,. Looking at the interface presentation of web. Niehm &. n. Education. very (Jeong, Fiore,. y. ETA2. EDU1. was. ‧. Experience. presentation. 學. ETA1. Entertainment. interface. 政治 of the web site The interface presentations大立 provided pleasure to my senses.. ‧ 國. ETH3. The. sit. ETH2. er. Experience. Malhotra &. site provided me a learning experience The interface presentations created a history. EDU3 or culture experience that was educational to me (“r” means revised question). 29. Lorenz, 2009).

(36) 3.2.4.. User satisfaction. User satisfaction is a statement about, or a judgment of, the user experience (Lindgaard, 2007). Flavián et al. (2006) referred that satisfaction questionnaire in their research to measure the user satisfaction of e-banking website. This study adapts that questionnaire to evaluate user satisfaction of website interface. (Table 3-5). Table 3-5 Measure of User Satisfaction. Item. Measure of User satisfaction. website. 立. User. (Flavián,. In general terms, I am satisfied with this website. 2006). ‧. ‧ 國. SAT3. 學. SAT2. The experience that I have had with this website Guinalíu & Gurrea, has been satisfactory.. y. Nat. n. al. er. Experiment design and analysis way. io. 3.4. 政治大. I think that I made the correct decision to use this. SAT1 satisfaction. Reference. sit. Component. i n U. v. In this study, I have three different kinds of iPalace Channel interfaces. First of. Ch. engchi. them is official version of iPalace Channel, and I name it VI_CONVENTION. The second iPalace Channel is prototype version, and I name it VI_GRAPIC. Both of two have been referred in the section 3.1. The third iPalace Channel is a new design, which is designed by this study after doing some researches, and I name it VI_ANIMATION. This concept of new design version of iPalace Channel will include in the next section. Three visual interfaces are different designs but the video in each is the same. Therefore, the main purpose of this experiment is to compare different visual interface designs with their user experiences. The whole experiment 30.

(37) contains three stages. The first stage is to grade three levels of storytelling and website aesthetic on three iPalace Channel, level from high to low. The second stage is comparing three groups, which is different degree to aesthetic and storytelling and the first part result, with user experience. To verify if higher degree to aesthetic is higher aesthetic experience; and higher degree to storytelling is higher degree to entertainment and education experience. In this stage, use one-way ANOVA. The final stage is regression analysis to the research framework to check the relevant of every component.. 立. 政治大. ‧. ‧ 國. 學. n. er. io. al. sit. y. Nat. Figure 3-2 Interface of VI_CONVENTION. Ch. engchi. i n U. Figure 3-3 Interface of VI_GRAPIC. 31. v.

(38) 政治大. Figure 3-4 Interface of VI_ANIMATION. 立. ‧ 國. 學. In this study, questionnaires survey is the way to analysis this experiment. There are three questionnaires. VI_CONVENTION, VI_GRAPIC, and VI_ANIMATION. ‧. have their own questionnaire, but questions on every questionnaire are the same.. y. Nat. er. io. sit. Before every questionnaire starts, there is a video about using VI_CONVENTION, VI_GRAPIC or VI_ANIMATION, which make subjects know and feel the process of. al. n. v i n using that interface. I post theseCquestionnaires U network such as Facebook, h e n g c honi social Dcad and the most famous bulletin board system in Taiwan, PTT. Each correspondent had the opportunity of participating in sweepstakes. The total value of the lucky draw prizes is worth more than NT$ 7,000. There is a pre-test before the formal test. There are five participants in every questionnaire on the pre-test. (Three questionnaires in total.) In the pre-test phase, every participant gave his or her suggestion after doing questionnaire. With these suggestions, I adjust the questionnaires into the formal version gradually. In formal 32.

(39) test phase, all the correspondences were collected within two weeks.. 3.5. New design interface of iPalace Channel (VI_ANIMATION) In this section, it introduces the visual interface design concept of. VI_ANIMATION. First, I think the website objective. iPalace Channel is a promotion website of NPM. The website is actually a channel which wants to promote its videos to people in modern realizing the history and culture. The objective of iPalace Channel is present people live in ancient year to modern people. To create a story and. 政治大 keep the aesthetic level in this visual interface design, I decided to choose the 立. ‧ 國. 學. material from the Chinese famous painting with figure. Besides, I want to combine the website objective and Chinese element into visual interface design. Let the visual. ‧. interface tell a story about ancient people lives, let user can be immersed in the. er. io. sit. y. Nat. historical story.. In selecting media and material section, I consider channel consist of many videos.. al. n. v i n C h as to ancient people. Video as to modern people is drama e n g c h i U When we watch videos, it is. an edutainment for us. Drama is an edutainment for ancient people, too. NPM take choosing material seriously, so I choose material from quintessential painters and their works. Also, NPM pays attention on historic facts, so when choosing material, I will realize the background of the work. I want to use three different backgrounds with some transform effects showing the concept of ancient people lives. Moreover, let users can be immersed in story of ancient lives strongly, the interface should set main role. Then the outline of story 33.

(40) will be more clearly. Three roles I chosen are: civilian, imperial concubine and emperor, which have significant different entertainments in their lives. Expect thought significant roles and entertainment in their lives, creating strong image in users’ minds. Furthermore, though different roles and scenes convey a story of going through the ancient lives. After searching information such as watching NPM’s website and reading NPM’s publishing book, I select following three works to be the main material in the interface.. 立. 政治大. Table 3-6 Web Design Material Selecting (Source: this study). ‧ 國. 學. 1.. Civilian material. ‧. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. Figure 3-5 Along the River During the Qingming Festival. Selecting material. Along the River During the Qingming Festival, Zhang Zeduan (1085-1145), Song Dynasty (960-1279) 34.

(41) Scene The. Street scene Reason. of It’s a representative dynasty for civilian activities. civilian. choosing. activities are very popular and lots of them start from this time, for example, drama become popular on common people and lift a curfew.. 2.. Imperial concubine material. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. Figure 3-6 Spring Morning in the Han Palace. Selecting material. Spring Morning in the Han Palace, Ch'iu Ying (ca. 1494-1552), Ming Dynasty (1368-1644). Scene. Court scene. 35.

(42) The. Reason. of Imperial concubines’ live are very delicate in this painting.. choosing. 3.. It is the classical work for painting imperial concubines.. Emperor material. 立. 政治大. ‧. ‧ 國. 學. io. sit. y. Nat. er. Figure 3-7 Qianlong Emperor Watching a Wrestling Match. al. n. v i n C hEmperor watchingU a wrestling match, Giuseppe Qianlong engchi. Selecting material. Castiglione (ca. 1688-1766), Qing Dynasty (1644-1911) Scene The. Beyond the great wall Reason. choosing. of Different from concubine, emperor’s activity can go outside the palace. So I choose a strongly different scene from palace. Besides, Giuseppe Castiglione is one of well-know artist.. 36.

(43) The new visual interface design (VI_ANIMATION) will combine these three works and use special effect to transform each other. With the animation effect, telling a story of ancient roles’ live to people.. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 37. i n U. v.

(44) Chapter 4. Data Analysis. This chapter contains the three sections. First section is descriptive statistics to describe the sample collection. Second section is reliability analysis of every model component. The final section is about research framework analysis including one-way ANOVA and Regression analysis. The aesthetic visual interface though VisAWI and esthetic experiences as well as Storytelling, education experience and entertainment experiences measures were analyzed using one-way ANOVA to test for statistical. 政治大. differences between groups, regression analysis to test for all research framework. 立. relationships. The SPSS20 software package was used for the descriptive statistics,. ‧ 國. 學. measurement model assessment.. ‧. When the survey was completed, 401 correspondences of the VI_CONVENTION. sit. y. Nat. were collected, 407 correspondences of the VI_GRAPIC were collected, and 411. io. n. al. er. correspondences of the VI_ANIMATION were collected. After data screening, there. v. are 90 questionable correspondences in VI_CONVENTION, 96 questionable correspondences in. Ch. VI_GRAPIC. i n U. i eand n g66 c hquestionable. correspondences in. VI_ANIMATION. Thus the total effective sample was 311 for VI_CONVENTION, 311 for VI_GRAPIC and 345 for VI_ANIMATION.. 4.1. Descriptive Statistics Descriptive statistical analysis was used to summarize the characteristics of the. correspondents. Table 4-1 summaries the demographic profile of total respondents from VI_CONVENTION, VI_GRAPIC and VI_ANIMATION of correspondences. 38.

(45) For the respondent gender, the distribution of questionnaire shows that majority of participants come from female with 62% compared to male with 38% male. The result for education background indicates that majority of the respondents is non-design background with 85.4%. The respondents of design background are only 14.6%. It shows most of respondents didn’t major in design. The result for times of visiting museums of respondents indicates that 31% of them are visiting within 3 times, 38.5% of them are visiting about 4 to 6 times, and 30.5% of them are visiting over 7 times.. 立. 政治大 Percentage. Female. 600. 62. Male. 367. Design background. 141. 14.6. Non-design background. 862. Nat. Education. io. Background. n. al. Times of Visiting museums. 4.2. Ch. 0-3. engchi. 4-6. Over 7. er. Gender. sit. Frequency. y. ‧ 國. Items. ‧. Measure. 學. Table 4-1 The Demographic Profile of Total Respondents. v i300 n U. 38. 85.4 31. 372. 38.5. 295. 30.5. Reliability analysis Reliability means this questionnaire is reliable, and it can analysis the consistency. and steady of these questions. If the reliability is higher, the questions of questionnaire are more consistency and steady. The questionnaire contains nine items, including Simplicity (SPL), Diversity (DIV), Colorfulness (COR), Craftsmanship 39.

(46) (CRF), Storytelling (STR), Esthetic experience (ETH), Entertainment experience (ETA) and Education experience (EDU). Cronbach’s α was used to measure the reliability. An alpha coefficient over 0.7 indicates strong item covariance (Cortina, 1993; Hair, 2010). The Cronbach’s α of nine variables is as table 4-2. In this questionnaire, every Cronbach’s α of item and variable is over 0.7. In more detail, the Cronbach’s α of item is in the range of 0.724~0.935 and Cronbach’s α of variable is in the range of 0.853~0.929. More over, the Cronbach’s α of whole questionnaire. 政治大. is 0.963.. 立. 0.817. Diversity. 5. 0.889. Colorfulness. 4. 0.856. al. 4. satisfaction. Ch. Storytelling. e n g c h3 i. v i 0.838 n U 0.853. Esthetic experience. 3. 0.887. Education experience. 3. 0.724. Entertainment experience. 3. 0.794. User satisfaction. 3. 0.935. All. 33. 40. 0.929. er. sit. y. ‧. User. Reliability. 5. n. experience. Reliability. Simplicity. io. User. Variable. N of items. Craftsmanship Storytelling. Item. Item. Nat. VisAWI. ‧ 國. Variable. 學. Table 4-2 Reliability of Each Factor in The Questionnaire. 0.853. 0.917. 0.935 0.963.

(47) 4.3. Research Framework Analysis. 4.3.1 Degree to Aesthetic and Storytelling of Visual Interface In. this. section,. I. firstly compare. visual. interfaces. of. three. groups. (VI_CONVENTION, VI_GRAPIC and VI_ANIMATION) with their aesthetic and storytelling. According the respondents of each questionnaire, I calculated by averaging the values of items on different groups questionnaires individually. Then, three groups are compared their averages of aesthetic and storytelling. The highest. 政治大. one is the high level of aesthetic or storytelling; the lowest one is the low level of. 立. aesthetic or storytelling; the last one is the middle level. Though the calculation,. ‧ 國. 學. VI_CONVENTION is the lowest aesthetic and storytelling interfaces. VI_GRAPIC is. sit. y. Nat. aesthetic and storytelling interface in all of three. (Table 4-3). ‧. the middle aesthetic and storytelling interfaces. VI_ANIMATION is the highest. io. er. Table 4-3 Aesthetic and Storytelling Level in VI_CONVENTION, VI_GRAPIC, and VI_ANIMATION. n. Level of aVisAWI v Storytelling i l C h e n g c h i U n Aesthetic. Level of Storytelling. VI_CONVENTION. 4.623972847. 4.561629153. Low. Low. VI_GRAPIC. 4.639692747. 4.576634512. Middle. Middle. VI_ANIMATION. 4.834444444. 4.678095238. High. High. 4.3.2 One-way Anova of User experience One-way ANOVA was used to compare three interfaces of iPalace Channel (VI_CONVENTION, VI_GRAPIC, and VI_ANIMATION) with their esthetic experience, education experience, and entertainment experience. According the research framework of this study (Figure 3-3) and the hypothesis, different VisAWI 41.

(48) (aesthetic) will significantly different esthetic experiences. Different Storytelling will significantly different entertainment experiences and education experiences. 4.3.2.1 Aesthetic visual interface (with VisAWI) and esthetic experience In order to know the relationship between aesthetic level though VisAWI, and esthetic. experience;. I. compare. VI_CONVENTION,. VI_GRAPIC. and. VI_ANIMATION (aesthetic level from low to high) with their esthetic experience. Before starting ANOVA, Homogeneity test for variance need to be done to check. 政治大. if the assumption of ANOVA violate. The test of homogeneity of variances (Table 4-4),. 立. tests if the variances are equal for Levene’s test produced an F of .868 and a p-value of. ‧ 國. 學. 0.420. Since p-value is greater than 0.05, Levene’s test of homogeneity was. ‧. insignificant. For these data the variance are relatively similar. Therefore, based on the. sit. y. Nat. results of Levene’s test, it means the data did not violate the assumption of ANOVA. io. er. and the analysis could continue.. al. n. v i n Table 4-4 Test ofC Homogeneity in VisAWI-ETH h e n gofcVariances hi U ETH. Levene Statics. df1. df2. Sig.. .868. 2. 964. .420. To determine the relationship between aesthetic level with VisAWI and esthetic experience, I conducted an ANOVA. The results are shown in Table 4-5.. 42.

(49) Table 4-5 Result of ANOVA-Esthetic Experience. Sum of. df. Mean. Squares Between groups ETH. Total. Sig.. Square. 26.814. 2. 3.117. 986.622. 964. 1.076. 1013.436. 966. Within groups. F 3.117. .045. These results of the F test reveal that the model is significant at p<0.05, indicating that the esthetic experience varies according to aesthetic level (with VisAWI). To. 政治大 proceeded with post-hoc analysis. I used LSD to explain this. The results of post-hoc 立 confirm the further relationship between aesthetic level and esthetic experience, I. ‧ 國. 學. analysis are shown in Table 4-6.. As it can be seen from the table 4-6, VI_ANIMATION is significantly different. ‧. from the VI_GRAPIC and VI_CONVENTION. It means that higher aesthetic level of. y. Nat. n. er. io. al. sit. interface has higher esthetic experience.. Ch. engchi. 43. i n U. v.

(50) Table 4-6 Results of The Post-hoc Analysis Using LSD in VisAWI-ETH. Multiple Comparisons (I) Different Variable. level of. VisAWI level. Difference. of interfaces. (I-J). interfaces. VI_CONVE VI_GRAPIC. ETH. Bound. Bound. -.17696*. .08110. .029. -.3361. -.0178. 治 .08318 政 .00643 大. .938. -.1568. .1697. .036. -.3297. -.0114. VI_ANIMATI. VI_ANIMA VI_CONVEN TION. TION. (Low). VI_GRAPIC. .08110. .17696*. .08110. .029. .0178. .3361. .17053*. .08110. .0114. .3297. 學. ON. -.17053*. ‧. 立. High. .1568. VI_CONVEN TION. Lower. -.1697. ON. ‧ 國. Error. interval. .938. (High). (Middle). Sig.. .08318. VI_ANIMATI. C. Std.. -.00643. NTION. VI_GRAPI. 95% confidence. Nat. io. er. *. The mean difference is significant at the 0.05 level.. .036. y. VisAWI. Mean. sit. Dependent. (J) Different. al. n. v i n 4.3.2.2 Storytelling level visual C interface experience h e nandg entertainment chi U For knowing the relationship between storytelling level and entertainment experience, I compare VI_CONVENTION, VI_GRAPIC and VI_ANIMATION (storytelling level from low to high) with their entertainment experience. Before starting ANOVA, Homogeneity test for variance need to be done to check if the assumption of ANOVA violate. The test of homogeneity of variances (Table 4-7), tests if the variances are equal for Levene’s test produced an F of 1.611 and a p-value of 0.200. Since p-value is greater than 0.05, Levene’s test of homogeneity was 44.

(51) insignificant. For these data the variance are relatively similar. Therefore, based on the results of Levene’s test, it means the data did not violate the assumption of ANOVA and the analysis could continue. Table 4-7 Test of Homogeneity of Variances in STR-ETA. Levene Statics. df1. df2. Sig.. 1.611. 2. 964. .200. ETA. To determine the relationship between storytelling level and entertainment. 政治大. experience, I conducted an ANOVA. The results are shown in Table 4-8. 立. Table 4-8 Result of ANOVA-Entertainment Experience. Sig.. 964. 1013.436. 966. .000. 1.023. y. 986.622. 13.407 13.100. n. er. io. sit. ‧ 國. 2. ‧. Nat. al. F. Square. 26.814. Within groups Total. Mean. Squares. Between groups ETA. df. 學. Sum of. i n U. v. These results of the F test reveal that the model is significant at p<0.05, indicating. Ch. engchi. that the entertainment experience varies according to storytelling level. To confirm the further relationship between storytelling level and entertainment experience, I proceeded with post-hoc analysis. I used LSD to explain this. The results of post-hoc analysis are shown in Table 4-9. As it can be seen from the table 4-9, VI_ANIMATION is significantly different from the VI_GRAPIC and VI_CONVENTION. It means that higher storytelling level of interface has higher Entertainment experience.. 45.

(52) Table 4-9 Results of the Post-hoc Analysis Using LSD in STR-ETA. Multiple Comparisons (I) Different. (J) Different. Dependent. storytelling. storytelling. Variable. level of. level of. interfaces. interfaces. Difference (I-J). -.00322. .968. -.1624. 治 .07910 -.34921 政 ON 大. .000. -.5044 -.1940. *. (Middle). VI_ANIMATI ON. Nat. VI_ANIMAT VI_CONVEN TION. (Low). VI_GRAPIC. io. ION. .08113. .968. -.1560. -.34599*. .07910. .000. -.5012 -.1908. .34921*. .07910. .000. .1940. .5044. .34599*. .07910. .1908. .5012. n. *. The mean difference is significant at the 0.05 level.. Ch. .1560. .00322. engchi. ‧. ‧ 國. TION. 學. VI_GRAPIC. al. High. .08113. VI_CONVEN ETA. interval Lower. y. 立. Sig.. Error. Bound Bound. VI_ANIMATI. (High). confidence. Std.. sit. TION. Mean. er. VI_CONVEN VI_GRAPIC. 95%. i n U. .000. .1624. v. 4.3.2.3 Storytelling level visual interface and education experience For knowing the relationship between storytelling level and entertainment experience, I compare VI_CONVENTION, VI_GRAPIC and VI_ANIMATION (storytelling level from low to high) with their education experience. Like the previous section, Homogeneity test for variance need to be done to check if the assumption of ANOVA violate. The test of homogeneity of variances (Table 4-10), tests if the variances are equal for Levene’s test produced an F of .21 and a 46.

(53) p-value of 0.200. Since p-value is greater than 0.05, Levene’s test of homogeneity was insignificant. For these data the variance are relatively similar. Therefore, based on the results of Levene’s test, it means the data did not violate the assumption of ANOVA and the analysis could continue.. Table 4-10 Test of Homogeneity of Variances in STR-EDU. Levene Statics. df1. df2. Sig.. .021. 2. 964. .980. EDU. 政治大 To determine the relationship between storytelling level and education experience, I 立 ‧. ‧ 國. 學. conducted an ANOVA. The results are shown in Table 4-11. Table 4-11 Result of ANOVA-Education Experience. al. n. EDU. Squares. Within groups Total. 7.815. 2. 802.987. 964. Ch. e n g c h966i. 810.802. y. Mean. sit. io. Between groups. df. Square 3.907. er. Nat. Sum of. v i.833 n U. F. Sig.. 4.691. .009. These results of the F test reveal that the model is significant at p<0.05, indicating that the education experience varies according to storytelling level. To confirm the further relationship between storytelling level and education experience, I proceeded with post-hoc analysis. I used LSD to explain this. The results of post-hoc analysis are shown in Table 4-12. As it can be seen from the table 4-12, VI_ANIMATION is significantly different from 47.

(54) the VI_GRAPIC and VI_CONVENTION. It means that higher storytelling level of interface has higher education experience.. Table 4-12 Results of the Post-hoc Analysis Using LSD in STR-EDU. Multiple Comparisons (I) Different. (J) Different. Dependent. storytelling. storytelling. Variable. level of. level of. VI_CONVEN. ON. High. Bound. Bound. .907. -.1530. .1358. .017. -.3106. -.0300. -.1358. .1530. .024. -.3020. -.0214. .07149. .017. .0300. .3106. .07149. .024. .0214. .3020. .07149. .00857. .07357. -.16174*. .07149. io. ON. al. n. VI_ANIMAT VI_CONVEN. er. VI_ANIMATI. Ch. TION. .17032*. engchi. VI_GRAPIC. .907. y. TION. interval Lower. -.17032*. VI_CONVEN. VI_GRAPIC. (High). Error. ‧. ‧ 國. (Low). ION. Sig.. 學. VI_ANIMATI. (Middle). Std.. (I-J) 政治 interfaces 大立 VI_GRAPIC -.00857 .07357. TION. Nat. EDU. Difference. 95% confidence. sit. interfaces. Mean. .16174*. i n U. v. *. The mean difference is significant at the 0.05 level.. 4.3.2.4 Brief summary In the 4.3.2 section, I use one-way ANOVA to compare three aesthetic and storytelling levels (high, middle, and low) of visual interfaces with their user experience including esthetic, entertainment and education experience. From the. 48.

(55) result, we can find that high aesthetic and storytelling level of visual interface has significantly difference on the esthetic, education, and entertainment experience. In detail, high level aesthetic and storytelling of visual interface and low level aesthetic and storytelling of visual interface has significantly difference on the esthetic, education and entertainment experience. So do the high and low level aesthetic and storytelling of visual interface. In other hand, regarding the aesthetic and the storytelling, the middle level and the low level don’t have significant differences on. 政治大. those (esthetic, education and entertainment) user experiences. 立. ‧ 國. 學. 4.3.3 Regression analysis of Research Architecture component. ‧. In this section, regression analysis is the way to measure the hypothesis of whole. sit. y. Nat. research framework (Table 3-2). In detail, it can be divided into three small sections:. io. al. er. the relationship of VisAWI and esthetic experience; the relationship of Storytelling,. v. n. entertainment and education experience; the relationship of esthetic, education, and. Ch. engchi. entertainment experience and user satisfaction.. i n U. 4.3.3.1 VisAWI and esthetic experience Table 4-13 reports the results for the regression analyses of the relationship of esthetic experience and VisAWI. Hypotheses Ha1 suggest that VisAWI will positively affect esthetic experiences. With equation (1), I tested the hypotheses without including control variable including Storytelling, Number of visiting museum, education background. Result showed that the coefficient of VisAWI is positive and 49.