Page Design

design wire frame

The design of a course site has an impact on how students view materials. The writing style of the instructor indicates how the students should approach the topic and the instructor. The choice of fonts and colors reveals the mood, intensity and emotion which put a frame of mind around the subject matter to enhance learning. Suitable use of emphasis and quantity of the content make it easier for students to absorb the material, and appropriate links and their placement help expand their horizons and promote the growth and exchange of ideas. This articles covers writing for the web, reading on the computer screen, choice of typefaces, and ways to use emphases, links, and colours.

Online writing style

Reading is usually not an enjoyable task, especially on the web. Usability experts John Morkes and Jakob Nielsen did a research study: "Concise, SCANNABLE, and Objective: How to Write for the Web" (1997) on how people generally read on the web and their results suggested several strategies authors can adopt when writing for the web.

  • Use simple and informal writing: "Informal" does not mean indecipherable text-messaging shorthands and sloppy grammar and spelling. Academic research articles use a formal writing style difficult to digest due to their long sentences and multiple references, especially being read on a computer screen. In addition to using shorter sentences, many online instructors adopt a less formal approach to engage the students, often referring to the student directly as you or we. Writing directly and informally to the online students not only makes the text easier to read, it can help reduce the psychological distance of an online course, increasing the perceived "instructor immediacy."
  • Text should be scannable: Readers on the web try to extract the key components of a web page quickly, usually by scanning. Elements that enhance scanning include headings, bold and highlighted text, bulleted lists, graphics, captions, topic sentences, shorter sections of text. Keep the headings short, clear, descriptive and include the keywords for your content.
  • Be concise: Avoid clutter. Get straight to your point when possible. A useful format is the inverted pyramid style, in which the news and conclusions are presented first, followed by details and background information. This gets the main point across before the students' eyes start wandering. Abstracts of articles serve this same function.
  • Graphics and text should complement one another: Illustrations and photographs can add interest, illustrate concepts, visualize places and processes, clarify concepts, and communicate complex content. In addition, they help break up the text into more readable segments. Provide meaningful captions to steer the discussion to your points. Be wary of inserting graphics just for graphics' sake. Web users find pointless graphics distracting and equate them to annoying advertisements.

How much per 'page'?

How much course content should appear on a single web page? According to Web Usability expert Jakob Nielsen, "reading from computer screens is about 25% slower than reading from paper." Nielsen recommends writing 50% less text.

At one extreme are the PowerPoint slide shows, where a small amount of content that is entirely visible in the browser window shows up, and the student clicks NEXT or BACK to navigate around in the slide show, seeing only one slide per "page" at a time. The other extreme is to include an entire unit on a single web page, so that the student has to scrolls as far down as needed to read through the unit. In between those extremes are sections broken into smallish segments, somewhat larger than the browser window but not requiring too much scrolling. Then the student needs to navigate between pages to read the unit.

Which is better? There are benefits to both. When an instructor authors a module, they tend to do so as a whole -- a single word or HTML document. When it is a single document, it is easy to reorder, rearrange, or make large scale global changes. On the other hand, students report liking to have the content in smaller, more manageable segments. Ideally, the module is segmented into meaningful "pages" based on key concepts. Rather than just calling it "page 2 of 6" calling it "page 2 of 6: island ecosystems" helps make the student more aware of the conceptual structure underlying the module.

Legibility

"Text on the computer screen is hard to read not only because of the low resolution of computer screens but also because the layout of most Web pages violates a fundamental rule of book and magazine typography: the lines of text on most Web pages are far too long for easy reading." --

The Web Style Guide.

Our eyes" span of acute focus is only about 3 inches (8 cm), typically enough to see three to five words wide and high when printed text is held at approximately 18 inches (46 cm) from the eye. As the eyes follow a long line of text, they tend to lose track of the next line. Thus magazines and newspapers use columns to help maintain this comfortable focus.

Left to its own, the width of your text will vary depending upon the user's browser window and the font size the users prin

If you want to control how wide your column of text will be seen, use CSS to control the paragraph width (e.g., p {width:300px;} ). A more complicated and less flexible method would be to use an invisible table (border="0") and specify the table size in pixels (width="300")

An average of 10 to 15 words per line is the best balance between space efficiency and legibility. Increasing the line spacing proportionally to the width of the passage also helps the eyes correctly identify the next line.

