Keywords

1 Introduction

The user’s web browsing experience can be affected by various visual design elements such as font, font size, color, column, spacing and layout, which are directly proportional to the amount of information on the page. Each user group’s acceptable amount of information loading is different and is limited by physical and psychological constraints. Too much page content may present obstacles to users.

The amount of information on web pages is related to usability, aesthetics and perceived value. There were considerable studies on subjective preference assessment of web design, such as visibility, accessibility [1], aesthetics, satisfaction, pleasurability, attractiveness, information complexity, performance, working memory, and visual fatigue [2,3,4,5,6,7,8,9,10,11,12,13,14]. The variables of these studies were design elements such as font style [15], column width [16], proportion [2], color [17, 18], symmetry [19, 20], icon [13, 21, 22], screen size [13] and length of table [23].

White space is also known as negative space and is accounted for a part of the web layout. It is usually an unobtrusive blank area. By measuring the amount of white space, one would be able to observe the complexity of web pages and the amount of information. Therefore, white space is an important factor on web pages browsing. This study explored white space in order to provide more effective, concise and pragmatic recommendations for web design.

2 Literature Review

There were many studies focused on evaluation of web pages browsing experience. For examples, readability was influenced by the amount of words and white space [24]. White space was associated with aesthetics [3]. Aesthetic web pages accounted for 90% of web reliability. White space on web pages and its association with usability and artistry was analyzed and explored [25]. The relevance between white space of advertisement and consumer perception was discussed from a semantic perspective [26]. Three kinds of white space were used to study the aesthetics, efficiency, utility and satisfaction of web pages. The results suggested that the usability of a website was impacted negatively when white space increased over 50% [3].

2.1 White Space

White space is known as negative space, which occupies a part of the web layout and is usually an unattractive blank. There are also some in-between areas that can be called white space, such as lines, pictures, texts, graphics, edges, fonts, paragraphs, and color blocks. These are the space for reading content easily [27, 28]. There are other situations that create the feeling of white space, such as the same background color and a set combination of images. White space is not directly related to “white background” [29]. “White” is not mentioned as white color, but white means “sensibility” [30]. In addition, the advertisement area can be seen as white space by users [31, 32].

There are a lot of studies on web design and performance. The performance issue of web design can be determined by variables such as “position of main visual images,” “ratio of texts and images,” “composition,” “text size,” “layout,” “frames,” “types of hyperlink,” “number of colors” and “background colors”. Each variables are related to the white space of web pages [3, 25, 26, 31,32,33].

2.2 Usability

Usability is an important element in the field of web design. It is all web designers’ responsibility to transfer information from specific web pages to users [34]. Sometimes, users feel frustrated while gaining information on the Internet. The process or website is not designed for user experiences could be the reason. It does not correspond to users’ communicative and cognitive abilities [35]. “Usability” is a concept that focuses on building an easy-to-use web interface [21, 27, 36,37,38,39]. Inexperienced users and experienced users have different preferences [40]. The perception of usability is also influenced by users with different backgrounds [34]. People with disabilities may have more specific needs. Designers need to analyze the actual needs of the disabled so that they could adapt to information technology [41, 42]. Poor design of website makes users difficult to search information [43], and even harder to receive content from the website [44].

The state of people receiving and digesting information from the outside world is called “information load” [45]. “Information overload” occurred when the amount of information exceeds the limitation of people’s processing capacity [46, 47]. In the era of information explosion, there are many anxious people concerning so much information that needs to be absorbed. While information overload is a common problem that becomes more and more serious, a variety of tools has been developed to simply information. For example, there are tools that summarize articles automatically to rescue people from information flows. “Summly” is one of the tools that summarizes text, websites, and documents from vast information. In addition, “Readability” is another tool that is built as a Google Chrome plugin. It can enhance the comfort and readability of web pages browsing. Yahoo plans to develop a homepage for the elderly with other universal design projects. These attempts allow users to browse the Internet more effectively.

2.3 Aesthetics

Visual aesthetics has been shown to critically affect a variety of constructs such as perceived usability, satisfaction, and pleasure [3, 5]. The aesthetic appearance of user interface and its influence on users’ impressions and performance has long been neglected in the field of human-computer interaction [20]. In fact, visual aesthetics plays an important role in users’ evaluations of IT artifacts and in their attitudes toward interactive systems [48]. When the same content is presented using different levels of aesthetic treatment, the content with a higher aesthetic treatment is judged as having higher credibility [44]. Symmetry of compositional elements significantly affects users’ aesthetic ratings of interfaces [19].

