Screen Design

Balance, Layout Art and Advertising tend to use dynamic, informal layouts to attract our attention. For instructional messages, a formal balance is recommended to avoid distracting the learner. To achieve formal balance, consider sketching your screens to resemble a large alphabetical letter or character (i.e., A, X, C, B, D, Y, E, O). Image and text objects are then designed to lie along the shape of the selected letter. The Science Learning Network, the Apple Start page, and Wikipedia sample arranges screen items around a circular or letter "O" layout.
Focal Point If you divide a screen into thirds, the "rule of thirds" states the learner will be attentive to those items placed near the intersecting lines. Further, the use of "white" space or contrast can direct attention to certain elements in your interface. A previous edition of the Absolut Vodka web site, much like Absolut print advertising, draws attention to its bottle via the use of white space, or in this case, black space. Further, a previous edition of the BOO website attracts attention to sale events through the use of white/orange space.
Density The best computer interfaces will not distract the learner with an overwhelming array of images, icons, text objects, or features. "Less is more," so strive for screens of average density. Avoid long pages like this one that make you scroll forver through endless mounds of content. Compare minimalist design of the Google homepage, shown at right, to the denseness of the Virgin Megastore.
Consistency The best computer interfaces will maintain a consistent look. In particular, icons used for navigation should maintain one position to avoid confusing the learner. It is also wise to use similar font faces and color schemes throughout a particular interface, unless the change is used to signal a new unit, topic, or section. Notice in the Fault Line example at right, the consistent use of fonts, background, and navigation bars along the top-left of the page.
Metaphor In addition to using metaphors as a navigation technique, metaphors are useful to enhance screen design. An previous version of Black Cat website as seen in the sample at right arranges screen items/links on visual shelves much as you would find in a fireworks store. Similarly, a prior version of the Jimtown Store's site arranges its links as window advertising in a virtual country store. The Structures of the World web site organizes its menu items around a steel scaffold.