You can can also CSS to control the line spacing ( p {font-size:12pt; line-height:16pt;} ). Barring all the technical tweaks, break long passage up into into more readable segments using paragraph spacing, lists and visual elements such as charts and pictures.

Typefaces and their fonts

A set of characters with the same design is called a typeface (e.g., Helvetica, Garamond), and the different sizes (e.g., 10 point, 12 point) and styles (e.g., italics, bold) of a typeface is known as fonts.

comparison of serif vs sans serif fonts, highlight the serif partsTypefaces are divided into two major groups. Serif (short lines and decorations stemming from the ends of letters) like Times New Roman are more readable in print because the decorations help the letters flow, whereas sans serif (without those decorations) are more readable on screens due to the display limitations of computer monitors. Helvetica and Arial are two common typefaces with excellent readability on screens. Verdana has been designed specially for on-screen readability on various operating systems, especially at the normal size range of 10 point through 14 point.


Comparing two common san-serif and serif typefaces below,  the serif typeface (Times New Roman) becomes more legible as it increases in font size, while the sans-serif typeface (Verdana) is legible at a smaller font size.

table of Verdana and Times New Roman of 10, 12, 14 and 16 pt

layout demonstrating spacing of M and I in proportional and monospaced typefaces; tabular view of numbers in proportional and monospaced typefaces.The chart to the left presents a mono-spaced type, where each letter occupies a fixed width spacing, with the "i" occupying the same width as the "m". If you need numbers or data to line up vertically, choose mono-spaced/fixed-width typefaces. Courier New is a common mono-spaced typeface.

Unless the choice of typefaces is of key importance to your material, limit the choices of typefaces to those which are common available across different systems. If a particular typeface is not available, your reader's browser will substitute it with a default typefact, usually Times, Helvetica or Verdana. Using common typefaces will also make it simpler for users to adjust the font sizes to their preferences, especially those who are visually impaired. Here are the default typefaces on Windows and on Mac OS.

For an analysis of the effectiveness of commonly used web fonts, see an article on How should text be presented within a website?

Emphasis

Only a small variation in the text is required to establish visual contrast -- there is no need to overkill by using multiple font styles at the same time.

Italics: Use italics for quotations, foreign words or for inconspicuous stressing. Avoid large blocks of italics because they are less readable than normal text on-screen.

Bold: The human eye is very receptive to differences in brightness within a text body. Boldface text stands out in contrast to normal text and is very readable on-screen. For easy visual scanning, use the boldface to highlight keywords which are important to the subject of the text. Avoid large blocks of boldface text because they will lose their effectiveness.

Underline: Although used as a means of emphasis in print and written material, underline has been widely used to indicate hyperlinks in web pages. Avoid using underline for non-linked text to avoid confusion.

Color: Colored text is increasingly being used as an alternative to bold and hyperlinks. The convention is to use color in headings and avoid it, as with underline, within regular text. This also applies to text highlighted by a colored background, which should be used sparingly.

Capital: We have learned to recognize words both by their letter-grouping and by their lower-case shapes. Although attracting attention with their rectangular blocks, a block of text in capital letters can be difficult to read because we are not accustomed to simply identifying words with their letter-grouping. Confine capitals to headings, warnings and titles. Avoid large blocks of text in upper-case because it significantly slows reading.

Spacing: Medieval German scribes inserted spaces between letters to highlight a word in their very dark blackletter typeface, achieving the effect of a reverse-boldface. We can still apply this technique by using white (or negative) spaces to highlight a paragraph or words in the midst of dense text.

Links

Internal links create the structure of your site and external links add to the depth of information in your site. However, too many links within a block of text can disrupt continuity and understanding.

Your readers construct a mental structure as they follow each link, thus creating their conceptual flow of your content. This short-term memory is unsuitable for storing too many ideas. Just as there can be too many interconnected rooms in an art museum, a reader quickly becomes disoriented and confused by a page with too many links.