Users can generate a first impression of a web page in a short period of time and that impression has effect on their subsequent behaviors [49]. One of the factors that may influence users to stay or go is the page aesthetics [44]. Visual clarity and visual richness are two important aesthetic dimensions. Visual clarity refers to clean, clear, and symmetrical designs; visual richness refers to creativity and originality aspects of websites [50]. The degree of visual complexity is also an important indicator of aesthetic preference, and people prefer a moderate level of visual complexity [51]. Responding to his recommendation about the amount of information, the moderate amount of information conveyed by the website allowed the eyes feeling comfortable without visual burdens and were generally more receptive [52].

Aesthetically appealing websites received higher ratings of perceived usability and trustworthiness than non-aesthetic websites. The website scoring high on expressive aesthetics shows a similar pattern of results to classical aesthetics [53]. The perception of complexity is highly subjective but may be reliably measured. Understanding the complexity of web pages as perceived subjectively by users is important to better design of user interface [54].

2.4 Perceived Value

Web pages are mostly relevant to business purposes. Whether web design could bring people a sense of value or not is related to whether consumers feel the value of goods. The difference between perceived value and satisfaction is that the former is the feeling before buying and the latter is the evaluation after purchasing or using. Therefore, perceived value is more applicable to the Internet generation. It could be the basis for assessing the customer’s feeling of goods or services on the web page before buying or not [55, 56].

Web design affects not only usability and aesthetics, but is also closely associated to business outcomes and is an increasingly important component of promotional strategy for many organizations. Important factors that appear to influence perceptions of home page complexity, including home page length, number of graphics, number of links, amount of text, and use of animation [57]. White space is an essential element in web design and plays an important role in the visual layout and brand positioning [28]. It could be a chance to develop a more valuable brand [58]. Designers could create a refined and elegant, high-quality and noble feeling for a high-class brand by using white space [58]. More white space equals a more luxurious brand and website [24]. When white space is used appropriately, it allows a page to create a general flow and balance, which in turn helps communicate the intent of the design by welcoming readers and inviting them to stay awhile [29]. It could in turn affect market power and further contribute to brand positioning.

Perceived value into four dimensions. (1) Emotional values: the utility derived from the feelings or affective states that a product generates. (2) Social value (enhancement of social self-concept): the utility derived from the product’s ability to enhance social self-concept. (3) Functional value (price/value for money): the utility derived from the product due to the reduction of its perceived short term and longer term costs. (4) Functional value (performance/quality): the utility derived from the perceived quality and expected performance of the product [59].

According to literature reviews above, white space, usability, aesthetics and perceived value are related. There are tight relationships between users’ initial perceptions of interface aesthetics and their perceptions of the system’s usability. These relations endure even after actual use of the system [60]. In order to create a good user experience, it is important to understand the relation between aesthetics and usability, as well as the processes underlying this relation [61]. Designers need to understand the user’s behavior more and require a variety of design elements to adjust the presentation of the interface. An affective response to the design’s aesthetics may improve users’ mood and their overall evaluations of the system [60].

Users of different ages and backgrounds are varied in visual load, working memory and memory load. For the purpose of meeting the needs of all ages, it is necessary to understand comprehensively user behaviors and preferences. By lowering the threshold of use, users could enjoy new network service with ease and convenience.

3 Methodology

Thirty-five university students aged from 18 to 24 years old were recruited by purposeful sampling to conduct the operation evaluation. The ETtoday news interface was chosen as the sample, which was the top brand of news websites in Taiwan. Four web page samples were designed with low (45%) and high (55%) percentage of white space. In order to make the experimental web pages similar to real news web pages, the percentage of white space was only slightly modified and centered around 50%.

The web pages were arranged in a random order in order to avoid the order effect of the experiment. The participants sat directly in front of the computer monitor and operated the task one by one. After the participants browsed the web pages, their affective data were collected by a questionnaire. In order to confirm the reliability and validity of the questionnaire and ease the burden on the participants, a pretest was given to a group of students who met the demographic criteria. Some questions in the questionnaire that had insufficient reliability were deleted before the formal experiment.

