Usability and Readability not put into practice

I worked in and have certifications within the Graphics Industry (one of my [lost]careers) . What I find incomprehensible is that articles I read discussing web design (as well as many web pages I have seen), lack  attention to, or understanding of, the basics of page layout for readability. There is a design principle called the "Grid System" that graphic designers learn when they begin their studies, which addresses readability and comprehension. I feel anyone involved in doing a lot of communicating using the written word needs to be aware of the grid system. (Note that our textbook Don't Make Me Think does follow a grid system for design.) These grid system design principles aid the reader in absorbing and comprehending what is written.

I will attempt to summarize, in a simplistic way, this information for those who may be interested.

The grid system is what we see when we read a newspaper; text is in columns (it makes it easier to read.) Any well written book or web page utilizes these layout principle, although in some cases it may not be evident to the unaware reader.

  1. The most glaring error I see is that authors do not constrain text on a web page, they let it flow across the entire screen. So if the reader has a fourteen inch monitor or a twenty inch one, the text just flows across the entire screen making it very difficult to read and comprehend. Text on a web page should be constrained (or controlled) utilizing tables or cascading style sheets. If you look at any well designed web page you will see that the flow of the text across the page is controlled. It makes it much easier to read and also improves the aesthetics of the page.

 

  1. Another gird system  principle (this element is present in the design of our book) is the horizontal distance between lines, called leading. This element also needs to be controlled.

The longer a line of text, the greater the need for the leading to be increased. This aids the reader in not struggling with discerning the words and allows them to comprehend its meaning.  Look in our book and you can see the author has increased space between the lines of text. There are graphic standards that have been developed which explains how to best do this.
 

  1. Utilizing columns to break up large blocks of text (similar to what is found in newspapers, textbooks and magazines is an effective way of making the information easier to read and comprehend. It allows the eyes to easily scan and take in the text. This principle is evident on any well designed web page.
Fellow student, Meg, thoughtfully presented a link to "Hints for Web Authors" by Warren Steel. He lets his text flow across the screen without any constraint. I have borrowed this text for my example. (text follows as an example of page layout - not for reading)

A web author is not a programmer, nor a typographer, nor a graphic designer. Since the days of Gutenberg, authors have learned to "let go" of their cherished work ("Farewell, sweet book") when they deliver their manuscript to the publisher. The author's manuscript may include chapters, paragraphs, headings, tables, and illustrations, all clearly marked, but it is the editor who chooses the paper, page design, fonts, and other characteristics, according to a "house style." In the same way, a web author prepares a document by marking up the elements, and then "sends it to the publisher" by placing it on a web server. The function of the editor is shared between the browser, which renders the text and graphics on the available hardware, and the human being who views the document. It is the user who configures the browser by choosing the fonts, sizes, and colors and other features of the onscreen appearance. This is the great strength of the World Wide Web. On a non-graphic browser, the user can view text descriptions in place of the invisible images. On a graphic browser, a nearsighted user can control the size of the fonts; a colorblind user can choose colors that offer enough contrast for legibility. A user on a slow line, say a dialup, can disable graphic loading, only displaying graphics individually when they contain essential information. A blind user can listen to a web document when rendered by a speech synthesizer, or read it by means of a braille browser. In every case, the structure of the document is the same, but the renderings are customized for the individual.

Hypertext Markup Language (HTML) is a simple but ingenious concept. If you use it for the purpose for which it was designed, you will learn to love its simplicity and flexibility. If you try to use it for a page description language, or a desktop publishing program, you will learn to hate it, and will be doomed to endless frustration. If the exact appearance of a document is of paramount importance, you have other options—you can scan it and create a bitmapped image of your page, or you can offer it in a sophisticated page description language such as Postscript, which can be viewed on an appropriate viewer. In either case, you will have lost the flexibility in rendering that is the chief advantage of HTML

This is the same text placed into one column

A web author is not a programmer, nor a typographer, nor a graphic designer. Since the days of Gutenberg, authors have learned to "let go" of their cherished work ("Farewell, sweet book") when they deliver their manuscript to the publisher. The author's manuscript may include chapters, paragraphs, headings, tables, and illustrations, all clearly marked, but it is the editor who chooses the paper, page design, fonts, and other characteristics, according to a "house style." In the same way, a web author prepares a document by marking up the elements, and then "sends it to the publisher" by placing it on a web server. The function of the editor is shared between the browser, which renders the text and graphics on the available hardware, and the human being who views the document. It is the user who configures the browser by choosing the fonts, sizes, and colors and other features of the onscreen appearance. This is the great strength of the World Wide Web. On a non-graphic browser, the user can view text descriptions in place of the invisible images. On a graphic browser, a nearsighted user can control the size of the fonts; a colorblind user can choose colors that offer enough contrast for legibility. A user on a slow line, say a dialup, can disable graphic loading, only displaying graphics individually when they contain essential information. A blind user can listen to a web document when rendered by a speech synthesizer, or read it by means of a braille browser. In every case, the structure of the document is the same, but the renderings are customized for the individual.

 

Text in column with increased leading

Hypertext Markup Language (HTML) is a simple but ingenious concept. If you use it for the purpose for which it was designed, you will learn to love its simplicity and flexibility. If you try to use it for a page description language, or a desktop publishing program, you will learn to hate it, and will be doomed to endless frustration. If the exact appearance of a document is of paramount importance, you have other options—you can scan it and create a bitmapped image of your page, or you can offer it in a sophisticated page description language such as Postscript, which can be viewed on an appropriate viewer. In either case, you will have lost the flexibility in rendering that is the chief advantage of HTML

 

 

This is the same text placed into two columns

A web author is not a programmer, nor a typographer, nor a graphic designer. Since the days of Gutenberg, authors have learned to "let go" of their cherished work ("Farewell, sweet book") when they deliver their manuscript to the publisher. The author's manuscript may include chapters, paragraphs, headings, tables, and illustrations, all clearly marked, but it is the editor who chooses the paper, page design, fonts, and other characteristics, according to a "house style." In the same way, a web author prepares a document by marking up the elements, and then "sends it to the publisher" by placing it on a web server. The function of the editor is shared between the browser, which renders the text and graphics on the available hardware, and the human being who views the document. It is the user who configures the browser by choosing the fonts, sizes, and colors and other features of the onscreen appearance. This is the great strength of the World Wide Web. On a non-graphic browser, the user can view text descriptions in place of the invisible images. On a graphic browser, a nearsighted user can control the size of the fonts; a colorblind user can choose colors that offer enough contrast for legibility. A user on a slow line, say a dialup, can disable graphic loading, only displaying graphics individually when they contain essential information. A blind user can listen to a web document when rendered by a speech synthesizer, or read it by means of a braille browser. In every case, the structure of the document is the same, but the renderings are customized for the individual.

Hypertext Markup Language (HTML) is a simple but ingenious concept. If you use it for the purpose for which it was designed, you will learn to love its simplicity and flexibility. If you try to use it for a page description language, or a desktop publishing program, you will learn to hate it, and will be doomed to endless frustration. If the exact appearance of a document is of paramount importance, you have other options—you can scan it and create a bitmapped image of your page, or you can offer it in a sophisticated page description language such as Postscript, which can be viewed on an appropriate viewer. In either case, you will have lost the flexibility in rendering that is the chief advantage of HTML

 

You be the judge which of the above layouts are easier to read and comprehend.

The use of fonts, Serif vs. Sans Serif is another important element in page design.

There are many principles that contribute to good page design, readability and comprehension. Our text attempts to improve communication through thoughtful page layout (including a generous amount of graphics.) I believe it would be useful for anyone involved in the field of online teaching to acquaint themselves with these principles, in particular the grid system. It would probably be a good subject for students in the master's program to study early on in the program.

I hope someone finds this information useful. To those of you who already know about it, I appreciate you reading this far.
Keith