Layout and Style

The Impact of Visual Layout Factors on Performance in Web Pages: A Cross-Language Study

The first article that I read, called ” The Impact of Visual Layout Factors on Performance in Web Pages: A Cross-Language Study,” examined the correlation between visual layout and website performance. Factors such as screen organization, alignment, consistency of location of elements on a page, and content density were all important factors that contributed to overall performance and optimized search time. The visual layout of a website has been “accepted as a determinant factor in performance” (Parush, et al., p. 142), and the use of an underlying grid is found to be critical to good web design. This study evaluated the use of grouping, alignment, density, and quantity of links, as four visual factors in the web layout, in order to determine their impact on performance. The study determined that the main factors affecting performance were the number of links on a page as well as good alignment. 

Although this article was from 2005, it provided important information that is relevant to web layout and style today.  The author examines that web design differs from GUI design because there have been very few scientific studies done for GUI interface design. In this study, the use of the four visual factors was examined in order to create 16 unique experimental conditions. The study was conducted in both English and Hebrew, with 71 participants and on 10 different computers, in order to verify if international sites can retain the same layout, or if this requires a separate version adapted to a specific region of the world (p. 155). The study revealed that the basic layout in international sites can be kept when there is a change in reading direction from right to left, instead of left to right, but other elements, such as language, graphics, and location-dependent items such as currency or date formats, may have additional impacts on the visual layout (p. 155). This study reflects that web layout is much more dynamic and variable than GUI’s and that a good designer should understand the technical, aesthetic, and cultural needs of their client, in order to provide relevant web design. 

Investigating Effects of Typographic Variables on Webpage Reading Through Eye Movements

 This article addresses the wide variety of styles and formatting in web technology today, and how this plethora of options can help contribute to poor design choices. The intentional use of good typographic elements has the ability to increase reading performance and improve eye movement in both child and adult participants, as well as improving accessibility for those with dyslexia. Visuo-typographic factors such as font type, size, and spatial distribution can improve readability in digital text, for users of all ages, and reading levels. In this study, 85 Italian native speakers, including children, adults, and some with dyslexia, had their eye movements tracked and recorded as they silently read texts within 50 different webpages (Scaltritti, et al., 2019). This research found multiple typographic elements that exhibited significant effects on eye movement and fixation across each age group and reading level (p. 6). The results of this study showed that larger bodies of text will result in skimming through the material, and that design should facilitate a less cluttered reading space. Line spacing yielded inconsistent results and should be used with caution. There were variable outcomes by age group, and by line distance which were both beneficial and detrimental. Other factors such as column width, font style, and luminance contrast were also studied but further investigations are needed for conclusive results.

I have studied graphic design, and understand many of the guidelines of typography, but I found this article interesting, in that many of the elements that are successful in print do not translate equally in a digital context. Using negative space around a body of copy allows space for the eye to move through the lines of text. Tracking, kerning, and alignment are all factors in the creation of negative space on a page. Font selections can be used as a tool to help facilitate and guide the eye down the line of the page as well, through the use of serif fonts that help simulate a visual line on the page. But reading a novel versus reading a webpage, serve two different functions and must be treated according to the purpose it was intended for. In the context of webpage layout, information must be organized logically, and not overcrowded on the page, in order to retain the viewers interest. The designer must consider all of these elements in the context of code across numerous platforms, numerous user needs, and numerous display sizes. All of these elements add more complexity to the fluid environment of webpage design.

References

Parush, A., Shwarts, Y., Shtub, A., & Chandra, M. J. (2005). The Impact of Visual Layout Factors on Performance in Web Pages: A Cross-Language Study. Human Factors, 47(1), 141–157. https://doi.org/10.1518/0018720053653785 (Links to an external site.)

Scaltritti, M., Miniukovich, A., Venuti, P., Job, R., De Angeli, A., & Sulpizio, S. (2019). Investigating effects of typographic variables on webpage reading through eye movements. Scientific Reports (Nature Publisher Group), 9, 1-12. https://doi.org/10.1038/s41598-019-49051-x