The percentage of white space was calculated by detecting the color of each pixel on the web page, the total white space count would be plus one if a point of white was found. Java syntax was used for the calculation program. The meaning of texts, images and other factors that might influence visual perception of the web pages were excluded, in order to explore user preferences to usability, aesthetics and perceived value of white space on the web pages. The participants’ psychological amount of white space on different samples was also compared. The questionnaire was discussed and formulated for the study and was based on the System Usability Scale (SUS) [37], the aesthetic preference evaluation [5], and the perceived value evaluation [59]. The experiment adopted a five-point Likert scale from 1 (strongly disagree) to 5 (strongly agree). Figures 1, 2, 3 and 4 are the experimental web pages with two different percentages of white space and two spacing values.

Fig. 1.
figure 1

Sample A with 45% white space and wide spacing

Full size image
Fig. 2.
figure 2

Sample B with 55% white space and wide spacing

Full size image
Fig. 3.
figure 3

Sample C with 45% white space and narrow spacing

Full size image
Fig. 4.
figure 4

Sample D with 55% white space and narrow spacing

Full size image

4 Results

Most of the participants had up to 5 years of experience in using a computer. The results of previous studies suggested that medium percentage of white space around 50% was more favorable to the user. The results of this study indicated that the participants preferred 55% to 45% white space.

It was interesting to note that even though the web pages were centered around 50% of white space, three questions revealed significant differences. “I found the web page unnecessarily complex” in the section of usability resulted in a statistically significant difference (F = 3.818; df = 3, 136; p < .05). Post-hoc Tukey HSD tests showed that sample C (3.2) was significantly different from sample B (2.3) (p < .05). “The layout appears too dense” in the section of aesthetics resulted in a statistically significant difference (F = 4.007; df = 3, 136; p < .05). Post-hoc Tukey HSD tests showed that sample C (3.7) was significantly different from sample A (2.8) (p < .05), and sample C (3.7) was significantly different from sample B (2.8) (p < .05). “This web page would help me to feel acceptable” in the section of perceived value resulted in a statistically significant difference (F = 3.310; df = 3, 136; p < .05). Post-hoc Tukey HSD tests showed that sample B (3.6) was significantly different from sample C (3.0) (p < .05), and sample A (3.6) was significantly different from sample C (3.0) (p < .05).

4.1 Psychological Amount of White Space

Toward a specific web page, different participants might have a dissimilar feeling of white space is referred to as psychological amount of white space. The participants preferred the samples designed with wider spacing under the same psychological amount of white space. Narrower layout stimulated lower psychological amount of white space. The psychological amount of white space had overall statistically significant difference (F = 13.292; df = 3, 136; p < .05). Post-hoc Tukey HSD tests showed that sample B (49.0%) and sample D (46.1%) with more white space were significantly different from sample A (32.7%) (p < .05). Sample B (49.0%) and sample D (46.1%) with more white space were significantly different from sample C (34.1%) (p < .05). The overall anticipated psychological amount of white space was 72%–87% less than original calculation.

4.2 The Time Spent on the Internet

It was assumed that experiences and preferences were affected by the time spent on specific activities. The experimental results could be different if the participants spent different amount of time on the Internet. There were four levels. (1) Users spent under two hours on the Internet daily. (2) Three to six hours daily. (3) Seven to twelve hours daily. (4) More than thirteen hours daily.

