Formalizing Design Guidelines of Legibility on Web Pages

  • Fong-Ling Fu
  • Chiu-Hung Su
Conference paper
Part of the Lecture Notes in Computer Science book series (LNCS, volume 5618)


Screen design of web pages is challenging because web pages contain lot of icons, consisting not only of texts with various fonts but also graphics with different sizes and content. The objectives for screen design of a web page can be either to provide aesthetic beauty, to convey complex information, to improve legibility, or some combination of the above. This study chooses to formalize design guidelines of legibility because information is becoming more and more complicated in web pages and hampering the efficiency of information searching. This study proposes six measurements of screen legibility: screen ratio of navigator to content, font size variety, variety of icon types, color contrast between background and foreground, content density, and number of alignment points. These six factors were then use to measure the legibility effectiveness of the startup page on four different sites. Combined with the results from a survey study, we concluded that all six factors were validated to be attributes with a significant and measurable impact on web site legibility.


Guidelines of Web pages Web pages design Screen layout design Legibility design Complexity measurement 


  1. 1.
    Bedrogi, P.: Chromaticity Contrast in Visual Search on the Multi-colour User Interface. Displays 24, 39–48 (2003)CrossRefGoogle Scholar
  2. 2.
    Ch’ng, E., Ngo, D.C.L.: Screen Design: a Dynamic Symmetry Grid Based Approach. Displays 24, 125–135 (2003)CrossRefGoogle Scholar
  3. 3.
    Ngo, D.C.L., Teo, L.S., Byrne, J.G.: Formalising Guidelines for the Design of Screen Layouts. Display 21, 3–15 (2000)CrossRefGoogle Scholar
  4. 4.
    Dong, Y., Ling, C., Hua, L.: Effect of Glance Duration on Perceived Complexity and Segmentation of User Interfaces. In: Jacko, J.A. (ed.) HCI 2007. LNCS, vol. 4552, pp. 605–614. Springer, Heidelberg (2007)CrossRefGoogle Scholar
  5. 5.
    Fu, F.L., Su, C.H.: Measuring the Screen Complexity on Web Pages. In: Smith, M.J., Salvendy, G. (eds.) HCII 2007. LNCS, vol. 4558, pp. 720–729. Springer, Heidelberg (2007)CrossRefGoogle Scholar
  6. 6.
    Kim, J., Lee, J., Han, K., Lee, M.: Businesses as Buildings: Metrics for the Architectural Quality of Internet Businesses. Information System Research 13(3), 239–254 (2002) Google Scholar
  7. 7.
    Ling, J., van Schaik, P.: The effect of text and background colour on visual search of Web pages. Displays 23, 223–230 (2002)CrossRefGoogle Scholar
  8. 8.
    Massey, A.P., Khatri, V., Montoya-Weiss, M.: Usability of online services: The role of technology readiness and context. Decision Sciences 38(2), 277–308 (2007)CrossRefGoogle Scholar
  9. 9.
    Miyoshi, T., Murata, A.: A Method to Evaluate Properness of GUI Design Based on Complexity Indexes of size, Local Density, Aliment, and Grouping. In: 2001 IEEE International Conference on Man and Cybernetics, vol. 1, pp. 221–226 (2001)Google Scholar
  10. 10.
    Parry, M., Eberle, S.D.: Aesthetic measure applied to color harmony. Journal of the Optical Society of America 34(4), 234–242 (1944)CrossRefGoogle Scholar
  11. 11.
    Moon, P., Spencer, D.E.: Area in Color Harmony. Journal of the Optical Society of America 34(2), 93–103 (1944)CrossRefGoogle Scholar
  12. 12.
    Näsänen, R., Ojanpäa, H.: Effect of Image Contrast and Sharpness on Visual Search for Computer Icons. Display 24, 137–144 (2003)CrossRefGoogle Scholar
  13. 13.
    Ngo, D.C.L., Teo, L.S., Byrne, J.G.: Modeling Interface Aesthetics. Information Science 152, 25–46 (2003)CrossRefGoogle Scholar
  14. 14.
    Schenjkam, B.O., Jönsson, F.U.: Aesthetics and Preferences of Web Pages. Behaviour & Information Technology 19(5), 367–377 (2000)CrossRefGoogle Scholar
  15. 15.
    Shneiderman, B., Plaisant, C.: Designing the User Interface, 4th edn. Addison Wesley, England (2004)Google Scholar
  16. 16.
    Palmer, J.: Web Site Usability, Design, and Performance Metrics. Information Systems Research 13(2), 151–167 (2002)CrossRefGoogle Scholar
  17. 17.
    Parush, A., Nadir, R., Shtub, A.: Evaluating the Layout of Graphical User Interface screens: Validation of a Numerical Computerlized mode. International Journal of Human-Computer Interaction (2005)Google Scholar
  18. 18.
    van Schaik, P., Ling, J.: The effects of screen ratio and order on information retrieval in web pages. Displays 24, 187–195 (2003)CrossRefGoogle Scholar
  19. 19.
    Valacich, J.S., Parboteeah, D.V., Wells, J.D.: The Online Consumers Hierarchy of Needs. Communications of the ACM 50(9), 84–90 (2007)CrossRefGoogle Scholar
  20. 20.
    van Schaik, P., Ling, J.: The effects of screen ratio and order on information retrieval in web pages. Displays 24, 187–195 (2003)CrossRefGoogle Scholar
  21. 21.
    Van der Heijden, H.: User Acceptance of Hedonic Information Systems. MIS Quarterly 28(4), 695–704 (2004)Google Scholar
  22. 22.
    Xing, J.: Measures of Information Complexity and the Implications for Automation Design, National Technical Information Service, Springfield, Virginia (2004)Google Scholar
  23. 23.

Copyright information

© Springer-Verlag Berlin Heidelberg 2009

Authors and Affiliations

  • Fong-Ling Fu
    • 1
  • Chiu-Hung Su
    • 1
  1. 1.Department of Management Information SystemsNational Cheng-chi UniversityTaipeiTaiwan

Personalised recommendations