The Study of User’s Image Evaluation of Responsive Web Background Design─ A Case Study of 490 Websites of Mediaqueri.es from 2011 to 2013

碩士 === 輔仁大學 === 應用美術學系碩士班 === 103 === The mobile technology is changing the world and using small-screen devices to surf the internet has become the trend. Besides, super-large screen displays are becoming universal quickly. Therefore, the difference in size between internet-based devices gets bigge...

Full description

Bibliographic Details
Main Authors: Tsai Shao Ling, 蔡韶玲
Other Authors: Wu Pei Ying
Format: Others
Language:zh-TW
Published: 2015
Online Access:http://ndltd.ncl.edu.tw/handle/dbjt69
Description
Summary:碩士 === 輔仁大學 === 應用美術學系碩士班 === 103 === The mobile technology is changing the world and using small-screen devices to surf the internet has become the trend. Besides, super-large screen displays are becoming universal quickly. Therefore, the difference in size between internet-based devices gets bigger and bigger. The different screens have produced many problems in use of web browser interfaces. To make users have a good web surfing experience in all kinds of devices, responsive web design emerges. Now, websites with the responsive web design have become the trend. Therefore, it’s worth learning about the situation of the existing responsive web design and discussing the users’ feelings for the responsive web design. The visual design elements of the responsive web have not been studied yet in Taiwan. Therefore, by evaluating the mental imagery of users of webs with responsive design, this research hopes to achieve following goals of: (1) summarizing the elements and styles of the existing responsive web design; (2) analyzing differences in mental imagery of users from different backgrounds; (3) discussing the correlation between responsive web background design elements and mental imagery of users. It will summarize the criteria of responsive web background design, which will serve as a reference for future web designers or planners, so that they can design websites closer to emotional demands of users. This research studied the responsive web design works of Mediaqueri from 2011 to 2013, which summed to 490 pieces. It’s divided into 3 stages: (1) 490 samples were divided into 5 types through morphological analysis and cluster analysis and 5 representative samples were selected; (2) the adjectives, which are said by users after they had seen webs with responsive design, were collected by using KJ method and questionnaire method; 10 groups of representative ones were selected from 192 adjectives; through factor analysis, it concluded that the hidden factors that affected users’ imagery for webs with responsive design were “visual performance” and “visual design”; (3) 5 groups of representative web samples and 10 groups of representative adjectives were used in 7-Step Semantic Differential Scale to evaluate mental imagery of users. Based on the experimental result of 291 valid questionnaires, it arrives at the conclusions below: I. 490 responsive webs are divided into 5 clusters: photo, primary color, single color, inset and block cluster; the single color and block cluster are in the overwhelming majority; light tones and gray tones are their common features; instead of pictures, single base color or color block is used as the background; therefore, it can know that the existing responsive web background design prefers a simple design style. II. According to the statistical results of Independent Samples T-Test and one-way anova, the difference in imagery between gender and age reaches a significant level; the difference in visual performance in the group of photos reaches a significant level; while in the group of blocks, the difference in visual design reaches a significant level; however, the primary color cluster, the single color cluster and the inset cluster are slightly different in visual performance and visual design. III. Over 9 groups of representative adjectives are related to 12 design elements of responsive web background, i.e. “Shading”, “Continuous Pattern”, “Full-Page Picture” and “Page Fragment” in “Background Type”, “Font”, “Inset”, “Graphic Symbol” and “Photo” in “Background Picture”, “Middle Tone” in “Backlight Value”, and “Warm Tone”, “Neutral Color” and “Gray Tone” in “Background Tone”, thereby showing that these design types are keys to users’ imagery for responsive web background. In the future, designers can plan and design these elements in details when creating responsive webs.