There was no statistically significant difference in usability. An ANOVA on the section of aesthetics was conducted to examine significantly higher scores. “The layout appears too dense” was highly significant (F = 4.048; df = 3, 136; p < .05). Post-hoc Tukey HSD tests showed that sample A (3.667) was significantly different from sample D (2.417) (p < .05) and sample B (3.357) was significantly different from sample D (2.417) (p < .05). “Everything goes together on this site” resulted in a statistically significant difference (F = 4.619; df = 3, 136; p < .05). Post-hoc Tukey HSD tests showed that sample D (3.542) was significantly different from sample B (2.750) (p < .05). “The layout is pleasantly varied” resulted in a statistically significant difference (F = 7.902; df = 3, 136; p < .05). Post-hoc Tukey HSD tests showed that sample C (3.042) was significantly different from sample A (1.917) (p < .05), sample D (3.500) was significantly different from sample A (1.917) (p < .05), and sample D (3.500) was significantly different from sample B (2.679) (p < .05). “The layout appears professionally designed” resulted in a statistically significant difference (F = 3.654; df = 3, 136; p < .05). Post-hoc Tukey HSD tests showed that sample C (3.167) was significantly different from sample A (2.167) (p < .05), and sample D (3.250) was significantly different from sample A (2.167) (p < .05). “This web page has an acceptable standard of quality” resulted in a statistically significant difference (F = 4.567; df = 3, 136; p < .05). Post-hoc Tukey HSD tests showed that sample C (3.375) was significantly different from sample A (2.500) (p < .05), and sample D (3.708) was significantly different from sample A (2.500) (p < .05). “This web page has poor workmanship” resulted in a statistically significant difference (F = 3.051; df = 3, 136; p < .05). Post-hoc Tukey HSD tests showed that sample A (2.917) was significantly different from sample D (1.958) (p < .05).

An ANOVA on the section of perceived value was conducted to examine significantly higher scores. “This web page is one that I would enjoy” resulted in a statistically significant difference (F = 5.803; df = 3, 136; p < .05). Post-hoc Tukey HSD tests showed that sample C (3.063) was significantly different from sample A (2.000) (p < .05), and sample D (3.458) was significantly different from sample A (2.000) (p < .05). “This web page is one that I would feel relaxed about using” resulted in a statistically significant difference (F = 3.714; df = 3, 136; p < .05). Post-hoc Tukey HSD tests showed that sample D (3.583) was significantly different from sample A (2.500) (p < .05), and sample D (3.583) was significantly different from sample B (2.804) (p < .05). “This web page would help me feel acceptable” resulted in a statistically significant difference (F = 3.937; df = 3, 136; p < .05). Post-hoc Tukey HSD tests showed that sample D (3.958) was significantly different from sample B (3.143) (p < .05). “This web page would make a good impression on other people” resulted in a statistically significant difference (F = 3.518; df = 3, 136; p < .05). Post-hoc Tukey HSD tests showed that sample D (3.583) was significantly different from sample A (2.583) (p < .05). “This web page would give its owner social approval” resulted in a statistically significant difference (F = 6.212; df = 3, 136; p < .05). Post-hoc Tukey HSD tests showed that sample D (3.833) was significantly different from sample A (2.667) (p < .05), and sample D (3.833) was significantly different from sample B(3.036) (p < .05).

4.3 The Frequency of News Browsing

User experiences and preferences were influenced by the frequency of news browsing. There were the following selections: one day a week, two days a week, three days a week, etc.… and every day in a whole week. An ANOVA on the section of usability was conducted to examine significantly higher scores. “I think that I would like to use this web page frequently” resulted in a statistically significant difference (F = 3.022; df = 5, 29; p < .05). “I thought the web page was easy to read” resulted in a statistically significant difference (F = 2.613; df = 5, 29; p < .05). “Everything goes together on this site” on the section of aesthetics resulted in a statistically significant difference (F = 2.750; df = 5, 29; p < .05). “This web page would make a good impression on other people” on the section of perceived value resulted in a statistically significant difference (F = 2.843; df = 5, 29; p < .05).

5 Discussion and Conclusion

User preferences are supported by experiences. In this study, factors that affect usability, aesthetics and perceived value of web pages were examined and different percentages of white space were evaluated. “I found the web page unnecessarily complex” in the section of usability, “the layout appears too dense” in the section of aesthetics, and “this web page would help me to feel acceptable” in the section of perceived value, resulted in a statistically significant difference. The result also indicated that most participants preferred more white space.

The sample web pages were generated by lorem ipsum, and images were replaced by grey color blocks, but the participants still felt that actual banner images should be there. It was the experience from the participants’ original memory. Some participants did not interpret text spacing as white space and the psychological amount of white space was lower than actual calculation. This research provided a method to evaluate usability, aesthetics and perceived value of white space on web pages. It is hoped that in the future, designers could design web pages more accurately in accordance with user preferences. A variety of user preferences cannot be anticipated without further studies. There are a lot of website design standards such as WCAG (Web Content Accessibility Guidelines) while more and more network services are related to customization. In the future, white space could be the key factor to improve the user’s web browsing experience.