The influence of line spacing and text alignment on visual search of web pages
Introduction
With the advent of the World Wide Web, information presented on screen is now widespread. However, even a brief scan of the Internet will reveal that there is a wide variety in the way in which this information is presented. Some web sites may present data in a sparse and uncluttered style, others may present similar information in a cramped or cluttered fashion with little spacing between lines, making reading difficult. In some instances the latter approach may be appropriate, for example when there is a large amount of data presented in tabular form. However, the former approach is more likely to help with both visual search of pages and reading. Although extensive research has been conducted into the effect of a range of typographical variables on the reading of printed material [30], [34], far less has examined the relationship between typography and information presented on screens, and this lack is particularly noteworthy for web pages. Furthermore, the field of typography has investigated a wide range of variables and guidelines have been developed to indicate the best way of presenting text on the printed page (see e.g., [12]), although this advice does not map directly on to text presented on screen [4]. So it is to more recent research that we must turn for this advice. Dyson [6] presents a comprehensive summary of this work. Her paper examines the evidence that has evaluated the many alternatives for presenting onscreen text such as characters per line, use of columns and structure of the text. The current research examines the effects of two variables, line spacing and text alignment, on the visual search of web pages.
Despite the fact that there has been recognition of the importance of how text on web pages is presented (see e.g., [24], research suggests that designers need to make their web sites more usable [36]), particularly because many users may have a degree of visual impairment or dyslexia, or be lower-literacy users [25], [31]. The influence of human factors on interaction with screen elements should therefore be an integral part of the design process, because poorly designed layouts can quickly lead to fatigue, with a resultant lowering of speed and accuracy of task performance [32]. In addition, aesthetic considerations are also important for usability [20], [38] as these may be closely linked to individuals’ motivation and satisfaction [22].
Given the wide range of options for the presentation of text, it is perhaps surprising that there has not been more empirical investigation of the influence of different presentational formats on user interaction and satisfaction with web sites. However, there is general agreement that there are three basic elements that must be considered when developing a highly readable web page: typesize, spacing (whether down or across the page)[21], and colour [14]. This paper focuses on the second of these attributes, which to our knowledge has not been previously investigated empirically in web pages.
In the work that has examined the influence of design parameters, including font type [3] and line length [7], [19], the focus has tended to be on information retrieval. Information retrieval is a key activity in using the Web. As this activity involves visual search, research on the processes involved in visual search is essential. Visual conspicuity is one factor that influences the search process. This conspicuity can be defined as a combination of an object’s properties, relative to its background, which attracts attention and is therefore attended to. Conspicuity can be based on colour, shape, size, orientation and other properties of the display. Research indicates that if a target object is made visually conspicuous, search time can be up to 83% faster [26].
One way in which speed and accuracy of onscreen visual search – and hence usability – can be studied is through the manipulation of text presentation through altering parameters such as line length and text spacing. However, investigations of the effect of line length in both printed and on-screen formats have had differing results. For example, in a comprehension task, Duchnicky and Kolers [5] found that blocks of text of 75–100 characters per line (cpl) were read more quickly than when the text was presented in shorter lines. This finding contrasts with the more complex comprehension task used by Dyson and Haselgrove [7] who found that varying the amount of text presented between 55 and 100 cpl had no effect on reading speed. However, both of these tasks were based on reading blocks of text presented on-screen and not in the context of a realistic web browser window. In a more recent study, Ling and van Schaik [19] examined the effect of line length on objective and subjective measures using a realistic web environment. They found that line length influenced both types of measure. Their results had practical implications for individuals involved with web design. They suggested, first, that longer line lengths should be used when information is presented that needs to be scanned quickly, and second, shorter line lengths should be used when text is to be read more thoroughly, rather than skimmed. Given a choice between using long (85–100) and short lines (55–70), designers should opt for shorter lines, as though scanning web pages is a major activity when finding information on web sites [15], the majority of text-based web content is presented to be read rather than skimmed.
Line length can also be considered in terms of alignment, the way in which text is spread across the page. In terms of horizontal alignment, text can be presented as left- or right-aligned, which leads to uneven margins on the right or left side of text, respectively, or as justified, where the spaces between words are increased so that the text fits across the page with even margins on each side. No research has examined the effect of varying text alignment on the usability of web pages; however there is reason to believe that there may be differences in usage of web pages related to variation in typographic style given research that has used objective and subjective measures to inform the design of printed material (see e.g., [12], [13]). With printed material, there appears to be an advantage of greater interlinear spacing over lesser [10], though this has also not been verified with web pages.
Several factors impact on the usability of web pages, which can be determined using measures such as the time taken to perform tasks or in the accuracy of task performance (see e.g., [37]). Objective measures are commonly used to measure the usability of web sites. However, researchers have also recently begun to investigate the implications of aesthetics for the development of visual displays [23], [35] and web pages [28]. Users’ perceptions of a web site may be closely linked to the length of time they will spend on a site, as well as the probability of them returning to a site. Indeed, researchers have found a strong link between judgements of the aesthetic appeal of interfaces and their apparent usability [17]. Attention has focused on subjective measures as a means of exploring user satisfaction [1]. Subjective or preference data help the development of web sites that are visually appealing. At the same time, these data can be used along with objective data to produce better web sites, through an improvement in user satisfaction, higher levels of task performance or a combination of these. In addition, subjective measures can be more sensitive to differences in display quality than performance measures [27]. Tractinsky et al. [35] developed and validated an aesthetics evaluation scale which they used to test the relationship between the visual appeal of ATM and its usability. They found strong correlations between the system’s perceived aesthetics and its usability with a strong link between interface aesthetics and ‘a priori perceptions of ease of use’ ([35]: 140). This scale has since been used for the evaluation of web pages (e.g., [38]).
This research therefore had three aims. First, to examine the extent to which line spacing and text alignment have an impact on speed and accuracy of visual search performance. Second, to evaluate the impact of these design choices on users’ aesthetic evaluations of web sites. And finally, aim to explore further whether a relationship exists between aesthetic considerations, preference and usability (performance) measures in use of the internet.
Section snippets
Experimental design
The experiment used a two-factor mixed measures design. The within-subjects factor was line spacing, with three levels: single spacing (1), space-and-a-half (1.5) and double spacing (2). The between-subjects factor was text alignment with two levels: left-aligned and justified. The dependent variables were accuracy and speed of visual search as well as subjective measures relating to aesthetic appeal.
Participants
There were 65 undergraduate participants, 47 of whom were female. Of these, 26 took part in the
Results
The effects of line spacing and text alignment on accuracy and speed of task performance as well as aesthetic value and preference were analysed. A series of 2× (3) analyses of variance (ANOVA) assessed the effects of alignment (left-aligned or justified) and line spacing (1, 1.5 or 2 lines) on outcome measures; where appropriate, post hoc analyses were conducted to test for specific differences between line spacings.
Discussion
The present research examined the influence of two variables, line spacing and text alignment, on objective and subjective measures in the visual search of web pages. Overall, the findings were consistent. Where a difference existed between the types of presentation for the accuracy and speed measures, the order of performance was the same for both spacing and alignment: participants performed better with double line spacing than with 1.5 spacing, and better with 1.5 than single spacing.
References (39)
- et al.
Perceived disorientation: an examination of a new measure to assess web design effectiveness
Interacting with Computers
(2001) - et al.
Comparing the effects of text size and format on the readability of computer-displayed Times New Roman and Arial text
International Journal of Human-Computer Studies
(2003) - et al.
The influence of reading speed and line length on the effectiveness of reading from screen
International Journal of Human-Computer Studies
(2001) - et al.
The effect of text and background colour on visual search of Web pages
Displays
(2002) - et al.
The influence of font type and line length on visual search and information retrieval in web pages
International Journal of Human-Computer Studies
(2006) - et al.
What is this evasive beast called user satisfaction?
Interacting with Computers
(2003) Measuring the aesthetic elements of screen designs
Displays
(2001)- et al.
What is beautiful is usable
Interacting with Computers
(2000) - et al.
Abstract representations as a basis for usable user interfaces
Interacting with Computers
(2004) Screen design
The effect of link colour on information retrieval in educational intranet use
Computers in Human Behavior
Reading from paper versus screens: a critical view of the empirical literature
Ergonomics
Readability of text scrolled on visual display terminals as a function of window size
Human Factors
How physical text layout affects reading from screen
Behaviour & Information Technology
The effects of line length and method of movement on patterns of reading from screen
Visible Language
Readability as a function of the straightness of right-hand margins
Journal of Typographic Research
Computer screen designs: viewer judgments
Educational Technology Research and Development
Milliseconds matter: an introduction to microstrategies and to their use in describing and predicting interactive behaviour
Journal of Experimental Psychology-Applied
Cited by (42)
Does BeeLine Reader's gradient-coloured font improve the readability of digital texts for beginning readers?
2022, Computers in Human Behavior ReportsCitation Excerpt :A brief overview of several important principles and empirical findings that are related to these design features is provided below. Line spacing is known to affect the readability of a text (Bernard et al., 2007; Blackmore-Wright et al., 2013; Calabrèse et al., 2010; Chung, 2004; Chung et al., 2008; Katzir et al., 2013; Ling & van Schaik, 2007; Madhavan et al., 2016; Rello et al., 2016). More specifically, reading pace increases as a function of enhanced line spacing, presumably by decreasing the adverse effect of visual crowding2 between adjacent lines (Bernard et al., 2007; Chung, 2004).
Effects of text space of Chinese-English bilingual traffic sign on driver reading performance
2021, DisplaysCitation Excerpt :Luna [23] and Highsmith [24] recommend adding 20 percent to the type size to give the line spacing for the standard practice on text setting. When doing a visual search on a web page, Ling and van Schaik [25] found that deeper line spacing achieved faster search time. However, for Chinese reading, Chan and Steve [26] found that the increased line spacing resulted in longer reading time in proofreading performance.
UIPA: User authentication method based on user interface preferences for account recovery process
2020, Journal of Information Security and ApplicationsCitation Excerpt :Moreover, according to [6], the correlation exists between an individual's characteristics and his/her choice of font type. Personality factors affect UI design preferences [44,46,53]. Therefore, the users’ characteristics will affect their interface preferences, and each individual has his/her own characteristics for different interface designs.
Larger Chinese text spacing and size: Effects on older users' experience
2020, Ageing and SocietyColor aesthetics with regard to product design and multimedia web pages
2023, Multimedia Tools and Applications