• Text Resize A A A
  • Print Print
  • Share Share Share Share

View all available chapters

6:7 Align Items on a Page

Relative Importance:

Relative Importance rating of 4 out of 5

Strength of Evidence:

Strength of Evidence rating of 5 out of 5

Document Type: Guideline


Topic:

Page Structure - General


Guideline:

Visually align page elements, either vertically or horizontally.


Comments:

Users prefer consistent alignments for items such as text blocks, rows, columns, checkboxes, radio buttons, data entry fields, etc . Use consistent alignments across all webpages.


Sources:

  • Ausubel, D.D. (1968). Educational Psychology: A Cognitive View. New York: Holt, Rinehart and Winston.
  • Bailey, R.W. (1996). Human performance engineering: Designing high quality professional user interfaces for computer products, applications and systems (3rd ed.). Englewood Cliffs, NJ: Prentice-Hall.
  • Esperet, E. (1996). Notes on hypertext, cognition, and language. In J.F. Rouet, J.J. Levonen, A. Dillon, & R.J. Spiro (Eds.), Hypertext and Cognition (pp. 149-155). Mahwah, NJ: Lawrence Erlbaum.
  • Fowler, S. (1998). GUI Design Handbook. New York: McGraw-Hill.
  • Lawless, K.A. & Kulikowich, J.M. (1996). Understanding hypertext navigation through cluster analysis. Journal of Educational Computing Research, 14(4), 385-399.
  • Marcus, A., Smilonich, N., & Thompson, L. (1995). The Cross-GUI Handbook. Reading, MA: Addison-Wesley.
  • Mayer, R.E., Dyck, J.L., & Cook, L.K. (1984). Techniques that help readers build mental models from scientific text: Definitions, pretraining, and signaling. Journal of Educational Psychology, 76, 1089-1105.
  • Parush, A., Nadir, R., & Shtub, A. (1998). Evaluating the layout of graphical user interface screens: Validation of a numerical computerized model. International Journal of Human-Computer Interaction, 10(4), 343-360.
  • Spyridakis, J.H. (2000). Guidelines for authoring comprehensible web pages and evaluating their success. Technical Communication, 47(3), 359-382.
  • Trollip, S. & Sales, G. (1986). Readability of computer-generated fill-justified text. Human Factors, 28, 159-164.
  • Voss, J.F., Fincher-Kiefer, R.H., Greene, T.R., & Post, T.A. (1986). Individual differences in performance: The contrastive approach to knowledge. In R.J. Sternberg (Ed.), Advances in the Psychology of Human Intelligence (pp. 297-2450). Hillsdale, NJ: Lawrence Erlbaum.
  • Williams, T.R. (1994). Schema theory. In C.H. Sides (Ed.), Technical Communications Frontiers: Essays in Theory (pp. 81-102). St. Paul, MN: Association of Teachers of Technical Writing.
  • Williams, T.R. (2000). Guidelines for designing and evaluating the display of information on the Web. Technical Communication, 47(3), 383-396.

Poor Example:

The design of these list columns makes them extremely difficult to scan, and thus will slow users attempts to find information.06_07_bad_example

Good Example:

The design of these list columns makes them extremely difficult to scan, and thus will slow users’ attempts to find information.

These columns are horizontally aligned, allowing the information to fall easily to the eye.06_07_good_example