Use links to your advantage:

  • Give a quick explanation of a concept or a short illustration of the point. Your purpose is to have them look at the definition of a word off-site and then quickly return to your narrative. So embed these links in your text to make them more topical and explicit, but only link once -- refrain from linking the same word time and again.
  • Offer a detailed exploration of a topic. If you would like your readers to explore further in an external site, explain what they are supposed to find at that site before giving them the link. This will make it easy for them to find the pertinent information and thus direct their comprehension of the material. Since exploring another site usually means switching the train of thought, put these kinds of links at the beginning or end of your paragraphs. In the former, you can continue with your information where they've left off; or in the latter, 'get your words in' before letting them loose. If possible, help them start a new train of thought by opening the link in a new window: <a href="http://google.com" target="google window">
  • For copyright and intellectual property reasons, it is much easier to link to a page rather than to copy their content onto your page. However, when you link to pages in an external site, be aware that the site owner might move the pages or even take down the entire site. This is known as link rot. Avoid linking to pages which may have a short life span, e.g. news of the day or blog entries. Check these links at least once every semester and be prepared to seek out alternatives. Keep an archive of a page if the article is crucial to your course so that if the page ever goes missing, you can request permission directly from the source to use it in your course.

Color

There are two main issues to consider when selecting colors: the choice of text on background color for legibility, and the mixing of these colors to create a cohesive look.

First, a little background on color systems.

On a computer monitor, colors are built up by combining red, green and blue lights with varying intensities. On a printed page, the colors are formed by ink pigments. Our eyes see the result of light reflection and absorption of the pigments, not the actual lights. The former is called the additive color system and the latter the subtractive color system.

Why is this important? Take the most common case of black text on white background. On a printed page, the light reflecting from the white page has been softened by the texture of the page, while the black text creates a vivid contrast with the white achieving great clarity. Conversely, on a computer monitor, the white is formed by combining the maximum intensity of all 3 colors, similar to the effect of shining a light in someone's eyes, thus making the white background too harsh for the readers. Another thing to note is that bright text on a dark background creates a halo effect around each letter, causing the readers to have to strain their eyes.

With that in mind, research has shown that black on a light neutral background is more readable than black on white. Usually, a light grey background is preferred because it is neutral so as not to influence the colors in photographs. There are also some 'colored greys' like the cross point between blue and green, as well as red and yellow.

So what about matching colors?

A color wheel is a useful tool for artist to choose colors. It is made out of three primary colors: red, blue and yellow, plus a blend of in-betweens.



A color wheel is used in conjunction with different color schemes to choose matching colors.

We select colors based on the mood we wish to convey (adjust for cultural interpretations):

  • Red: strong, aggressive, hot, angry, stimulating.
  • Blue: cold, clammy, depressing.
  • Yellow: light hearted, friendly, vivid.
  • Orange: warm, comforting, welcoming, energetic.
  • Green: cool, soothing, refreshing. Dark green also signifies wealth and masculinity.
  • Purple: luxurious, royal, sophisticated.
  • Bright: light, airy, liquid, relaxing.
  • Dark: dramatic, confined space, serious, rich.

Then we find matching colors using various color schemes:

  • Complementary: use direct opposites on the color wheel, e.g. red & green.
  • Clash: use the color to the left or right of the complement, e.g. red & blue
  • Analogous: use 3 consecutive colors, e.g. red, red-orange & orange.
  • Monochromatic: use only different shades of the same color, just by varying its brightness, e.g. bright red, dark red.
  • Triads: use 3 equally spaced colors, e.g. red, blue & yellow, or green, purple & orange.

Limit your main colors to 2 or 3 so as not to look like a patched-job, and stay consistent throughout the site.

Here's a color matching utility to help you visualize how colors work together on a webpage. What are all those #numbers?

To most graphics and web-authoring applications, #RRGGBB is the hexadecimal representation of a color, with 2 characters each for Red, Green and Blue. For instance, #008800 signifies a medium green. The lower the number, the dark the color. Hexadecimal runs from 0 to 9, followed by A through F for a total of 16 values.

You may also find this Color Scheme Design useful, especially in its suggested choice of Analogous, Complementary, etc, schemes.  COLOURlovers has a great selection of color combinations created and selected by its community.

Whichever color you choose, be consistent throughout the course so that your readers can learn to associate colors with their purposes. An inconsistent design confuses the readers and is looked upon as unprofessional. If you have a series of courses, keeping them to the same basic theme will convey the tone and feel for the overall series you wish to carry forward.

Approximately 1 in 12 men and 1 in 200 women are affected by the effects of color blindness.  The most common is red-green deficiency, where people have difficulty distinguishing any color that is dependent upon the red:green ratio. You can also generally assume that they will see less contrast between colors. If your page contents are dependent on colors, run it through a color filter or even a grayscale filter, or install a colorblindness simulator to view all your pages rather than single paged filters.