Chopeta C. Lyons
 
     
Secrets of Good Screen Design

Multimedia presentation, on-line documentation and computer-based training all challenge the technical communicator to use the computer screen effectively. The novice can quickly become overwhelmed by this challenge. Especially seductive with the newer multimedia tools is the temptation to add “glitz” until the user loves the graphics but forgets the point.

Good screen design supports the purpose of the communication, whether you are working with characters displayed on a mainframe terminal or a graphical user interface.

To get started, the novice should focus on:

  • The basics of the screen layout
  • The use of the screen grid as screen real estate
  • The fundamentals of sequencing

Although this article focuses on web-based training (or e-learning) to illustrate its points, the same principles can be applied to the designing screens for any purpose. Of course, you should follow standards that apply to your project and environment as well. Microsoft has set the standard for an on-line help in Windows-based programs.

Screen Layout Basics

For starters, the table at the right provides some simple ground rules for screen design. Some of them will be familiar, since they also apply to print-based materials.

Multimedia presentations and e-learning often stand alone, with no instructor, handbook, or other aids to help the viewer use them. The intended audience must be able to use them intuitively. The design of the screen needs to account for aspects of the audience that you might not consider when preparing print materials.

Level of literacy: The level of education often indicated the students’ tolerance to text and affects the relative weight of graphics to text.

Screen Design Basics

  1. The display functions as a grid with some areas having greater impact than others.
  2. The display acts as a set of many planes, each one on a layer closer to the user than the one behind it.
  3. Cultural reading patterns impact design. Westerners read on the horizontal, left to right, top to bottom. Other cultural patterns may differ.
  4. Graphics have a greater impact and are seen sooner than text. People remember graphics more easily than text. The design should condier what is most important for the user to remember and use design elements accordingly.
  5. Animations draw more attention than graphics. Use them to illustrate complicated or critical points.
  6. Sound has an impact equivalent to animation, but information presented via audio is harder to remember. Lists, procedures and other detailed information is better supported with text.
  7. Text and ideas must be chunked in order to be easily comprehended.
  8. White space is a design element.
  9. Navigational elements (icons, buttons, pull downs, etc.) need to be easily understood, conveniently located and unobtrusive.
  10. Intensity of color is as important as color and contrast

Large percentage of male students: Higher incidence of color blindness; avoid reds and greens for highlighting.

Hearing impaired: Back up audio messages with text on the screen that communicates the same information.

Screen Real Estate

Different areas on the screen have inherently more or less impact than others and can be viewed as distinct “rent districts."impact areas of screen real estate

  1. Park Avenue Properties
  2. Business District
  3. Railroads and Public Transportation
  4. Art Galleries and Museum

Park Avenue Properties: These areas of the screen automatically add emphasis to any graphic or text placed there. Typically, the top left quadrant and the center quadrant of the display are the highest impact areas. Park Avenue properties are ideal locations for information that needs high impact. Examples are basic principles, concepts
that must be remembered and mnemonics.

Business District: These areas tend to add minimal impact to graphics or text. The business district is ideal for explanatory text, diagrams, or high-powered graphics that need to be de-emphasized.

Railroads and Public Transportation: These areas have low visibility and low impact. They tend to minimize whatever is situated in these sites and are ideal for navigational devices such as button bars, pull down menus or status messages.

Art Gallery: This area has a neutral impact on whatever is situated in it. Strong conceptual graphics can be placed here without gaining additional impact and distracting from other screen elements. This location is also good for summary text or graphics. However, if minor points are located here, they can be overwhelmed by other screen elements.

Each “piece” of content brings its own requirements for layout. Good screen design depends on understanding the varying value of screen real estate locations and how their relationships impact the viewer’s interpretation of information.

As more technical communicators make the transition to on-line communication and multimedia, questions about screen design crop up. Above we have explored some basic rules for screen design. We also introduced the idea of exploiting screen “real estate”-using various parts of the screen to their best advantage to get your message across. Let’s now turn our focus to sequencing.

Planes and Layers

planes and layers © 1995 Mark Palmer

Screen displays are often composed of what can be considered planes, with the one closest to the viewer appearing to be on top. This metaphor is particularly important when you design for an object-oriented, graphical user interface.

The familiar drop shadow is one technique that makes use of the concept of layers and planes.

Take care to keep all visually related elements on the same plane, so that the reader is not presented with an “optical delusion” or Escher-like display. The layers must make visual sense to the reader. To minimize the impact on placement, color and graphic design when working with planes, keep the following guidelines in mind.

  • Keep navigation devices visible, but out of the way.
  • Be consistent with the metaphor of planes: pull downs, popups and overlays should appear as the top layer-the layer closest to the viewer. Any graphics on the top layer should be designed to appear on the same plane.
Builds

The technique called the build helps to control the viewer’s focus. One piece of information appears on the screen and, after some viewer input or a specified amount of time, another piece of information appears without completely erasing the first. The build can be used effectively with text as well as with graphics to resent information in easily digestible pieces.

  • Make sure to “build” in real estate locations that have high impact.
  • Use high impact colors and techniques so that viewers do not overlook the new information that is being added to the screen.
  • Avoid overlays or complete screen redraws that only add insignificant details or small amounts of text. The viewer may have to look hard to find the new information or may become impatient with an unnecessarily slow presentation of simple material.
Consistency of Layout

Screen design also involves sequence, that is, continuity and flow. You must consider how one display element flows to the next, as in a cartoon strip where the action builds from one panel to the next.

If a graphic appears in the upper left corner on the first screen in a series, it should appear in the same location throughout the series. With graphics in the same relative position, readers do not have to reorient themselves to each new display.

This...

good alignment from screen to screen © 1995 Mark Palmer

Not this…

bad alignment from screen to screen © 1995 Mark Palmer

Simultaneous Visual Access

Keep in mind what elements readers need to see at the same time on one screen. The classic example in computer-based training is that the question should remain on the screen when the feedback displays. With this simultaneous display, the student can read the feedback and reevaluate the question at the same time.

Summary

The first article of this two-part series stressed the fat that good screen design supports the purpose of the communication. Ten rules for basic screen layout were presented, along with the idea of screen real estate. When you think of different areas of the screen as distinct “rent districts,” you can take advantage of their high or low impact. With the additional concept of screen sequencing as presented in this article, you have a good start on the road to effective screen design.

horizontal divider

Originally published Imprints, November 1994 © 2010 Chopeta Lyons

 
» Ten Tips for Talking to Artists -- How to communicate your graphic ideas 2/8/06
» Crossing Over and Evaluating Training -- How to evaluate training materials 9/0/99
» Picture Perfect: Selecting Graphics for Instruction -- What makes a graphic effective? 2/16/09
» Avoiding Shovelware - How to escape the wall of words syndrome 2001
» Good Screen Design Basics
- Arranging screen elements to maximize learning 1994